feat: apply VnSelect url property for some Customer fields

src/components/common/VnSelect.vue

@@ -43,10 +43,6 @@ const $props = defineProps({
         type: Boolean,
         default: true,
     },
-    // paginate: {
-    //     type: Boolean,
-    //     default: true,
-    // },
     fields: {
         type: Array,
         default: null,
@@ -59,18 +55,10 @@ const $props = defineProps({
         type: String,
         default: null,
     },
-    // orderBy: {
-    //     type: String,
-    //     default: null,
-    // },
     limit: {
         type: [Number, String],
         default: '30',
     },
-    // fetchRef: {
-    //     type: Object,
-    //     default: null,
-    // },
 });
 
 const { t } = useI18n();
@@ -93,18 +81,8 @@ const value = computed({
 });
 
 function setOptions(data, append = true) {
-    // if (isLoading.value) {
-    //     data.unshift(...myOptions.value);
-    // }
-    // if (arrayData.store) {
-    //     //     arrayData.store.data = data;
-    //     arrayData.store.hasMoreData = data.length === +$props.limit;
-    //     append && myOptions.value.concat(data);
-    //     // myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
-    // } else {
     myOptions.value = JSON.parse(JSON.stringify(data));
     if (append) myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
-    // }
 }
 const useURL = computed(() => $props.url?.length > 0);
 const arrayData = useURL.value
@@ -188,7 +166,6 @@ async function filterHandler(val, update) {
         const { data } = await arrayData.fetch({ append: false });
         newOptions = data;
         myOptionsFiltered.value = data;
-        // setOptions(data, false);
     }
     update(
         () => {

src/pages/Customer/Card/CustomerBasicData.vue

@@ -16,28 +16,8 @@ const { getTokenMultimedia } = useSession();
 const token = getTokenMultimedia();
 
 const workers = ref([]);
-const workersCopy = ref([]);
 const businessTypes = ref([]);
 const contactChannels = ref([]);
-
-const filterOptions = {
-    options: workers,
-    filterFn: (options, value) => {
-        const search = value.toLowerCase();
-
-        if (value === '') return workersCopy.value;
-
-        return options.value.filter((row) => {
-            const id = row.id;
-            const name = row.name.toLowerCase();
-
-            const idMatches = id === search;
-            const nameMatches = name.indexOf(search) > -1;
-
-            return idMatches || nameMatches;
-        });
-    },
-};
 </script>
 <template>
     <FetchData
@@ -58,7 +38,7 @@ const filterOptions = {
     />
 
     <FormModel :url="`Clients/${route.params.id}`" auto-load model="customer">
-        <template #form="{ data, validate, filter }">
+        <template #form="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <VnInput
                     :label="t('Comercial name')"
@@ -124,8 +104,7 @@ const filterOptions = {
                     :options="workers"
                     :rules="validate('client.salesPersonFk')"
                     url="Workers/activeWithInheritedRole"
-                    @filter="(value, update) => filter(value, update, filterOptions)"
-                    :filter="{ where: { role: 'salesPerson' } }"
+                    :where="{ role: 'salesPerson' }"
                     emit-value
                     map-options
                     option-label="name"

src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue

@@ -23,13 +23,6 @@ const authors = ref();
 </script>
 
 <template>
-    <FetchData @on-fetch="(data) => (clients = data)" auto-load url="Clients" />
-    <FetchData
-        :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="(data) => (salespersons = data)"
-        auto-load
-        url="Workers/activeWithInheritedRole"
-    />
     <FetchData @on-fetch="(data) => (countries = data)" auto-load url="Countries" />
     <FetchData
         @on-fetch="(data) => (authors = data)"
@@ -47,7 +40,7 @@ const authors = ref();
 
         <template #body="{ params, searchFn }">
             <QItem class="q-mb-sm">
-                <QItemSection v-if="clients">
+                <QItemSection>
                     <VnSelect
                         :label="t('Client')"
                         :options="clients"
@@ -62,17 +55,17 @@ const authors = ref();
                         use-input
                         v-model="params.clientFk"
                         @update:model-value="searchFn()"
-                        auto-load
+                        url="Clients"
                     />
                 </QItemSection>
-                <QItemSection v-else>
-                    <QSkeleton class="full-width" type="QInput" />
-                </QItemSection>
             </QItem>
 
             <QItem class="q-mb-sm">
-                <QItemSection v-if="salespersons">
+                <QItemSection>
                     <VnSelect
+                        :where="{ role: 'salesPerson' }"
+                        option-filter="firstName"
+                        url="Workers/activeWithInheritedRole"
                         :input-debounce="0"
                         :label="t('Salesperson')"
                         :options="salespersons"
@@ -89,9 +82,6 @@ const authors = ref();
                         @update:model-value="searchFn()"
                     />
                 </QItemSection>
-                <QItemSection v-else>
-                    <QSkeleton class="full-width" type="QInput" />
-                </QItemSection>
             </QItem>
 
             <QItem class="q-mb-sm">
@@ -104,7 +94,7 @@ const authors = ref();
                         emit-value
                         hide-selected
                         map-options
-                        option-label="country"
+                        option-label="name"
                         option-value="id"
                         outlined
                         rounded