salix-front/src/pages/Monitor/Ticket/MonitorTickets.vue

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import DepartmentDescriptorProxy from 'src/pages/Worker/Department/Card/DepartmentDescriptorProxy.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
import TicketSummary from 'src/pages/Ticket/Card/TicketSummary.vue';
import VnTable from 'components/VnTable/VnTable.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { toCurrency, dateRange, dashIfEmpty } from 'src/filters';
import RightMenu from 'src/components/common/RightMenu.vue';
import MonitorTicketSearchbar from './MonitorTicketSearchbar.vue';
import MonitorTicketFilter from './MonitorTicketFilter.vue';
import TicketProblems from 'src/components/TicketProblems.vue';
import VnDateBadge from 'src/components/common/VnDateBadge.vue';
import { useStateStore } from 'src/stores/useStateStore';
import useOpenURL from 'src/composables/useOpenURL';

const DEFAULT_AUTO_REFRESH = 2 * 60 * 1000;
const { t } = useI18n();
const autoRefresh = ref(false);
const tableRef = ref(null);
const provinceOpts = ref([]);
const stateOpts = ref([]);
const zoneOpts = ref([]);
const DepartmentOpts = ref([]);
const PayMethodOpts = ref([]);
const ItemPackingTypeOpts = ref([]);
const stateStore = useStateStore();
const { viewSummary } = useSummaryDialog();

const [from, to] = dateRange(Date.vnNew());
const stateColors = {
    notice: 'info',
    success: 'positive',
    warning: 'warning',
    alert: 'negative',
};

onMounted(() => {
    stateStore.leftDrawer = false;
    stateStore.rightDrawer = false;
});

function exprBuilder(param, value) {
    switch (param) {
        case 'stateFk':
            return { 'ts.stateFk': value };
        case 'departmentFk':
            return { 'c.departmentFk': !value ? null : value };
        case 'provinceFk':
            return { 'a.provinceFk': value };
        case 'theoreticalHour':
            return { 'z.hour': value };
        case 'practicalHour':
            return { 'zed.etc': value };
        case 'shippedDate':
            return { 't.shipped': { between: dateRange(value) } };
        case 'nickname':
            return { [`t.nickname`]: { like: `%${value}%` } };
        case 'zoneFk':
            return { 't.zoneFk': value };
        case 'department':
            return { 'd.name': value };
        case 'totalWithVat':
            return { [`t.${param}`]: value };
    }
}

