salix-front-mindshore-fork2/src/pages/Monitor/SalesClientsTable.vue

<script setup>
import { ref, computed, reactive, watch } 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';

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 = reactive({
    where: {
        'v.stamp': {
            between: dateRange.value,
        },
    },
});

const refetch = async () => await paginateRef.value.fetch();

watch(dateRange, (val) => {
    filter.where['v.stamp'].between = val;
    refetch();
});

function exprBuilder(param, value) {
    switch (param) {
        case 'clientFk':
            return { [`c.id`]: value };
        case 'salesPersonFk':
            return { [`c.${param}`]: value };
    }
}

const params = reactive({});

const columns = computed(() => [
    {
        label: t('salesClientsTable.date'),
        name: 'dated',
        field: 'dated',
        align: 'left',
        columnFilter: null,
        sortable: true,
        format: (row) => toDateFormat(row.dated),
    },
    {
        label: t('salesClientsTable.hour'),
        name: 'hour',
        field: 'hour',
        align: 'left',
        sortable: true,
    },
    {
        label: t('salesClientsTable.salesPerson'),
        name: 'salesPerson',
        field: 'salesPerson',
        align: 'left',
        sortable: true,
        columnField: {
            component: null,
        },
    },
    {
        label: t('salesClientsTable.client'),
        field: 'clientName',
        name: 'client',
        align: 'left',
        sortable: true,
        columnField: {
            component: null,
        },
    },
]);
</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>
    </QCard>
</template>