wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

fix: refs #8163 #8061 createNewPostCodeForm

This commit is contained in:
Javier Segarra 2024-11-25 17:33:59 +01:00
parent 1974fd4663
commit f6e97efe78
2 changed files with 85 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
src/components/CreateNewPostcodeForm.vue
View File

@ -10,6 +10,7 @@ import VnInput from 'src/components/common/VnInput.vue';
import CreateNewCityForm from './CreateNewCityForm.vue';
import VnSelectDialog from 'components/common/VnSelectDialog.vue';
import FormModelPopup from './FormModelPopup.vue';
import ClaimFilter from 'src/pages/Claim/Card/ClaimFilter';
const emit = defineEmits(['onDataSaved']);
@ -22,13 +23,13 @@ const postcodeFormData = reactive({
townFk: null,
});
const townsFetchDataRef = ref(null);
const provincesFetchDataRef = ref(null);
const townsFetchDataRef = ref(false);
const provincesFetchDataRef = ref(false);
const countriesOptions = ref([]);
const provincesOptions = ref([]);
const townsOptions = ref([]);
const town = ref({});
const townFilter = ref({});
function onDataSaved(formData) {
const newPostcode = {
...formData,
@ -56,12 +57,37 @@ async function onCityCreated(newTown, formData) {
}
function setTown(newTown, data) {
data.provinceFk = newTown.provinceFk;
data.countryFk = newTown.province.countryFk;
if (!newTown) return;
town.value = newTown;
data.provinceFk = newTown?.provinceFk ?? newTown;
data.countryFk = newTown?.province?.countryFk ?? newTown;
}
async function setCountry(countryFk, data) {
// town.value = newTown;
// data.provinceFk = newTown?.provinceFk ?? newTown;
data.countryFk = countryFk;
// if (countryFk) {
// await fetchTowns(countryFk);
// }
}
async function filterTowns(name) {
if (name !== '') {
townFilter.value.where = {
name: {
like: `%${name}%`,
},
};
await townsFetchDataRef.value?.fetch();
}
}
async function fetchTowns(countryFk) {
if (!countryFk) return;
townFilter.value.where = {
provinceFk: {
inq: provincesOptions.value.map(({ id }) => id),
},
};
await townsFetchDataRef.value?.fetch();
}
async function setProvince(id, data) {
const newProvince = provincesOptions.value.find((province) => province.id == id);
if (!newProvince) return;
@ -76,62 +102,47 @@ async function onProvinceCreated(data) {
postcodeFormData.provinceFk = data.id;
}
watch(
() => [postcodeFormData.countryFk],
async (newCountryFk, oldValueFk) => {
if (Array.isArray(newCountryFk)) {
newCountryFk = newCountryFk[0];
}
if (Array.isArray(oldValueFk)) {
oldValueFk = oldValueFk[0];
}
if (!!oldValueFk && newCountryFk !== oldValueFk) {
postcodeFormData.provinceFk = null;
postcodeFormData.townFk = null;
}
if (oldValueFk !== newCountryFk) {
await fetchProvinces(newCountryFk);
await fetchTowns(newCountryFk);
}
}
);
async function fetchTowns(countryFk) {
const townsFilter = countryFk
? {
where: {
provinceFk: {
inq: provincesOptions.value.map(({ id }) => id),
},
},
}
: {};
await townsFetchDataRef.value.fetch(townsFilter);
}
async function fetchProvinces(countryFk) {
const provincesFilter = countryFk
? {
where: {
countryFk: countryFk,
},
}
: {};
await provincesFetchDataRef.value.fetch(provincesFilter);
}
watch(
() => postcodeFormData.provinceFk,
async (newProvinceFk, oldValueFk) => {
if (Array.isArray(newProvinceFk)) {
newProvinceFk = newProvinceFk[0];
}
if (newProvinceFk !== oldValueFk) {
await townsFetchDataRef.value.fetch({
where: { provinceFk: newProvinceFk },
});
}
}
);
// watch(
// () => [postcodeFormData.countryFk],
// async (newCountryFk, oldValueFk) => {
// if (Array.isArray(newCountryFk)) {
// newCountryFk = newCountryFk[0];
// }
// if (Array.isArray(oldValueFk)) {
// oldValueFk = oldValueFk[0];
// }
// if (!!oldValueFk && newCountryFk !== oldValueFk) {
// postcodeFormData.provinceFk = null;
// postcodeFormData.townFk = null;
// }
// if (oldValueFk !== newCountryFk) {
// await fetchProvinces(newCountryFk);
// }
// }
// );
// async function fetchProvinces(countryFk) {
// const provincesFilter = countryFk
// ? {
// where: {
// countryFk: countryFk,
// },
// }
// : {};
// await provincesFetchDataRef.value.fetch(provincesFilter);
// }
// watch(
// () => postcodeFormData.provinceFk,
// async (newProvinceFk, oldValueFk) => {
// if (Array.isArray(newProvinceFk)) {
// newProvinceFk = newProvinceFk[0];
// }
// }
// );
async function handleProvinces(data) {
provincesOptions.value = data;
if (postcodeFormData.countryFk) {
await fetchTowns(postcodeFormData.countryFk);
}
}
async function handleTowns(data) {
townsOptions.value = data;
@ -153,18 +164,12 @@ async function handleCountries(data) {
<FetchData
ref="townsFetchDataRef"
:sort-by="['name ASC']"
:limit="30"
:limit="3"
:filter="townFilter"
@on-fetch="handleTowns"
auto-load
url="Towns/location"
/>
<FetchData
ref="CountriesFetchDataRef"
:sort-by="['name ASC']"
@on-fetch="handleCountries"
auto-load
url="Countries"
/>
<FormModelPopup
url-create="postcodes"
@ -186,6 +191,7 @@ async function handleCountries(data) {
<VnSelectDialog
:label="t('City')"
@update:model-value="(value) => setTown(value, data)"
@filter="filterTowns"
:tooltip="t('Create city')"
v-model="data.townFk"
:options="townsOptions"
@ -225,18 +231,22 @@ async function handleCountries(data) {
:province-selected="data.provinceFk"
@update:model-value="(value) => setProvince(value, data)"
v-model="data.provinceFk"
:clearable="true"
@on-province-fetched="handleProvinces"
@on-province-created="onProvinceCreated"
/>
<VnSelect
:sort-by="['name ASC']"
@on-fetch="handleCountries"
auto-load
url="Countries"
:limit="3"
:label="t('Country')"
@update:options="handleCountries"
:options="countriesOptions"
hide-selected
option-label="name"
option-value="id"
v-model="data.countryFk"
:rules="validate('postcode.countryFk')"
@update:model-value="(value) => setCountry(value, data)"
/>
</VnRow>
</template>

4
src/components/VnSelectProvince.vue
View File

@ -7,7 +7,7 @@ import VnSelectDialog from 'components/common/VnSelectDialog.vue';
import FetchData from 'components/FetchData.vue';
import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
const emit = defineEmits(['onProvinceCreated']);
const emit = defineEmits(['onProvinceCreated', 'onProvinceFetched']);
const $props = defineProps({
countryFk: {
type: Number,
@ -50,6 +50,7 @@ watch(
filter.value.where.countryFk = $props.countryFk;
} else filter.value.where = {};
await provincesFetchDataRef.value.fetch({});
emit('onProvinceFetched', provincesOptions.value);
}
);
</script>
@ -67,6 +68,7 @@ watch(
:options="provincesOptions"
:tooltip="t('Create province')"
hide-selected
:clearable="true"
v-model="provinceFk"
:rules="validate && validate('postcode.provinceFk')"
:acls="[{ model: 'Province', props: '*', accessType: 'WRITE' }]"