From 566a649c208c4a1d85ba7b0438b3abe730f49d61 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 26 Aug 2024 16:34:46 +0200
Subject: [PATCH] fix: refs #7524 use limit item Section

---
 src/components/ui/VnFilterPanel.vue   |  2 +-
 src/pages/Item/Card/ItemBotanical.vue | 28 +++++++++------------------
 src/pages/Item/Card/ItemShelving.vue  | 24 ++++++-----------------
 src/pages/Item/Card/ItemTags.vue      |  4 +++-
 src/pages/Item/ItemListFilter.vue     | 12 ++++--------
 src/pages/Item/ItemRequest.vue        | 12 +++---------
 src/pages/Item/ItemRequestFilter.vue  | 18 ++++-------------
 7 files changed, 30 insertions(+), 70 deletions(-)

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index ab4e2e0da..b12a9f7b8 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -202,7 +202,7 @@ function formatValue(value) {
 function sanitizer(params) {
     for (const [key, value] of Object.entries(params)) {
         if (typeof value == 'object')
-            params[key] = Object.values(value)[0].replaceAll('%', '');
+            params[key] = Object.values(value)?.[0]?.replaceAll('%', '');
     }
     return params;
 }
diff --git a/src/pages/Item/Card/ItemBotanical.vue b/src/pages/Item/Card/ItemBotanical.vue
index 416c7f78b..599cd2b32 100644
--- a/src/pages/Item/Card/ItemBotanical.vue
+++ b/src/pages/Item/Card/ItemBotanical.vue
@@ -19,15 +19,6 @@ const itemSpeciesOptions = ref([]);
 const itemBotanicals = ref([]);
 let itemBotanicalsForm = reactive({ itemFk: null });
 
-const onGenusCreated = (response, formData) => {
-    itemGenusOptions.value = [...itemGenusOptions.value, response];
-    formData.genusFk = response.id;
-};
-
-const onSpecieCreated = (response, formData) => {
-    itemSpeciesOptions.value = [...itemSpeciesOptions.value, response];
-    formData.specieFk = response.id;
-};
 const entityId = computed(() => {
     return route.params.id;
 });
@@ -69,36 +60,35 @@ onMounted(async () => {
         <template #form="{ data }">
             <VnRow>
                 <VnSelectDialog
+                    ref="genusRef"
                     :label="t('Genus')"
                     v-model="data.genusFk"
-                    :options="itemGenusOptions"
+                    url="Genera"
                     option-label="name"
                     option-value="id"
+                    :fields="['id', 'name']"
+                    sort-by="name ASC"
                     hide-selected
                 >
                     <template #form>
                         <CreateGenusForm
-                            @on-data-saved="
-                                (_, requestResponse) =>
-                                    onGenusCreated(requestResponse, data)
-                            "
+                            @on-data-saved="(_, res) => (data.genusFk = res.id)"
                         />
                     </template>
                 </VnSelectDialog>
                 <VnSelectDialog
                     :label="t('Species')"
                     v-model="data.specieFk"
-                    :options="itemSpeciesOptions"
+                    url="Species"
                     option-label="name"
                     option-value="id"
+                    :fields="['id', 'name']"
+                    sort-by="name ASC"
                     hide-selected
                 >
                     <template #form>
                         <CreateSpecieForm
-                            @on-data-saved="
-                                (_, requestResponse) =>
-                                    onSpecieCreated(requestResponse, data)
-                            "
+                            @on-data-saved="(_, res) => (data.specieFk = res.id)"
                         />
                     </template>
                 </VnSelectDialog>
diff --git a/src/pages/Item/Card/ItemShelving.vue b/src/pages/Item/Card/ItemShelving.vue
index 7e7faab36..41cb34c03 100644
--- a/src/pages/Item/Card/ItemShelving.vue
+++ b/src/pages/Item/Card/ItemShelving.vue
@@ -3,7 +3,6 @@ import { onMounted, ref, computed, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
-import FetchData from 'components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
@@ -24,8 +23,6 @@ const { notify } = useNotify();
 const { openConfirmationModal } = useVnConfirm();
 
 const rowsSelected = ref([]);
-const parkingsOptions = ref([]);
-const shelvingsOptions = ref([]);
 
 const exprBuilder = (param, value) => {
     switch (param) {
@@ -104,7 +101,9 @@ const columns = computed(() => [
             filterValue: null,
             event: getInputEvents,
             attrs: {
-                options: parkingsOptions.value,
+                url: 'parkings',
+                fields: ['code'],
+                'sort-by': 'code ASC',
                 'option-value': 'code',
                 'option-label': 'code',
                 dense: true,
@@ -124,7 +123,9 @@ const columns = computed(() => [
             filterValue: null,
             event: getInputEvents,
             attrs: {
-                options: shelvingsOptions.value,
+                url: 'shelvings',
+                fields: ['code'],
+                'sort-by': 'code ASC',
                 'option-value': 'code',
                 'option-label': 'code',
                 dense: true,
@@ -188,18 +189,6 @@ onMounted(async () => {
 </script>
 
 <template>
-    <FetchData
-        url="parkings"
-        :filter="{ fields: ['code'], order: 'code ASC' }"
-        auto-load
-        @on-fetch="(data) => (parkingsOptions = data)"
-    />
-    <FetchData
-        url="shelvings"
-        :filter="{ fields: ['code'], order: 'code ASC' }"
-        auto-load
-        @on-fetch="(data) => (shelvingsOptions = data)"
-    />
     <template v-if="stateStore.isHeaderMounted()">
         <Teleport to="#st-data">
             <div class="q-pa-md q-mr-lg q-ma-xs" style="border: 2px solid #222">
@@ -237,7 +226,6 @@ onMounted(async () => {
             </QBtn>
         </Teleport>
     </template>
-
     <QPage class="column items-center q-pa-md">
         <QTable
             :rows="rows"
diff --git a/src/pages/Item/Card/ItemTags.vue b/src/pages/Item/Card/ItemTags.vue
index 40c9941e9..39723ae65 100644
--- a/src/pages/Item/Card/ItemTags.vue
+++ b/src/pages/Item/Card/ItemTags.vue
@@ -24,6 +24,7 @@ const getSelectedTagValues = async (tag) => {
         const filter = {
             fields: ['value'],
             order: 'value ASC',
+            limit: 30,
         };
 
         const params = { filter: JSON.stringify(filter) };
@@ -126,7 +127,7 @@ const insertTag = (rows) => {
                                 :key="row.tagFk"
                                 :label="t('Value')"
                                 v-model="row.value"
-                                :options="valueOptionsMap.get(row.tagFk)"
+                                :url="`Tags/${row.tagFk}/filterValue`"
                                 option-label="value"
                                 option-value="value"
                                 emit-value
@@ -135,6 +136,7 @@ const insertTag = (rows) => {
                                 :is-clearable="false"
                                 :required="false"
                                 :rules="validate('itemTag.tagFk')"
+                                :use-like="false"
                             />
                             <VnInput
                                 v-else-if="
diff --git a/src/pages/Item/ItemListFilter.vue b/src/pages/Item/ItemListFilter.vue
index 62c0c56dc..22dce9c64 100644
--- a/src/pages/Item/ItemListFilter.vue
+++ b/src/pages/Item/ItemListFilter.vue
@@ -30,7 +30,7 @@ const itemTypesRef = ref(null);
 const categoriesOptions = ref([]);
 const itemTypesOptions = ref([]);
 const buyersOptions = ref([]);
-const suppliersOptions = ref([]);
+const tagOptions = ref([]);
 const tagValues = ref([]);
 const fieldFiltersValues = ref([]);
 const moreFields = ref([]);
@@ -161,12 +161,6 @@ onMounted(async () => {
         @on-fetch="(data) => (buyersOptions = data)"
         auto-load
     />
-    <FetchData
-        url="Suppliers"
-        :filter="{ fields: ['id', 'name', 'nickname'], order: 'name ASC' }"
-        @on-fetch="(data) => (suppliersOptions = data)"
-        auto-load
-    />
     <FetchData
         url="Tags"
         :filter="{ fields: ['id', 'name', 'isFree'] }"
@@ -261,9 +255,11 @@ onMounted(async () => {
                         :label="t('params.supplierFk')"
                         v-model="params.supplierFk"
                         @update:model-value="searchFn()"
-                        :options="suppliersOptions"
+                        url="Suppliers"
                         option-value="id"
                         option-label="name"
+                        :fields="['id', 'name', 'nickname']"
+                        sort-by="name ASC"
                         hide-selected
                         dense
                         outlined
diff --git a/src/pages/Item/ItemRequest.vue b/src/pages/Item/ItemRequest.vue
index ae6638953..c1ee15a7e 100644
--- a/src/pages/Item/ItemRequest.vue
+++ b/src/pages/Item/ItemRequest.vue
@@ -22,7 +22,6 @@ import RightMenu from 'src/components/common/RightMenu.vue';
 const { t } = useI18n();
 const { notify } = useNotify();
 const stateStore = useStateStore();
-const workersOptions = ref([]);
 let filterParams = ref({});
 const denyFormRef = ref(null);
 const denyRequestId = ref(null);
@@ -208,13 +207,6 @@ onBeforeMount(() => {
 </script>
 
 <template>
-    <FetchData
-        url="Workers"
-        :filter="{ where: { role: 'buyer' } }"
-        order="id"
-        @on-fetch="(data) => (workersOptions = data)"
-        auto-load
-    />
     <VnSearchbar
         data-key="ItemRequests"
         url="TicketRequests/filter"
@@ -268,7 +260,9 @@ onBeforeMount(() => {
                 <QTd>
                     <VnSelect
                         v-model="row.attenderFk"
-                        :options="workersOptions"
+                        :where="{ role: 'buyer' }"
+                        sort-by="id"
+                        url="Workers"
                         hide-selected
                         option-label="firstName"
                         option-value="id"
diff --git a/src/pages/Item/ItemRequestFilter.vue b/src/pages/Item/ItemRequestFilter.vue
index c9340dc1f..aa07b8d50 100644
--- a/src/pages/Item/ItemRequestFilter.vue
+++ b/src/pages/Item/ItemRequestFilter.vue
@@ -24,7 +24,6 @@ const stateOptions = [
 
 const itemTypesOptions = ref([]);
 const warehousesOptions = ref([]);
-const workersOptions = ref([]);
 
 const exprBuilder = (param, value) => {
     switch (param) {
@@ -72,18 +71,6 @@ const decrement = (paramsObj, key) => {
         @on-fetch="(data) => (warehousesOptions = data)"
         auto-load
     />
-    <FetchData
-        url="Workers/search"
-        :filter="{
-            fields: ['id', 'name'],
-            order: 'name ASC',
-        }"
-        :params="{
-            departmentCodes: ['VT'],
-        }"
-        @on-fetch="(data) => (workersOptions = data)"
-        auto-load
-    />
     <VnFilterPanel
         :data-key="props.dataKey"
         :search-button="true"
@@ -162,7 +149,10 @@ const decrement = (paramsObj, key) => {
                         :label="t('params.requesterFk')"
                         v-model="params.requesterFk"
                         @update:model-value="searchFn()"
-                        :options="workersOptions"
+                        url="Workers/search"
+                        :fields="['id', 'name']"
+                        order="name ASC"
+                        :params="{ departmentCodes: ['VT'] }"
                         option-value="id"
                         option-label="name"
                         hide-selected