feat: family filter

src/pages/Ticket/Negative/TicketLackFilter.vue

@@ -23,15 +23,40 @@ const defaultParams = {
 };
 
 const warehouses = ref();
+const categoriesOptions = ref([]);
+const itemTypesRef = ref(null);
+const itemTypesFilter = {
+    fields: ['id', 'name', 'categoryFk'],
+    include: 'category',
+    order: 'name ASC',
+    where: {},
+};
 
 const handleWarehouses = async (data) => {
     warehouses.value = data;
     defaultParams.warehouse = data.find((w) => w.name === DEFAULT_WAREHOUSE).id;
 };
+
+const onCategoryChange = async (categoryFk, search) => {
+    if (!categoryFk) {
+        itemTypesFilter.where.categoryFk = null;
+        delete itemTypesFilter.where.categoryFk;
+    } else {
+        itemTypesFilter.where.categoryFk = categoryFk;
+    }
+    search();
+    await itemTypesRef.value.fetch();
+};
 </script>
 
 <template>
     <FetchData url="Warehouses" @on-fetch="handleWarehouses" auto-load />
+    <FetchData
+        url="ItemCategories"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        @on-fetch="(data) => (categoriesOptions = data)"
+        auto-load
+    />
     <VnFilterPanel
         :data-key="props.dataKey"
         :params="defaultParams"
@@ -39,7 +64,7 @@ const handleWarehouses = async (data) => {
     >
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
-                <strong>{{ t(`ticket.negative.${tag.label}`) }}: </strong>
+                <strong>{{ t(`negative.${tag.label}`) }}: </strong>
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
@@ -75,9 +100,29 @@ const handleWarehouses = async (data) => {
                         />
                     </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>
 
-                <QItem v-if="warehouses">
-                    <QItemSection>
+                <QItem>
+                    <QItemSection v-if="warehouses">
                         <VnSelect
                             :label="t('Warehouse')"
                             v-model="params.warehouse"
@@ -95,6 +140,9 @@ const handleWarehouses = async (data) => {
                             :input-debounce="0"
                         />
                     </QItemSection>
+                    <QItemSection v-else>
+                        <QSkeleton class="full-width" type="QSelect" />
+                    </QItemSection>
                 </QItem>
             </QList>
         </template>

src/pages/Ticket/locale/en.yml

@@ -11,6 +11,7 @@ negative:
     warehouseFk: 'Warehouse'
     producer: 'Producer'
     category: 'category'
+    categoryFk: 'Family'
     warehouse: 'warehouse'
     lack: 'Negative'
     inkFk: 'inkFk'

src/pages/Ticket/locale/es.yml

@@ -12,6 +12,7 @@ negative:
     warehouseFk: 'Almacen'
     producer: 'Producer'
     category: 'Categoria'
+    categoryFk: 'Familia'
     warehouse: 'Almacen'
     lack: 'Negativo'
     inkFk: 'Color'