0
0
Fork 0

feat: VnTable SalesTicketTable

This commit is contained in:
Javier Segarra 2024-07-10 12:19:17 +02:00
parent 167ba2aed0
commit 5ad317df65
1 changed files with 52 additions and 42 deletions

View File

@ -104,8 +104,9 @@ const columns = computed(() => [
align: 'left', align: 'left',
sortable: true, sortable: true,
columnFilter: false, columnFilter: false,
style: { 'max-width': '75px' },
attrs: { attrs: {
style: 'max-width: 50px', dense: true,
}, },
}, },
{ {
@ -114,9 +115,11 @@ const columns = computed(() => [
field: 'id', field: 'id',
align: 'left', align: 'left',
sortable: true, sortable: true,
style: { 'max-width': '75px' },
columnFilter: { columnFilter: {
component: 'input', component: 'input',
name: 'id',
attrs: { attrs: {
dense: true, dense: true,
}, },
@ -130,6 +133,7 @@ const columns = computed(() => [
sortable: true, sortable: true,
columnFilter: { columnFilter: {
component: 'input', component: 'input',
name: 'nickname',
attrs: { attrs: {
dense: true, dense: true,
}, },
@ -139,14 +143,12 @@ const columns = computed(() => [
label: t('salesTicketsTable.salesPerson'), label: t('salesTicketsTable.salesPerson'),
name: 'salesPerson', name: 'salesPerson',
field: 'userName', field: 'userName',
style: { 'max-width': '125px' },
align: 'left', align: 'left',
sortable: true, sortable: true,
columnFilter: { columnFilter: {
component: 'select', component: 'select',
filterParamKey: 'salesPersonFk', name: 'salesPersonFk',
type: 'select',
filterValue: null,
event: getInputEvents,
attrs: { attrs: {
options: workersActiveOptions.value, options: workersActiveOptions.value,
'option-value': 'id', 'option-value': 'id',
@ -158,14 +160,12 @@ const columns = computed(() => [
{ {
label: t('salesTicketsTable.date'), label: t('salesTicketsTable.date'),
name: 'date', name: 'date',
style: { 'max-width': '100px' },
align: 'left', align: 'left',
sortable: true, sortable: true,
columnFilter: { columnFilter: {
component: 'date', component: 'date',
filterParamKey: 'shippedDate', name: 'shippedDate',
filterValue: null,
event: getInputEvents,
attrs: { attrs: {
dense: true, dense: true,
}, },
@ -175,18 +175,28 @@ const columns = computed(() => [
label: t('salesTicketsTable.theoretical'), label: t('salesTicketsTable.theoretical'),
name: 'theoretical', name: 'theoretical',
field: 'zoneLanding', field: 'zoneLanding',
style: { 'max-width': '75px' },
align: 'left', align: 'left',
sortable: true, sortable: true,
format: (val) => toTimeFormat(val), format: (val) => toTimeFormat(val),
columnFilter: {
component: 'input',
name: 'theoreticalHour',
attrs: {
dense: true,
},
},
}, },
{ {
label: t('salesTicketsTable.practical'), label: t('salesTicketsTable.practical'),
name: 'practical', name: 'practical',
field: 'practicalHour', field: 'practicalHour',
align: 'left', align: 'left',
style: { 'max-width': '75px' },
sortable: true, sortable: true,
columnFilter: { columnFilter: {
component: 'input', component: 'input',
name: 'practicalHour',
attrs: { attrs: {
dense: true, dense: true,
}, },
@ -197,8 +207,16 @@ const columns = computed(() => [
name: 'preparation', name: 'preparation',
field: 'shipped', field: 'shipped',
align: 'left', align: 'left',
style: { 'max-width': '75px' },
sortable: true, sortable: true,
format: (val) => toTimeFormat(val), format: (val) => toTimeFormat(val),
columnFilter: {
component: 'input',
name: 'shippedDate',
attrs: {
dense: true,
},
},
}, },
{ {
@ -206,13 +224,11 @@ const columns = computed(() => [
name: 'province', name: 'province',
field: 'province', field: 'province',
align: 'left', align: 'left',
style: { 'max-width': '100px' },
sortable: true, sortable: true,
columnFilter: { columnFilter: {
component: 'select', component: 'select',
filterParamKey: 'provinceFk', name: 'provinceFk',
type: 'select',
filterValue: null,
event: getInputEvents,
attrs: { attrs: {
options: provincesOptions.value, options: provincesOptions.value,
'option-value': 'id', 'option-value': 'id',
@ -225,13 +241,11 @@ const columns = computed(() => [
label: t('salesTicketsTable.state'), label: t('salesTicketsTable.state'),
name: 'state', name: 'state',
align: 'left', align: 'left',
style: { 'max-width': '100px' },
sortable: true, sortable: true,
columnFilter: { columnFilter: {
component: 'select', component: 'select',
filterParamKey: 'stateFk', name: 'stateFk',
type: 'select',
filterValue: null,
event: getInputEvents,
attrs: { attrs: {
options: statesOptions.value, options: statesOptions.value,
'option-value': 'id', 'option-value': 'id',
@ -244,16 +258,17 @@ const columns = computed(() => [
label: t('salesTicketsTable.isFragile'), label: t('salesTicketsTable.isFragile'),
name: 'isFragile', name: 'isFragile',
field: 'isFragile', field: 'isFragile',
style: { 'max-width': '75px' },
align: 'left', align: 'left',
sortable: true, sortable: true,
columnFilter: { columnFilter: {
component: 'input', inWhere: true,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
}, },
attrs: {
'checked-icon': 'local_bar',
'unchecked-icon': 'local_bar',
'false-value': 0,
'true-value': 1,
}, },
}, },
{ {
@ -263,10 +278,7 @@ const columns = computed(() => [
sortable: true, sortable: true,
columnFilter: { columnFilter: {
component: 'select', component: 'select',
filterParamKey: 'zoneFk', name: 'zoneFk',
type: 'select',
filterValue: null,
event: getInputEvents,
attrs: { attrs: {
options: zonesOptions.value, options: zonesOptions.value,
'option-value': 'id', 'option-value': 'id',
@ -280,12 +292,11 @@ const columns = computed(() => [
name: 'total', name: 'total',
field: 'totalWithVat', field: 'totalWithVat',
align: 'left', align: 'left',
style: { 'max-width': '75px' },
sortable: true, sortable: true,
columnFilter: { columnFilter: {
component: 'input', component: 'input',
type: 'text', name: 'totalWithVat',
filterValue: null,
event: getInputEvents,
attrs: { attrs: {
dense: true, dense: true,
}, },
@ -423,7 +434,6 @@ const redirectToSales = (id) => {
@on-fetch="(data) => (zonesOptions = data)" @on-fetch="(data) => (zonesOptions = data)"
/> />
<VnTable <VnTable
class="column flex-center fit"
ref="paginateRef" ref="paginateRef"
data-key="SalesMonitorTickets" data-key="SalesMonitorTickets"
url="SalesMonitors/salesFilter" url="SalesMonitors/salesFilter"
@ -453,7 +463,7 @@ const redirectToSales = (id) => {
/> />
</template> </template>
<template #column-problems="{ row }"> <template #column-problems="{ row }">
<QTd class="q-gutter-x-sm" style="max-width: 50px"> <QTd class="no-padding" style="max-width: 50px">
<QIcon <QIcon
v-if="row.isTaxDataChecked === 0" v-if="row.isTaxDataChecked === 0"
name="vn:no036" name="vn:no036"
@ -508,7 +518,7 @@ const redirectToSales = (id) => {
</QTd> </QTd>
</template> </template>
<template #column-identifier="{ row }"> <template #column-identifier="{ row }">
<QTd> <QTd class="no-padding">
<span class="link" @click.stop.prevent> <span class="link" @click.stop.prevent>
{{ row.id }} {{ row.id }}
<TicketDescriptorProxy :id="row.id" /> <TicketDescriptorProxy :id="row.id" />
@ -516,19 +526,19 @@ const redirectToSales = (id) => {
</QTd> </QTd>
</template> </template>
<template #column-client="{ row }"> <template #column-client="{ row }">
<QTd @click.stop.prevent> <QTd class="no-padding" @click.stop.prevent>
<span class="link">{{ row.nickname }}</span> <span class="link">{{ row.nickname }}</span>
<CustomerDescriptorProxy :id="row.clientFk" /> <CustomerDescriptorProxy :id="row.clientFk" />
</QTd> </QTd>
</template> </template>
<template #column-salesPerson="{ row }"> <template #column-salesPerson="{ row }">
<QTd @click.stop.prevent> <QTd class="no-padding" @click.stop.prevent>
<span class="link">{{ row.userName }}</span> <span class="link">{{ row.userName }}</span>
<WorkerDescriptorProxy :id="row.salesPersonFk" /> <WorkerDescriptorProxy :id="row.salesPersonFk" />
</QTd> </QTd>
</template> </template>
<template #column-date="{ row }"> <template #column-date="{ row }">
<QTd> <QTd class="no-padding">
<QBadge <QBadge
v-bind="getBadgeAttrs(row.shippedDate)" v-bind="getBadgeAttrs(row.shippedDate)"
class="q-pa-sm" class="q-pa-sm"
@ -539,7 +549,7 @@ const redirectToSales = (id) => {
</QTd> </QTd>
</template> </template>
<template #column-state="{ row }"> <template #column-state="{ row }">
<QTd @click.stop.prevent> <QTd class="no-padding" @click.stop.prevent>
<div v-if="row.refFk"> <div v-if="row.refFk">
<span class="link">{{ row.refFk }}</span> <span class="link">{{ row.refFk }}</span>
<InvoiceOutDescriptorProxy :id="row.invoiceOutId" /> <InvoiceOutDescriptorProxy :id="row.invoiceOutId" />
@ -556,20 +566,20 @@ const redirectToSales = (id) => {
</QTd> </QTd>
</template> </template>
<template #column-isFragile="{ row }"> <template #column-isFragile="{ row }">
<QTd> <QTd class="no-padding">
<QIcon v-if="row.isFragile" name="local_bar" color="primary" size="sm"> <QIcon v-if="row.isFragile" name="local_bar" color="primary" size="sm">
<QTooltip>{{ t('salesTicketsTable.isFragile') }}</QTooltip> <QTooltip>{{ t('salesTicketsTable.isFragile') }}</QTooltip>
</QIcon> </QIcon>
</QTd> </QTd>
</template> </template>
<template #column-zone="{ row }"> <template #column-zone="{ row }">
<QTd @click.stop.prevent> <QTd class="no-padding" @click.stop.prevent>
<span class="link">{{ row.zoneName }}</span> <span class="link">{{ row.zoneName }}</span>
<ZoneDescriptorProxy :id="row.zoneFk" /> <ZoneDescriptorProxy :id="row.zoneFk" />
</QTd> </QTd>
</template> </template>
<template #column-total="{ row }"> <template #column-total="{ row }">
<QTd> <QTd class="no-padding">
<QBadge <QBadge
:color="totalPriceColor(row) || 'transparent'" :color="totalPriceColor(row) || 'transparent'"
:text-color="totalPriceColor(row) ? 'black' : 'white'" :text-color="totalPriceColor(row) ? 'black' : 'white'"