const columns = computed(() => [
    {
        label: t('salesTicketsTable.problems'),
        name: 'totalProblems',
        align: 'left',
        columnFilter: false,
        attrs: {
            dense: true,
        },
    },
    {
        label: t('salesTicketsTable.identifier'),
        name: 'id',
        field: 'id',
        align: 'left',
        columnFilter: {
            component: 'number',
            name: 'id',
            attrs: {
                dense: true,
            },
        },
    },
    {
        label: t('salesClientsTable.client'),
        name: 'clientFk',
        align: 'left',
        field: 'nickname',
        columnFilter: {
            component: 'select',
            attrs: {
                url: 'Clients',
                fields: ['id', 'name', 'nickname'],
                sortBy: 'name ASC',
            },
        },
    },
    {
        align: 'left',
        name: 'departmentFk',
        label: t('customer.summary.team'),
        component: 'select',
        attrs: {
            url: 'Departments',
        },
        create: true,
        columnField: {
            component: null,
        },
        format: (row, dashIfEmpty) => dashIfEmpty(row.departmentName),
    },
    {
        label: t('salesClientsTable.date'),
        name: 'shippedDate',
        align: 'left',
        columnFilter: {
            component: 'date',
            name: 'shippedDate',
            attrs: {
                dense: true,
            },
        },
    },
    {
        label: t('salesTicketsTable.theoretical'),
        name: 'theoreticalhour',
        field: 'zoneLanding',
        align: 'left',
        format: (row) => row.theoreticalhour,
        columnFilter: false,
    },
    {
        label: t('salesTicketsTable.practical'),
        name: 'practicalHour',
        field: 'practicalHour',
        align: 'left',
        format: (row) => row.practicalHour,
        columnFilter: false,
        dense: true,
    },
    {
        label: t('salesTicketsTable.preparation'),
        name: 'preparationHour',
        field: 'shipped',
        align: 'left',
        format: (row) => row.preparationHour,
        columnFilter: false,
    },
    {
        label: t('salesTicketsTable.province'),
        name: 'provinceFk',
        field: 'province',
        align: 'left',
        format: (row) => row.province,
        columnFilter: {
            component: 'select',
            name: 'provinceFk',
            attrs: {
                url: 'Provinces',
                fields: ['id', 'name'],
                sortBy: ['name ASC'],
                optionValue: 'id',
                optionLabel: 'name',
                dense: true,
            },
        },
    },
    {
        label: t('salesTicketsTable.state'),
        name: 'state',
        align: 'left',
        columnFilter: {
            component: 'select',
            name: 'stateFk',
            attrs: {
                sortBy: ['name ASC'],
                url: 'States',
                fields: ['id', 'name'],
                optionValue: 'id',
                optionLabel: 'name',
                dense: true,
            },
        },
    },
    {
        label: t('salesTicketsTable.isFragile'),
        name: 'isFragile',
        field: 'isFragile',
        align: 'left',
        columnFilter: false,
        attrs: {
            'checked-icon': 'local_bar',
            'unchecked-icon': 'local_bar',
            'false-value': 0,
            'true-value': 1,
        },
        component: false,
    },
    {
        label: t('salesTicketsTable.zone'),
        name: 'zoneFk',
        align: 'left',
        columnFilter: {
            component: 'select',
            name: 'zoneFk',
            attrs: {
                url: 'Zones',
                fields: ['id', 'name'],
                sortBy: ['name ASC'],

                optionValue: 'id',
                optionLabel: 'name',
                dense: true,
            },
        },
    },
    {
        label: t('salesTicketsTable.payMethod'),
        name: 'payMethod',
        align: 'left',
        columnFilter: {
            component: 'select',
            attrs: {
                url: 'PayMethods',
                fields: ['id', 'name'],
                sortBy: ['id ASC'],
                optionLabel: 'name',
                optionValue: 'id',
                dense: true,
            },
        },
    },
    {
        label: t('salesTicketsTable.total'),
        name: 'totalWithVat',
        field: 'totalWithVat',
        align: 'left',
        columnFilter: {
            component: 'number',
            name: 'totalWithVat',
            attrs: {
                dense: true,
            },
        },
    },
    {
        label: t('salesTicketsTable.department'),
        name: 'department',
        align: 'left',
        columnFilter: {
            component: 'select',
            attrs: {
                url: 'Departments',
                fields: ['id', 'name'],
                sortBy: ['id ASC'],
                dense: true,
            },
        },
    },
    {
        label: t('salesTicketsTable.packing'),
        name: 'packing',
        align: 'left',
        columnFilter: {
            component: 'select',
            attrs: {
                url: 'ItemPackingTypes',
                fields: ['code'],
                sortBy: ['code ASC'],
                optionValue: 'code',
                optionCode: 'code',
                dense: true,
            },
        },
    },
    {
        align: 'right',
        name: 'tableActions',
        label: '',
        actions: [
            {
                title: t('salesTicketsTable.goToLines'),
                icon: 'vn:lines',
                color: 'primary',
                action: (row) => openTab(row.id),
                isPrimary: true,
                attrs: {
                    flat: true,
                    dense: true,
                },
            },
            {
                title: t('globals.preview'),
                icon: 'preview',
                color: 'primary',
                action: (row) => viewSummary(row.id, TicketSummary, 'lg-width'),
                isPrimary: true,
                attrs: {
                    flat: true,
                    dense: true,
                },
            },
        ],
    },
]);

let refreshTimer = null;

const autoRefreshHandler = (value) => {
    if (value)
        refreshTimer = setInterval(() => tableRef.value.reload(), DEFAULT_AUTO_REFRESH);
    else {
        clearInterval(refreshTimer);
        refreshTimer = null;
    }
};

