Merge pull request 'refs #6677 VnSelectFilter add url prop' (!164) from 6677-urlSelectFilter into dev

Reviewed-on: #164
Reviewed-by: Alex Moreno <alexm@verdnatura.es>

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,4 +1,6 @@
 <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']);
 
@@ -15,6 +17,14 @@ const $props = defineProps({
         type: [String],
         default: '',
     },
+    optionValue: {
+        type: String,
+        default: '',
+    },
+    url: {
+        type: String,
+        default: '',
+    },
     filterOptions: {
         type: [Array],
         default: () => [],
@@ -27,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() {
@@ -47,9 +74,12 @@ function setOptions(data) {
     myOptions.value = JSON.parse(JSON.stringify(data));
     myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
 }
+onMounted(() => {
+    setOptions(options.value);
+    if ($props.url && $props.modelValue) fetchFilter($props.modelValue);
+});
 
-setOptions(options.value);
-const filter = (val, options) => {
+async function filter(val, options) {
     const search = val.toString().toLowerCase();
 
     if (!search) return options;
@@ -67,13 +97,29 @@ const filter = (val, options) => {
 
         return id == search || optionLabel.includes(search);
     });
-};
+}
 
-const filterHandler = (val, update) => {
+async function fetchFilter(val) {
+    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.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) {
@@ -82,18 +128,33 @@ const filterHandler = (val, update) => {
             }
         }
     );
-};
+}
 
 watch(options, (newValue) => {
     setOptions(newValue);
 });
+
+watch(modelValue, (newValue) => {
+    if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
+        fetchFilter(newValue);
+});
 </script>
 
 <template>
+    <FetchData
+        ref="dataRef"
+        :url="$props.url"
+        @on-fetch="(data) => setOptions(data)"
+        :where="where || { [optionValue]: value }"
+        :limit="limit"
+        :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/InvoiceIn/Card/InvoiceInBasicData.vue

@@ -4,11 +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 FetchData from 'src/components/FetchData.vue';
+
 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();
@@ -21,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([]);
@@ -131,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
         ref="currenciesRef"
         url="Currencies"
         :filter="{ fields: ['id', 'code'] }"
-        order="code"
+        sort-by="code"
         @on-fetch="(data) => (currencies = data)"
         auto-load
     />
@@ -163,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
     />
@@ -171,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
     />
@@ -179,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
     />
@@ -199,15 +179,13 @@ function supplierRefFilter(val) {
             <div class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <VnSelectFilter
-                        v-if="suppliersRef"
                         :label="t('supplierFk')"
                         v-model="data.supplierFk"
-                        :options="suppliers"
                         option-value="id"
                         option-label="nickname"
-                        :input-debounce="100"
-                        @input-value="supplierRefFilter"
-                        :default-filter="false"
+                        url="Suppliers"
+                        :fields="['id', 'nickname']"
+                        sort-by="nickname"
                     >
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">
@@ -418,7 +396,6 @@ function supplierRefFilter(val) {
             <div class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <VnSelectFilter
-                        v-if="currenciesRef"
                         :label="t('Currency')"
                         v-model="data.currencyFk"
                         :options="currencies"

test/cypress/integration/invoiceIn/invoiceInBasicData.spec.js

@@ -16,11 +16,12 @@ describe('InvoiceInBasicData', () => {
         cy.get(selects).eq(0).type('Bros');
         cy.get(selects).eq(0).type('{enter}');
 
+        cy.get('[title="Reset"]').click();
         cy.get(appendBtns).eq(0).click();
         cy.get('input').eq(2).type(4739);
         cy.saveCard();
 
-        cy.get(`${selects} input`).eq(0).invoke('val').should('eq', 'Bros nick');
+        cy.get(`${selects} input`).eq(0).invoke('val').should('eq', 'Plants nick');
         cy.get('input').eq(2).invoke('val').should('eq', '4739');
     });