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

refactor: refs #7524 use VnTable

This commit is contained in:
Jorge Penadés 2024-10-24 10:21:25 +02:00
parent a0a37a68a0
commit 6f57d9e490
3 changed files with 234 additions and 380 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/VnTable/VnTable.vue
View File

@ -447,7 +447,11 @@ function handleOnDataSaved(_) {
/>
</template>
<template #header-cell="{ col }">
<QTh v-if="col.visible ?? true">
<QTh
v-if="col.visible ?? true"
:style="col.headerStyle"
:class="col.headerClass"
>
<div
class="column self-start q-ml-xs ellipsis"
:class="`text-${col?.align ?? 'left'}`"

605
src/pages/Ticket/TicketAdvance.vue
View File

@ -1,24 +1,20 @@
<script setup>
import { onMounted, ref, computed, reactive } from 'vue';
import { ref, computed, reactive, watch, h } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import VnProgress from 'src/components/common/VnProgressModal.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import TicketAdvanceFilter from './TicketAdvanceFilter.vue';
import { dashIfEmpty, toCurrency } from 'src/filters';
import { useVnConfirm } from 'composables/useVnConfirm';
import { useArrayData } from 'composables/useArrayData';
import useNotify from 'src/composables/useNotify.js';
import { useState } from 'src/composables/useState';
import { toDateFormat } from 'src/filters/date.js';
import axios from 'axios';
import VnTable from 'src/components/VnTable/VnTable.vue';
const state = useState();
const { t } = useI18n();
@ -29,109 +25,58 @@ const user = state.getUser();
const itemPackingTypesOptions = ref([]);
const zonesOptions = ref([]);
const selectedTickets = ref([]);
const exprBuilder = (param, value) => {
switch (param) {
case 'id':
case 'futureId':
case 'liters':
case 'futureLiters':
case 'lines':
case 'futureLines':
case 'totalWithVat':
case 'futureTotalWithVat':
case 'futureZone':
case 'notMovableLines':
case 'futureZoneFk':
return { [param]: value };
case 'iptColFilter':
return { ipt: { like: `%${value}%` } };
case 'futureIptColFilter':
return { futureIpt: { like: `%${value}%` } };
}
};
const userParams = reactive({});
const arrayData = useArrayData('AdvanceTickets', {
url: 'Tickets/getTicketsAdvance',
userParams: userParams,
exprBuilder: exprBuilder,
limit: 0,
const vnTableRef = ref({});
const originElRef = ref(null);
const destinationElRef = ref(null);
let today = Date.vnNew().toISOString();
const tomorrow = new Date(today);
tomorrow.setDate(tomorrow.getDate() + 1);
const userParams = reactive({
dateFuture: tomorrow,
dateToAdvance: today,
warehouseFk: user.value.warehouseFk,
ipt: 'H',
futureIpt: 'H',
isFullMovable: true,
});
const { store } = arrayData;
const tickets = computed(() =>
(store.data || []).map((ticket, index) => ({ ...ticket, index: index }))
);
const applyColumnFilter = async (col) => {
try {
const paramKey = col.columnFilter?.filterParamKey || col.field;
userParams[paramKey] = col.columnFilter.filterValue;
await arrayData.addFilter({ params: userParams });
} catch (err) {
console.error('Error applying column filter', err);
}
};
const getInputEvents = (col) => {
return col.columnFilter.type === 'select'
? { 'update:modelValue': () => applyColumnFilter(col) }
: {
'keyup.enter': () => applyColumnFilter(col),
};
};
const ticketColumns = computed(() => [
{
label: '',
name: 'icons',
align: 'left',
columnFilter: null,
hidden: true,
headerClass: 'horizontal-separator',
},
{
label: t('advanceTickets.ticketId'),
name: 'ticketId',
align: 'center',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
filterParamKey: 'id',
event: getInputEvents,
attrs: {
dense: true,
},
},
label: t('advanceTickets.ticketId'),
name: 'id',
headerClass: 'horizontal-separator',
},
{
align: 'left',
label: t('advanceTickets.ipt'),
name: 'ipt',
field: 'ipt',
align: 'left',
sortable: true,
columnFilter: {
component: VnSelect,
filterParamKey: 'iptColFilter',
type: 'select',
filterValue: null,
event: getInputEvents,
component: 'select',
attrs: {
options: itemPackingTypesOptions.value,
'option-value': 'code',
'option-label': 'description',
dense: true,
url: 'itemPackingTypes',
fields: ['code', 'description'],
where: { isActive: true },
optionValue: 'code',
optionLabel: 'description',
inWhere: false,
},
},
format: (val) => dashIfEmpty(val),
format: (row, dashIfEmpty) => dashIfEmpty(row.ipt),
headerClass: 'horizontal-separator',
},
{
align: 'left',
label: t('advanceTickets.state'),
name: 'state',
align: 'left',
sortable: true,
columnFilter: null,
headerClass: 'horizontal-separator',
hidden: true,
},
{
label: t('advanceTickets.preparation'),
@ -139,171 +84,105 @@ const ticketColumns = computed(() => [
field: 'preparation',
align: 'left',
sortable: true,
columnFilter: null,
headerClass: 'horizontal-separator',
columnFilter: false,
},
{
label: t('advanceTickets.liters'),
name: 'liters',
field: 'liters',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
label: t('advanceTickets.liters'),
headerClass: 'horizontal-separator',
name: 'liters',
},
{
align: 'left',
label: t('advanceTickets.lines'),
name: 'lines',
field: 'lines',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => dashIfEmpty(val),
headerClass: 'horizontal-separator',
format: (row, dashIfEmpty) => dashIfEmpty(row.lines),
},
{
align: 'left',
label: t('advanceTickets.import'),
field: 'import',
name: 'import',
align: 'left',
sortable: true,
name: 'totalWithVat',
hidden: true,
headerClass: 'horizontal-separator',
format: (row) => toCurrency(row.totalWithVat),
},
{
align: 'left',
label: t('advanceTickets.futureId'),
name: 'futureId',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
filterParamKey: 'futureId',
event: getInputEvents,
attrs: {
dense: true,
},
},
headerClass: 'vertical-separator horizontal-separator',
columnClass: 'vertical-separator',
},
{
align: 'left',
label: t('advanceTickets.futureIpt'),
name: 'futureIpt',
field: 'futureIpt',
align: 'left',
sortable: true,
columnFilter: {
component: VnSelect,
filterParamKey: 'futureIptColFilter',
type: 'select',
filterValue: null,
event: getInputEvents,
component: 'select',
attrs: {
options: itemPackingTypesOptions.value,
'option-value': 'code',
'option-label': 'description',
dense: true,
url: 'itemPackingTypes',
fields: ['code', 'description'],
where: { isActive: true },
optionValue: 'code',
optionLabel: 'description',
},
},
format: (val) => dashIfEmpty(val),
headerClass: 'horizontal-separator',
format: (row, dashIfEmpty) => dashIfEmpty(row.futureIpt),
},
{
align: 'left',
label: t('advanceTickets.futureState'),
name: 'futureState',
align: 'left',
sortable: true,
columnFilter: null,
format: (val) => dashIfEmpty(val),
headerClass: 'horizontal-separator',
hidden: true,
},
{
align: 'left',
label: t('advanceTickets.futureLiters'),
headerClass: 'horizontal-separator',
name: 'futureLiters',
field: 'futureLiters',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => dashIfEmpty(val),
},
{
align: 'left',
label: t('advanceTickets.futureZone'),
name: 'futureZoneName',
field: 'futureZoneName',
align: 'left',
sortable: true,
name: 'futureZoneFk',
columnClass: 'expand',
columnFilter: {
component: VnSelect,
type: 'select',
filterValue: null,
filterParamKey: 'futureZoneFk',
event: getInputEvents,
component: 'select',
inWhere: true,
attrs: {
options: zonesOptions.value,
'option-value': 'id',
'option-label': 'name',
dense: true,
url: 'Zones',
fields: ['id', 'name'],
},
},
format: (val) => dashIfEmpty(val),
columnField: {
component: null,
},
headerClass: 'horizontal-separator',
format: (row, dashIfEmpty) => dashIfEmpty(row.futureZoneName),
},
{
align: 'left',
label: t('advanceTickets.notMovableLines'),
headerClass: 'horizontal-separator',
name: 'notMovableLines',
field: 'notMovableLines',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => dashIfEmpty(val),
},
{
align: 'left',
label: t('advanceTickets.futureLines'),
headerClass: 'horizontal-separator',
name: 'futureLines',
field: 'futureLines',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => dashIfEmpty(val),
},
{
label: t('advanceTickets.futureImport'),
name: 'futureImport',
align: 'left',
sortable: true,
columnFilter: null,
label: t('advanceTickets.futureImport'),
name: 'futureTotalWithVat',
hidden: true,
headerClass: 'horizontal-separator',
format: (row) => toCurrency(row.futureTotalWithVat),
},
]);
@ -329,7 +208,7 @@ const requestComponentUpdate = async (ticket, isWithoutNegatives) => {
const query = `tickets/${ticket.futureId}/componentUpdate`;
if (!ticket.landed) {
const newLanded = await getLanded({
shipped: userParams.dateToAdvance,
shipped: vnTableRef.value.params.dateToAdvance,
addressFk: ticket.futureAddressFk,
agencyModeFk: ticket.agencyModeFk ?? ticket.futureAgencyModeFk,
warehouseFk: ticket.futureWarehouseFk,
@ -352,7 +231,7 @@ const requestComponentUpdate = async (ticket, isWithoutNegatives) => {
zoneFk: ticket.zoneFk ?? ticket.futureZoneFk,
warehouseFk: ticket.futureWarehouseFk,
companyFk: ticket.futureCompanyFk,
shipped: userParams.dateToAdvance,
shipped: vnTableRef.value.params.dateToAdvance,
landed: ticket.landed,
isDeleted: false,
isWithoutNegatives,
@ -387,7 +266,7 @@ const moveTicketsAdvance = async () => {
const params = { tickets: ticketsToMove };
await axios.post('Tickets/merge', params);
arrayData.fetch({ append: false });
vnTableRef.value.reload();
selectedTickets.value = [];
if (ticketsToMove.length)
notify(t('advanceTickets.moveTicketSuccess'), 'positive');
@ -437,7 +316,7 @@ const splitTickets = async () => {
} catch (error) {
console.error('Error splitting tickets', error);
} finally {
arrayData.fetch({ append: false });
vnTableRef.value.reload();
}
};
@ -455,21 +334,52 @@ const handleCloseProgressDialog = () => {
const handleCancelProgress = () => (cancelProgress.value = true);
onMounted(async () => {
let today = Date.vnNew().toISOString();
const tomorrow = new Date(today);
tomorrow.setDate(tomorrow.getDate() + 1);
userParams.dateFuture = tomorrow;
userParams.dateToAdvance = today;
userParams.warehouseFk = user.value.warehouseFk;
userParams.ipt = 'H';
userParams.futureIpt = 'H';
userParams.isFullMovable = true;
const filter = { limit: 0 };
await arrayData.addFilter({ filter, userParams });
});
</script>
watch(
() => vnTableRef.value.tableRef?.$el,
($el) => {
if (!$el) return;
const head = $el.querySelector('thead');
const firstRow = $el.querySelector('thead > tr');
const newRow = document.createElement('tr');
destinationElRef.value = document.createElement('th');
originElRef.value = document.createElement('th');
newRow.classList.add('bg-header');
destinationElRef.value.classList.add('text-uppercase', 'color-vn-label');
originElRef.value.classList.add('text-uppercase', 'color-vn-label');
destinationElRef.value.setAttribute('colspan', '7');
originElRef.value.setAttribute('colspan', '9');
destinationElRef.value.textContent = `${t(
'advanceTickets.destination'
)} ${toDateFormat(vnTableRef.value.params.dateToAdvance)}`;
originElRef.value.textContent = `${t('advanceTickets.origin')} ${toDateFormat(
vnTableRef.value.params.dateFuture
)}`;
newRow.append(destinationElRef.value, originElRef.value);
head.insertBefore(newRow, firstRow);
},
{ once: true, inmmediate: true }
);
watch(
() => vnTableRef.value.params,
() => {
if (originElRef.value && destinationElRef.value) {
destinationElRef.value.textContent = `${t(
'advanceTickets.destination'
)} ${toDateFormat(vnTableRef.value.params.dateToAdvance)}`;
originElRef.value.textContent = `${t('advanceTickets.origin')} ${toDateFormat(
vnTableRef.value.params.dateFuture
)}`;
}
},
{ deep: true }
);
</script>
<template>
<FetchData
url="itemPackingTypes"
@ -490,8 +400,9 @@ onMounted(async () => {
auto-load
@on-fetch="(data) => (zonesOptions = data)"
/>
<!-- Fix searchbar #8154 -->
<VnSearchbar
data-key="WeeklyTickets"
data-key="advanceTickets"
:label="t('weeklyTickets.search')"
:info="t('weeklyTickets.searchInfo')"
/>
@ -538,173 +449,109 @@ onMounted(async () => {
</VnSubToolbar>
<RightMenu>
<template #right-panel>
<TicketAdvanceFilter data-key="AdvanceTickets" />
<TicketAdvanceFilter data-key="advanceTickets" />
</template>
</RightMenu>
<QPage class="column items-center q-pa-md">
<QTable
:rows="tickets"
<VnTable
data-key="advanceTickets"
ref="vnTableRef"
url="Tickets/getTicketsAdvance"
search-url="advanceTickets"
:user-params="userParams"
:limit="0"
:columns="ticketColumns"
row-key="index"
selection="multiple"
:table="{
'row-key': '$index',
selection: 'multiple',
}"
v-model:selected="selectedTickets"
:pagination="{ rowsPerPage: 0 }"
:no-data-label="t('globals.noResults')"
style="max-width: 99%"
:right-search="false"
auto-load
:disable-option="{ card: true }"
>
<template #header="props">
<QTr :props="props">
<QTh
class="horizontal-separator text-uppercase color-vn-label"
colspan="7"
translate
>
{{ t('advanceTickets.destination') }}
{{ toDateFormat(userParams.dateToAdvance) }}
</QTh>
<QTh
class="horizontal-separator text-uppercase color-vn-label"
colspan="9"
translate
>
{{ t('advanceTickets.origin') }}
{{ toDateFormat(userParams.dateFuture) }}
</QTh>
</QTr>
<QTr>
<QTh>
<QCheckbox v-model="props.selected" />
</QTh>
<QTh
v-for="(col, index) in ticketColumns"
:key="index"
:class="{ 'vertical-separator': col.name === 'futureId' }"
>
{{ col.label }}
</QTh>
</QTr>
<template #column-icons="{ row }">
<QIcon
v-if="row.futureAgency !== row.agency && row.agency"
color="primary"
name="vn:agency-term"
size="xs"
>
<QTooltip class="column">
<span>
{{
t('advanceTickets.originAgency', {
agency: row.futureAgency,
})
}}
</span>
<span>
{{
t('advanceTickets.destinationAgency', {
agency: row.agency,
})
}}
</span>
</QTooltip>
</QIcon>
</template>
<template #top-row="{ cols }">
<QTr>
<QTd />
<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
/>
</QTd>
</QTr>
<template #column-id="{ row }">
<QBtn flat class="link">
{{ row.id }}
<TicketDescriptorProxy :id="row.id" />
</QBtn>
</template>
<template #header-cell-availableLines="{ col }">
<QTh class="vertical-separator">
{{ col.label }}
</QTh>
<template #column-state="{ row }">
<QBadge
v-if="row.state"
text-color="black"
:color="row.classColor"
class="q-ma-none"
dense
>
{{ row.state }}
</QBadge>
<span v-else> {{ dashIfEmpty(row.state) }}</span>
</template>
<template #body-cell-icons="{ row }">
<QTd class="q-gutter-x-xs">
<QIcon
v-if="row.futureAgency !== row.agency && row.agency"
color="primary"
name="vn:agency-term"
size="xs"
>
<QTooltip class="column">
<span>
{{
t('advanceTickets.originAgency', {
agency: row.futureAgency,
})
}}
</span>
<span>
{{
t('advanceTickets.destinationAgency', {
agency: row.agency,
})
}}
</span>
</QTooltip>
</QIcon>
</QTd>
<template #column-import="{ row }">
<QBadge
:text-color="isLessThan50(row.totalWithVat) ? 'black' : 'white'"
:color="totalPriceColor(row.totalWithVat)"
class="q-ma-none"
dense
>
{{ toCurrency(row.totalWithVat || 0) }}
</QBadge>
</template>
<template #body-cell-ticketId="{ row }">
<QTd>
<QBtn flat class="link">
{{ row.id }}
<TicketDescriptorProxy :id="row.id" />
</QBtn>
</QTd>
<template #column-futureId="{ row }">
<QBtn flat class="link" dense>
{{ row.futureId }}
<TicketDescriptorProxy :id="row.futureId" />
</QBtn>
</template>
<template #body-cell-state="{ row }">
<QTd>
<QBadge
v-if="row.state"
text-color="black"
:color="row.classColor"
class="q-ma-none"
dense
>
{{ row.state }}
</QBadge>
<span v-else> {{ dashIfEmpty(row.state) }}</span>
</QTd>
<template #column-futureState="{ row }">
<QBadge
text-color="black"
:color="row.futureClassColor"
class="q-ma-none"
dense
>
{{ row.futureState }}
</QBadge>
</template>
<template #body-cell-import="{ row }">
<QTd>
<QBadge
:text-color="isLessThan50(row.totalWithVat) ? 'black' : 'white'"
:color="totalPriceColor(row.totalWithVat)"
class="q-ma-none"
dense
>
{{ toCurrency(row.totalWithVat || 0) }}
</QBadge>
</QTd>
<template #column-futureImport="{ row }">
<QBadge
:text-color="isLessThan50(row.futureTotalWithVat) ? 'black' : 'white'"
:color="totalPriceColor(row.futureTotalWithVat)"
class="q-ma-none"
dense
>
{{ toCurrency(row.futureTotalWithVat || 0) }}
</QBadge>
</template>
<template #body-cell-futureId="{ row }">
<QTd class="vertical-separator">
<QBtn flat class="link" dense>
{{ row.futureId }}
<TicketDescriptorProxy :id="row.futureId" />
</QBtn>
</QTd>
</template>
<template #body-cell-futureState="{ row }">
<QTd>
<QBadge
text-color="black"
:color="row.futureClassColor"
class="q-ma-none"
dense
>
{{ row.futureState }}
</QBadge>
</QTd>
</template>
<template #body-cell-futureImport="{ row }">
<QTd>
<QBadge
:text-color="
isLessThan50(row.futureTotalWithVat) ? 'black' : 'white'
"
:color="totalPriceColor(row.futureTotalWithVat)"
class="q-ma-none"
dense
>
{{ toCurrency(row.futureTotalWithVat || 0) }}
</QBadge>
</QTd>
</template>
</QTable>
</VnTable>
<VnProgress
:progress="progressPercentage"
:cancelled="cancelProgress"
@ -723,11 +570,11 @@ onMounted(async () => {
</template>
<style scoped lang="scss">
.vertical-separator {
:deep(.vertical-separator) {
border-left: 4px solid white !important;
}
.horizontal-separator {
border-bottom: 4px solid white !important;
:deep(.horizontal-separator) {
border-top: 4px solid white !important;
}
</style>

3
src/pages/Ticket/TicketAdvanceFilter.vue
View File

@ -57,6 +57,7 @@ onMounted(async () => await getItemPackingTypes());
auto-load
/>
<VnFilterPanel
search-url="advanceTickets"
:data-key="props.dataKey"
:search-button="true"
:hidden-tags="['search']"
@ -100,6 +101,7 @@ onMounted(async () => await getItemPackingTypes());
dense
outlined
rounded
:use-like="false"
>
</VnSelect>
</QItemSection>
@ -117,6 +119,7 @@ onMounted(async () => await getItemPackingTypes());
dense
outlined
rounded
:use-like="false"
>
</VnSelect>
</QItemSection>