const totalPriceColor = (ticket) => {
    const total = parseInt(ticket.totalWithVat);
    if (total > 0 && total < 50) return 'warning';
};

const openTab = (id) => useOpenURL(`#/ticket/${id}/sale`);
</script>
<template>
    <MonitorTicketSearchbar />
    <RightMenu>
        <template #right-panel>
            <MonitorTicketFilter data-key="saleMonitorTickets" />
        </template>
    </RightMenu>
    <VnTable
        ref="tableRef"
        data-key="saleMonitorTickets"
        url="SalesMonitors/salesFilter"
        search-url="saleMonitorTickets"
        :expr-builder="exprBuilder"
        :offset="50"
        :columns="columns"
        :right-search="false"
        default-mode="table"
        auto-load
        :row-click="({ id }) => openTab(id)"
        :row-ctrl-click="(_, { id }) => openTab(id)"
        :disable-option="{ card: true }"
        :user-params="{ from, to, scopeDays: 0 }"
    >
        <template #top-left>
            <QBtn
                icon="refresh"
                size="md"
                color="primary"
                class="q-mr-sm"
                dense
                flat
                @click="tableRef.CrudModelRef.vnPaginateRef.update()"
            >
                <QTooltip>{{ $t('globals.refresh') }}</QTooltip>
            </QBtn>
            <QCheckbox
                v-model="autoRefresh"
                :label="$t('salesTicketsTable.autoRefresh')"
                @update:model-value="autoRefreshHandler"
                dense
            >
                <QTooltip>{{ $t('refreshInfo') }}</QTooltip>
            </QCheckbox>
        </template>
        <template #column-totalProblems="{ row }">
            <TicketProblems :row="row" />
        </template>
        <template #column-id="{ row }">
            <span class="link" @click.stop.prevent>
                {{ row.id }}
                <TicketDescriptorProxy :id="row.id" />
            </span>
        </template>
        <template #column-clientFk="{ row }">
            <div @click.stop :title="row.nickname">
                <span class="link" v-text="row.nickname" />
                <CustomerDescriptorProxy :id="row.clientFk" />
            </div>
        </template>
        <template #column-departmentFk="{ row }">
            <div @click.stop :title="row.departmentName">
                <span class="link" v-text="dashIfEmpty(row.departmentName)" />
                <DepartmentDescriptorProxy :id="row.departmentFk" />
            </div>
        </template>
        <template #column-shippedDate="{ row }">
            <VnDateBadge :date="row.shippedDate" />
        </template>
        <template #column-provinceFk="{ row }">
            <span :title="row.province" v-text="row.province" />
        </template>
        <template #column-state="{ row }">
            <div v-if="row.refFk" @click.stop.prevent>
                <span class="link">{{ row.refFk }}</span>
                <InvoiceOutDescriptorProxy :id="row.invoiceOutId" />
            </div>
            <QBadge
                v-else
                :color="stateColors[row.classColor] || 'transparent'"
                :text-color="stateColors[row.classColor] ? 'black' : 'white'"
                class="q-pa-sm"
                style="font-size: 14px"
            >
                {{ row.state }}
            </QBadge>
        </template>
        <template #column-isFragile="{ row }">
            <QIcon v-if="row.isFragile" name="local_bar" color="primary" size="sm">
                <QTooltip>{{ $t('salesTicketsTable.isFragile') }}</QTooltip>
            </QIcon>
        </template>
        <template #column-zoneFk="{ row }">
            <div v-if="row.zoneFk" @click.stop.prevent :title="row.zoneName">
                <span class="link">{{ row.zoneName }}</span>
                <ZoneDescriptorProxy :id="row.zoneFk" />
            </div>
        </template>
        <template #column-totalWithVat="{ row }">
            <QBadge
                :color="totalPriceColor(row) || 'transparent'"
                :text-color="totalPriceColor(row) ? 'black' : 'white'"
                class="q-pa-sm"
                style="font-size: 14px"
            >
                {{ toCurrency(row.totalWithVat) }}
            </QBadge>
        </template>
    </VnTable>
</template>
<style lang="scss" scoped>
td .q-icon {
    margin: 0 2px;
}
</style>