forked from verdnatura/salix-front
parent
7626c777ed
commit
703aaa1f38
|
@ -17,10 +17,6 @@ const $props = defineProps({
|
|||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
provinces: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
const { t } = useI18n();
|
||||
|
||||
|
@ -56,7 +52,6 @@ const onDataSaved = (...args) => {
|
|||
:province-selected="$props.provinceSelected"
|
||||
:country-fk="$props.countryFk"
|
||||
v-model="data.provinceFk"
|
||||
:provinces="$props.provinces"
|
||||
/>
|
||||
</VnRow>
|
||||
</template>
|
||||
|
|
|
@ -90,22 +90,33 @@ watch(
|
|||
postcodeFormData.townFk = null;
|
||||
}
|
||||
if (oldValueFk !== newCountryFk) {
|
||||
await provincesFetchDataRef.value.fetch({
|
||||
where: {
|
||||
countryFk: newCountryFk,
|
||||
},
|
||||
});
|
||||
await townsFetchDataRef.value.fetch({
|
||||
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) => {
|
||||
|
@ -193,7 +204,6 @@ async function handleCountries(data) {
|
|||
<CreateNewCityForm
|
||||
:country-fk="data.countryFk"
|
||||
:province-selected="data.provinceFk"
|
||||
:provinces="provincesOptions"
|
||||
@on-data-saved="
|
||||
(_, requestResponse) =>
|
||||
onCityCreated(requestResponse, data)
|
||||
|
@ -209,7 +219,6 @@ async function handleCountries(data) {
|
|||
@update:model-value="(value) => setProvince(value, data)"
|
||||
v-model="data.provinceFk"
|
||||
:clearable="true"
|
||||
:provinces="provincesOptions"
|
||||
@on-province-created="onProvinceCreated"
|
||||
/>
|
||||
<VnSelect
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
|
@ -34,6 +34,12 @@ const onDataSaved = (dataSaved, requestResponse) => {
|
|||
);
|
||||
emit('onDataSaved', dataSaved, requestResponse);
|
||||
};
|
||||
const where = computed(() => {
|
||||
if (!$props.countryFk) {
|
||||
return {};
|
||||
}
|
||||
return { countryFk: $props.countryFk };
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
@ -41,9 +47,7 @@ const onDataSaved = (dataSaved, requestResponse) => {
|
|||
@on-fetch="(data) => (autonomiesOptions = data)"
|
||||
auto-load
|
||||
:filter="{
|
||||
where: {
|
||||
countryFk: $props.countryFk,
|
||||
},
|
||||
where,
|
||||
}"
|
||||
url="Autonomies/location"
|
||||
:sort-by="['name ASC']"
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { ref, watch } from 'vue';
|
||||
import { useValidator } from 'src/composables/useValidator';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
|
@ -17,47 +17,60 @@ const $props = defineProps({
|
|||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
provinces: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
const provinceFk = defineModel({ type: Number, default: null });
|
||||
|
||||
const { validate } = useValidator();
|
||||
const { t } = useI18n();
|
||||
|
||||
const filter = ref({
|
||||
include: { relation: 'country' },
|
||||
where: {
|
||||
countryFk: $props.countryFk,
|
||||
},
|
||||
});
|
||||
const provincesOptions = ref($props.provinces);
|
||||
provinceFk.value = $props.provinceSelected;
|
||||
const provincesFetchDataRef = ref();
|
||||
|
||||
provinceFk.value = $props.provinceSelected;
|
||||
if (!$props.countryFk) {
|
||||
filter.value.where = {};
|
||||
}
|
||||
async function onProvinceCreated(_, data) {
|
||||
await provincesFetchDataRef.value.fetch({ where: { countryFk: $props.countryFk } });
|
||||
provinceFk.value = data.id;
|
||||
emit('onProvinceCreated', data);
|
||||
}
|
||||
async function handleProvinces(data) {
|
||||
console.error($props.countryFk);
|
||||
|
||||
provincesOptions.value = data;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => $props.countryFk,
|
||||
async () => {
|
||||
if ($props.countryFk) {
|
||||
filter.value.where.countryFk = $props.countryFk;
|
||||
} else filter.value.where = {};
|
||||
await provincesFetchDataRef.value.fetch({});
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
ref="provincesFetchDataRef"
|
||||
:filter="{
|
||||
include: { relation: 'country' },
|
||||
where: {
|
||||
countryFk: $props.countryFk,
|
||||
},
|
||||
}"
|
||||
:filter="filter"
|
||||
@on-fetch="handleProvinces"
|
||||
url="Provinces"
|
||||
auto-load
|
||||
/>
|
||||
{{ $props.countryFk }}
|
||||
<VnSelectDialog
|
||||
:label="t('Province')"
|
||||
:options="$props.provinces"
|
||||
:options="provincesOptions"
|
||||
:tooltip="t('Create province')"
|
||||
hide-selected
|
||||
:limit="3"
|
||||
v-model="provinceFk"
|
||||
:rules="validate && validate('postcode.provinceFk')"
|
||||
:acls="[{ model: 'Province', props: '*', accessType: 'WRITE' }]"
|
||||
|
|
Loading…
Reference in New Issue