142 lines
4.0 KiB
Vue
142 lines
4.0 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
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';
|
|
import { dateRange } from 'src/filters';
|
|
const { t } = useI18n();
|
|
|
|
const dates = dateRange(Date.vnNew());
|
|
const from = ref(dates[0]);
|
|
const to = ref(dates[1]);
|
|
|
|
const filter = computed(() => {
|
|
const obj = {};
|
|
const formatFrom = setHours(from.value, 'from');
|
|
const formatTo = setHours(to.value, 'to');
|
|
let stamp;
|
|
|
|
if (!formatFrom && formatTo) stamp = { lte: formatTo };
|
|
else if (formatFrom && !formatTo) stamp = { gte: formatFrom };
|
|
else if (formatFrom && formatTo) stamp = { between: [formatFrom, formatTo] };
|
|
|
|
return Object.assign(obj, { where: { 'v.stamp': stamp } });
|
|
});
|
|
|
|
function exprBuilder(param, value) {
|
|
switch (param) {
|
|
case 'clientFk':
|
|
return { [`c.id`]: value };
|
|
case 'departmentFk':
|
|
return { [`c.${param}`]: value };
|
|
}
|
|
}
|
|
|
|
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(() => [
|
|
{
|
|
label: t('salesClientsTable.date'),
|
|
name: 'dated',
|
|
field: 'dated',
|
|
align: 'left',
|
|
columnFilter: false,
|
|
format: (row) => toDateFormat(row.dated, 'es-ES', { year: '2-digit' }),
|
|
},
|
|
{
|
|
label: t('salesClientsTable.hour'),
|
|
name: 'hour',
|
|
field: 'hour',
|
|
align: 'left',
|
|
columnFilter: false,
|
|
},
|
|
{
|
|
align: 'left',
|
|
name: 'departmentFk',
|
|
label: t('customer.summary.team'),
|
|
component: 'select',
|
|
attrs: {
|
|
url: 'Departments',
|
|
},
|
|
columnField: {
|
|
component: null,
|
|
},
|
|
format: (row, dashIfEmpty) => dashIfEmpty(row.departmentName),
|
|
},
|
|
{
|
|
label: t('salesClientsTable.client'),
|
|
field: 'clientName',
|
|
name: 'clientFk',
|
|
align: 'left',
|
|
columnField: {
|
|
component: null,
|
|
},
|
|
orderBy: 'c.name',
|
|
columnFilter: {
|
|
component: 'select',
|
|
attrs: {
|
|
url: 'Clients',
|
|
fields: ['id', 'name'],
|
|
sortBy: 'name ASC',
|
|
},
|
|
},
|
|
columnClass: 'no-padding',
|
|
},
|
|
]);
|
|
</script>
|
|
|
|
<template>
|
|
<VnTable
|
|
ref="table"
|
|
data-key="SalesMonitorClients"
|
|
url="SalesMonitors/clientsFilter"
|
|
search-url="SalesMonitorClients"
|
|
:order="['dated DESC', 'hour DESC']"
|
|
:expr-builder="exprBuilder"
|
|
:filter="filter"
|
|
:offset="50"
|
|
auto-load
|
|
:columns="columns"
|
|
:right-search="false"
|
|
default-mode="table"
|
|
:disable-option="{ card: true }"
|
|
dense
|
|
class="q-px-none"
|
|
>
|
|
<template #top-left>
|
|
<VnRow>
|
|
<VnInputDate v-model="from" :label="$t('globals.from')" dense />
|
|
<VnInputDate v-model="to" :label="$t('globals.to')" dense />
|
|
</VnRow>
|
|
</template>
|
|
<template #column-departmentFk="{ row }">
|
|
<span class="link" :title="row.department" v-text="row.department" />
|
|
<WorkerDescriptorProxy :id="row.departmentFk" dense />
|
|
</template>
|
|
<template #column-clientFk="{ row }">
|
|
<span class="link" :title="row.clientName" v-text="row.clientName" />
|
|
<CustomerDescriptorProxy :id="row.clientFk" />
|
|
</template>
|
|
</VnTable>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.full-width .vn-row {
|
|
margin-bottom: 0;
|
|
flex-direction: row;
|
|
> * {
|
|
max-width: 125px;
|
|
}
|
|
}
|
|
</style>
|