refs #6677 url

src/components/FetchData.vue

@@ -45,7 +45,7 @@ onMounted(async () => {
 async function fetch(fetchFilter = {}) {
     try {
         const filter = Object.assign(fetchFilter, $props.filter); // eslint-disable-line vue/no-dupe-keys
-        if ($props.where) filter.where = $props.where;
+        if ($props.where && !fetchFilter.where) filter.where = $props.where;
         if ($props.sortBy) filter.order = $props.sortBy;
         if ($props.limit) filter.limit = $props.limit;
 
@@ -54,6 +54,7 @@ async function fetch(fetchFilter = {}) {
         });
 
         emit('onFetch', data);
+        return data;
     } catch (e) {
         //
     }

src/components/common/VnSelectFilter.vue

@@ -1,8 +1,8 @@
 <script setup>
 import FetchData from 'src/components/FetchData.vue';
+import { onMounted } from 'vue';
 import { ref, toRefs, computed, watch } from 'vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
-const dataRef = ref();
 
 const $props = defineProps({
     modelValue: {
@@ -37,12 +37,29 @@ const $props = defineProps({
         type: Boolean,
         default: true,
     },
+    fields: {
+        type: Array,
+        default: null,
+    },
+    where: {
+        type: Object,
+        default: null,
+    },
+    sortBy: {
+        type: String,
+        default: null,
+    },
+    limit: {
+        type: Number,
+        default: 30,
+    },
 });
 
-const { optionLabel, options } = toRefs($props);
+const { optionLabel, optionValue, options, modelValue } = toRefs($props);
 const myOptions = ref([]);
 const myOptionsOriginal = ref([]);
 const vnSelectRef = ref();
+const dataRef = ref();
 
 const value = computed({
     get() {
@@ -57,8 +74,12 @@ function setOptions(data) {
     myOptions.value = JSON.parse(JSON.stringify(data));
     myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
 }
+onMounted(() => {
     setOptions(options.value);
-const filter = (val, options) => {
+    if ($props.url && $props.modelValue) fetchFilter($props.modelValue);
+});
+
+async function filter(val, options) {
     const search = val.toString().toLowerCase();
 
     if (!search) return options;
@@ -76,14 +97,30 @@ const filter = (val, options) => {
 
         return id == search || optionLabel.includes(search);
     });
-};
+}
 
-const filterHandler = (val, update) => {
+async function fetchFilter(val) {
+    console.log('ENTRY PA', dataRef.value);
+    if (!$props.url || !dataRef.value) return;
+
+    const { fields, sortBy, limit } = $props;
+    let key = optionLabel.value;
+
+    if (new RegExp(/\d/g).test(val)) key = optionValue.value;
+
+    const where = { [key]: { like: `%${val}%` } };
+    return dataRef.value.fetch({ fields, where, order: sortBy, limit });
+}
+
+async function filterHandler(val, update) {
     update(
-        () => {
-            if ($props.url) return;
-            if ($props.defaultFilter)
-                myOptions.value = filter(val, myOptionsOriginal.value);
+        async () => {
+            if (!$props.defaultFilter) return;
+            if ($props.url) {
+                myOptions.value = await fetchFilter(val);
+                return;
+            }
+            myOptions.value = await filter(val, myOptionsOriginal.value);
         },
         (ref) => {
             if (val !== '' && ref.options.length > 0) {
@@ -92,25 +129,34 @@ const filterHandler = (val, update) => {
             }
         }
     );
-};
+}
 
 watch(options, (newValue) => {
+    console.log(newValue);
     setOptions(newValue);
 });
+
+watch(modelValue, (newValue) => {
+    if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
+        fetchFilter(newValue);
+});
 </script>
 
 <template>
     <FetchData
-        v-if="$props.url"
         ref="dataRef"
         :url="$props.url"
         @on-fetch="(data) => setOptions(data)"
-        auto-load
+        :where="where || { [optionValue]: value }"
+        :limit="limit || 30"
+        :order-by="orderBy"
+        :fields="fields"
     />
     <QSelect
         v-model="value"
         :options="myOptions"
         :option-label="optionLabel"
+        :option-value="optionValue"
         v-bind="$attrs"
         emit-value
         map-options

src/pages/Claim/Card/ClaimDevelopment.vue

@@ -182,8 +182,8 @@ const columns = computed(() => [
                                         </QItemLabel>
                                     </QItemSection>
                                 </QItem>
-                            </template>
-                        </VnSelectFilter>
+                            </template> </VnSelectFilter
+                        >s
                     </QTd>
                 </template>
                 <template #item="props">

src/pages/InvoiceIn/Card/InvoiceInBasicData.vue

@@ -4,10 +4,12 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useArrayData } from 'src/composables/useArrayData';
-
 import { downloadFile } from 'src/composables/downloadFile';
+
 import FormModel from 'components/FormModel.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import FetchData from 'src/components/FetchData.vue';
+
 import axios from 'axios';
 
 const quasar = useQuasar();
@@ -20,9 +22,6 @@ const arrayData = useArrayData('InvoiceIn');
 const invoiceIn = computed(() => arrayData.store.data);
 const userConfig = ref(null);
 
-const suppliers = ref([]);
-const suppliersRef = ref();
-const suppliersRefFilter = ref({ fields: ['id', 'nickname'], limit: 30 });
 const currencies = ref([]);
 const currenciesRef = ref();
 const companies = ref([]);
@@ -130,31 +129,13 @@ async function upsert() {
         });
     }
 }
-
-function supplierRefFilter(val) {
-    let where = { limit: 30 };
-    let params = {};
-    let key = 'nickname';
-
-    if (new RegExp(/\d/g).test(val)) {
-        key = 'id';
-    }
-    params = { [key]: { like: `%${val}%` } };
-    where = Object.assign(where, params);
-    suppliersRef.value.fetch({ where });
-}
 </script>
 <template>
-    <!-- <FetchData
-        ref="suppliersRef"
-        url="Suppliers"
-        @on-fetch="(data) => (suppliers = data)"
-    /> -->
-    <!-- <FetchData
+    <FetchData
         ref="currenciesRef"
         url="Currencies"
         :filter="{ fields: ['id', 'code'] }"
-        order="code"
+        sort-by="code"
         @on-fetch="(data) => (currencies = data)"
         auto-load
     />
@@ -162,7 +143,7 @@ function supplierRefFilter(val) {
         ref="companiesRef"
         url="Companies"
         :filter="{ fields: ['id', 'code'] }"
-        order="code"
+        sort-by="code"
         @on-fetch="(data) => (companies = data)"
         auto-load
     />
@@ -170,7 +151,7 @@ function supplierRefFilter(val) {
         ref="dmsTypesRef"
         url="DmsTypes"
         :filter="{ fields: ['id', 'name'] }"
-        order="name"
+        sort-by="name"
         @on-fetch="(data) => (dmsTypes = data)"
         auto-load
     />
@@ -178,7 +159,7 @@ function supplierRefFilter(val) {
         ref="warehousesRef"
         url="Warehouses"
         :filter="{ fields: ['id', 'name'] }"
-        order="name"
+        sort-by="name"
         @on-fetch="(data) => (warehouses = data)"
         auto-load
     />
@@ -192,7 +173,7 @@ function supplierRefFilter(val) {
         url="UserConfigs/getUserConfig"
         @on-fetch="(data) => (userConfig = data)"
         auto-load
-    /> -->
+    />
     <FormModel v-if="invoiceIn" :url="`InvoiceIns/${route.params.id}`" model="invoiceIn">
         <template #form="{ data }">
             <div class="row q-gutter-md q-mb-md">
@@ -200,12 +181,11 @@ function supplierRefFilter(val) {
                     <VnSelectFilter
                         :label="t('supplierFk')"
                         v-model="data.supplierFk"
-                        option-value="id
-                        "
+                        option-value="id"
                         option-label="nickname"
                         url="Suppliers"
-                        :filter="{ fields: ['id', 'code'], order: 'code' }"
-                        @update-options="(data) => (suppliersRef = data)"
+                        :fields="['id', 'nickname']"
+                        sort-by="nickname"
                     >
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">
@@ -416,7 +396,6 @@ function supplierRefFilter(val) {
             <div class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <VnSelectFilter
-                        url="Currencies"
                         :label="t('Currency')"
                         v-model="data.currencyFk"
                         :options="currencies"