feat: salesOrderTable

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';
@@ -51,18 +52,21 @@ const columns = computed(() => [
         field: 'dated',
         align: 'left',
         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"
-                    selection="multiple"
-                    v-model:selected="selectedRows"
-                    :pagination="{ rowsPerPage: 0 }"
-                    :no-data-label="t('globals.noResults')"
+            :table="{
+                'row-key': 'id',
+                selection: 'multiple',
+                'hide-bottom': true,
+            }"
+            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,7 +162,7 @@ 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)"
@@ -170,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>
@@ -179,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>
@@ -188,9 +194,7 @@ const redirectToOrderSummary = (orderId) => {
                     <span>{{ toCurrency(row.import) }}</span>
                 </QTd>
             </template>
-                </QTable>
-            </template>
-        </VnPaginate>
+        </VnTable>
     </QCard>
 </template>
 <style lang="scss" scoped>