wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

Merge branch 'dev' into 7017_formModel_validations

This commit is contained in:
Javier Segarra 2024-07-16 09:50:25 +00:00
parent fabf9a2024 e921e36ce9
commit 305a06aaee
4 changed files with 342 additions and 443 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages/Monitor/MonitorList.vue
View File

@ -14,10 +14,10 @@ const stateStore = useStateStore();
const expanded = ref(true);
onMounted(async () => {
stateStore.rightDrawer = true;
stateStore.leftDrawer = false;
});
onUnmounted(() => (stateStore.rightDrawer = false));
onUnmounted(() => (stateStore.leftDrawer = true));
</script>
<template>
@ -63,13 +63,15 @@ onUnmounted(() => (stateStore.rightDrawer = false));
</template>
</QExpansionItem>
</QCard>
<QCard class="full-width q-mb-lg">
<QCard class="full-width">
<QItem class="justify-between">
<QItemLabel class="slider-container">
<QItemLabel class="col slider-container">
<span class="text-body1"
>{{ t('salesMonitor.ticketsMonitor') }}
</span>
<QCardSection class="col"><SalesTicketsTable /> </QCardSection>
<QCardSection class="col" style="padding-inline: 0"
><SalesTicketsTable />
</QCardSection>
</QItemLabel>
</QItem>
</QCard>

126
src/pages/Monitor/SalesClientsTable.vue
View File

