From 4b78c1acd001fff12223ba5323a254571ada921d Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 14 Oct 2024 12:00:05 +0200
Subject: [PATCH] fix: refs #7524 dynamic

---
 src/components/common/VnSelect.vue            |  2 ++
 .../Department/Card/DepartmentBasicData.vue   | 15 ++---------
 src/pages/InvoiceOut/InvoiceOutFilter.vue     | 15 -----------
 src/pages/Item/ItemTypeCreate.vue             | 11 +++-----
 src/pages/ItemType/Card/ItemTypeBasicData.vue | 11 +++-----
 src/pages/Order/Card/OrderCreateDialog.vue    | 13 ++++------
 src/pages/Order/Card/OrderFilter.vue          | 12 ---------
 src/pages/Shelving/Card/ShelvingFilter.vue    | 15 -----------
 src/pages/Ticket/TicketFilter.vue             | 26 ++++++-------------
 9 files changed, 23 insertions(+), 97 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index aa629767d5..952b7dd8cb 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -227,6 +227,8 @@ function nullishToTrue(value) {
 }
 
 const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val);
+
+defineExpose({ opts: myOptions });
 </script>
 
 <template>
diff --git a/src/pages/Department/Card/DepartmentBasicData.vue b/src/pages/Department/Card/DepartmentBasicData.vue
index 98abfd6b9e..141bb4159b 100644
--- a/src/pages/Department/Card/DepartmentBasicData.vue
+++ b/src/pages/Department/Card/DepartmentBasicData.vue
@@ -1,9 +1,7 @@
 <script setup>
-import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
-import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
@@ -11,17 +9,8 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 
 const route = useRoute();
 const { t } = useI18n();
-
-const workersOptions = ref([]);
-const clientsOptions = ref([]);
 </script>
 <template>
-    <FetchData
-        url="Workers/search"
-        @on-fetch="(data) => (workersOptions = data)"
-        auto-load
-    />
-    <FetchData url="Clients" @on-fetch="(data) => (clientsOptions = data)" auto-load />
     <FormModel
         :url="`Departments/${route.params.id}`"
         model="department"
@@ -62,7 +51,7 @@ const clientsOptions = ref([]);
                 <VnSelect
                     :label="t('department.bossDepartment')"
                     v-model="data.workerFk"
-                    :options="workersOptions"
+                    url="Workers/search"
                     option-value="id"
                     option-label="name"
                     hide-selected
@@ -72,7 +61,7 @@ const clientsOptions = ref([]);
                 <VnSelect
                     :label="t('department.selfConsumptionCustomer')"
                     v-model="data.clientFk"
-                    :options="clientsOptions"
+                    url="Clients"
                     option-value="id"
                     option-label="name"
                     hide-selected
diff --git a/src/pages/InvoiceOut/InvoiceOutFilter.vue b/src/pages/InvoiceOut/InvoiceOutFilter.vue
index d0d42ea9b4..9ce8cc2548 100644
--- a/src/pages/InvoiceOut/InvoiceOutFilter.vue
+++ b/src/pages/InvoiceOut/InvoiceOutFilter.vue
@@ -15,25 +15,10 @@ const props = defineProps({
         required: true,
     },
 });
-
-const workers = ref();
-const workersCopy = ref();
 const states = ref();
-
-function setWorkers(data) {
-    workers.value = data;
-    workersCopy.value = data;
-}
 </script>
-
 <template>
     <FetchData url="ClaimStates" @on-fetch="(data) => (states = data)" auto-load />
-    <FetchData
-        url="Workers/activeWithInheritedRole"
-        :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="setWorkers"
-        auto-load
-    />
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
diff --git a/src/pages/Item/ItemTypeCreate.vue b/src/pages/Item/ItemTypeCreate.vue
index b7b06bbe61..290a403890 100644
--- a/src/pages/Item/ItemTypeCreate.vue
+++ b/src/pages/Item/ItemTypeCreate.vue
@@ -15,7 +15,6 @@ const router = useRouter();
 
 const newItemTypeForm = reactive({});
 
-const workersOptions = ref([]);
 const categoriesOptions = ref([]);
 const temperaturesOptions = ref([]);
 
@@ -25,12 +24,6 @@ const redirectToItemTypeBasicData = (_, { id }) => {
 </script>
 
 <template>
-    <FetchData
-        url="Workers"
-        @on-fetch="(data) => (workersOptions = data)"
-        :filter="{ order: 'firstName ASC', fields: ['id', 'firstName'] }"
-        auto-load
-    />
     <FetchData
         url="ItemCategories"
         @on-fetch="(data) => (categoriesOptions = data)"
@@ -61,7 +54,9 @@ const redirectToItemTypeBasicData = (_, { id }) => {
                     <VnSelect
                         v-model="data.workerFk"
                         :label="t('itemType.shared.worker')"
-                        :options="workersOptions"
+                        url="Workers"
+                        sort-by="firstName ASC"
+                        :fields="['id', 'firstName']"
                         option-value="id"
                         option-label="firstName"
                         hide-selected
diff --git a/src/pages/ItemType/Card/ItemTypeBasicData.vue b/src/pages/ItemType/Card/ItemTypeBasicData.vue
index 51e24272d4..39076f129c 100644
--- a/src/pages/ItemType/Card/ItemTypeBasicData.vue
+++ b/src/pages/ItemType/Card/ItemTypeBasicData.vue
@@ -12,17 +12,10 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 const route = useRoute();
 const { t } = useI18n();
 
-const workersOptions = ref([]);
 const categoriesOptions = ref([]);
 const temperaturesOptions = ref([]);
 </script>
 <template>
-    <FetchData
-        url="Workers"
-        @on-fetch="(data) => (workersOptions = data)"
-        :filter="{ order: 'firstName ASC', fields: ['id', 'firstName'] }"
-        auto-load
-    />
     <FetchData
         url="ItemCategories"
         @on-fetch="(data) => (categoriesOptions = data)"
@@ -50,7 +43,9 @@ const temperaturesOptions = ref([]);
                 <VnSelect
                     v-model="data.workerFk"
                     :label="t('shared.worker')"
-                    :options="workersOptions"
+                    url="Workers"
+                    sort-by="firstName"
+                    :fields="['id', 'firstName']"
                     option-value="id"
                     option-label="firstName"
                     hide-selected
diff --git a/src/pages/Order/Card/OrderCreateDialog.vue b/src/pages/Order/Card/OrderCreateDialog.vue
index 27b0171f2f..bcc62aa433 100644
--- a/src/pages/Order/Card/OrderCreateDialog.vue
+++ b/src/pages/Order/Card/OrderCreateDialog.vue
@@ -126,12 +126,6 @@ onMounted(async () => {
 </script>
 
 <template>
-    <FetchData
-        url="addresses"
-        @on-fetch="(data) => (clientOptions = data)"
-        :filter="{ fields: ['id', 'name', 'defaultAddressFk'], order: 'id' }"
-        auto-load
-    />
     <FormModelPopup
         url-create="Orders/new"
         :title="t('Create Order')"
@@ -165,13 +159,16 @@ onMounted(async () => {
                     </template>
                 </VnSelect>
                 <VnSelect
+                    ref="addressRef"
                     :label="t('order.form.addressFk')"
                     v-model="data.addressId"
-                    :options="addressList"
+                    url="addresses"
+                    :fields="['id', 'nickname', 'defaultAddressFk', 'street', 'city']"
+                    sort-by="id"
                     option-value="id"
                     option-label="street"
                     hide-selected
-                    :disable="!addressList?.length"
+                    :disable="!$refs.addressRef?.length"
                 >
                     <template #option="scope">
                         <QItem v-bind="scope.itemProps">
diff --git a/src/pages/Order/Card/OrderFilter.vue b/src/pages/Order/Card/OrderFilter.vue
index be47eed547..9173699191 100644
--- a/src/pages/Order/Card/OrderFilter.vue
+++ b/src/pages/Order/Card/OrderFilter.vue
@@ -17,10 +17,6 @@ const props = defineProps({
 
 const agencyFilter = { fields: ['id', 'name'] };
 const agencyList = ref(null);
-const salesPersonFilter = {
-    fields: ['id', 'nickname'],
-};
-const salesPersonList = ref(null);
 const sourceList = ref([]);
 </script>
 
@@ -32,14 +28,6 @@ const sourceList = ref([]);
         auto-load
         @on-fetch="(data) => (agencyList = data)"
     />
-    <FetchData
-        url="Workers/search"
-        :filter="salesPersonFilter"
-        sort-by="nickname ASC"
-        @on-fetch="(data) => (salesPersonList = data)"
-        :params="{ departmentCodes: ['VT'] }"
-        auto-load
-    />
     <FetchData
         url="Orders/getSourceValues"
         :filter="{ fields: ['value'] }"
diff --git a/src/pages/Shelving/Card/ShelvingFilter.vue b/src/pages/Shelving/Card/ShelvingFilter.vue
index 0056ffaece..56cf4f58c4 100644
--- a/src/pages/Shelving/Card/ShelvingFilter.vue
+++ b/src/pages/Shelving/Card/ShelvingFilter.vue
@@ -1,7 +1,5 @@
 <script setup>
-import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 
@@ -14,22 +12,9 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['search']);
-
-const workers = ref();
-
-function setWorkers(data) {
-    workers.value = data;
-}
 </script>
 
 <template>
-    <FetchData
-        url="Workers/activeWithInheritedRole"
-        :filter="{ where: { role: 'salesPerson' } }"
-        sort-by="firstName ASC"
-        @on-fetch="setWorkers"
-        auto-load
-    />
     <VnFilterPanel
         :data-key="props.dataKey"
         :search-button="true"
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
index 3b9833ce27..95cac4a479 100644
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@@ -6,6 +6,7 @@ import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -15,7 +16,6 @@ const props = defineProps({
     },
 });
 
-const workers = ref([]);
 const provinces = ref([]);
 const states = ref([]);
 const agencies = ref([]);
@@ -27,12 +27,6 @@ const warehouses = ref([]);
     <FetchData url="States" @on-fetch="(data) => (states = data)" auto-load />
     <FetchData url="AgencyModes" @on-fetch="(data) => (agencies = data)" auto-load />
     <FetchData url="Warehouses" @on-fetch="(data) => (warehouses = data)" auto-load />
-    <FetchData
-        url="Workers/activeWithInheritedRole"
-        :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="(data) => (workers = data)"
-        auto-load
-    />
     <VnFilterPanel :data-key="props.dataKey" :search-button="true" search-url="table">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
@@ -66,23 +60,19 @@ const warehouses = ref([]);
                 </QItemSection>
             </QItem>
             <QItem>
-                <QItemSection v-if="!workers">
-                    <QSkeleton type="QInput" class="full-width" />
-                </QItemSection>
-                <QItemSection v-if="workers">
-                    <QSelect
+                <QItemSection>
+                    <VnSelect
                         :label="t('Salesperson')"
                         v-model="params.salesPersonFk"
-                        :options="workers"
+                        url="Workers/activeWithInheritedRole"
+                        :where="{ role: 'salesPerson' }"
                         option-value="id"
-                        option-label="name"
-                        emit-value
-                        map-options
-                        use-input
+                        option-label="firstName"
+                        :use-like="false"
+                        sort-by="firstName ASC"
                         dense
                         outlined
                         rounded
-                        :input-debounce="0"
                     />
                 </QItemSection>
             </QItem>