refactor: refs #7553 rollback ticket advance due to slot problems

src/components/VnTable/VnTable.vue

@@ -408,7 +408,8 @@ defineExpose({
                         @click="stateStore.toggleRightDrawer()"
                     />
                 </template>
-                <!--TODO: este slot se carga los botones de mostrar tabla/card y columnas visibles-->
+                <!--TODO: este slot se carga los botones de mostrar tabla/card y columnas visibles
+                    por lo que no es viable para el uso que se le quiere dar-->
                 <!-- <template #top>
                     <div class="full-width-slot">
                         <slot name="before-header" />

src/pages/Ticket/TicketAdvance.vue

@@ -3,8 +3,8 @@ import { onMounted, ref, computed, reactive } 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 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';
@@ -19,14 +19,13 @@ 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();
 const { openConfirmationModal } = useVnConfirm();
 const { notify } = useNotify();
 const user = state.getUser();
-const tableRef = ref();
+
 const itemPackingTypesOptions = ref([]);
 const zonesOptions = ref([]);
 const selectedTickets = ref([]);
@@ -45,14 +44,15 @@ const exprBuilder = (param, value) => {
         case 'notMovableLines':
         case 'futureZoneFk':
             return { [param]: value };
-        case 'ipt':
-            return { [param]: { like: `%${value}%` } };
-        case 'futureIpt':
-            return { [param]: { like: `%${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,
@@ -82,123 +82,220 @@ const getInputEvents = (col) => {
           };
 };
 
-const columns = computed(() => [
+const ticketColumns = computed(() => [
     {
         label: '',
         name: 'icons',
-        hidden: true,
-    },
-    {
-        align: 'center',
-        label: t('advanceTickets.ticketId'),
-        name: 'id',
-    },
-    {
         align: 'left',
+        columnFilter: null,
+    },
+    {
+        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.ipt'),
         name: 'ipt',
+        field: 'ipt',
+        align: 'left',
+        sortable: true,
         columnFilter: {
-            component: 'select',
+            component: VnSelect,
+            filterParamKey: 'iptColFilter',
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
             attrs: {
-                url: 'itemPackingTypes',
-                fields: ['code', 'description'],
-                where: { isActive: true },
-                optionValue: 'code',
-                optionLabel: 'description',
+                options: itemPackingTypesOptions.value,
+                'option-value': 'code',
+                'option-label': 'description',
+                dense: true,
             },
         },
-        format: (row, dashIfEmpty) => dashIfEmpty(row.ipt),
+        format: (val) => dashIfEmpty(val),
     },
     {
-        align: 'left',
         label: t('advanceTickets.state'),
         name: 'state',
-        hidden: true,
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
     },
     {
-        align: 'left',
         label: t('advanceTickets.liters'),
         name: 'liters',
+        field: 'liters',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
-        align: 'left',
         label: t('advanceTickets.lines'),
         name: 'lines',
-        format: (row, dashIfEmpty) => dashIfEmpty(row.lines),
+        field: 'lines',
+        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.import'),
-        name: 'totalWithVat',
-        hidden: true,
-        format: (row) => toCurrency(row.totalWithVat),
+        field: 'import',
+        name: 'import',
+        align: 'left',
+        sortable: true,
     },
     {
-        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,
+            },
+        },
     },
     {
-        align: 'left',
         label: t('advanceTickets.futureIpt'),
         name: 'futureIpt',
+        field: 'futureIpt',
+        align: 'left',
+        sortable: true,
         columnFilter: {
-            component: 'select',
+            component: VnSelect,
+            filterParamKey: 'futureIptColFilter',
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
             attrs: {
-                url: 'itemPackingTypes',
-                fields: ['code', 'description'],
-                where: { isActive: true },
-                optionValue: 'code',
-                optionLabel: 'description',
+                options: itemPackingTypesOptions.value,
+                'option-value': 'code',
+                'option-label': 'description',
+                dense: true,
             },
         },
-        format: (row, dashIfEmpty) => dashIfEmpty(row.futureIpt),
+        format: (val) => dashIfEmpty(val),
     },
     {
-        align: 'left',
         label: t('advanceTickets.futureState'),
         name: 'futureState',
-        hidden: true,
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
+        format: (val) => dashIfEmpty(val),
     },
     {
-        align: 'left',
         label: t('advanceTickets.futureLiters'),
         name: 'futureLiters',
-    },
-    {
+        field: 'futureLiters',
         align: 'left',
-        label: t('advanceTickets.futureZone'),
-        name: 'futureZoneFk',
-        columnClass: 'expand',
+        sortable: true,
         columnFilter: {
-            component: 'select',
-            inWhere: true,
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
             attrs: {
-                url: 'Zones',
-                fields: ['id', 'name'],
+                dense: true,
             },
         },
-        columnField: {
-            component: null,
-        },
-        format: (row, dashIfEmpty) => dashIfEmpty(row.futureZoneName),
+        format: (val) => dashIfEmpty(val),
     },
     {
+        label: t('advanceTickets.futureZone'),
+        name: 'futureZoneName',
+        field: 'futureZoneName',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelect,
+            type: 'select',
+            filterValue: null,
+            filterParamKey: 'futureZoneFk',
+            event: getInputEvents,
+            attrs: {
+                options: zonesOptions.value,
+                'option-value': 'id',
+                'option-label': 'name',
+                dense: true,
+            },
+        },
+        format: (val) => dashIfEmpty(val),
+    },
+    {
         label: t('advanceTickets.notMovableLines'),
         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'),
         name: 'futureLines',
+        field: 'futureLines',
+        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.futureImport'),
-        name: 'futureTotalWithVat',
-        hidden: true,
-        format: (row) => toCurrency(row.futureTotalWithVat),
+        name: 'futureImport',
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
     },
 ]);
 
@@ -351,7 +448,7 @@ const handleCloseProgressDialog = () => {
 const handleCancelProgress = () => (cancelProgress.value = true);
 
 onMounted(async () => {
-    let today = Date.vnNew().toISOString();
+    let today = Date.vnNew();
     const tomorrow = new Date(today);
     tomorrow.setDate(tomorrow.getDate() + 1);
     userParams.dateFuture = tomorrow;
@@ -360,13 +457,6 @@ onMounted(async () => {
     const filter = { limit: 0 };
     await arrayData.addFilter({ filter, userParams });
 });
-
-const getColor = (row) => {
-    return row?.classColor ? `bg-${row.classColor}` : 'bg-orange';
-};
-const getFutureColor = (row) => {
-    return row?.futureClassColor ? `bg-${row.futureClassColor}` : 'bg-orange';
-};
 </script>
 
 <template>
@@ -390,9 +480,9 @@ const getFutureColor = (row) => {
         @on-fetch="(data) => (zonesOptions = data)"
     />
     <VnSearchbar
-        data-key="AdvanceTickets"
-        :label="t('advanceTickets.search')"
-        :info="t('advanceTickets.searchInfo')"
+        data-key="WeeklyTickets"
+        :label="t('weeklyTickets.search')"
+        :info="t('weeklyTickets.searchInfo')"
     />
     <VnSubToolbar>
         <template #st-data>
@@ -441,32 +531,73 @@ const getFutureColor = (row) => {
         </template>
     </RightMenu>
     <QPage class="column items-center q-pa-md">
-        <VnTable
-            ref="tableRef"
-            data-key="AdvanceTickets"
-            url="TicketWeeklies/filter"
-            :columns="columns"
-            auto-load
-            :right-search="false"
-            :disable-option="{ card: true }"
+        <QTable
+            :rows="tickets"
+            :columns="ticketColumns"
+            row-key="index"
+            selection="multiple"
             v-model:selected="selectedTickets"
-            :table="{
-                'row-key': 'id',
-                selection: 'multiple',
-            }"
+            :pagination="{ rowsPerPage: 0 }"
+            :no-data-label="t('globals.noResults')"
+            style="max-width: 99%"
         >
-            <!--TODO: arreglar estilos-->
-            <template #before-header>
-                <span class="horizontal-separator" translate>
-                    {{ t('advanceTickets.destination') }}
-                    {{ toDateFormat(userParams.dateToAdvance) }}
-                </span>
-                <span class="horizontal-separator" translate>
-                    {{ t('advanceTickets.origin') }}
-                    {{ toDateFormat(userParams.dateFuture) }}
-                </span>
+            <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>
-            <template #column-icons="{ row }">
+            <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>
+            <template #header-cell-availableLines="{ col }">
+                <QTh class="vertical-separator">
+                    {{ col.label }}
+                </QTh>
+            </template>
+            <template #body-cell-icons="{ row }">
                 <QTd class="q-gutter-x-xs">
                     <QIcon
                         v-if="row.futureAgency !== row.agency && row.agency"
@@ -493,52 +624,73 @@ const getFutureColor = (row) => {
                     </QIcon>
                 </QTd>
             </template>
-            <template #column-id="{ row }">
-                <span class="link" @click.stop>
-                    {{ row.id }}
-                    <TicketDescriptorProxy :id="row.id" />
-                </span>
+            <template #body-cell-ticketId="{ row }">
+                <QTd>
+                    <QBtn flat class="link">
+                        {{ row.id }}
+                        <TicketDescriptorProxy :id="row.id" />
+                    </QBtn>
+                </QTd>
             </template>
-            <template #column-state="{ row }">
-                <QChip :class="getColor(row)" dense square>
-                    {{ row.state }}
-                </QChip>
+            <template #body-cell-state="{ row }">
+                <QTd>
+                    <QBadge
+                        text-color="black"
+                        :color="row.classColor"
+                        class="q-ma-none"
+                        dense
+                    >
+                        {{ row.state }}
+                    </QBadge>
+                </QTd>
             </template>
-            <template #column-totalWithVat="{ row }">
-                <QBadge
-                    :text-color="isLessThan50(row.totalWithVat) ? 'black' : 'white'"
-                    :color="totalPriceColor(row.totalWithVat)"
-                    class="q-ma-none"
-                    dense
-                >
-                    {{ toCurrency(row.totalWithVat || 0) }}
-                </QBadge>
+            <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>
-            <template #column-futureId="{ row }">
-                <!--TODO: arreglar estilos para que se muestre como antes, slot?-->
-                <div class="vertical-separator">
-                    <span class="link" @click.stop>
+            <template #body-cell-futureId="{ row }">
+                <QTd class="vertical-separator">
+                    <QBtn flat class="link" dense>
                         {{ row.futureId }}
                         <TicketDescriptorProxy :id="row.futureId" />
-                    </span>
-                </div>
+                    </QBtn>
+                </QTd>
             </template>
-            <template #column-futureState="{ row }">
-                <QChip :class="getFutureColor(row)" dense square>
-                    {{ row.futureState }}
-                </QChip>
+            <template #body-cell-futureState="{ row }">
+                <QTd>
+                    <QBadge
+                        text-color="black"
+                        :color="row.futureClassColor"
+                        class="q-ma-none"
+                        dense
+                    >
+                        {{ row.futureState }}
+                    </QBadge>
+                </QTd>
             </template>
-            <template #column-futureTotalWithVat="{ row }">
-                <QBadge
-                    :text-color="isLessThan50(row.futureTotalWithVat) ? 'black' : 'white'"
-                    :color="totalPriceColor(row.futureTotalWithVat)"
-                    class="q-ma-none"
-                    dense
-                >
-                    {{ toCurrency(row.futureTotalWithVat || 0) }}
-                </QBadge>
+            <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>
-        </VnTable>
+        </QTable>
         <VnProgress
             :progress="progressPercentage"
             :cancelled="cancelProgress"
@@ -562,8 +714,6 @@ const getFutureColor = (row) => {
 }
 
 .horizontal-separator {
-    width: 100%;
-    margin-top: 1%;
-    border-bottom: 5px solid white !important;
+    border-bottom: 4px solid white !important;
 }
 </style>