src/pages/Item/ItemList.vue

@@ -3,114 +3,48 @@ import { onMounted, ref, computed, reactive, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
-import FetchData from 'components/FetchData.vue';
+import VnTable from 'components/VnTable/VnTable.vue';
-import FetchedTags from 'components/ui/FetchedTags.vue';
-import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
-import ItemDescriptorProxy from '../Item/Card/ItemDescriptorProxy.vue';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
-import ItemSummary from '../Item/Card/ItemSummary.vue';
-import VnPaginate from 'components/ui/VnPaginate.vue';
-import ItemListFilter from './ItemListFilter.vue';
-
 import { useStateStore } from 'stores/useStateStore';
 import { toDateFormat } from 'src/filters/date.js';
 import { dashIfEmpty } from 'src/filters';
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import { useVnConfirm } from 'composables/useVnConfirm';
 import axios from 'axios';
-import RightMenu from 'src/components/common/RightMenu.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import VnImg from 'src/components/ui/VnImg.vue';
 
 const router = useRouter();
 const stateStore = useStateStore();
 const { t } = useI18n();
-const { viewSummary } = useSummaryDialog();
+const tableRef = ref();
-const { openConfirmationModal } = useVnConfirm();
 
-const paginateRef = ref(null);
+const itemFilter = {
-const itemTypesOptions = ref([]);
+    include: [
-const originsOptions = ref([]);
+        {
-const buyersOptions = ref([]);
+            relation: 'trainingCourseType',
-const intrastatOptions = ref([]);
+            scope: {
-const itemCategoriesOptions = ref([]);
+                fields: ['id', 'name'],
-const visibleColumns = ref([]);
+            },
-const allColumnNames = ref([]);
+        },
-
+        {
-const exprBuilder = (param, value) => {
+            relation: 'trainingCenter',
-    switch (param) {
+            scope: {
-        case 'category':
+                fields: ['id', 'name'],
-            return { 'ic.name': value };
+            },
-        case 'buyerFk':
+        },
-            return { 'it.workerFk': value };
+    ],
-        case 'grouping':
-            return { 'b.grouping': value };
-        case 'packing':
-            return { 'b.packing': value };
-        case 'origin':
-            return { 'ori.code': value };
-        case 'typeFk':
-            return { 'i.typeFk': value };
-        case 'intrastat':
-            return { 'intr.description': value };
-        case 'name':
-            return { 'i.name': { like: `%${value}%` } };
-        case 'producer':
-            return { 'pr.name': { like: `%${value}%` } };
-        case 'id':
-        case 'size':
-        case 'subname':
-        case 'isActive':
-        case 'weightByPiece':
-        case 'stemMultiplier':
-        case 'stems':
-            return { [`i.${param}`]: value };
-    }
 };
-
-const params = reactive({ isFloramondo: false, isActive: true });
-
-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'),
         name: 'id',
         field: 'id',
         align: 'left',
-        sortable: true,
+        isId: true,
-        columnFilter: {
+        chip: {
-            component: VnInput,
+            condition: () => true,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
         },
     },
     {
@@ -118,101 +52,41 @@ const columns = computed(() => [
         field: 'grouping',
         name: 'grouping',
         align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
-        format: (val) => dashIfEmpty(val),
     },
     {
         label: t('item.list.packing'),
         field: 'packing',
         name: 'packing',
         align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
-        format: (val) => dashIfEmpty(val),
     },
     {
         label: t('globals.description'),
         field: 'name',
         name: 'description',
         align: 'left',
-        sortable: true,
+        create: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
     },
     {
         label: t('item.list.stems'),
         field: 'stems',
         name: 'stems',
         align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
     },
     {
         label: t('item.list.size'),
         field: 'size',
         name: 'size',
         align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
     },
     {
         label: t('item.list.typeName'),
         field: 'typeName',
         name: 'typeName',
         align: 'left',
-        sortable: true,
+        component: 'select',
-        columnFilter: {
+        attrs: {
-            component: VnSelect,
+            url: 'ItemType',
-            filterParamKey: 'typeFk',
+            fields: ['id', 'name'],
-            type: 'select',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                options: itemTypesOptions.value,
-                'option-value': 'id',
-                'option-label': 'name',
-                dense: true,
-            },
         },
     },
 
@@ -221,18 +95,10 @@ const columns = computed(() => [
         field: 'category',
         name: 'category',
         align: 'left',
-        sortable: true,
+        component: 'select',
-        columnFilter: {
+        attrs: {
-            component: VnSelect,
+            url: 'ItemCategory',
-            type: 'select',
+            fields: ['id', 'name'],
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                options: itemCategoriesOptions.value,
-                'option-value': 'name',
-                'option-label': 'name',
-                dense: true,
-            },
         },
     },
 
@@ -241,18 +107,10 @@ const columns = computed(() => [
         field: 'intrastat',
         name: 'intrastat',
         align: 'left',
-        sortable: true,
+        component: 'select',
-        columnFilter: {
+        attrs: {
-            component: VnSelect,
+            url: 'Intrastat',
-            type: 'select',
+            fields: ['id', 'description'],
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                options: intrastatOptions.value,
-                'option-value': 'description',
-                'option-label': 'description',
-                dense: true,
-            },
         },
     },
     {
@@ -260,18 +118,10 @@ const columns = computed(() => [
         field: 'origin',
         name: 'origin',
         align: 'left',
-        sortable: true,
+        component: 'select',
-        columnFilter: {
+        attrs: {
-            component: VnSelect,
+            url: 'Origin',
-            type: 'select',
+            fields: ['id', 'name'],
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                options: originsOptions.value,
-                'option-value': 'code',
-                'option-label': 'code',
-                dense: true,
-            },
         },
     },
     {
@@ -279,36 +129,13 @@ const columns = computed(() => [
         field: 'userName',
         name: 'userName',
         align: 'left',
-        sortable: true,
-        columnFilter: {
-            component: VnSelect,
-            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'),
         field: 'weightByPiece',
         name: 'weightByPiece',
         align: 'left',
-        sortable: true,
+        component: 'input',
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
         format: (val) => dashIfEmpty(val),
     },
     {
@@ -316,16 +143,7 @@ const columns = computed(() => [
         field: 'stemMultiplier',
         name: 'stemMultiplier',
         align: 'left',
-        sortable: true,
+        component: 'input',
-        columnFilter: {
-            component: VnInput,
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
-        },
         format: (val) => dashIfEmpty(val),
     },
     {
@@ -333,40 +151,26 @@ const columns = computed(() => [
         field: 'isActive',
         name: 'isActive',
         align: 'left',
-        sortable: true,
+        component: 'checkbox',
-        columnFilter: null,
     },
     {
         label: t('item.list.producer'),
         field: 'producer',
         name: 'producer',
         align: 'left',
-        sortable: true,
+        component: 'select',
-        columnFilter: {
+        attrs: {
-            component: VnInput,
+            url: 'Producer',
-            type: 'text',
+            fields: ['id', 'name'],
-            filterValue: null,
-            event: getInputEvents,
-            attrs: {
-                dense: true,
-            },
         },
-        format: (val) => dashIfEmpty(val),
     },
     {
         label: t('item.list.landed'),
         field: 'landed',
         name: 'landed',
         align: 'left',
-        sortable: true,
+        component: 'date',
         format: (val) => dashIfEmpty(toDateFormat(val)),
-        columnFilter: null,
-    },
-    {
-        label: '',
-        name: 'actions',
-        align: 'left',
-        columnFilter: null,
     },
 ]);
 
@@ -388,49 +192,11 @@ const cloneItem = async (itemFk) => {
     }
 };
 
-onMounted(async () => {
-    stateStore.rightDrawer = true;
-    const filteredColumns = columns.value.filter(
-        (col) => col.name !== 'picture' && col.name !== 'actions'
-    );
-    allColumnNames.value = filteredColumns.map((col) => col.name);
-});
-
 onUnmounted(() => (stateStore.rightDrawer = false));
 </script>
 
 <template>
-    <FetchData
+    <!-- <VnSubToolbar>
-        url="ItemTypes"
-        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
-        auto-load
-        @on-fetch="(data) => (itemTypesOptions = data)"
-    />
-    <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' }"
-        auto-load
-        @on-fetch="(data) => (originsOptions = data)"
-    />
-    <FetchData
-        url="TicketRequests/getItemTypeWorker"
-        :filter="{ fields: ['id', 'nickname'], order: 'nickname ASC' }"
-        auto-load
-        @on-fetch="(data) => (buyersOptions = data)"
-    />
-    <VnSubToolbar>
         <template #st-data>
             <TableVisibleColumns
                 :all-columns="allColumnNames"
@@ -439,135 +205,28 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 @on-config-saved="visibleColumns = ['picture', ...$event, 'actions']"
             />
         </template>
-    </VnSubToolbar>
+    </VnSubToolbar> -->
-    <RightMenu>
+    <VnTable
-        <template #right-panel>
+        ref="tableRef"
-            <ItemListFilter data-key="ItemList" />
+        data-key="ItemList"
-        </template>
+        url="Items"
-    </RightMenu>
+        url-create="Items"
-    <QPage class="column items-center q-pa-md">
+        save-url="Items/crud"
-        <VnPaginate
+        :create="{
-            ref="paginateRef"
+            urlCreate: 'Items',
-            data-key="ItemList"
+            title: 'Create Item',
-            url="Items/filter"
+            onDataSaved: () => tableRef.redirect(),
-            :order="['isActive DESC', 'name', 'id']"
+            formInitialData: {
-            :limit="12"
+                editorFk: entityId,
-            :expr-builder="exprBuilder"
+            },
-            :user-params="params"
+        }"
-            :keep-opts="['userParams']"
+        order="id ASC"
-            :offset="50"
+        :columns="columns"
-            auto-load
+        auto-load
-        >
+        :right-search="false"
-            <template #body="{ rows }">
+        :is-editable="false"
-                <QTable
+        :use-model="true"
-                    :rows="rows"
+    />
-                    :columns="columns"
-                    row-key="id"
-                    :pagination="{ rowsPerPage: 0 }"
-                    class="full-width q-mt-md"
-                    :visible-columns="visibleColumns"
-                    :no-data-label="t('globals.noResults')"
-                    @row-click="(_, row) => redirectToItemSummary(row.id)"
-                >
-                    <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>
-                            <VnImg
-                                size="50x50"
-                                :id="row.id"
-                                height="50px"
-                                width="50px"
-                                class="image"
-                            />
-                        </QTd>
-                    </template>
-                    <template #body-cell-id="{ row }">
-                        <QTd @click.stop>
-                            <QBtn flat color="primary">
-                                {{ row.id }}
-                            </QBtn>
-                            <ItemDescriptorProxy :id="row.id" />
-                        </QTd>
-                    </template>
-                    <template #body-cell-userName="{ row }">
-                        <QTd @click.stop>
-                            <QBtn flat color="primary" dense>
-                                {{ row.userName }}
-                            </QBtn>
-                            <WorkerDescriptorProxy :id="row.buyerFk" />
-                        </QTd>
-                    </template>
-                    <template #body-cell-description="{ row }">
-                        <QTd class="col">
-                            <span>{{ row.name }} {{ row.subName }}</span>
-                            <FetchedTags :item="row" :max-length="6" />
-                        </QTd>
-                    </template>
-                    <template #body-cell-isActive="{ row }">
-                        <QTd>
-                            <QCheckbox :model-value="!!row.isActive" disable />
-                        </QTd>
-                    </template>
-                    <template #body-cell-actions="{ row }">
-                        <QTd>
-                            <QIcon
-                                @click.stop="
-                                    openConfirmationModal(
-                                        t(`All it's properties will be copied`),
-                                        t('Do you want to clone this item?'),
-                                        () => cloneItem(row.id)
-                                    )
-                                "
-                                class="q-ml-sm"
-                                color="primary"
-                                name="vn:clone"
-                                size="sm"
-                            >
-                                <QTooltip>
-                                    {{ t('globals.clone') }}
-                                </QTooltip>
-                            </QIcon>
-                            <QIcon
-                                @click.stop="viewSummary(row.id, ItemSummary)"
-                                class="q-ml-md"
-                                color="primary"
-                                name="preview"
-                                size="sm"
-                            >
-                                <QTooltip class="text-no-wrap">
-                                    {{ t('Preview') }}
-                                </QTooltip>
-                            </QIcon>
-                        </QTd>
-                    </template>
-                </QTable>
-            </template>
-        </VnPaginate>
-
-        <QPageSticky :offset="[20, 20]">
-            <QBtn @click="redirectToItemCreate()" color="primary" fab icon="add" />
-            <QTooltip class="text-no-wrap">
-                {{ t('New item') }}
-            </QTooltip>
-        </QPageSticky>
-    </QPage>
 </template>
 
 <i18n>