From e51ea9996b5bb8fb797ec1085313cd24b69bbea3 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 9 Apr 2024 08:18:18 -0300
Subject: [PATCH] Item list view

---
 src/components/ui/VnPaginate.vue |   7 +-
 src/composables/useArrayData.js  |   2 +
 src/i18n/en/index.js             |   2 +
 src/i18n/es/index.js             |   2 +
 src/pages/Item/ItemCreate.vue    |   1 +
 src/pages/Item/ItemList.vue      | 443 +++++++++++++++----------------
 src/router/modules/item.js       |   8 +
 7 files changed, 239 insertions(+), 226 deletions(-)
 create mode 100644 src/pages/Item/ItemCreate.vue

diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index d1b2f5ccb..fc81c82b1 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -61,7 +61,6 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['onFetch', 'onPaginate']);
-defineExpose({ fetch });
 const isLoading = ref(false);
 const pagination = ref({
     sortBy: props.order,
@@ -91,6 +90,10 @@ watch(
     }
 );
 
+const addFilter = async (filter, params) => {
+    await arrayData.addFilter({ filter, params });
+};
+
 async function fetch() {
     await arrayData.fetch({ append: false });
     if (!arrayData.hasMoreData.value) {
@@ -140,6 +143,8 @@ async function onLoad(index, done) {
     if (store.userParamsChanged) isDone = !arrayData.hasMoreData.value;
     done(isDone);
 }
+
+defineExpose({ fetch, addFilter });
 </script>
 
 <template>
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index b6b81f2d5..74228d8dc 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -145,6 +145,8 @@ export function useArrayData(key, userOptions) {
         store.userParams = userParams;
         store.skip = 0;
         store.filter.skip = 0;
+        page.value = 1;
+
         await fetch({ append: false });
         return { filter, params };
     }
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 710b1d5bf..59082422a 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -1208,6 +1208,7 @@ export default {
             list: 'List',
             diary: 'Diary',
             tags: 'Tags',
+            create: 'Create',
         },
         descriptor: {
             item: 'Item',
@@ -1229,6 +1230,7 @@ export default {
             category: 'Category',
             type: 'Type',
             intrastat: 'Intrastat',
+            isActive: 'Active',
             size: 'Size',
             origin: 'Origin',
             userName: 'Buyer',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 3a5da882d..16b2e9394 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -1207,6 +1207,7 @@ export default {
             list: 'Listado',
             diary: 'Histórico',
             tags: 'Etiquetas',
+            create: 'Crear',
         },
         descriptor: {
             item: 'Artículo',
@@ -1228,6 +1229,7 @@ export default {
             category: 'Reino',
             type: 'Tipo',
             intrastat: 'Intrastat',
+            isActive: 'Activo',
             size: 'Medida',
             origin: 'Origen',
             weightByPiece: 'Peso (gramos)/tallo',
diff --git a/src/pages/Item/ItemCreate.vue b/src/pages/Item/ItemCreate.vue
new file mode 100644
index 000000000..e20f67ac3
--- /dev/null
+++ b/src/pages/Item/ItemCreate.vue
@@ -0,0 +1 @@
+<template>Item create view</template>
diff --git a/src/pages/Item/ItemList.vue b/src/pages/Item/ItemList.vue
index 773cb0771..304145e23 100644
--- a/src/pages/Item/ItemList.vue
+++ b/src/pages/Item/ItemList.vue
@@ -14,10 +14,9 @@ import ItemSummary from '../Item/Card/ItemSummary.vue';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 
 import { useStateStore } from 'stores/useStateStore';
-import { toDate, toCurrency } from 'src/filters';
+import { toDateFormat } from 'src/filters/date.js';
 import { useSession } from 'composables/useSession';
 import { dashIfEmpty } from 'src/filters';
-import { useArrayData } from 'composables/useArrayData';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import axios from 'axios';
@@ -30,11 +29,12 @@ const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 const { openConfirmationModal } = useVnConfirm();
 
+const paginateRef = ref(null);
 const itemTypesOptions = ref([]);
 const originsOptions = ref([]);
-const itemFamiliesOptions = ref([]);
-// const intrastatOptions = ref([]);
-const packagingsOptions = ref([]);
+const buyersOptions = ref([]);
+const intrastatOptions = ref([]);
+const itemCategoriesOptions = ref([]);
 const visibleColumns = ref([]);
 const allColumnNames = ref([]);
 
@@ -71,19 +71,30 @@ const exprBuilder = (param, value) => {
 
 const params = reactive({});
 
-// const getInputEvents = (col) => {
-//     return col.columnFilter.type === 'select'
-//         ? { 'update:modelValue': () => applyColumnFilter(col) }
-//         : {
-//               'keyup.enter': () => applyColumnFilter(col),
-//           };
-// };
+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 getInputEvents = (col) => {
+    return col.columnFilter.type === 'select'
+        ? { 'update:modelValue': () => applyColumnFilter(col) }
+        : {
+              'keyup.enter': () => applyColumnFilter(col),
+          };
+};
 
 const columns = computed(() => [
     {
         label: '',
         name: 'picture',
         align: 'left',
+        columnFilter: null,
     },
     {
         label: t('item.list.id'),
@@ -91,15 +102,15 @@ const columns = computed(() => [
         field: 'id',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('item.list.grouping'),
@@ -107,15 +118,15 @@ const columns = computed(() => [
         name: 'grouping',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => dashIfEmpty(val),
     },
     {
@@ -124,33 +135,32 @@ const columns = computed(() => [
         name: 'packing',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => dashIfEmpty(val),
     },
     {
         label: t('globals.description'),
-        field: 'description',
+        field: 'name',
         name: 'description',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
-        // format: (val) => dashIfEmpty(val),
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('item.list.stems'),
@@ -158,15 +168,15 @@ const columns = computed(() => [
         name: 'stems',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('item.list.size'),
@@ -174,15 +184,15 @@ const columns = computed(() => [
         name: 'size',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('item.list.type'),
@@ -190,18 +200,19 @@ const columns = computed(() => [
         name: 'typeName',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnSelectFilter,
-        //     type: 'select',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         options: itemTypesOptions.value,
-        //         'option-value': 'code',
-        //         'option-label': 'code',
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: {
+            component: VnSelectFilter,
+            filterParamKey: 'typeFk',
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: itemTypesOptions.value,
+                'option-value': 'id',
+                'option-label': 'name',
+                dense: true,
+            },
+        },
     },
 
     {
@@ -210,18 +221,18 @@ const columns = computed(() => [
         name: 'category',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnSelectFilter,
-        //     type: 'select',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         options: intrastatOptions.value,
-        //         'option-value': 'description',
-        //         'option-label': 'description',
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: {
+            component: VnSelectFilter,
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: itemCategoriesOptions.value,
+                'option-value': 'name',
+                'option-label': 'name',
+                dense: true,
+            },
+        },
     },
 
     {
@@ -230,18 +241,18 @@ const columns = computed(() => [
         name: 'intrastat',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnSelectFilter,
-        //     type: 'select',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         options: originsOptions.value,
-        //         'option-value': 'code',
-        //         'option-label': 'code',
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: {
+            component: VnSelectFilter,
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: intrastatOptions.value,
+                'option-value': 'description',
+                'option-label': 'description',
+                dense: true,
+            },
+        },
     },
     {
         label: t('item.list.origin'),
@@ -249,15 +260,18 @@ const columns = computed(() => [
         name: 'origin',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: {
+            component: VnSelectFilter,
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: originsOptions.value,
+                'option-value': 'code',
+                'option-label': 'code',
+                dense: true,
+            },
+        },
     },
     {
         label: t('item.list.userName'),
@@ -265,18 +279,19 @@ const columns = computed(() => [
         name: 'userName',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnSelectFilter,
-        //     type: 'select',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         options: itemFamiliesOptions.value,
-        //         'option-value': 'code',
-        //         'option-label': 'code',
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: {
+            component: VnSelectFilter,
+            filterParamKey: 'buyerFk',
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: buyersOptions.value,
+                'option-value': 'id',
+                'option-label': 'nickname',
+                dense: true,
+            },
+        },
     },
     {
         label: t('item.list.weightByPiece'),
@@ -284,15 +299,15 @@ const columns = computed(() => [
         name: 'weightByPiece',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => dashIfEmpty(val),
     },
     {
@@ -301,32 +316,24 @@ const columns = computed(() => [
         name: 'stemMultiplier',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => dashIfEmpty(val),
     },
     {
-        label: t('entry.latestBuys.isActive'),
+        label: t('item.list.isActive'),
         field: 'isActive',
         name: 'isActive',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: null,
     },
     {
         label: t('item.list.producer'),
@@ -334,15 +341,15 @@ const columns = computed(() => [
         name: 'producer',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => dashIfEmpty(val),
     },
     {
@@ -351,44 +358,27 @@ const columns = computed(() => [
         name: 'landed',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
-        format: (val) => dashIfEmpty(toDate(val)),
+        format: (val) => dashIfEmpty(toDateFormat(val)),
+        columnFilter: null,
     },
     {
         label: '',
         name: 'actions',
         align: 'left',
+        columnFilter: null,
     },
 ]);
 
 const redirectToItemCreate = () => {
-    // router.push({ name: 'EntryBuys', params: { id: entryFk } });
+    router.push({ name: 'ItemCreate' });
 };
 
 const redirectToItemSummary = (id) => {
     router.push({ name: 'ItemSummary', params: { id } });
 };
 
-// const applyColumnFilter = async (col) => {
-//     try {
-//         params[col.field] = col.columnFilter.filterValue;
-//         await arrayData.addFilter({ params });
-//     } catch (err) {
-//         console.error('Error applying column filter', err);
-//     }
-// };
-
 const cloneItem = async (itemFk) => {
     try {
-        console.log('cloneRow: ', itemFk);
         const { data } = await axios.post(`Items/${itemFk}/clone`);
         if (!data) return;
         router.push({ name: 'ItemTags', params: { id: data.id } });
@@ -397,10 +387,6 @@ const cloneItem = async (itemFk) => {
     }
 };
 
-const test = (ev) => {
-    console.log('test: ', ev);
-};
-
 onMounted(async () => {
     stateStore.rightDrawer = true;
     const filteredColumns = columns.value.filter((col) => col.name !== 'picture');
@@ -411,30 +397,37 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 </script>
 
 <template>
-    <!-- <FetchData
+    <FetchData
         url="ItemTypes"
-        :filter="{ fields: ['code'], order: 'code ASC', limit: 30 }"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
         auto-load
         @on-fetch="(data) => (itemTypesOptions = data)"
-    /> -->
-    <!-- <FetchData
+    />
+    <FetchData
+        url="ItemCategories"
+        :filter="{ fields: ['name'], order: 'name ASC' }"
+        auto-load
+        @on-fetch="(data) => (itemCategoriesOptions = data)"
+    />
+    <FetchData
+        url="Intrastats"
+        :filter="{ fields: ['description'], order: 'description ASC' }"
+        auto-load
+        @on-fetch="(data) => (intrastatOptions = data)"
+    />
+    <FetchData
         url="Origins"
-        :filter="{ fields: ['code'], order: 'code ASC', limit: 30 }"
+        :filter="{ fields: ['code'], order: 'code ASC' }"
         auto-load
         @on-fetch="(data) => (originsOptions = data)"
-    /> -->
-    <!-- <FetchData
-        url="ItemFamilies"
-        :filter="{ fields: ['code'], order: 'code ASC', limit: 30 }"
+    />
+    <FetchData
+        url="TicketRequests/getItemTypeWorker"
+        :filter="{ fields: ['id', 'nickname'], order: 'nickname ASC' }"
         auto-load
-        @on-fetch="(data) => (itemFamiliesOptions = data)"
-    /> -->
-    <!-- <FetchData
-        url="Packagings"
-        :filter="{ fields: ['id'], order: 'id ASC', limit: 30 }"
-        auto-load
-        @on-fetch="(data) => (packagingsOptions = data)"
-    /> -->
+        @on-fetch="(data) => (buyersOptions = data)"
+    />
+
     <QToolbar class="bg-vn-dark justify-end">
         <div id="st-data">
             <TableVisibleColumns
@@ -449,10 +442,13 @@ onUnmounted(() => (stateStore.rightDrawer = false));
     </QToolbar>
     <QPage class="column items-center q-pa-md">
         <VnPaginate
+            ref="paginateRef"
             data-key="ItemList"
             url="Items/filter"
             :order="['isActive DESC', 'name', 'id']"
             :limit="12"
+            :expr-builder="exprBuilder"
+            :user-params="params"
             :offset="50"
             auto-load
         >
@@ -465,29 +461,26 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     class="full-width q-mt-md"
                     :visible-columns="visibleColumns"
                     :no-data-label="t('globals.noResults')"
-                    virtual-scroll
-                    @virtual-scroll="test"
                     @row-click="(_, row) => redirectToItemSummary(row.id)"
                 >
-                    <!-- <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.name !== 'picture'"
-                            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
+                                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-picture="{ row }">
                         <QTd>
                             <QImg
diff --git a/src/router/modules/item.js b/src/router/modules/item.js
index 700278617..d16022f79 100644
--- a/src/router/modules/item.js
+++ b/src/router/modules/item.js
@@ -29,6 +29,14 @@ export default {
                     },
                     component: () => import('src/pages/Item/ItemList.vue'),
                 },
+                {
+                    path: 'create',
+                    name: 'ItemCreate',
+                    meta: {
+                        title: 'create',
+                    },
+                    component: () => import('src/pages/Item/ItemCreate.vue'),
+                },
             ],
         },
         {