fix: refs #7353 salesClientTable

src/pages/Monitor/SalesClientsTable.vue

@@ -1,44 +1,33 @@
 <script setup>
-import { ref, computed, reactive, watch } from 'vue';
+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 { toDateFormat } from 'src/filters/date.js';
 import VnTable from 'src/components/VnTable/VnTable.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 
 const { t } = useI18n();
 
-const paginateRef = ref(null);
-const workersActiveOptions = ref([]);
-const clientsOptions = ref([]);
-
 const from = ref(Date.vnNew());
 const to = ref(Date.vnNew());
 
-const dateRange = computed(() => {
-    const minHour = new Date(from.value);
-    minHour.setHours(0, 0, 0, 0);
-    const maxHour = new Date(to.value);
-    maxHour.setHours(23, 59, 59, 59);
-    return [minHour, maxHour];
-});
+const filter = computed(() => {
+    const obj = {};
+    const formatFrom = setHours(from.value, 'from');
+    const formatTo = setHours(to.value, 'to');
 
-const filter = reactive({
-    where: {
-        'v.stamp': {
-            between: dateRange.value,
-        },
-    },
-});
+    if (!formatFrom && formatTo)
+        Object.assign(obj, { where: { 'v.stamp': { lte: formatTo } } });
+    else if (formatFrom && !formatTo)
+        Object.assign(obj, { where: { 'v.stamp': { gte: formatFrom } } });
+    else if (formatFrom && formatTo)
+        Object.assign(obj, {
+            where: { 'v.stamp': { between: [formatFrom, formatTo] } },
+        });
 
-const refetch = async () => await paginateRef.value.fetch();
-
-watch(dateRange, (val) => {
-    filter.where['v.stamp'].between = val;
-    refetch();
+    return obj;
 });
 
 function exprBuilder(param, value) {
@@ -50,7 +39,14 @@ function exprBuilder(param, value) {
     }
 }
 
-const params = reactive({});
+function setHours(date, type) {
+    if (!date) return null;
+
+    const d = new Date(date);
+    if (type == 'from') d.setHours(0, 0, 0, 0);
+    else d.setHours(23, 59, 59, 59);
+    return d;
+}
 
 const columns = computed(() => [
     {
@@ -58,8 +54,7 @@ const columns = computed(() => [
         name: 'dated',
         field: 'dated',
         align: 'left',
-        columnFilter: null,
-        sortable: true,
+        columnFilter: false,
         format: (row) => toDateFormat(row.dated),
     },
     {
@@ -67,81 +62,88 @@ const columns = computed(() => [
         name: 'hour',
         field: 'hour',
         align: 'left',
-        sortable: true,
+        columnFilter: false,
     },
     {
         label: t('salesClientsTable.salesPerson'),
-        name: 'salesPerson',
+        name: 'salesPersonFk',
         field: 'salesPerson',
         align: 'left',
-        sortable: true,
         columnField: {
             component: null,
         },
+        optionFilter: 'firstName',
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Workers/activeWithInheritedRole',
+                fields: ['id', 'name'],
+                sortBy: 'nickname ASC',
+                where: { role: 'salesPerson' },
+                useLike: false,
+            },
+        },
     },
     {
         label: t('salesClientsTable.client'),
         field: 'clientName',
-        name: 'client',
+        name: 'clientFk',
         align: 'left',
-        sortable: true,
         columnField: {
             component: null,
         },
+        orderBy: 'c.name',
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Clients',
+                fields: ['id', 'name'],
+                sortBy: 'name ASC',
+            },
+        },
     },
 ]);
 </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)"
-    />
     <QCard style="max-height: 380px; overflow-y: scroll">
-        <VnTable
-            ref="paginateRef"
-            data-key="SalesMonitorClients"
-            url="SalesMonitors/clientsFilter"
-            :order="['dated DESC', 'hour DESC']"
-            :limit="6"
-            :expr-builder="exprBuilder"
-            :user-params="params"
-            :filter="filter"
-            :offset="50"
-            auto-load
-            :columns="columns"
-            :right-search="false"
-            default-mode="table"
-            dense
-            :without-header="true"
-        >
-            <template #column-salesPerson="{ row }">
-                <QTd>
-                    <span class="link">{{ row.salesPerson }}</span>
-                    <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
-                </QTd>
-            </template>
-            <template #column-client="{ row }">
-                <QTd>
-                    <span class="link">{{ row.clientName }}</span>
-                    <CustomerDescriptorProxy :id="row.clientFk" />
-                </QTd>
-            </template>
-        </VnTable>
+        <QCardSection>
+            <VnRow>
+                <VnInputDate v-model="from" label="From" dense style="flex: 0.25" />
+                <VnInputDate v-model="to" label="To" dense style="flex: 0.25" />
+            </VnRow>
+        </QCardSection>
+        <QCardSection>
+            <VnTable
+                ref="table"
+                data-key="SalesMonitorClients"
+                url="SalesMonitors/clientsFilter"
+                search-url="SalesMonitorClients"
+                :order="['dated DESC', 'hour DESC']"
+                :limit="6"
+                :expr-builder="exprBuilder"
+                :filter="filter"
+                :offset="50"
+                auto-load
+                :columns="columns"
+                :right-search="false"
+                default-mode="table"
+                dense
+                :without-header="true"
+            >
+                <template #column-salesPersonFk="{ row }">
+                    <QTd>
+                        <span class="link">{{ row.salesPerson }}</span>
+                        <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
+                    </QTd>
+                </template>
+                <template #column-clientFk="{ row }">
+                    <QTd>
+                        <span class="link">{{ row.clientName }}</span>
+                        <CustomerDescriptorProxy :id="row.clientFk" />
+                    </QTd>
+                </template>
+            </VnTable>
+        </QCardSection>
     </QCard>
 </template>

src/pages/Monitor/SalesOrdersTable.vue

@@ -129,6 +129,7 @@ const redirectToOrderSummary = (orderId) => {
             ref="paginateRef"
             data-key="SalesMonitorOrders"
             url="SalesMonitors/ordersFilter"
+            search-url="SalesMonitorOrders"
             order="date_make DESC"
             :limit="6"
             :right-search="false"

src/pages/Monitor/SalesTicketsTable.vue

@@ -430,6 +430,7 @@ const redirectToSales = (id) => {
         ref="paginateRef"
         data-key="SalesMonitorTickets"
         url="SalesMonitors/salesFilter"
+        search-url="SalesMonitorTickets"
         :filter="filter"
         :limit="20"
         :expr-builder="exprBuilder"