Create supplier consumption filter and fix search bar bug

src/pages/Entry/EntryFilter.vue

@@ -201,15 +201,6 @@ const suppliersOptions = ref([]);
     </VnFilterPanel>
 </template>
 
-<style scoped>
-.list {
-    width: 256px;
-}
-.list * {
-    max-width: 100%;
-}
-</style>
-
 <i18n>
 en:
     params:

src/pages/Supplier/Card/SupplierCard.vue

@@ -14,6 +14,7 @@ const { t } = useI18n();
         <Teleport to="#searchbar">
             <VnSearchbar
                 data-key="SuppliersList"
+                url="Suppliers/filter"
                 :limit="20"
                 :label="t('Search suppliers')"
             />

src/pages/Supplier/Card/SupplierConsumption.vue

@@ -1,26 +1,35 @@
 <script setup>
 import { useRoute } from 'vue-router';
-import { ref, computed } from 'vue';
+import { computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 
-import FetchData from 'components/FetchData.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import SendEmailDialog from 'components/common/SendEmailDialog.vue';
+import SupplierConsumptionFilter from './SupplierConsumptionFilter.vue';
 
 import { toDate, toDateString } from 'src/filters';
 import { dashIfEmpty } from 'src/filters';
 import { usePrintService } from 'composables/usePrintService';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
+import { useStateStore } from 'stores/useStateStore';
+import { useArrayData } from 'composables/useArrayData';
 
+const stateStore = useStateStore();
 const { t } = useI18n();
 const route = useRoute();
 const { openReport, sendEmail } = usePrintService();
 const quasar = useQuasar();
 const { notify } = useNotify();
 
-const suppliersConsumption = ref();
+const arrayData = useArrayData('SupplierConsumption', {
+    url: 'Suppliers/consumption',
+    order: ['itemTypeFk', 'itemName', 'itemSize'],
+    userFilter: { where: { supplierFk: route.params.id } },
+});
+
+const store = arrayData.store;
 
 const userParams = computed(() => {
     const minDate = Date.vnNew();
@@ -41,7 +50,11 @@ const reportParams = computed(() => ({
     ...userParams.value,
 }));
 
-const rows = computed(() => suppliersConsumption.value || []);
+async function getSupplierConsumptionData() {
+    await arrayData.fetch({ append: false });
+}
+
+const rows = computed(() => store.data || []);
 
 const openReportPdf = () => {
     openReport(`Suppliers/${route.params.id}/campaign-metrics-pdf`, reportParams.value);
@@ -89,21 +102,17 @@ const sendCampaignMetricsEmail = ({ address }) => {
 };
 
 const calculateTotal = (buysArray) => {
+    if (!buysArray || !buysArray.length > 0) return;
     return buysArray.reduce((accumulator, { total }) => accumulator + total, 0);
 };
+
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+    await getSupplierConsumptionData();
+});
 </script>
 
 <template>
-    <FetchData
-        url="Suppliers/consumption"
-        @on-fetch="(data) => (suppliersConsumption = data)"
-        :filter="{
-            where: { supplierFk: route.params.id },
-            order: ['itemTypeFk', 'itemName', 'itemSize'],
-        }"
-        :params="userParams"
-        auto-load
-    />
     <QToolbar class="bg-vn-dark justify-end">
         <div id="st-data">
             <QBtn
@@ -133,7 +142,13 @@ const calculateTotal = (buysArray) => {
         <QSpace />
         <div id="st-actions"></div>
     </QToolbar>
+
     <QPage class="column items-center q-pa-md">
+        <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+            <QScrollArea class="fit text-grey-8">
+                <SupplierConsumptionFilter data-key="SupplierConsumption" />
+            </QScrollArea>
+        </QDrawer>
         <QTable
             :rows="rows"
             hide-bottom

src/pages/Supplier/Card/SupplierConsumptionFilter.vue

@@ -0,0 +1,180 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import FetchData from 'components/FetchData.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const buyersOptions = ref([]);
+const itemTypesOptions = ref([]);
+const itemCategoriesOptions = ref([]);
+</script>
+
+<template>
+    <FetchData
+        url="TicketRequests/getItemTypeWorker"
+        :filter="{
+            fields: ['id', 'nickname'],
+            order: 'nickname ASC',
+        }"
+        @on-fetch="(data) => (buyersOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="ItemTypes"
+        :filter="{
+            fields: ['id', 'name', 'categoryFk'],
+            include: 'category',
+            order: 'name ASC',
+        }"
+        @on-fetch="(data) => (itemTypesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="ItemCategories"
+        :filter="{
+            fields: ['id', 'name'],
+            order: 'name ASC',
+        }"
+        @on-fetch="(data) => (itemCategoriesOptions = data)"
+        auto-load
+    />
+    <VnFilterPanel
+        :data-key="props.dataKey"
+        :search-button="true"
+        :unremovable-params="['supplierFk']"
+    >
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params }">
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.search"
+                        :label="t('params.search')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.itemId"
+                        :label="t('params.itemId')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('params.buyerId')"
+                        v-model="params.buyerId"
+                        :options="buyersOptions"
+                        option-value="id"
+                        option-label="nickname"
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('params.typeId')"
+                        v-model="params.typeId"
+                        :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>
+                    </VnSelectFilter>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('params.categoryId')"
+                        v-model="params.categoryId"
+                        :options="itemCategoriesOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate
+                        :label="t('params.from')"
+                        is-outlined
+                        v-model="params.from"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate
+                        :label="t('params.to')"
+                        is-outlined
+                        v-model="params.to"
+                    />
+                </QItemSection>
+            </QItem>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+en:
+    params:
+        search: General search
+        itemId: Item id
+        buyerId: Buyer
+        typeId: Type
+        categoryId: Category
+        from: From
+        to: To
+es:
+    params:
+        search: Búsqueda general
+        itemId: Id Artículo
+        buyerId: Comprador
+        typeId: Tipo
+        categoryId: Reino
+        from: Desde
+        to: Hasta
+</i18n>