feat: vnLocation changes

src/components/common/VnLocation.vue

@@ -1,18 +1,23 @@
 <script setup>
-import { ref, toRefs, computed, watch, onMounted } from 'vue';
+import { ref, toRefs, onMounted, nextTick } from 'vue';
 import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
 import VnSelectDialog from 'components/common/VnSelectDialog.vue';
-import FetchData from 'components/FetchData.vue';
-const emit = defineEmits(['update:modelValue', 'update:options']);
+const emit = defineEmits(['update:selected', 'update:options']);
 import { useI18n } from 'vue-i18n';
+import { useArrayData } from 'src/composables/useArrayData';
 
 const { t } = useI18n();
 const postcodesOptions = ref([]);
-const postcodesRef = ref(null);
+const postcodesOptionsOriginal = ref([]);
+// const postcodesRef = ref(null);
 
 const $props = defineProps({
-    modelValue: {
-        type: [String, Number, Object],
+    postalCodeKey: {
+        type: String,
+        default: 'postalCode',
+    },
+    location: {
+        type: Object,
         default: null,
     },
     options: {
@@ -41,89 +46,115 @@ const $props = defineProps({
     },
 });
 
-const { options } = toRefs($props);
-const myOptions = ref([]);
-const myOptionsOriginal = ref([]);
-
-const value = computed({
-    get() {
-        return $props.modelValue;
-    },
-    set(value) {
-        emit(
-            'update:modelValue',
-            postcodesOptions.value.find((p) => p.code === value)
-        );
-    },
+const selectedId = ref(null);
+const mySelect = ref();
+const modelValue = ref($props.location[$props.postalCodeKey]);
+const arrayData = useArrayData('postcodes', {
+    url: 'Postcodes/filter',
+    limit: 1,
 });
 
-onMounted(() => {
-    locationFilter($props.modelValue);
-});
+function sanitizePostcode(data) {
+    return data.map((postcode) => ({
+        ...postcode,
+        original: postcode,
+        id: sanitizeId(postcode),
+        label: sanitizeLabel(postcode),
+    }));
+}
 
+function sanitizeId(postcode) {
+    return `${postcode.code ?? postcode[$props.postalCodeKey]}_${postcode.provinceFk}_${
+        postcode.countryFk
+    }`;
+}
+onMounted(async () => {
+    await retriveOptions();
+    nextTick(() => mySelect.value.showPopup());
+});
+async function retriveOptions() {
+    let options = [];
+    if (modelValue.value) {
+        await locationFilter(modelValue.value, () => {});
+        options = arrayData.store.data;
+    } else {
+        const { data } = await arrayData.fetch({ updateRouter: false, append: true });
+        options = data;
+    }
+    setOptions(options);
+}
+function findOptionById(postcode) {
+    return postcodesOptions.value.find((p) => p.id === postcode);
+}
 function setOptions(data) {
-    myOptions.value = JSON.parse(JSON.stringify(data));
-    myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
+    postcodesOptions.value = sanitizePostcode(data);
+    if (modelValue.value) {
+        const { [$props.postalCodeKey]: code } = $props.location;
+        selectedId.value =
+            findOptionById(sanitizeId({ ...$props.location, code })) ??
+            sanitizePostcode([$props.location])[0];
     }
-setOptions(options.value);
-
-watch(options, (newValue) => {
-    setOptions(newValue);
-});
-
-function showLabel(data) {
-    return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
+    postcodesOptionsOriginal.value = JSON.parse(JSON.stringify(postcodesOptions.value));
 }
 
-function locationFilter(search = '') {
-    if (
-        search &&
-        (search.includes('undefined') || search.startsWith(`${$props.modelValue} - `))
-    )
+async function handleInput(value) {
+    if (value) emit('update:selected', findOptionById(value));
+    if (modelValue.value) {
+        modelValue.value = value;
+        arrayData.store.userFilter = {};
+        await retriveOptions();
+        mySelect.value.showPopup();
+    } else postcodesOptions.value = postcodesOptionsOriginal.value;
+}
+function sanitizeLabel(postcode) {
+    return `${postcode.code ?? postcode[$props.postalCodeKey]} - ${postcode.town}(${
+        postcode.province
+    }), ${postcode.country}`;
+}
+
+async function locationFilter(search, update) {
+    if (search.length === 0) {
         return;
+    }
     let where = { search };
-    postcodesRef.value.fetch({ filter: { where }, limit: 30 });
+    arrayData.store.userFilter = { filter: { where } };
+    await arrayData.fetch({ append: false, updateRouter: false });
+
+    update(() => {
+        postcodesOptions.value = sanitizePostcode(arrayData.store.data);
+    });
 }
 
-function handleFetch(data) {
-    postcodesOptions.value = data;
-}
 function onDataSaved(newPostcode) {
     postcodesOptions.value.push(newPostcode);
-    value.value = newPostcode.code;
+    selectedId.value = newPostcode.code ?? newPostcode[$props.postalCodeKey];
 }
 </script>
 <template>
-    <FetchData
-        ref="postcodesRef"
-        url="Postcodes/filter"
-        @on-fetch="(data) => handleFetch(data)"
-    />
     <VnSelectDialog
-        v-if="postcodesRef"
-        :option-label="(opt) => showLabel(opt) ?? 'code'"
-        :option-value="(opt) => opt.code"
-        v-model="value"
+        ref="mySelect"
+        option-label="label"
+        option-value="id"
+        v-model="selectedId"
         :options="postcodesOptions"
         :label="t('Location')"
+        @update:model-value="handleInput"
         :placeholder="t('search_by_postalcode')"
-        @input-value="locationFilter"
-        :default-filter="false"
+        @filter="locationFilter"
         :input-debounce="300"
         :class="{ required: $attrs.required }"
         v-bind="$attrs"
         clearable
+        emit-value
     >
         <template #form>
-            <CreateNewPostcode
-                @on-data-saved="onDataSaved"
-            />
+            <CreateNewPostcode @on-data-saved="onDataSaved" />
         </template>
         <template #option="{ itemProps, opt }">
             <QItem v-bind="itemProps">
                 <QItemSection v-if="opt.code">
                     <QItemLabel>{{ opt.code }}</QItemLabel>
-                    <QItemLabel caption>{{ showLabel(opt) }}</QItemLabel>
+                    <QItemLabel caption>{{ opt.label }}</QItemLabel>
                 </QItemSection>
             </QItem>
         </template>

src/pages/Customer/Card/CustomerFiscalData.vue

@@ -95,9 +95,9 @@ function handleLocation(data, location) {
                 <VnLocation
                     :rules="validate('Worker.postcode')"
                     :roles-allowed-to-create="['deliveryAssistant']"
-                    :options="postcodesOptions"
-                    v-model="data.postcode"
-                    @update:model-value="(location) => handleLocation(data, location)"
+                    :location="data"
+                    postal-code-key="postcode"
+                    @update:selected="(location) => handleLocation(data, location)"
                 >
                 </VnLocation>
             </VnRow>

src/pages/Supplier/Card/SupplierFiscalData.vue

@@ -17,11 +17,10 @@ const sageTaxTypesOptions = ref([]);
 const sageWithholdingsOptions = ref([]);
 const sageTransactionTypesOptions = ref([]);
 const supplierActivitiesOptions = ref([]);
-const postcodesOptions = ref([]);
 
 function handleLocation(data, location) {
-    const { town, code, provinceFk, countryFk } = location ?? {};
-    data.postCode = code;
+    const { town, label, provinceFk, countryFk } = location ?? {};
+    data.postCode = label;
     data.city = town;
     data.provinceFk = provinceFk;
     data.countryFk = countryFk;
@@ -131,9 +130,8 @@ function handleLocation(data, location) {
                 <VnLocation
                     :rules="validate('Worker.postcode')"
                     :roles-allowed-to-create="['deliveryAssistant']"
-                    :options="postcodesOptions"
-                    v-model="data.postCode"
-                    @update:model-value="(location) => handleLocation(data, location)"
+                    :location="data"
+                    @update:selected="(location) => handleLocation(data, location)"
                 >
                 </VnLocation>
             </VnRow>

test/cypress/integration/vnComponent/vnLocation.spec.js

@@ -17,7 +17,7 @@ describe('VnLocation', () => {
             cy.get(inputLocation).click();
             cy.get(inputLocation).clear();
             cy.get(inputLocation).type('al');
-            cy.get(locationOptions).should('have.length.at.least', 3);
+            cy.get(locationOptions).should('have.length.at.least', 4);
         });
         it('input filter location as "ecuador"', function () {
             cy.get(inputLocation).click();