Merge branch 'dev' into 7017_formModel_validations

src/pages/Monitor/MonitorList.vue

@@ -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>

src/pages/Monitor/SalesClientsTable.vue

@@ -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,40 +75,20 @@ const columns = computed(() => [
         field: 'salesPerson',
         align: 'left',
         sortable: true,
-        columnFilter: {
+        columnField: {
-            component: VnSelect,
+            component: null,
-            filterParamKey: 'salesPersonFk',
-            type: 'select',
-            filterValue: null,
-            attrs: {
-                options: workersActiveOptions.value,
-                'option-value': 'id',
-                'option-label': 'name',
-                dense: true,
         },
     },
-        format: (val) => dashIfEmpty(val),
-    },
     {
         label: t('salesClientsTable.client'),
         field: 'clientName',
         name: 'client',
         align: 'left',
         sortable: true,
-        columnFilter: {
+        columnField: {
-            component: VnSelect,
+            component: null,
-            filterParamKey: 'clientFk',
-            type: 'select',
-            filterValue: null,
-            attrs: {
-                options: clientsOptions.value,
-                'option-value': 'id',
-                'option-label': 'name',
-                dense: true,
         },
     },
-        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
-        >
-            <template #body="{ rows }">
-                <QTable
-                    :rows="rows"
             :columns="columns"
-                    row-key="id"
+            :right-search="false"
-                    :pagination="{ rowsPerPage: 0 }"
+            default-mode="table"
-                    class="full-width"
+            dense
-                    :no-data-label="t('globals.noResults')"
+            :without-header="true"
         >
-                    <template #top>
+            <template #column-salesPerson="{ row }">
-                        <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 }">
+            <template #column-client="{ row }">
                 <QTd>
                     <span class="link">{{ row.clientName }}</span>
                     <CustomerDescriptorProxy :id="row.clientFk" />
                 </QTd>
             </template>
-                </QTable>
+        </VnTable>
-            </template>
-        </VnPaginate>
     </QCard>
 </template>

src/pages/Monitor/SalesOrdersTable.vue

@@ -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,28 +123,29 @@ 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
-        >
-            <template #body="{ rows }">
-                <QTable
-                    :rows="rows"
             :columns="columns"
-                    row-key="id"
+            :table="{
-                    selection="multiple"
+                'row-key': 'id',
-                    v-model:selected="selectedRows"
+                selection: 'multiple',
-                    :pagination="{ rowsPerPage: 0 }"
+                'hide-bottom': true,
-                    :no-data-label="t('globals.noResults')"
+            }"
+            default-mode="table"
+            :without-header="false"
             @row-click="(_, row) => redirectToOrderSummary(row.id)"
+            v-model:selected="selectedRows"
         >
-                    <template #top>
+            <template #top-left>
                 <QBtn
                     v-if="selectedRows.length > 0"
                     icon="delete"
@@ -157,13 +162,12 @@ const redirectToOrderSummary = (orderId) => {
                     <QTooltip>{{ t('salesOrdersTable.delete') }}</QTooltip>
                 </QBtn>
             </template>
-                    <template #body-cell-date="{ row }">
+            <template #column-date="{ row }">
                 <QTd>
                     <QBadge
                         :color="getBadgeColor(row.date_send)"
                         text-color="black"
-                                class="q-ma-none q-mb-md"
+                        class="q-pa-sm q-mb-md"
-                                dense
                         style="font-size: 14px"
                     >
                         {{ toDateFormat(row.date_send) }}
@@ -171,7 +175,7 @@ const redirectToOrderSummary = (orderId) => {
                     <div>{{ toDateTimeFormat(row.date_make) }}</div>
                 </QTd>
             </template>
-                    <template #body-cell-client="{ row }">
+            <template #column-client="{ row }">
                 <QTd>
                     <div class="q-mb-md">
                         <span class="link">{{ row.clientName }}</span>
@@ -180,7 +184,8 @@ const redirectToOrderSummary = (orderId) => {
                     <span> {{ row.agencyName }}</span>
                 </QTd>
             </template>
-                    <template #body-cell-salesPerson="{ row }">
+
+            <template #column-salesPerson="{ row }">
                 <QTd>
                     <div class="q-mb-md">
                         <span class="link">{{ row.salesPerson }}</span>
@@ -189,9 +194,7 @@ const redirectToOrderSummary = (orderId) => {
                     <span>{{ toCurrency(row.import) }}</span>
                 </QTd>
             </template>
-                </QTable>
+        </VnTable>
-            </template>
-        </VnPaginate>
     </QCard>
 </template>
 <style lang="scss" scoped>

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: {
+            dense: true,
+        },
     },
     {
         label: t('salesTicketsTable.identifier'),
@@ -111,11 +114,10 @@ const columns = computed(() => [
         field: 'id',
         align: 'left',
         sortable: true,
+
         columnFilter: {
-            component: VnInput,
+            component: 'input',
-            type: 'text',
+            name: 'id',
-            filterValue: null,
-            event: getInputEvents,
             attrs: {
                 dense: true,
             },
@@ -128,10 +130,8 @@ const columns = computed(() => [
         field: 'nickname',
         sortable: true,
         columnFilter: {
-            component: VnInput,
+            component: 'input',
-            type: 'text',
+            name: 'nickname',
-            filterValue: null,
-            event: getInputEvents,
             attrs: {
                 dense: true,
             },
@@ -144,11 +144,8 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: VnSelect,
+            component: 'select',
-            filterParamKey: 'salesPersonFk',
+            name: 'salesPersonFk',
-            type: 'select',
-            filterValue: null,
-            event: getInputEvents,
             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,
+            component: 'date',
-            filterParamKey: 'shippedDate',
+            name: 'shippedDate',
-            type: 'date',
-            filterValue: null,
-            event: getInputEvents,
             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,
+            component: 'input',
-            type: 'text',
+            name: 'practicalHour',
-            filterValue: null,
-            event: getInputEvents,
             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,
+            component: 'select',
-            filterParamKey: 'provinceFk',
+            name: 'provinceFk',
-            type: 'select',
-            filterValue: null,
-            event: getInputEvents,
             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,
+            component: 'select',
-            filterParamKey: 'stateFk',
+            name: 'stateFk',
-            type: 'select',
-            filterValue: null,
-            event: getInputEvents,
             attrs: {
                 options: statesOptions.value,
                 'option-value': 'id',
@@ -252,13 +255,13 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: VnInput,
+            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,
         },
     },
     {
@@ -267,11 +270,8 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: VnSelect,
+            component: 'select',
-            filterParamKey: 'zoneFk',
+            name: 'zoneFk',
-            type: 'select',
-            filterValue: null,
-            event: getInputEvents,
             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,
+            component: 'input',
-            type: 'text',
+            name: 'totalWithVat',
-            filterValue: null,
-            event: getInputEvents,
             attrs: {
                 dense: true,
             },
         },
     },
     {
-        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,
+                },
+            },
+        ],
     },
 ]);
 
@@ -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 redirectToSales = (id) => {
-    const filteredColumns = columns.value.filter((col) => col.name !== 'rowActions');
+    const url = `#/ticket/${id}/sale`;
-    allColumnNames.value = filteredColumns.map((col) => col.name);
+    window.open(url, '_blank');
-    params = fetchParams();
+};
-    await paginateRef.value.addFilter(null, params);
+
-});
+// 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,18 +435,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"
@@ -427,36 +455,15 @@ onMounted(async () => {
                 @update:model-value="autoRefreshHandler"
             />
         </template>
-                <template #top-row="{ cols }">
+        <template #column-problems="{ row }">
-                    <QTr>
+            <QTd class="no-padding" 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"
@@ -464,9 +471,7 @@ onMounted(async () => {
                     color="primary"
                     size="xs"
                 >
-                            <QTooltip>{{
+                    <QTooltip>{{ t('salesTicketsTable.purchaseRequest') }}</QTooltip>
-                                t('salesTicketsTable.purchaseRequest')
-                            }}</QTooltip>
                 </QIcon>
                 <QIcon
                     v-if="row.itemShortage"
@@ -476,12 +481,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
@@ -490,10 +490,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"
@@ -501,9 +498,7 @@ onMounted(async () => {
                     color="primary"
                     size="xs"
                 >
-                            <QTooltip>{{
+                    <QTooltip>{{ t('salesTicketsTable.componentLack') }}</QTooltip>
-                                t('salesTicketsTable.componentLack')
-                            }}</QTooltip>
                 </QIcon>
                 <QIcon
                     v-if="row.isTooLittle"
@@ -515,38 +510,39 @@ onMounted(async () => {
                 </QIcon>
             </QTd>
         </template>
-                <template #body-cell-identifier="{ row }">
+        <template #column-identifier="{ row }">
-                    <QTd>
+            <QTd class="no-padding">
-                        <span class="link" @click.stop.prevent>{{ row.id }}</span>
+                <span class="link" @click.stop.prevent>
+                    {{ row.id }}
                     <TicketDescriptorProxy :id="row.id" />
+                </span>
             </QTd>
         </template>
-                <template #body-cell-client="{ row }">
+        <template #column-client="{ row }">
-                    <QTd @click.stop.prevent>
+            <QTd class="no-padding" @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>
+            <QTd class="no-padding" @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>
+            <QTd class="no-padding">
                 <QBadge
                     v-bind="getBadgeAttrs(row.shippedDate)"
-                            class="q-ma-none"
+                    class="q-pa-sm"
-                            dense
                     style="font-size: 14px"
                 >
                     {{ formatShippedDate(row.shippedDate) }}
                 </QBadge>
             </QTd>
         </template>
-                <template #body-cell-state="{ row }">
+        <template #column-state="{ row }">
-                    <QTd @click.stop.prevent>
+            <QTd class="no-padding" @click.stop.prevent>
                 <div v-if="row.refFk">
                     <span class="link">{{ row.refFk }}</span>
                     <InvoiceOutDescriptorProxy :id="row.invoiceOutId" />
@@ -555,69 +551,37 @@ onMounted(async () => {
                     v-else
                     :color="stateColors[row.classColor] || 'transparent'"
                     :text-color="stateColors[row.classColor] ? 'black' : 'white'"
-                            dense
+                    class="q-pa-sm"
                     style="font-size: 14px"
                 >
                     {{ row.state }}
                 </QBadge>
             </QTd>
         </template>
-                <template #body-cell-isFragile="{ row }">
+        <template #column-isFragile="{ row }">
-                    <QTd>
+            <QTd class="no-padding">
-                        <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>
+            <QTd class="no-padding" @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>
+            <QTd class="no-padding">
                 <QBadge
                     :color="totalPriceColor(row) || 'transparent'"
                     :text-color="totalPriceColor(row) ? 'black' : 'white'"
-                            dense
+                    class="q-pa-sm"
                     style="font-size: 14px"
                 >
                     {{ toCurrency(row.totalWithVat) }}
                 </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
-                            :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>
-    </VnPaginate>
 </template>