@ -3,14 +3,11 @@ import { ref, computed, reactive, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import VnPaginate from 'components/ui/VnPaginate.vue';
import { toDateFormat } from 'src/filters/date.js';
import { dashIfEmpty } from 'src/filters';
import VnTable from 'src/components/VnTable/VnTable.vue';
const { t } = useI18n();
@ -37,9 +34,11 @@ const filter = reactive({
},
});
const refetch = async () => await paginateRef.value.fetch();
watch(dateRange, (val) => {
filter.where['v.stamp'].between = val;
paginateRef.value.fetch();
refetch();
});
function exprBuilder(param, value) {
@ -53,25 +52,15 @@ function exprBuilder(param, value) {
const params = reactive({});
const applyColumnFilter = async (col) => {
try {
const paramKey = col.columnFilter?.filterParamKey || col.field;
params[paramKey] = col.columnFilter.filterValue;
await paginateRef.value.addFilter(null, params);
} catch (err) {
console.error('Error applying column filter', err);
}
};
const columns = computed(() => [
{
label: t('salesClientsTable.date'),
name: 'date',
name: 'dated',
field: 'dated',
align: 'left',
columnFilter: null,
sortable: true,
format: (val) => toDateFormat(val),
format: (row) => toDateFormat(row.dated),
},
{
label: t('salesClientsTable.hour'),
@ -86,19 +75,9 @@ const columns = computed(() => [
field: 'salesPerson',
align: 'left',
sortable: true,
columnFilter: {
component: VnSelect,
filterParamKey: 'salesPersonFk',
type: 'select',
filterValue: null,
attrs: {
options: workersActiveOptions.value,
'option-value': 'id',
'option-label': 'name',
dense: true,
},
columnField: {
component: null,
},
format: (val) => dashIfEmpty(val),
},
{
label: t('salesClientsTable.client'),
@ -106,19 +85,9 @@ const columns = computed(() => [
name: 'client',
align: 'left',
sortable: true,
columnFilter: {
component: VnSelect,
filterParamKey: 'clientFk',
type: 'select',
filterValue: null,
attrs: {
options: clientsOptions.value,
'option-value': 'id',
'option-label': 'name',
dense: true,
},
columnField: {
component: null,
},
format: (val) => dashIfEmpty(val),
},
]);
</script>
@ -144,7 +113,7 @@ const columns = computed(() => [
@on-fetch="(data) => (clientsOptions = data)"
/>
<QCard style="max-height: 380px; overflow-y: scroll">
<VnPaginate
<VnTable
ref="paginateRef"
data-key="SalesMonitorClients"
url="SalesMonitors/clientsFilter"
@ -155,63 +124,24 @@ const columns = computed(() => [
:filter="filter"
:offset="50"
auto-load
:columns="columns"
:right-search="false"
default-mode="table"
dense
:without-header="true"
>
<template #body="{ rows }">
<QTable
:rows="rows"
:columns="columns"
row-key="id"
:pagination="{ rowsPerPage: 0 }"
class="full-width"
:no-data-label="t('globals.noResults')"
>
<template #top>
<VnInputDate
:label="t('salesClientsTable.from')"
dense
v-model="from"
class="q-mr-lg"
style="width: 150px"
/>
<VnInputDate
:label="t('salesClientsTable.to')"
dense
v-model="to"
style="width: 150px"
/>
</template>
<template #top-row="{ cols }">
<QTr>
<QTd
v-for="(col, index) in cols"
:key="index"
style="max-width: 100px"
>
<VnSelect
:is="col.columnFilter.component"
v-if="col.columnFilter"
v-model="col.columnFilter.filterValue"
v-bind="col.columnFilter.attrs"
@update:model-value="applyColumnFilter(col)"
dense
/>
</QTd>
</QTr>
</template>
<template #body-cell-salesPerson="{ row }">
<QTd>
<span class="link">{{ row.salesPerson }}</span>
<WorkerDescriptorProxy :id="row.salesPersonFk" dense />
</QTd>
</template>
<template #body-cell-client="{ row }">
<QTd>
<span class="link">{{ row.clientName }}</span>
<CustomerDescriptorProxy :id="row.clientFk" />
</QTd>
</template>
</QTable>
<template #column-salesPerson="{ row }">
<QTd>
<span class="link">{{ row.salesPerson }}</span>
<WorkerDescriptorProxy :id="row.salesPersonFk" dense />
</QTd>
</template>
</VnPaginate>
<template #column-client="{ row }">
<QTd>
<span class="link">{{ row.clientName }}</span>
<CustomerDescriptorProxy :id="row.clientFk" />
</QTd>
</template>
</VnTable>
</QCard>
</template>

131
src/pages/Monitor/SalesOrdersTable.vue
View File

@ -5,7 +5,8 @@ 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 VnPaginate from 'components/ui/VnPaginate.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnTable from 'components/VnTable/VnTable.vue';
import { toDateFormat, toDateTimeFormat } from 'src/filters/date.js';
import { toCurrency } from 'src/filters';
@ -50,19 +51,22 @@ const columns = computed(() => [
name: 'date',
field: 'dated',
align: 'left',
columnFilter: null,
sortable: true,
cardVisible: true,
},
{
label: t('salesOrdersTable.client'),
name: 'client',
align: 'left',
sortable: true,
cardVisible: true,
},
{
label: t('salesOrdersTable.salesPerson'),
name: 'salesPerson',
align: 'left',
sortable: true,
cardVisible: true,
},
]);
@ -119,79 +123,78 @@ const redirectToOrderSummary = (orderId) => {
@on-fetch="(data) => (clientsOptions = data)"
/>
<VnSubToolbar />
<QCard style="max-height: 380px; overflow-y: scroll">
<VnPaginate
<VnTable
ref="paginateRef"
data-key="SalesMonitorOrders"
url="SalesMonitors/ordersFilter"
order="date_make DESC"
:limit="6"
:right-search="false"
:expr-builder="exprBuilder"
auto-load
:columns="columns"
:table="{
'row-key': 'id',
selection: 'multiple',
'hide-bottom': true,
}"
default-mode="table"
:without-header="false"
@row-click="(_, row) => redirectToOrderSummary(row.id)"
v-model:selected="selectedRows"
>
<template #body="{ rows }">
<QTable
:rows="rows"
:columns="columns"
row-key="id"
selection="multiple"
v-model:selected="selectedRows"
:pagination="{ rowsPerPage: 0 }"
:no-data-label="t('globals.noResults')"
@row-click="(_, row) => redirectToOrderSummary(row.id)"
<template #top-left>
<QBtn
v-if="selectedRows.length > 0"
icon="delete"
size="md"
color="primary"
@click="
openConfirmationModal(
t('salesOrdersTable.deleteConfirmTitle'),
t('salesOrdersTable.deleteConfirmMessage'),
removeOrders
)
"
>
<template #top>
<QBtn
v-if="selectedRows.length > 0"
icon="delete"
size="md"
color="primary"
@click="
openConfirmationModal(
t('salesOrdersTable.deleteConfirmTitle'),
t('salesOrdersTable.deleteConfirmMessage'),
removeOrders
)
"
>
<QTooltip>{{ t('salesOrdersTable.delete') }}</QTooltip>
</QBtn>
</template>
<template #body-cell-date="{ row }">
<QTd>
<QBadge
:color="getBadgeColor(row.date_send)"
text-color="black"
class="q-ma-none q-mb-md"
dense
style="font-size: 14px"
>
{{ toDateFormat(row.date_send) }}
</QBadge>
<div>{{ toDateTimeFormat(row.date_make) }}</div>
</QTd>
</template>
<template #body-cell-client="{ row }">
<QTd>
<div class="q-mb-md">
<span class="link">{{ row.clientName }}</span>
<CustomerDescriptorProxy :id="row.clientFk" />
</div>
<span> {{ row.agencyName }}</span>
</QTd>
</template>
<template #body-cell-salesPerson="{ row }">
<QTd>
<div class="q-mb-md">
<span class="link">{{ row.salesPerson }}</span>
<WorkerDescriptorProxy :id="row.salesPersonFk" dense />
</div>
<span>{{ toCurrency(row.import) }}</span>
</QTd>
</template>
</QTable>
<QTooltip>{{ t('salesOrdersTable.delete') }}</QTooltip>
</QBtn>
</template>
</VnPaginate>
<template #column-date="{ row }">
<QTd>
<QBadge
:color="getBadgeColor(row.date_send)"
text-color="black"
class="q-pa-sm q-mb-md"
style="font-size: 14px"
>
{{ toDateFormat(row.date_send) }}
</QBadge>
<div>{{ toDateTimeFormat(row.date_make) }}</div>
</QTd>
</template>
<template #column-client="{ row }">
<QTd>
<div class="q-mb-md">
<span class="link">{{ row.clientName }}</span>
<CustomerDescriptorProxy :id="row.clientFk" />
</div>
<span> {{ row.agencyName }}</span>
</QTd>
</template>
<template #column-salesPerson="{ row }">
<QTd>
<div class="q-mb-md">
<span class="link">{{ row.salesPerson }}</span>
<WorkerDescriptorProxy :id="row.salesPersonFk" dense />
</div>
<span>{{ toCurrency(row.import) }}</span>
</QTd>
</template>
</VnTable>
</QCard>
</template>
<style lang="scss" scoped>

516
src/pages/Monitor/SalesTicketsTable.vue
View File

@ -6,7 +6,6 @@ import { useRouter } from 'vue-router';
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 VnPaginate from 'components/ui/VnPaginate.vue';
import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
@ -15,6 +14,7 @@ import TicketSummary from 'src/pages/Ticket/Card/TicketSummary.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnTable from 'components/VnTable/VnTable.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { toDateFormat, toTimeFormat } from 'src/filters/date.js';
@ -103,7 +103,10 @@ const columns = computed(() => [
name: 'problems',
align: 'left',
sortable: true,
columnFilter: null,
columnFilter: false,
attrs: {
dense: true,
},
},
{
label: t('salesTicketsTable.identifier'),
@ -111,11 +114,10 @@ const columns = computed(() => [
field: 'id',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
component: 'input',
name: 'id',
attrs: {
dense: true,
},
@ -128,10 +130,8 @@ const columns = computed(() => [
field: 'nickname',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
component: 'input',
name: 'nickname',
attrs: {
dense: true,
},
@ -144,11 +144,8 @@ const columns = computed(() => [
align: 'left',
sortable: true,
columnFilter: {
component: VnSelect,
filterParamKey: 'salesPersonFk',
type: 'select',
filterValue: null,
event: getInputEvents,
component: 'select',
name: 'salesPersonFk',
attrs: {
options: workersActiveOptions.value,
'option-value': 'id',
@ -160,14 +157,12 @@ const columns = computed(() => [
{
label: t('salesTicketsTable.date'),
name: 'date',
style: { 'max-width': '100px' },
align: 'left',
sortable: true,
columnFilter: {
component: VnInputDate,
filterParamKey: 'shippedDate',
type: 'date',
filterValue: null,
event: getInputEvents,
component: 'date',
name: 'shippedDate',
attrs: {
dense: true,
},
@ -180,6 +175,13 @@ const columns = computed(() => [
align: 'left',
sortable: true,
format: (val) => toTimeFormat(val),
columnFilter: {
component: 'input',
name: 'theoreticalHour',
attrs: {
dense: true,
},
},
},
{
label: t('salesTicketsTable.practical'),
@ -188,10 +190,8 @@ const columns = computed(() => [
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
component: 'input',
name: 'practicalHour',
attrs: {
dense: true,
},
@ -204,6 +204,13 @@ const columns = computed(() => [
align: 'left',
sortable: true,
format: (val) => toTimeFormat(val),
columnFilter: {
component: 'input',
name: 'shippedDate',
attrs: {
dense: true,
},
},
},
{
@ -211,13 +218,11 @@ const columns = computed(() => [
name: 'province',
field: 'province',
align: 'left',
style: { 'max-width': '100px' },
sortable: true,
columnFilter: {
component: VnSelect,
filterParamKey: 'provinceFk',
type: 'select',
filterValue: null,
event: getInputEvents,
component: 'select',
name: 'provinceFk',
attrs: {
options: provincesOptions.value,
'option-value': 'id',
@ -230,13 +235,11 @@ const columns = computed(() => [
label: t('salesTicketsTable.state'),
name: 'state',
align: 'left',
style: { 'max-width': '100px' },
sortable: true,
columnFilter: {
component: VnSelect,
filterParamKey: 'stateFk',
type: 'select',
filterValue: null,
event: getInputEvents,
component: 'select',
name: 'stateFk',
attrs: {
options: statesOptions.value,
'option-value': 'id',
@ -252,13 +255,13 @@ const columns = computed(() => [
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
inWhere: true,
},
attrs: {
'checked-icon': 'local_bar',
'unchecked-icon': 'local_bar',
'false-value': 0,
'true-value': 1,
},
},
{
@ -267,11 +270,8 @@ const columns = computed(() => [
align: 'left',
sortable: true,
columnFilter: {
component: VnSelect,
filterParamKey: 'zoneFk',
type: 'select',
filterValue: null,
event: getInputEvents,
component: 'select',
name: 'zoneFk',
attrs: {
options: zonesOptions.value,
'option-value': 'id',
@ -285,21 +285,44 @@ const columns = computed(() => [
name: 'total',
field: 'totalWithVat',
align: 'left',
style: { 'max-width': '75px' },
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
component: 'input',
name: 'totalWithVat',
attrs: {
dense: true,
},
},
},
{
name: 'rowActions',
align: 'left',
sortable: true,
align: 'right',
name: 'tableActions',
label: '',
actions: [
{
title: t('salesTicketsTable.goToLines'),
icon: 'vn:lines',
color: 'priamry',
action: (row) => redirectToSales(row.id),
isPrimary: true,
attrs: {
flat: true,
dense: true,
},
},
{
title: t('salesTicketsTable.preview'),
icon: 'preview',
color: 'priamry',
action: (row) => viewSummary(row.id, TicketSummary),
isPrimary: true,
attrs: {
flat: true,
dense: true,
},
},
],
},
]);
@ -315,7 +338,9 @@ const getBadgeAttrs = (date) => {
if (comparation < 0) return { color: 'success', 'text-color': 'black' };
return { color: 'transparent', 'text-color': 'white' };
};
let refreshTimer = null;
const autoRefreshHandler = (value) => {
if (value)
refreshTimer = setInterval(() => paginateRef.value.fetch(), DEFAULT_AUTO_REFRESH);
@ -324,8 +349,10 @@ const autoRefreshHandler = (value) => {
refreshTimer = null;
}
};
const redirectToTicketSummary = (id) => {
router.push({ name: 'TicketSummary', params: { id } });
const url = `#/ticket/${id}/summary`;
window.open(url, '_blank');
};
const stateColors = {
@ -348,12 +375,17 @@ const formatShippedDate = (date) => {
return toDateFormat(_date);
};
onMounted(async () => {
const filteredColumns = columns.value.filter((col) => col.name !== 'rowActions');
allColumnNames.value = filteredColumns.map((col) => col.name);
params = fetchParams();
await paginateRef.value.addFilter(null, params);
});
const redirectToSales = (id) => {
const url = `#/ticket/${id}/sale`;
window.open(url, '_blank');
};
// onMounted(async () => {
// const filteredColumns = columns.value.filter((col) => col.name !== 'rowActions');
// allColumnNames.value = filteredColumns.map((col) => col.name);
// params = fetchParams();
// await paginateRef.value.addFilter(null, params);
// });
</script>
<template>
@ -394,7 +426,7 @@ onMounted(async () => {
auto-load
@on-fetch="(data) => (zonesOptions = data)"
/>
<VnPaginate
<VnTable
ref="paginateRef"
data-key="SalesMonitorTickets"
url="SalesMonitors/salesFilter"
@ -403,221 +435,153 @@ onMounted(async () => {
:expr-builder="exprBuilder"
:user-params="params"
:offset="50"
:columns="columns"
:visible-columns="visibleColumns"
:right-search="false"
default-mode="table"
auto-load
@row-click="(_, row) => redirectToTicketSummary(row.id)"
>
<template #body="{ rows }">
<QTable
:rows="rows"
:columns="columns"
row-key="id"
:pagination="{ rowsPerPage: 0 }"
:visible-columns="visibleColumns"
:no-data-label="t('globals.noResults')"
@row-click="(_, row) => redirectToTicketSummary(row.id)"
>
<template #top>
<TableVisibleColumns
:all-columns="allColumnNames"
table-code="ticketsMonitor"
labels-traductions-path="salesTicketsTable"
@on-config-saved="visibleColumns = [...$event, 'rowActions']"
/>
<QCheckbox
v-model="autoRefresh"
:label="t('salesTicketsTable.autoRefresh')"
@update:model-value="autoRefreshHandler"
/>
</template>
<template #top-row="{ cols }">
<QTr>
<QTd
v-for="(col, index) in cols"
:key="index"
style="max-width: 100px"
>
<component
:is="col.columnFilter.component"
v-if="col.columnFilter"
v-model="col.columnFilter.filterValue"
v-bind="col.columnFilter.attrs"
v-on="col.columnFilter.event(col)"
dense
style="padding-bottom: 0"
/>
</QTd>
</QTr>
</template>
<template #body-cell-problems="{ row }">
<QTd class="q-gutter-x-sm">
<QIcon
v-if="row.isTaxDataChecked === 0"
name="vn:no036"
color="primary"
size="xs"
>
<QTooltip>{{
t('salesTicketsTable.noVerifiedData')
}}</QTooltip>
</QIcon>
<QIcon
v-if="row.hasTicketRequest"
name="vn:buyrequest"
color="primary"
size="xs"
>
<QTooltip>{{
t('salesTicketsTable.purchaseRequest')
}}</QTooltip>
</QIcon>
<QIcon
v-if="row.itemShortage"
name="vn:unavailable"
color="primary"
size="xs"
>
<QTooltip>{{ t('salesTicketsTable.notVisible') }}</QTooltip>
</QIcon>
<QIcon
v-if="row.isFreezed"
name="vn:frozen"
color="primary"
size="xs"
>
<QTooltip>{{ t('salesTicketsTable.clientFrozen') }}</QTooltip>
</QIcon>
<QIcon
v-if="row.risk"
name="vn:risk"
:color="row.hasHighRisk ? 'negative' : 'primary'"
size="xs"
>
<QTooltip
>{{ t('salesTicketsTable.risk') }}:
{{ row.risk }}</QTooltip
>
</QIcon>
<QIcon
v-if="row.hasComponentLack"
name="vn:components"
color="primary"
size="xs"
>
<QTooltip>{{
t('salesTicketsTable.componentLack')
}}</QTooltip>
</QIcon>
<QIcon
v-if="row.isTooLittle"
name="vn:isTooLittle"
color="primary"
size="xs"
>
<QTooltip>{{ t('salesTicketsTable.tooLittle') }}</QTooltip>
</QIcon>
</QTd>
</template>
<template #body-cell-identifier="{ row }">
<QTd>
<span class="link" @click.stop.prevent>{{ row.id }}</span>
<TicketDescriptorProxy :id="row.id" />
</QTd>
</template>
<template #body-cell-client="{ row }">
<QTd @click.stop.prevent>
<span class="link">{{ row.nickname }}</span>
<CustomerDescriptorProxy :id="row.clientFk" />
</QTd>
</template>
<template #body-cell-salesPerson="{ row }">
<QTd @click.stop.prevent>
<span class="link">{{ row.userName }}</span>
<WorkerDescriptorProxy :id="row.salesPersonFk" />
</QTd>
</template>
<template #body-cell-date="{ row }">
<QTd>
<QBadge
v-bind="getBadgeAttrs(row.shippedDate)"
class="q-ma-none"
dense
style="font-size: 14px"
>
{{ formatShippedDate(row.shippedDate) }}
</QBadge>
</QTd>
</template>
<template #body-cell-state="{ row }">
<QTd @click.stop.prevent>
<div v-if="row.refFk">
<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'"
dense
style="font-size: 14px"
>
{{ row.state }}
</QBadge>
</QTd>
</template>
<template #body-cell-isFragile="{ row }">
<QTd>
<QIcon
v-if="row.isFragile"
name="local_bar"
color="primary"
size="sm"
>
<QTooltip>{{ t('salesTicketsTable.isFragile') }}</QTooltip>
</QIcon>
</QTd>
</template>
<template #body-cell-zone="{ row }">
<QTd @click.stop.prevent>
<span class="link">{{ row.zoneName }}</span>
<ZoneDescriptorProxy :id="row.zoneFk" />
</QTd>
</template>
<template #body-cell-total="{ row }">
<QTd>
<QBadge
:color="totalPriceColor(row) || 'transparent'"
:text-color="totalPriceColor(row) ? 'black' : 'white'"
dense
style="font-size: 14px"
>
{{ toCurrency(row.totalWithVat) }}
</QBadge>
</QTd>
</template>
<template #body-cell-rowActions="{ row }">
<QTd @click.stop.prevent>
<QBtn
icon="vn:lines"
color="primary"
size="md"
class="q-mr-sm"
flat
dense
:to="{ name: 'TicketSale', params: { id: row.id } }"
>
<QTooltip>{{ t('salesTicketsTable.goToLines') }}</QTooltip>
</QBtn>
<QBtn
icon="preview"
color="primary"
size="md"
dense
flat
@click="viewSummary(row.id, TicketSummary)"
>
<QTooltip>{{ t('salesTicketsTable.preview') }}</QTooltip>
</QBtn>
</QTd>
</template>
</QTable>
<template #top-left>
<TableVisibleColumns
:all-columns="allColumnNames"
table-code="ticketsMonitor"
labels-traductions-path="salesTicketsTable"
@on-config-saved="visibleColumns = [...$event, 'rowActions']"
/>
<QCheckbox
v-model="autoRefresh"
:label="t('salesTicketsTable.autoRefresh')"
@update:model-value="autoRefreshHandler"
/>
</template>
</VnPaginate>
<template #column-problems="{ row }">
<QTd class="no-padding" style="max-width: 50px">
<QIcon
v-if="row.isTaxDataChecked === 0"
name="vn:no036"
color="primary"
size="xs"
>
<QTooltip>{{ t('salesTicketsTable.noVerifiedData') }}</QTooltip>
</QIcon>
<QIcon
v-if="row.hasTicketRequest"
name="vn:buyrequest"
color="primary"
size="xs"
>
<QTooltip>{{ t('salesTicketsTable.purchaseRequest') }}</QTooltip>
</QIcon>
<QIcon
v-if="row.itemShortage"
name="vn:unavailable"
color="primary"
size="xs"
>
<QTooltip>{{ t('salesTicketsTable.notVisible') }}</QTooltip>
</QIcon>
<QIcon v-if="row.isFreezed" name="vn:frozen" color="primary" size="xs">
<QTooltip>{{ t('salesTicketsTable.clientFrozen') }}</QTooltip>
</QIcon>
<QIcon
v-if="row.risk"
name="vn:risk"
:color="row.hasHighRisk ? 'negative' : 'primary'"
size="xs"
>
<QTooltip>{{ t('salesTicketsTable.risk') }}: {{ row.risk }}</QTooltip>
</QIcon>
<QIcon
v-if="row.hasComponentLack"
name="vn:components"
color="primary"
size="xs"
>
<QTooltip>{{ t('salesTicketsTable.componentLack') }}</QTooltip>
</QIcon>
<QIcon
v-if="row.isTooLittle"
name="vn:isTooLittle"
color="primary"
size="xs"
>
<QTooltip>{{ t('salesTicketsTable.tooLittle') }}</QTooltip>
</QIcon>
</QTd>
</template>
<template #column-identifier="{ row }">
<QTd class="no-padding">
<span class="link" @click.stop.prevent>
{{ row.id }}
<TicketDescriptorProxy :id="row.id" />
</span>
</QTd>
</template>
<template #column-client="{ row }">
<QTd class="no-padding" @click.stop.prevent>
<span class="link">{{ row.nickname }}</span>
<CustomerDescriptorProxy :id="row.clientFk" />
</QTd>
</template>
<template #column-salesPerson="{ row }">
<QTd class="no-padding" @click.stop.prevent>
<span class="link">{{ row.userName }}</span>
<WorkerDescriptorProxy :id="row.salesPersonFk" />
</QTd>
</template>
<template #column-date="{ row }">
<QTd class="no-padding">
<QBadge
v-bind="getBadgeAttrs(row.shippedDate)"
class="q-pa-sm"
style="font-size: 14px"
>
{{ formatShippedDate(row.shippedDate) }}
</QBadge>
</QTd>
</template>
<template #column-state="{ row }">
<QTd class="no-padding" @click.stop.prevent>
<div v-if="row.refFk">
<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>
</QTd>
</template>
<template #column-isFragile="{ row }">
<QTd class="no-padding">
<QIcon v-if="row.isFragile" name="local_bar" color="primary" size="sm">
<QTooltip>{{ t('salesTicketsTable.isFragile') }}</QTooltip>
</QIcon>
</QTd>
</template>
<template #column-zone="{ row }">
<QTd class="no-padding" @click.stop.prevent>
<span class="link">{{ row.zoneName }}</span>
<ZoneDescriptorProxy :id="row.zoneFk" />
</QTd>
</template>
<template #column-total="{ row }">
<QTd class="no-padding">
<QBadge
:color="totalPriceColor(row) || 'transparent'"
:text-color="totalPriceColor(row) ? 'black' : 'white'"
class="q-pa-sm"
style="font-size: 14px"
>
{{ toCurrency(row.totalWithVat) }}
</QBadge>
</QTd>
</template>
</VnTable>
</template>