Sales monitor base

src/i18n/locale/en.yml

@@ -1235,6 +1235,10 @@ zone:
         zonesList: Zones
         deliveryList: Delivery days
         upcomingList: Upcoming deliveries
+monitor:
+    pageTitles:
+        monitors: Monitors
+        salesMonitor: Sales monitor
 components:
     topbar: {}
     itemsFilterPanel:

src/i18n/locale/es.yml

@@ -1234,6 +1234,10 @@ zone:
         zonesList: Zonas
         deliveryList: Días de entrega
         upcomingList: Próximos repartos
+monitors:
+    pageTitles:
+        monitors: Monitores
+        salesMonitor: Monitor de ventas
 components:
     topbar: {}
     itemsFilterPanel:

src/pages/Monitor/MonitorMain.vue

@@ -0,0 +1,18 @@
+<script setup>
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+
+const stateStore = useStateStore();
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit text-grey-8">
+            <LeftMenu />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <RouterView></RouterView>
+    </QPageContainer>
+</template>

src/pages/Monitor/SalesMonitor.vue

@@ -0,0 +1,270 @@
+<script setup>
+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 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 WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import VnPaginate from 'components/ui/VnPaginate.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+// import { toDateFormat } from 'src/filters/date.js';
+import { useSession } from 'composables/useSession';
+import { dashIfEmpty } from 'src/filters';
+// import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+// import { useVnConfirm } from 'composables/useVnConfirm';
+import axios from 'axios';
+
+const router = useRouter();
+const { getTokenMultimedia } = useSession();
+const token = getTokenMultimedia();
+const stateStore = useStateStore();
+const { t } = useI18n();
+// const { viewSummary } = useSummaryDialog();
+// const { openConfirmationModal } = useVnConfirm();
+
+const paginateRef = ref(null);
+const itemTypesOptions = ref([]);
+const originsOptions = ref([]);
+const buyersOptions = ref([]);
+const intrastatOptions = ref([]);
+const itemCategoriesOptions = ref([]);
+const visibleColumns = ref([]);
+const allColumnNames = ref([]);
+
+// const exprBuilder = (param, value) => {
+//     switch (param) {
+//         case 'category':
+//             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,
+        // columnFilter: {
+        //     component: VnInput,
+        //     type: 'text',
+        //     filterValue: null,
+        //     event: getInputEvents,
+        //     attrs: {
+        //         dense: true,
+        //     },
+        // },
+    },
+    {
+        label: t('item.list.grouping'),
+        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),
+    },
+]);
+
+const redirectToItemCreate = () => {
+    // router.push({ name: 'ItemCreate' });
+};
+
+const redirectToItemSummary = (id) => {
+    router.push({ name: 'ItemSummary', params: { id } });
+};
+
+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
+        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)"
+    />
+
+    <QToolbar class="bg-vn-dark justify-end">
+        <div id="st-data">
+            <TableVisibleColumns
+                :all-columns="allColumnNames"
+                table-code="itemsIndex"
+                labels-traductions-path="item.list"
+                @on-config-saved="visibleColumns = ['picture', ...$event, 'actions']"
+            />
+        </div>
+        <QSpace />
+        <div id="st-actions"></div>
+    </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
+        >
+            <template #body="{ rows }">
+                <QTable
+                    :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>
+                            <QImg
+                                :src="`/api/Images/catalog/50x50/${row.id}/download?access_token=${token}`"
+                                spinner-color="primary"
+                                :ratio="1"
+                                height="50px"
+                                width="50px"
+                                class="image"
+                            />
+                        </QTd>
+                    </template>
+                </QTable>
+            </template>
+        </VnPaginate>
+    </QPage>
+</template>

src/router/modules/index.js

@@ -18,6 +18,7 @@ import Parking from './parking';
 import Agency from './agency';
 import ItemType from './itemType';
 import Zone from './zone';
+import Monitor from './monitor';
 
 export default [
     Item,
@@ -40,4 +41,5 @@ export default [
     Agency,
     ItemType,
     Zone,
+    Monitor,
 ];

src/router/modules/monitor.js

@@ -0,0 +1,42 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/monitor',
+    name: 'Monitor',
+    meta: {
+        title: 'monitors',
+        icon: 'vn:grid',
+        moduleName: 'Monitor',
+    },
+    component: RouterView,
+    redirect: { name: 'MonitorMain' },
+    menus: {
+        main: ['SalesMonitor'],
+        card: [],
+    },
+    children: [
+        {
+            path: '',
+            name: 'MonitorMain',
+            component: () => import('src/pages/Monitor/MonitorMain.vue'),
+            redirect: { name: 'SalesMonitor' },
+            children: [
+                {
+                    path: 'index',
+                    name: 'SalesMonitor',
+                    meta: {
+                        title: 'salesMonitor',
+                        icon: 'vn:grid',
+                    },
+                    component: () => import('src/pages/Monitor/SalesMonitor.vue'),
+                },
+            ],
+        },
+        // {
+        //     name: 'ItemCard',
+        //     path: ':id',
+        //     component: () => import('src/pages/Item/Card/ItemCard.vue'),
+        //     children: [],
+        // },
+    ],
+};

src/router/routes.js

@@ -18,6 +18,7 @@ import roadmap from 'src/router/modules/roadmap';
 import parking from 'src/router/modules/parking';
 import agency from 'src/router/modules/agency';
 import zone from 'src/router/modules/zone';
+import monitor from 'src/router/modules/monitor';
 
 const routes = [
     {
@@ -65,6 +66,7 @@ const routes = [
             shelving,
             invoiceOut,
             invoiceIn,
+            monitor,
             wagon,
             order,
             route,

src/stores/useNavigationStore.js

@@ -15,6 +15,7 @@ export const useNavigationStore = defineStore('navigationStore', () => {
         'travel',
         'invoiceOut',
         'invoiceIn',
+        'monitor',
         'supplier',
         'claim',
         'route',
@@ -31,7 +32,6 @@ export const useNavigationStore = defineStore('navigationStore', () => {
         for (const module of modules) {
             const moduleDef = routes.find((route) => toLowerCamel(route.name) === module);
             if (!moduleDef) continue;
-
             const item = addMenuItem(module, moduleDef, modulesRoutes.value);
             if (!item) continue;