#7353 fine tunning monitors #624
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue