From 1eedb6f79ba1e7ce51d7882bf9781ac0f58fc940 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 24 May 2024 11:54:31 +0200
Subject: [PATCH] perf: #6321 updates

---
 src/pages/Item/components/ItemProposal.vue    |  1 +
 .../Ticket/Negative/TicketLackDetail.vue      | 11 +--
 .../Ticket/Negative/TicketLackFilter.vue      | 84 ++++++++++++++-----
 src/pages/Ticket/Negative/TicketLackList.vue  |  2 +-
 src/pages/Ticket/locale/en.yml                | 11 +--
 src/pages/Ticket/locale/es.yml                |  3 +-
 6 files changed, 78 insertions(+), 34 deletions(-)

diff --git a/src/pages/Item/components/ItemProposal.vue b/src/pages/Item/components/ItemProposal.vue
index ac9404808..64ee170fe 100644
--- a/src/pages/Item/components/ItemProposal.vue
+++ b/src/pages/Item/components/ItemProposal.vue
@@ -11,6 +11,7 @@ const session = useSession();
 const $props = defineProps({
     item: {
         type: Object,
+        required: true,
         default: () => {},
     },
 });
diff --git a/src/pages/Ticket/Negative/TicketLackDetail.vue b/src/pages/Ticket/Negative/TicketLackDetail.vue
index 70e4cf352..5823de2ad 100644
--- a/src/pages/Ticket/Negative/TicketLackDetail.vue
+++ b/src/pages/Ticket/Negative/TicketLackDetail.vue
@@ -40,7 +40,7 @@ const selectedRows = ref([]);
 
 const originalRowDataCopy = ref(null);
 const $props = defineProps({
-    id: {
+    item: {
         type: Number,
         required: true,
     },
@@ -97,7 +97,7 @@ const saveChange = async (field, { rowIndex, row }) => {
         console.error('Error saving changes', err);
     }
 };
-const entityId = computed(() => $props.id);
+const entityId = computed(() => $props.item.itemFk);
 function isComponentVn(col) {
     return tableColumnComponents?.value[col.name]?.component === 'span' ?? false;
 }
@@ -464,11 +464,11 @@ const handleRows = (rows) => {
                                     </template>
                                     <template v-if="col.name === 'ticketFk'"
                                         >{{ col.value }}
-                                        <ItemDescriptorProxy :id="$props.id"
+                                        <ItemDescriptorProxy :id="$props.entityId"
                                     /></template>
                                     <template v-if="col.name === 'itemFk'"
                                         >{{ col.value }}
-                                        <ItemDescriptorProxy :id="$props.id"
+                                        <ItemDescriptorProxy :id="$props.entityId"
                                     /></template>
                                 </component>
                             </template>
@@ -498,10 +498,11 @@ const handleRows = (rows) => {
         v-model="showSplitDialog"
         :tickets="resultSplit"
     ></HandleSplited>
+    {{ item }}
     <ItemProposal
         ref="proposalDialogRef"
         @hide="onDialogHide"
         v-model="showProposalDialog"
-        :item="currentRow"
+        :item="item"
     ></ItemProposal>
 </template>
diff --git a/src/pages/Ticket/Negative/TicketLackFilter.vue b/src/pages/Ticket/Negative/TicketLackFilter.vue
index 7d4129f52..93e2e1f6d 100644
--- a/src/pages/Ticket/Negative/TicketLackFilter.vue
+++ b/src/pages/Ticket/Negative/TicketLackFilter.vue
@@ -26,6 +26,8 @@ to.setDate(to.getDate() + 1);
 const warehouses = ref();
 const categoriesOptions = ref([]);
 const itemTypesRef = ref(null);
+const itemTypesOptions = ref([]);
+
 const itemTypesFilter = {
     fields: ['id', 'name', 'categoryFk'],
     include: 'category',
@@ -53,10 +55,17 @@ const onCategoryChange = async (categoryFk, search) => {
         auto-load
     />
 
+    <FetchData
+        ref="itemTypesRef"
+        url="ItemTypes"
+        :filter="itemTypesFilter"
+        @on-fetch="(data) => (itemTypesOptions = data)"
+    />
+
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
-                <strong>{{ t(`negative.${tag.label}`) }}: </strong>
+                <strong>{{ t(`negative.${tag.label}`) }}</strong>
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
@@ -103,31 +112,62 @@ const onCategoryChange = async (categoryFk, search) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem>
-                    <QItemSection v-if="categoriesOptions">
-                        <VnSelect
-                            :label="t('negative.categoryFk')"
-                            v-model="params.categoryFk"
-                            @update:model-value="
-                                ($event) => onCategoryChange($event, searchFn)
-                            "
-                            :options="categoriesOptions"
-                            option-value="id"
-                            option-label="name"
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                        /> </QItemSection
-                    ><QItemSection v-else>
-                        <QSkeleton class="full-width" type="QSelect" />
-                    </QItemSection>
-                </QItem>
+                <QCard bordered>
+                    <QItem>
+                        <QItemSection v-if="categoriesOptions">
+                            <VnSelect
+                                :label="t('negative.category')"
+                                v-model="params.categoryFk"
+                                @update:model-value="
+                                    ($event) => onCategoryChange($event, searchFn)
+                                "
+                                :options="categoriesOptions"
+                                option-value="id"
+                                option-label="name"
+                                hide-selected
+                                dense
+                                outlined
+                                rounded
+                            /> </QItemSection
+                        ><QItemSection v-else>
+                            <QSkeleton class="full-width" type="QSelect" />
+                        </QItemSection>
+                    </QItem>
 
+                    <QItem>
+                        <QItemSection v-if="itemTypesOptions">
+                            <VnSelect
+                                :label="t('negative.type')"
+                                v-model="params.typeFk"
+                                @update:model-value="searchFn()"
+                                :options="itemTypesOptions"
+                                option-value="id"
+                                option-label="name"
+                                hide-selected
+                                dense
+                                outlined
+                                rounded
+                            >
+                                <template #option="scope">
+                                    <QItem v-bind="scope.itemProps">
+                                        <QItemSection>
+                                            <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
+                                            <QItemLabel caption>{{
+                                                scope.opt?.category?.name
+                                            }}</QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                </template>
+                            </VnSelect> </QItemSection
+                        ><QItemSection v-else>
+                            <QSkeleton class="full-width" type="QSelect" />
+                        </QItemSection>
+                    </QItem>
+                </QCard>
                 <QItem>
                     <QItemSection v-if="warehouses">
                         <VnSelect
-                            :label="t('Warehouse')"
+                            :label="t('negative.warehouse')"
                             v-model="params.warehouse"
                             @update:model-value="searchFn()"
                             :options="warehouses"
diff --git a/src/pages/Ticket/Negative/TicketLackList.vue b/src/pages/Ticket/Negative/TicketLackList.vue
index a387a8a51..779349ce7 100644
--- a/src/pages/Ticket/Negative/TicketLackList.vue
+++ b/src/pages/Ticket/Negative/TicketLackList.vue
@@ -224,7 +224,7 @@ const handleWarehouses = async (data) => {
         <div v-if="currentRow" class="list">
             <TicketLackDetail
                 ref="ticketDetailRef"
-                :id="currentRow?.itemFk"
+                :item="currentRow"
                 @close="(evt) => (currentRow = null)"
             ></TicketLackDetail>
         </div>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index bb358a3df..62faafef3 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -8,19 +8,20 @@ negative:
     origen: 'Origin'
     value: 'Negative'
     itemFk: 'Article'
-    warehouseFk: 'Warehouse'
     producer: 'Producer'
-    category: 'category'
+    warehouse: 'Warehouse'
+    warehouseFk: 'Warehouse'
+    category: 'Category'
     categoryFk: 'Family'
-    warehouse: 'warehouse'
+    type: 'Type'
+    typeFk: 'Type'
     lack: 'Negative'
     inkFk: 'inkFk'
     timed: 'timed'
     minTimed: 'minTimed'
-    type: 'Type'
     negativeAction: 'Negative'
     totalNegative: 'Total negatives'
-    days: Dias
+    days: Days
     modalOrigin:
         title: 'Update negatives'
         question: 'Select a state to update'
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 7de0d3447..3e08f9bc9 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -11,8 +11,9 @@ negative:
     value: 'Negativo'
     warehouseFk: 'Almacen'
     producer: 'Producer'
-    category: 'Categoria'
+    category: 'Categoría'
     categoryFk: 'Familia'
+    typeFk: 'Familia'
     warehouse: 'Almacen'
     lack: 'Negativo'
     inkFk: 'Color'