From bd9aea767a45eda8098dce7f61345586508fdd96 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 16 Aug 2024 18:10:10 +0200
Subject: [PATCH] fix: refs #7353 salesorderTable
---
src/pages/Monitor/SalesOrdersTable.vue | 113 +++++++++++--------------
1 file changed, 49 insertions(+), 64 deletions(-)
diff --git a/src/pages/Monitor/SalesOrdersTable.vue b/src/pages/Monitor/SalesOrdersTable.vue
index 74383e9a4..496d5134c 100644
--- a/src/pages/Monitor/SalesOrdersTable.vue
+++ b/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>