fix: refs #7353 salesorderTable

src/pages/Monitor/SalesOrdersTable.vue

@@ -1,11 +1,8 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-
-import FetchData from 'components/FetchData.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnTable from 'components/VnTable/VnTable.vue';
 
 import { toDateFormat, toDateTimeFormat } from 'src/filters/date.js';
@@ -16,32 +13,15 @@ import axios from 'axios';
 const { t } = useI18n();
 const { openConfirmationModal } = useVnConfirm();
 
-const paginateRef = ref(null);
-const workersActiveOptions = ref([]);
-const clientsOptions = ref([]);
+const table = ref();
 const selectedRows = ref([]);
 
-const dateRange = (value) => {
-    const minHour = new Date(value);
-    minHour.setHours(0, 0, 0, 0);
-    const maxHour = new Date(value);
-    maxHour.setHours(23, 59, 59, 59);
-
-    return [minHour, maxHour];
-};
-
 function exprBuilder(param, value) {
     switch (param) {
-        case 'date_send':
-            return {
-                [`o.date_send`]: {
-                    between: dateRange(value),
-                },
-            };
         case 'clientFk':
             return { [`c.id`]: value };
         case 'salesPersonFk':
-            return { [`c.${param}`]: value };
+            return { [`c.salesPersonFk`]: value };
     }
 }
 
@@ -51,22 +31,37 @@ const columns = computed(() => [
         name: 'date',
         field: 'dated',
         align: 'left',
-        sortable: true,
-        cardVisible: true,
+        orderBy: 'date_send',
+        columnFilter: false,
     },
     {
         label: t('salesOrdersTable.client'),
-        name: 'client',
+        name: 'clientFk',
         align: 'left',
-        sortable: true,
-        cardVisible: true,
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Clients',
+                fields: ['id', 'name'],
+                sortBy: 'name ASC',
+            },
+        },
     },
     {
         label: t('salesOrdersTable.salesPerson'),
-        name: 'salesPerson',
+        name: 'salesPersonFk',
         align: 'left',
-        sortable: true,
-        cardVisible: true,
+        optionFilter: 'firstName',
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Workers/activeWithInheritedRole',
+                fields: ['id', 'name'],
+                sortBy: 'nickname ASC',
+                where: { role: 'salesPerson' },
+                useLike: false,
+            },
+        },
     },
 ]);
 
@@ -90,47 +85,23 @@ const removeOrders = async () => {
         const params = { deletes: selectedIds };
         await axios.post('SalesMonitors/deleteOrders', params);
         selectedRows.value = [];
-        await paginateRef.value.fetch();
+        await table.value.reload();
     } catch (err) {
         console.error('Error deleting orders', err);
     }
 };
 
-const redirectToOrderSummary = (orderId) => {
-    const url = `#/order/${orderId}/summary`;
-    window.open(url, '_blank');
-};
+const openTab = (id) =>
+    window.open(`#/order/${id}/summary`, '_blank', 'noopener, noreferrer');
 </script>
-
 <template>
-    <FetchData
-        url="Workers/activeWithInheritedRole"
-        :filter="{
-            fields: ['id', 'nickname'],
-            order: 'nickname ASC',
-            where: { role: 'salesPerson' },
-        }"
-        auto-load
-        @on-fetch="(data) => (workersActiveOptions = data)"
-    />
-    <FetchData
-        url="Clients"
-        :filter="{
-            fields: ['id', 'name'],
-            order: 'name ASC',
-        }"
-        auto-load
-        @on-fetch="(data) => (clientsOptions = data)"
-    />
-
-    <VnSubToolbar />
     <QCard style="max-height: 380px; overflow-y: scroll">
         <VnTable
-            ref="paginateRef"
+            ref="table"
             data-key="SalesMonitorOrders"
             url="SalesMonitors/ordersFilter"
             search-url="SalesMonitorOrders"
-            order="date_make DESC"
+            order="date_send DESC"
             :limit="6"
             :right-search="false"
             :expr-builder="exprBuilder"
@@ -142,15 +113,25 @@ const redirectToOrderSummary = (orderId) => {
                 'hide-bottom': true,
             }"
             default-mode="table"
-            :without-header="false"
-            @row-click="(_, row) => redirectToOrderSummary(row.id)"
+            :row-click="({ id }) => openTab(id)"
             v-model:selected="selectedRows"
+            :disable-option="{ card: true }"
         >
             <template #top-left>
                 <QBtn
-                    v-if="selectedRows.length > 0"
+                    icon="refresh"
+                    size="md"
+                    color="primary"
+                    dense
+                    flat
+                    @click="$refs.table.reload()"
+                />
+                <QBtn
+                    v-if="selectedRows.length"
                     icon="delete"
                     size="md"
+                    dense
+                    flat
                     color="primary"
                     @click="
                         openConfirmationModal(
@@ -176,7 +157,7 @@ const redirectToOrderSummary = (orderId) => {
                     <div>{{ toDateTimeFormat(row.date_make) }}</div>
                 </QTd>
             </template>
-            <template #column-client="{ row }">
+            <template #column-clientFk="{ row }">
                 <QTd>
                     <div class="q-mb-md">
                         <span class="link">{{ row.clientName }}</span>
@@ -186,7 +167,7 @@ const redirectToOrderSummary = (orderId) => {
                 </QTd>
             </template>
 
-            <template #column-salesPerson="{ row }">
+            <template #column-salesPersonFk="{ row }">
                 <QTd>
                     <div class="q-mb-md">
                         <span class="link">{{ row.salesPerson }}</span>
@@ -202,4 +183,8 @@ const redirectToOrderSummary = (orderId) => {
 .q-td {
     color: gray;
 }
+
+:deep(.q-table__container > div:first-child) {
+    background-color: var(--vn-section-color);
+}
 </style>