From 75dc81eba777b528e1ce320bcb4b95dddd66eb12 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 18 Apr 2024 08:16:37 -0300
Subject: [PATCH] add column filters

---
 src/pages/Item/ItemFixedPrice.vue | 228 +++++++++++++-----------------
 1 file changed, 99 insertions(+), 129 deletions(-)

diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index c9811fcd50..5bccc55f01 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -1,7 +1,6 @@
 <script setup>
-import { onMounted, ref, computed, onUnmounted, watch } from 'vue';
+import { onMounted, ref, reactive, computed, onUnmounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
@@ -51,11 +50,11 @@ const exprBuilder = (param, value) => {
     }
 };
 
-const filterParams = ref({});
+const params = reactive({});
 
 const arrayData = useArrayData('ItemFixedPrices', {
     url: 'FixedPrices/filter',
-    userParams: filterParams,
+    userParams: params,
     order: ['itemFk'],
     exprBuilder: exprBuilder,
 });
@@ -66,17 +65,23 @@ watch(
     (value) => (fixedPrices.value = value)
 );
 
-// const params = reactive({});
+const applyColumnFilter = async (col) => {
+    try {
+        const paramKey = col.columnFilter?.filterParamKey || col.field;
+        params[paramKey] = col.columnFilter.filterValue;
+        await arrayData.addFilter({ params });
+    } catch (err) {
+        console.error('Error applying column filter', err);
+    }
+};
 
-// const applyColumnFilter = async (col) => {
-//     try {
-//         const paramKey = col.columnFilter?.filterParamKey || col.field;
-//         params[paramKey] = col.columnFilter.filterValue;
-//         await paginateRef.value.addFilter(null, params);
-//     } catch (err) {
-//         console.error('Error applying column filter', err);
-//     }
-// };
+const getColumnInputEvents = (col) => {
+    return col.columnFilter.type === 'select'
+        ? { 'update:modelValue': () => applyColumnFilter(col) }
+        : {
+              'keyup.enter': () => applyColumnFilter(col),
+          };
+};
 
 const columns = computed(() => [
     {
@@ -85,15 +90,15 @@ const columns = computed(() => [
         field: 'itemFk',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getColumnInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getColumnInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('globals.description'),
@@ -101,15 +106,15 @@ const columns = computed(() => [
         name: 'description',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getColumnInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getColumnInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('item.fixedPrice.groupingPrice'),
@@ -117,15 +122,15 @@ const columns = computed(() => [
         name: 'groupingPrice',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getColumnInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getColumnInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => toCurrency(val),
     },
     {
@@ -134,15 +139,15 @@ const columns = computed(() => [
         name: 'packingPrice',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getColumnInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getColumnInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => dashIfEmpty(val),
     },
 
@@ -152,15 +157,15 @@ const columns = computed(() => [
         name: 'minPrice',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getColumnInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getColumnInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('item.fixedPrice.started'),
@@ -168,15 +173,7 @@ const columns = computed(() => [
         name: 'started',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getColumnInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: null,
     },
     {
         label: t('item.fixedPrice.ended'),
@@ -184,39 +181,27 @@ const columns = computed(() => [
         name: 'ended',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnSelectFilter,
-        //     filterParamKey: 'typeFk',
-        //     type: 'select',
-        //     filterValue: null,
-        //     event: getColumnInputEvents,
-        //     attrs: {
-        //         options: itemTypesOptions.value,
-        //         'option-value': 'id',
-        //         'option-label': 'name',
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: null,
     },
 
     {
         label: t('item.fixedPrice.warehouse'),
-        field: 'warehouse',
+        field: 'warehouseFk',
         name: 'warehouse',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnSelectFilter,
-        //     type: 'select',
-        //     filterValue: null,
-        //     event: getColumnInputEvents,
-        //     attrs: {
-        //         options: itemCategoriesOptions.value,
-        //         'option-value': 'name',
-        //         'option-label': 'name',
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: {
+            component: VnSelectFilter,
+            type: 'select',
+            filterValue: null,
+            event: getColumnInputEvents,
+            attrs: {
+                options: warehousesOptions.value,
+                'option-value': 'id',
+                'option-label': 'name',
+                dense: true,
+            },
+        },
     },
     { name: 'deleteAction', align: 'center' },
 ]);
@@ -292,14 +277,6 @@ const getRowUpdateInputEvents = (props, resetMinPrice, inputType = 'text') => {
         : { 'update:modelValue': () => upsertPrice(props, resetMinPrice) };
 };
 
-// const getColumnInputEvents = (col) => {
-//     return col.columnFilter.type === 'select'
-//         ? { 'update:modelValue': () => applyColumnFilter(col) }
-//         : {
-//               'keyup.enter': () => applyColumnFilter(col),
-//           };
-// };
-
 const validations = (row, rowIndex, col) => {
     const isNew = !row.id;
     // Si la row no tiene id significa que fue agregada con addRow y no se ha guardado en la base de datos
@@ -399,7 +376,7 @@ const updateMinPrice = async (value, props) => {
 
 onMounted(async () => {
     stateStore.rightDrawer = true;
-    filterParams.value = { warehouseFk: user.value.warehouseFk };
+    params.warehouseFk = user.value.warehouseFk;
     const { data } = await arrayData.fetch({ append: false });
     onFixedPricesFetched(data);
 });
@@ -408,14 +385,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 </script>
 
 <template>
-    <FetchData
-        ref="fixedPricesFetchRef"
-        url="FixedPrices/filter"
-        :filter="{ order: ['itemFk'] }"
-        :params="{ warehouseFk: user.warehouseFk }"
-        auto-load
-        @on-fetch="(data) => onFixedPricesFetched(data)"
-    />
     <FetchData
         url="Warehouses"
         :filter="{ order: ['name'] }"
@@ -464,24 +433,25 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             class="full-width q-mt-md"
             :no-data-label="t('globals.noResults')"
         >
-            <!-- <template #top-row="{ cols }">
-                        <QTr>
-                            <QTd
-                                v-for="(col, index) in cols"
-                                :key="index"
-                                style="max-width: 100px"
-                            >
-                                <component
-                                    :is="col.columnFilter.component"
-                                    v-if="col.columnFilter"
-                                    v-model="col.columnFilter.filterValue"
-                                    v-bind="col.columnFilter.attrs"
-                                    v-on="col.columnFilter.event(col)"
-                                    dense
-                                />
-                            </QTd>
-                        </QTr>
-                    </template> -->
+            <template #top-row="{ cols }">
+                <QTr>
+                    <QTd />
+                    <QTd
+                        v-for="(col, index) in cols"
+                        :key="index"
+                        style="max-width: 100px"
+                    >
+                        <component
+                            :is="col.columnFilter.component"
+                            v-if="col.columnFilter"
+                            v-model="col.columnFilter.filterValue"
+                            v-bind="col.columnFilter.attrs"
+                            v-on="col.columnFilter.event(col)"
+                            dense
+                        />
+                    </QTd>
+                </QTr>
+            </template>
 
             <template #body-cell-itemId="props">
                 <QTd>