feat: salesTicketTable

src/pages/Monitor/SalesTicketsTable.vue

@@ -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: {
+            style: 'max-width: 50px',
+        },
     },
     {
         label: t('salesTicketsTable.identifier'),
@@ -112,10 +115,8 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: VnInput,
+            component: 'input',
-            type: 'text',
+
-            filterValue: null,
-            event: getInputEvents,
             attrs: {
                 dense: true,
             },
@@ -128,10 +129,7 @@ const columns = computed(() => [
         field: 'nickname',
         sortable: true,
         columnFilter: {
-            component: VnInput,
+            component: 'input',
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
             attrs: {
                 dense: true,
             },
@@ -144,7 +142,7 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: VnSelect,
+            component: 'select',
             filterParamKey: 'salesPersonFk',
             type: 'select',
             filterValue: null,
@@ -163,9 +161,9 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: VnInputDate,
+            component: 'date',
             filterParamKey: 'shippedDate',
-            type: 'date',
+
             filterValue: null,
             event: getInputEvents,
             attrs: {
@@ -188,10 +186,7 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: VnInput,
+            component: 'input',
-            type: 'text',
-            filterValue: null,
-            event: getInputEvents,
             attrs: {
                 dense: true,
             },
@@ -213,7 +208,7 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: VnSelect,
+            component: 'select',
             filterParamKey: 'provinceFk',
             type: 'select',
             filterValue: null,
@@ -232,7 +227,7 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: VnSelect,
+            component: 'select',
             filterParamKey: 'stateFk',
             type: 'select',
             filterValue: null,
@@ -252,7 +247,7 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: VnInput,
+            component: 'input',
             type: 'text',
             filterValue: null,
             event: getInputEvents,
@@ -267,7 +262,7 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: VnSelect,
+            component: 'select',
             filterParamKey: 'zoneFk',
             type: 'select',
             filterValue: null,
@@ -287,7 +282,7 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: VnInput,
+            component: 'input',
             type: 'text',
             filterValue: null,
             event: getInputEvents,
@@ -297,9 +292,33 @@ const columns = computed(() => [
         },
     },
     {
-        name: 'rowActions',
+        align: 'right',
-        align: 'left',
+        name: 'tableActions',
-        sortable: true,
+        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,
+                },
+            },
+        ],
     },
 ]);
 
@@ -357,12 +376,12 @@ const redirectToSales = (id) => {
     window.open(url, '_blank');
 };
 
-onMounted(async () => {
+// onMounted(async () => {
-    const filteredColumns = columns.value.filter((col) => col.name !== 'rowActions');
+//     const filteredColumns = columns.value.filter((col) => col.name !== 'rowActions');
-    allColumnNames.value = filteredColumns.map((col) => col.name);
+//     allColumnNames.value = filteredColumns.map((col) => col.name);
-    params = fetchParams();
+//     params = fetchParams();
-    await paginateRef.value.addFilter(null, params);
+//     await paginateRef.value.addFilter(null, params);
-});
+// });
 </script>
 
 <template>
