feat: CustomerConsumptionFilter

src/pages/Customer/Card/CustomerConsumptionFilter.vue

@@ -5,6 +5,8 @@ import VnInput from 'src/components/common/VnInput.vue';
 import { QItem } from 'quasar';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import { QItemSection } from 'quasar';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import { toDate } from 'src/filters';
 
 const { t } = useI18n();
 defineProps({ dataKey: { type: String, required: true } });
@@ -33,6 +35,8 @@ defineProps({ dataKey: { type: String, required: true } });
                     <VnSelect
                         v-model="params.buyerId"
                         url="TicketRequests/getItemTypeWorker"
+                        :fields="['id', 'nickname']"
+                        sort-by="nickname ASC"
                         :label="t('params.buyer')"
                         option-value="id"
                         option-label="nickname"
@@ -48,30 +52,93 @@ defineProps({ dataKey: { type: String, required: true } });
                     <VnSelect
                         v-model="params.typeId"
                         url="ItemTypes"
-                        :label="t('params.type')"
+                        :include="['category']"
+                        :fields="['id', 'name', 'categoryFk']"
+                        sort-by="name ASC"
+                        :label="t('params.typeId')"
                         option-label="name"
                         option-value="id"
                         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>
             </QItem>
             <QItem>
                 <QItemSection>
                     <VnSelect
+                        v-model="params.categoryId"
                         url="ItemCategories"
-                        :label="t('params.category')"
+                        :fields="['id', 'name']"
+                        sort-by="name ASC"
+                        :label="t('params.categoryId')"
                         option-label="name"
                         option-value="id"
-                        v-model="params.categoryId"
                         dense
                         outlined
                         rounded
                     />
                 </QItemSection>
             </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        v-model="params.campaignId"
+                        url="Campaigns/latest"
+                        sort-by="dated DESC"
+                        :label="t('params.campaignId')"
+                        option-label="code"
+                        option-value="id"
+                        dense
+                        outlined
+                        rounded
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{
+                                        t(`params.${scope.opt?.code}`)
+                                    }}</QItemLabel>
+                                    <QItemLabel caption>{{
+                                        toDate(scope.opt.dated)
+                                    }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelect>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate
+                        :label="t('params.from')"
+                        v-model="params.from"
+                        @update:model-value="searchFn()"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate
+                        :label="t('params.to')"
+                        v-model="params.to"
+                        @update:model-value="searchFn()"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
         </template>
     </VnFilterPanel>
 </template>
@@ -82,10 +149,30 @@ en:
         buyer: Buyer
         type: Type
         category: Category
+        itemId: Item id
+        buyerId: Buyer
+        typeId: Type
+        categoryId: Category
+        from: From
+        to: To
+        campaignId: Campaña
+        valentinesDay: Valentine's Day
+        mothersDay: Mother's Day
+        allSaints: All Saints' Day
 es:
     params:
         item: Id artículo
         buyer: Comprador
         type: Tipo
         category: Categoría
+        itemId: Id Artículo
+        buyerId: Comprador
+        typeId: Tipo
+        categoryId: Reino
+        from: Desde
+        to: Hasta
+        campaignId: Campaña
+        valentinesDay: Día de San Valentín
+        mothersDay: Día de la Madre
+        allSaints: Día de Todos los Santos
 </i18n>

src/pages/Supplier/Card/SupplierConsumptionFilter.vue

@@ -1,56 +1,21 @@
 <script setup>
-import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelect from 'src/components/common/VnSelect.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({
+defineProps({
     dataKey: {
         type: String,
         required: true,
     },
 });
-
-const buyersOptions = ref([]);
-const itemTypesOptions = ref([]);
-const itemCategoriesOptions = ref([]);
 </script>
 
 <template>
-    <FetchData
+    <VnFilterPanel :data-key="dataKey" :search-button="true" :redirect="false">
-        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" :redirect="false">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
                 <strong>{{ t(`params.${tag.label}`) }}: </strong>
@@ -82,7 +47,9 @@ const itemCategoriesOptions = ref([]);
                         :label="t('params.buyerId')"
                         v-model="params.buyerId"
                         @update:model-value="searchFn()"
-                        :options="buyersOptions"
+                        url="TicketRequests/getItemTypeWorker"
+                        :fields="['id', 'nickname']"
+                        sort-by="nickname ASC"
                         option-value="id"
                         option-label="nickname"
                         hide-selected
@@ -98,7 +65,10 @@ const itemCategoriesOptions = ref([]);
                         :label="t('params.typeId')"
                         v-model="params.typeId"
                         @update:model-value="searchFn()"
-                        :options="itemTypesOptions"
+                        url="ItemTypes"
+                        :include="['category']"
+                        :fields="['id', 'name', 'categoryFk']"
+                        sort-by="name ASC"
                         option-value="id"
                         option-label="name"
                         hide-selected
@@ -125,7 +95,9 @@ const itemCategoriesOptions = ref([]);
                         :label="t('params.categoryId')"
                         v-model="params.categoryId"
                         @update:model-value="searchFn()"
-                        :options="itemCategoriesOptions"
+                        url="ItemCategories"
+                        :fields="['id', 'name']"
+                        sort-by="name ASC"
                         option-value="id"
                         option-label="name"
                         hide-selected