From 44294bb46a6e6c71f6f2e996c4baa9cc7ab78f9a Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 10 Jul 2024 09:56:37 +0200
Subject: [PATCH] feat: salesOrderTable

---
 src/pages/Monitor/SalesOrdersTable.vue | 128 +++++++++++++------------
 1 file changed, 66 insertions(+), 62 deletions(-)

diff --git a/src/pages/Monitor/SalesOrdersTable.vue b/src/pages/Monitor/SalesOrdersTable.vue
index bb7da98b6..f0c389aa6 100644
--- a/src/pages/Monitor/SalesOrdersTable.vue
+++ b/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,78 +123,78 @@ 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
+            :columns="columns"
+            :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 #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')"
-                    @row-click="(_, row) => redirectToOrderSummary(row.id)"
+            <template #top-left>
+                <QBtn
+                    v-if="selectedRows.length > 0"
+                    icon="delete"
+                    size="md"
+                    color="primary"
+                    @click="
+                        openConfirmationModal(
+                            t('salesOrdersTable.deleteConfirmTitle'),
+                            t('salesOrdersTable.deleteConfirmMessage'),
+                            removeOrders
+                        )
+                    "
                 >
-                    <template #top>
-                        <QBtn
-                            v-if="selectedRows.length > 0"
-                            icon="delete"
-                            size="md"
-                            color="primary"
-                            @click="
-                                openConfirmationModal(
-                                    t('salesOrdersTable.deleteConfirmTitle'),
-                                    t('salesOrdersTable.deleteConfirmMessage'),
-                                    removeOrders
-                                )
-                            "
-                        >
-                            <QTooltip>{{ t('salesOrdersTable.delete') }}</QTooltip>
-                        </QBtn>
-                    </template>
-                    <template #body-cell-date="{ row }">
-                        <QTd>
-                            <QBadge
-                                :color="getBadgeColor(row.date_send)"
-                                text-color="black"
-                                class="q-pa-sm q-mb-md"
-                                style="font-size: 14px"
-                            >
-                                {{ toDateFormat(row.date_send) }}
-                            </QBadge>
-                            <div>{{ toDateTimeFormat(row.date_make) }}</div>
-                        </QTd>
-                    </template>
-                    <template #body-cell-client="{ row }">
-                        <QTd>
-                            <div class="q-mb-md">
-                                <span class="link">{{ row.clientName }}</span>
-                                <CustomerDescriptorProxy :id="row.clientFk" />
-                            </div>
-                            <span> {{ row.agencyName }}</span>
-                        </QTd>
-                    </template>
-                    <template #body-cell-salesPerson="{ row }">
-                        <QTd>
-                            <div class="q-mb-md">
-                                <span class="link">{{ row.salesPerson }}</span>
-                                <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
-                            </div>
-                            <span>{{ toCurrency(row.import) }}</span>
-                        </QTd>
-                    </template>
-                </QTable>
+                    <QTooltip>{{ t('salesOrdersTable.delete') }}</QTooltip>
+                </QBtn>
             </template>
-        </VnPaginate>
+            <template #column-date="{ row }">
+                <QTd>
+                    <QBadge
+                        :color="getBadgeColor(row.date_send)"
+                        text-color="black"
+                        class="q-pa-sm q-mb-md"
+                        style="font-size: 14px"
+                    >
+                        {{ toDateFormat(row.date_send) }}
+                    </QBadge>
+                    <div>{{ toDateTimeFormat(row.date_make) }}</div>
+                </QTd>
+            </template>
+            <template #column-client="{ row }">
+                <QTd>
+                    <div class="q-mb-md">
+                        <span class="link">{{ row.clientName }}</span>
+                        <CustomerDescriptorProxy :id="row.clientFk" />
+                    </div>
+                    <span> {{ row.agencyName }}</span>
+                </QTd>
+            </template>
+
+            <template #column-salesPerson="{ row }">
+                <QTd>
+                    <div class="q-mb-md">
+                        <span class="link">{{ row.salesPerson }}</span>
+                        <WorkerDescriptorProxy :id="row.salesPersonFk" dense />
+                    </div>
+                    <span>{{ toCurrency(row.import) }}</span>
+                </QTd>
+            </template>
+        </VnTable>
     </QCard>
 </template>
 <style lang="scss" scoped>