@@ -403,7 +422,8 @@ onMounted(async () => {
         auto-load
         @on-fetch="(data) => (zonesOptions = data)"
     />
-    <VnPaginate
+    <VnTable
+        class="column flex-center fit"
         ref="paginateRef"
         data-key="SalesMonitorTickets"
         url="SalesMonitors/salesFilter"
@@ -412,18 +432,14 @@ onMounted(async () => {
         :expr-builder="exprBuilder"
         :user-params="params"
         :offset="50"
-    >
-        <template #body="{ rows }">
-            <QTable
-                :rows="rows"
         :columns="columns"
-                row-key="id"
-                :pagination="{ rowsPerPage: 0 }"
         :visible-columns="visibleColumns"
-                :no-data-label="t('globals.noResults')"
+        :right-search="false"
+        default-mode="table"
+        auto-load
         @row-click="(_, row) => redirectToTicketSummary(row.id)"
     >
-                <template #top>
+        <template #top-left>
             <TableVisibleColumns
                 :all-columns="allColumnNames"
                 table-code="ticketsMonitor"
@@ -436,36 +452,15 @@ onMounted(async () => {
                 @update:model-value="autoRefreshHandler"
             />
         </template>
-                <template #top-row="{ cols }">
+        <template #column-problems="{ row }">
-                    <QTr>
+            <QTd class="q-gutter-x-sm" style="max-width: 50px">
-                        <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>{{
+                    <QTooltip>{{ t('salesTicketsTable.noVerifiedData') }}</QTooltip>
-                                t('salesTicketsTable.noVerifiedData')
-                            }}</QTooltip>
                 </QIcon>
                 <QIcon
                     v-if="row.hasTicketRequest"
@@ -473,9 +468,7 @@ onMounted(async () => {
                     color="primary"
                     size="xs"
                 >
-                            <QTooltip>{{
+                    <QTooltip>{{ t('salesTicketsTable.purchaseRequest') }}</QTooltip>
-                                t('salesTicketsTable.purchaseRequest')
-                            }}</QTooltip>
                 </QIcon>
                 <QIcon
                     v-if="row.itemShortage"
@@ -485,12 +478,7 @@ onMounted(async () => {
                 >
                     <QTooltip>{{ t('salesTicketsTable.notVisible') }}</QTooltip>
                 </QIcon>
-                        <QIcon
+                <QIcon v-if="row.isFreezed" name="vn:frozen" color="primary" size="xs">
-                            v-if="row.isFreezed"
-                            name="vn:frozen"
-                            color="primary"
-                            size="xs"
-                        >
                     <QTooltip>{{ t('salesTicketsTable.clientFrozen') }}</QTooltip>
                 </QIcon>
                 <QIcon
@@ -499,10 +487,7 @@ onMounted(async () => {
                     :color="row.hasHighRisk ? 'negative' : 'primary'"
                     size="xs"
                 >
-                            <QTooltip
+                    <QTooltip>{{ t('salesTicketsTable.risk') }}: {{ row.risk }}</QTooltip>
-                                >{{ t('salesTicketsTable.risk') }}:
-                                {{ row.risk }}</QTooltip
-                            >
                 </QIcon>
                 <QIcon
                     v-if="row.hasComponentLack"
@@ -510,9 +495,7 @@ onMounted(async () => {
                     color="primary"
                     size="xs"
                 >
-                            <QTooltip>{{
+                    <QTooltip>{{ t('salesTicketsTable.componentLack') }}</QTooltip>
-                                t('salesTicketsTable.componentLack')
-                            }}</QTooltip>
                 </QIcon>
                 <QIcon
                     v-if="row.isTooLittle"
@@ -524,7 +507,7 @@ onMounted(async () => {
                 </QIcon>
             </QTd>
         </template>
-                <template #body-cell-identifier="{ row }">
+        <template #column-identifier="{ row }">
             <QTd>
                 <span class="link" @click.stop.prevent>
                     {{ row.id }}
@@ -532,19 +515,19 @@ onMounted(async () => {
                 </span>
             </QTd>
         </template>
-                <template #body-cell-client="{ row }">
+        <template #column-client="{ row }">
             <QTd @click.stop.prevent>
                 <span class="link">{{ row.nickname }}</span>
                 <CustomerDescriptorProxy :id="row.clientFk" />
             </QTd>
         </template>
-                <template #body-cell-salesPerson="{ row }">
+        <template #column-salesPerson="{ row }">
             <QTd @click.stop.prevent>
                 <span class="link">{{ row.userName }}</span>
                 <WorkerDescriptorProxy :id="row.salesPersonFk" />
             </QTd>
         </template>
-                <template #body-cell-date="{ row }">
+        <template #column-date="{ row }">
             <QTd>
                 <QBadge
                     v-bind="getBadgeAttrs(row.shippedDate)"
@@ -555,7 +538,7 @@ onMounted(async () => {
                 </QBadge>
             </QTd>
         </template>
-                <template #body-cell-state="{ row }">
+        <template #column-state="{ row }">
             <QTd @click.stop.prevent>
                 <div v-if="row.refFk">
                     <span class="link">{{ row.refFk }}</span>
@@ -572,25 +555,20 @@ onMounted(async () => {
                 </QBadge>
             </QTd>
         </template>
-                <template #body-cell-isFragile="{ row }">
+        <template #column-isFragile="{ row }">
             <QTd>
-                        <QIcon
+                <QIcon v-if="row.isFragile" name="local_bar" color="primary" size="sm">
-                            v-if="row.isFragile"
-                            name="local_bar"
-                            color="primary"
-                            size="sm"
-                        >
                     <QTooltip>{{ t('salesTicketsTable.isFragile') }}</QTooltip>
                 </QIcon>
             </QTd>
         </template>
-                <template #body-cell-zone="{ row }">
+        <template #column-zone="{ row }">
             <QTd @click.stop.prevent>
                 <span class="link">{{ row.zoneName }}</span>
                 <ZoneDescriptorProxy :id="row.zoneFk" />
             </QTd>
         </template>
-                <template #body-cell-total="{ row }">
+        <template #column-total="{ row }">
             <QTd>
                 <QBadge
                     :color="totalPriceColor(row) || 'transparent'"
@@ -602,32 +580,5 @@ onMounted(async () => {
                 </QBadge>
             </QTd>
         </template>
-                <template #body-cell-rowActions="{ row }">
+    </VnTable>
-                    <QTd @click.stop.prevent>
-                        <QBtn
-                            icon="vn:lines"
-                            color="primary"
-                            size="md"
-                            class="q-mr-sm"
-                            flat
-                            dense
-                            @click="redirectToSales(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>
-    </VnPaginate>
 </template>