verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 99 Releases Wiki Activity

create form popup reutilizable component

This commit is contained in:
William Buezas 2024-01-02 12:57:13 -03:00
parent 9b9ac4dfe1
commit 49bb222343
6 changed files with 138 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/CreateBankEntityForm.vue
View File

@ -4,8 +4,8 @@ import { useI18n } from 'vue-i18n';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import FormModelPopup from './FormModelPopup.vue';
const emit = defineEmits(['onDataSaved']);
@ -22,17 +22,10 @@ const countriesFilter = {
fields: ['id', 'country', 'code'],
};
const closeButton = ref(null);
const countriesOptions = ref([]);
const loading = ref(false);
const onDataSaved = (data) => {
emit('onDataSaved', data);
closeForm();
};
const closeForm = () => {
if (closeButton.value) closeButton.value.click();
};
</script>
@ -43,20 +36,15 @@ const closeForm = () => {
auto-load
@on-fetch="(data) => (countriesOptions = data)"
/>
<FormModel
:form-initial-data="bankEntityFormData"
:observe-form-changes="false"
:default-actions="false"
<FormModelPopup
url-create="bankEntities"
model="bankEntity"
:title="t('title')"
:subtitle="t('subtitle')"
:form-initial-data="bankEntityFormData"
@on-data-saved="onDataSaved($event)"
>
<template #form="{ data, validate }">
<span ref="closeButton" class="popup-form-close-button" v-close-popup>
<QIcon name="close" size="sm" />
</span>
<h1 class="popup-form-title">{{ t('title') }}</h1>
<p class="q-mb-md">{{ t('subtitle') }}</p>
<template #form-inputs="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QInput
@ -89,27 +77,8 @@ const closeForm = () => {
<QInput :label="t('id')" v-model="data.id" />
</div>
</VnRow>
<div class="q-mt-lg row justify-end">
<QBtn
:label="t('globals.save')"
type="submit"
color="primary"
:disabled="loading"
:loading="loading"
/>
<QBtn
:label="t('globals.cancel')"
type="reset"
color="primary"
flat
class="q-ml-sm"
:disabled="loading"
:loading="loading"
v-close-popup
/>
</div>
</template>
</FormModel>
</FormModelPopup>
</template>
<i18n>

45
src/components/CreateNewCityForm.vue
View File

@ -6,7 +6,7 @@ import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnInput from 'src/components/common/VnInput.vue';
import FormModel from 'components/FormModel.vue';
import FormModelPopup from './FormModelPopup.vue';
const emit = defineEmits(['onDataSaved']);
@ -17,17 +17,10 @@ const cityFormData = reactive({
provinceFk: null,
});
const closeButton = ref(null);
const isLoading = ref(false);
const provincesOptions = ref([]);
const onDataSaved = () => {
emit('onDataSaved');
closeForm();
};
const closeForm = () => {
if (closeButton.value) closeButton.value.click();
};
</script>
@ -37,20 +30,15 @@ const closeForm = () => {
auto-load
url="Provinces"
/>
<FormModel
<FormModelPopup
:title="t('New city')"
:subtitle="t('Please, ensure you put the correct data!')"
:form-initial-data="cityFormData"
:observe-form-changes="false"
:default-actions="false"
url-create="towns"
model="city"
@on-data-saved="onDataSaved()"
@on-data-saved="onDataSaved($event)"
>
<template #form="{ data, validate }">
<span ref="closeButton" class="popup-form-close-button" v-close-popup>
<QIcon name="close" size="sm" />
</span>
<h1 class="popup-form-title">{{ t('New city') }}</h1>
<p>{{ t('Please, ensure you put the correct data!') }}</p>
<template #form-inputs="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput
@ -71,27 +59,8 @@ const closeForm = () => {
/>
</div>
</VnRow>
<div class="q-mt-lg row justify-end">
<QBtn
:label="t('globals.save')"
type="submit"
color="primary"
:disabled="isLoading"
:loading="isLoading"
/>
<QBtn
:label="t('globals.cancel')"
type="reset"
color="primary"
flat
class="q-ml-sm"
:disabled="isLoading"
:loading="isLoading"
v-close-popup
/>
</div>
</template>
</FormModel>
</FormModelPopup>
</template>
<i18n>

52
src/components/CreateNewPostcodeForm.vue
View File

@ -6,10 +6,10 @@ import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnInput from 'src/components/common/VnInput.vue';
import FormModel from 'components/FormModel.vue';
import CreateNewCityForm from './CreateNewCityForm.vue';
import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
import VnSelectCreate from 'components/common/VnSelectCreate.vue';
import FormModelPopup from './FormModelPopup.vue';
const emit = defineEmits(['onDataSaved']);
@ -24,15 +24,12 @@ const postcodeFormData = reactive({
const townsFetchDataRef = ref(null);
const provincesFetchDataRef = ref(null);
const closeButton = ref(null);
const countriesOptions = ref([]);
const isLoading = ref(false);
const provincesOptions = ref([]);
const townsLocationOptions = ref([]);
const onDataSaved = () => {
emit('onDataSaved');
closeForm();
};
const onCityCreated = async () => {
@ -42,10 +39,6 @@ const onCityCreated = async () => {
const onProvinceCreated = async () => {
await provincesFetchDataRef.value.fetch();
};
const closeForm = () => {
if (closeButton.value) closeButton.value.click();
};
</script>
<template>
@ -66,20 +59,15 @@ const closeForm = () => {
auto-load
url="Countries"
/>
<FormModel
:form-initial-data="postcodeFormData"
:observe-form-changes="false"
:default-actions="false"
<FormModelPopup
url-create="postcodes"
model="postcode"
@on-data-saved="onDataSaved()"
:title="t('New postcode')"
:subtitle="t('Please, ensure you put the correct data!')"
:form-initial-data="postcodeFormData"
@on-data-saved="onDataSaved($event)"
>
<template #form="{ data, validate }">
<span ref="closeButton" class="popup-form-close-button" v-close-popup>
<QIcon name="close" size="sm" />
</span>
<h1 class="popup-form-title">{{ t('New postcode') }}</h1>
<p>{{ t('Please, ensure you put the correct data!') }}</p>
<template #form-inputs="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput
@ -134,29 +122,9 @@ const closeForm = () => {
v-model="data.countryFk"
:rules="validate('postcode.countryFk')"
/>
</div>
</VnRow>
<div class="q-mt-lg row justify-end">
<QBtn
:label="t('globals.save')"
type="submit"
color="primary"
:disabled="isLoading"
:loading="isLoading"
/>
<QBtn
:label="t('globals.cancel')"
type="reset"
color="primary"
flat
class="q-ml-sm"
:disabled="isLoading"
:loading="isLoading"
v-close-popup
/>
</div>
</template>
</FormModel>
</div> </VnRow
></template>
</FormModelPopup>
</template>
<i18n>

50
src/components/CreateNewProvinceForm.vue
View File

@ -6,7 +6,7 @@ import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnInput from 'src/components/common/VnInput.vue';
import FormModel from 'components/FormModel.vue';
import FormModelPopup from './FormModelPopup.vue';
const emit = defineEmits(['onDataSaved']);
@ -17,17 +17,10 @@ const provinceFormData = reactive({
autonomyFk: null,
});
const closeButton = ref(null);
const isLoading = ref(false);
const autonomiesOptions = ref([]);
const onDataSaved = () => {
emit('onDataSaved');
closeForm();
};
const closeForm = () => {
if (closeButton.value) closeButton.value.click();
};
</script>
@ -37,20 +30,15 @@ const closeForm = () => {
auto-load
url="Autonomies"
/>
<FormModel
:form-initial-data="provinceFormData"
:observe-form-changes="false"
:default-actions="false"
<FormModelPopup
:title="t('New province')"
:subtitle="t('Please, ensure you put the correct data!')"
url-create="provinces"
model="province"
@on-data-saved="onDataSaved()"
:form-initial-data="provinceFormData"
@on-data-saved="onDataSaved($event)"
>
<template #form="{ data, validate }">
<span ref="closeButton" class="popup-form-close-button" v-close-popup>
<QIcon name="close" size="sm" />
</span>
<h1 class="popup-form-title">{{ t('New province') }}</h1>
<p>{{ t('Please, ensure you put the correct data!') }}</p>
<template #form-inputs="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInput
@ -71,33 +59,13 @@ const closeForm = () => {
/>
</div>
</VnRow>
<div class="q-mt-lg row justify-end">
<QBtn
:label="t('globals.save')"
type="submit"
color="primary"
:disabled="isLoading"
:loading="isLoading"
/>
<QBtn
:label="t('globals.cancel')"
type="reset"
color="primary"
flat
class="q-ml-sm"
:disabled="isLoading"
:loading="isLoading"
v-close-popup
/>
</div>
</template>
</FormModel>
</FormModelPopup>
</template>
<i18n>
es:
New postcode: Nuevo código postal
New province: Nueva provincia
Please, ensure you put the correct data!: ¡Por favor, asegúrese de poner los datos correctos!
Name: Nombre
Autonomy: Autonomía

105
src/components/FormModelPopup.vue Normal file
View File

@ -0,0 +1,105 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import FormModel from 'components/FormModel.vue';
const emit = defineEmits(['onDataSaved']);
const $props = defineProps({
title: {
type: String,
default: '',
},
subtitle: {
type: String,
default: '',
},
url: {
type: String,
default: '',
},
model: {
type: String,
default: '',
},
filter: {
type: Object,
default: null,
},
urlCreate: {
type: String,
default: null,
},
formInitialData: {
type: Object,
default: () => {},
},
});
const { t } = useI18n();
const closeButton = ref(null);
const isLoading = ref(false);
const onDataSaved = () => {
emit('onDataSaved');
closeForm();
};
const closeForm = () => {
if (closeButton.value) closeButton.value.click();
};
</script>
<template>
<FormModel
:form-initial-data="formInitialData"
:observe-form-changes="false"
:default-actions="false"
:url-create="urlCreate"
:model="model"
@on-data-saved="onDataSaved()"
>
<template #form="{ data, validate }">
<span
ref="closeButton"
class="absolute cursor-pointer"
style="top: 20px; right: 20px"
v-close-popup
>
<QIcon name="close" size="sm" />
</span>
<h1 class="title">{{ title }}</h1>
<p>{{ subtitle }}</p>
<slot name="form-inputs" :data="data" :validate="validate" />
<div class="q-mt-lg row justify-end">
<QBtn
:label="t('globals.save')"
type="submit"
color="primary"
:disabled="isLoading"
:loading="isLoading"
/>
<QBtn
:label="t('globals.cancel')"
type="reset"
color="primary"
flat
class="q-ml-sm"
:disabled="isLoading"
:loading="isLoading"
v-close-popup
/>
</div>
</template>
</FormModel>
</template>
<style lang="scss" scoped>
.title {
font-size: 17px;
font-weight: bold;
line-height: 20px;
}
</style>

13
src/css/app.scss
View File

@ -53,16 +53,3 @@ body.body--dark {
color: var(--vn-text);
border-radius: 8px;
}
.popup-form-title {
font-size: 17px;
font-weight: bold;
line-height: 20px;
}
.popup-form-close-button {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}