From ada1c948f62dc71350717b1dd3056e5a4f264586 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 19 Aug 2024 10:14:02 +0200
Subject: [PATCH] feat: refs #7353 split sections

---
 src/i18n/locale/en.yml                      |  2 +
 src/i18n/locale/es.yml                      |  2 +
 src/pages/Monitor/MonitorClientsActions.vue | 47 +++++++++++
 src/pages/Monitor/MonitorList.vue           | 90 ---------------------
 src/pages/Monitor/MonitorTickets.vue        | 27 +++++++
 src/pages/Monitor/SalesOrdersTable.vue      | 22 +++--
 src/pages/Monitor/locale/en.yml             |  3 +-
 src/pages/Monitor/locale/es.yml             |  3 +-
 src/router/modules/monitor.js               | 22 +++--
 9 files changed, 115 insertions(+), 103 deletions(-)
 create mode 100644 src/pages/Monitor/MonitorClientsActions.vue
 delete mode 100644 src/pages/Monitor/MonitorList.vue
 create mode 100644 src/pages/Monitor/MonitorTickets.vue

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 7d3682525..d468d3bdb 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -254,6 +254,8 @@ globals:
         twoFactor: Two factor
         recoverPassword: Recover password
         resetPassword: Reset password
+        ticketsMonitor: Tickets monitor
+        clientsActionsMonitor: Clients and actions
     created: Created
     worker: Worker
     now: Now
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index 8157f1803..d471c8ecc 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -256,6 +256,8 @@ globals:
         twoFactor: Doble factor
         recoverPassword: Recuperar contraseña
         resetPassword: Restablecer contraseña
+        ticketsMonitor: Monitor de tickets
+        clientsActionsMonitor: Clientes y acciones
     created: Fecha creación
     worker: Trabajador
     now: Ahora
diff --git a/src/pages/Monitor/MonitorClientsActions.vue b/src/pages/Monitor/MonitorClientsActions.vue
new file mode 100644
index 000000000..9d0cf05fb
--- /dev/null
+++ b/src/pages/Monitor/MonitorClientsActions.vue
@@ -0,0 +1,47 @@
+<script setup>
+import { onMounted, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+import SalesClientTable from './SalesClientsTable.vue';
+import SalesOrdersTable from './SalesOrdersTable.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+
+const { t } = useI18n();
+const stateStore = useStateStore();
+
+onMounted(async () => (stateStore.leftDrawer = false));
+onUnmounted(() => (stateStore.leftDrawer = true));
+</script>
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="SalesMonitorTickets"
+                url="SalesMonitors/salesFilter"
+                :redirect="false"
+                :label="t('searchBar.label')"
+                :info="t('searchBar.info')"
+            />
+        </Teleport>
+    </template>
+    <div class="q-pa-md container" style="gap: 10px">
+        <div style="flex: 0.4">
+            <span class="text-body1" v-text="t('salesMonitor.clientsOnWebsite')" />
+            <SalesClientTable />
+        </div>
+        <div style="flex: 0.6">
+            <span class="text-body1" v-text="t('salesMonitor.recentOrderActions')" />
+            <SalesOrdersTable />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.container {
+    display: flex;
+
+    @media (max-width: $breakpoint-md-max) {
+        flex-direction: column;
+    }
+}
+</style>
diff --git a/src/pages/Monitor/MonitorList.vue b/src/pages/Monitor/MonitorList.vue
deleted file mode 100644
index 4906247e8..000000000
--- a/src/pages/Monitor/MonitorList.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<script setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import { useStateStore } from 'stores/useStateStore';
-import SalesClientTable from './SalesClientsTable.vue';
-import SalesOrdersTable from './SalesOrdersTable.vue';
-import SalesTicketsTable from './SalesTicketsTable.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
-
-const { t } = useI18n();
-const stateStore = useStateStore();
-
-const expanded = ref(true);
-
-onMounted(async () => {
-    stateStore.leftDrawer = false;
-});
-
-onUnmounted(() => (stateStore.leftDrawer = true));
-</script>
-
-<template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="SalesMonitorTickets"
-                url="SalesMonitors/salesFilter"
-                :redirect="false"
-                :label="t('searchBar.label')"
-                :info="t('searchBar.info')"
-            />
-        </Teleport>
-    </template>
-    <QPage class="column items-center q-pa-md">
-        <QCard class="full-width q-mb-lg">
-            <QExpansionItem v-model="expanded" dense :duration="150">
-                <template v-if="!expanded" #header>
-                    <div class="row full-width">
-                        <span class="flex col text-body1">
-                            {{ t('salesMonitor.clientsOnWebsite') }}
-                        </span>
-                        <span class="flex col q-ml-xl text-body1">
-                            {{ t('salesMonitor.recentOrderActions') }}
-                        </span>
-                    </div>
-                </template>
-                <template #default>
-                    <div class="expansion-tables-container">
-                        <QCardSection class="col">
-                            <span class="flex col q-mb-sm text-body1">
-                                {{ t('salesMonitor.clientsOnWebsite') }}
-                            </span>
-                            <SalesClientTable />
-                        </QCardSection>
-                        <QCardSection class="col">
-                            <span class="flex col q-mb-sm text-body1">
-                                {{ t('salesMonitor.recentOrderActions') }}
-                            </span>
-                            <SalesOrdersTable />
-                        </QCardSection>
-                    </div>
-                </template>
-            </QExpansionItem>
-        </QCard>
-        <QCard class="full-width">
-            <QItem class="justify-between">
-                <QItemLabel class="col slider-container">
-                    <span class="text-body1"
-                        >{{ t('salesMonitor.ticketsMonitor') }}
-                    </span>
-                    <QCardSection class="col" style="padding-inline: 0"
-                        ><SalesTicketsTable />
-                    </QCardSection>
-                </QItemLabel>
-            </QItem>
-        </QCard>
-    </QPage>
-</template>
-
-<style lang="scss" scoped>
-.expansion-tables-container {
-    display: flex;
-    border-top: 1px solid $color-spacer;
-
-    @media (max-width: $breakpoint-md-max) {
-        flex-direction: column;
-    }
-}
-</style>
diff --git a/src/pages/Monitor/MonitorTickets.vue b/src/pages/Monitor/MonitorTickets.vue
new file mode 100644
index 000000000..57ba00e57
--- /dev/null
+++ b/src/pages/Monitor/MonitorTickets.vue
@@ -0,0 +1,27 @@
+<script setup>
+import { onMounted, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+import SalesTicketsTable from './SalesTicketsTable.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+
+const { t } = useI18n();
+const stateStore = useStateStore();
+
+onMounted(async () => (stateStore.leftDrawer = false));
+onUnmounted(() => (stateStore.leftDrawer = true));
+</script>
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="SalesMonitorTickets"
+                url="SalesMonitors/salesFilter"
+                :redirect="false"
+                :label="t('searchBar.label')"
+                :info="t('searchBar.info')"
+            />
+        </Teleport>
+    </template>
+    <SalesTicketsTable />
+</template>
diff --git a/src/pages/Monitor/SalesOrdersTable.vue b/src/pages/Monitor/SalesOrdersTable.vue
index 496d5134c..dc723e541 100644
--- a/src/pages/Monitor/SalesOrdersTable.vue
+++ b/src/pages/Monitor/SalesOrdersTable.vue
@@ -27,13 +27,21 @@ function exprBuilder(param, value) {
 
 const columns = computed(() => [
     {
-        label: t('salesOrdersTable.date'),
-        name: 'date',
-        field: 'dated',
+        label: t('salesOrdersTable.dateSend'),
+        name: 'dateSend',
+        field: 'dateSend',
         align: 'left',
         orderBy: 'date_send',
         columnFilter: false,
     },
+    {
+        label: t('salesOrdersTable.dateMake'),
+        name: 'dateMake',
+        field: 'dateMake',
+        align: 'left',
+        orderBy: 'date_make',
+        columnFilter: false,
+    },
     {
         label: t('salesOrdersTable.client'),
         name: 'clientFk',
@@ -144,7 +152,7 @@ const openTab = (id) =>
                     <QTooltip>{{ t('salesOrdersTable.delete') }}</QTooltip>
                 </QBtn>
             </template>
-            <template #column-date="{ row }">
+            <template #column-dateSend="{ row }">
                 <QTd>
                     <QBadge
                         :color="getBadgeColor(row.date_send)"
@@ -154,7 +162,11 @@ const openTab = (id) =>
                     >
                         {{ toDateFormat(row.date_send) }}
                     </QBadge>
-                    <div>{{ toDateTimeFormat(row.date_make) }}</div>
+                </QTd>
+            </template>
+            <template #column-dateMake="{ row }">
+                <QTd>
+                    {{ row.date_make }}
                 </QTd>
             </template>
             <template #column-clientFk="{ row }">
diff --git a/src/pages/Monitor/locale/en.yml b/src/pages/Monitor/locale/en.yml
index f58db7854..629005191 100644
--- a/src/pages/Monitor/locale/en.yml
+++ b/src/pages/Monitor/locale/en.yml
@@ -11,7 +11,8 @@ salesClientsTable:
     client: Client
 salesOrdersTable:
     delete: Delete
-    date: Date
+    dateSend: Send date
+    dateMake: Make date
     client: Client
     salesPerson: Salesperson
     deleteConfirmTitle: Delete selected elements
diff --git a/src/pages/Monitor/locale/es.yml b/src/pages/Monitor/locale/es.yml
index 918b51813..cf73550be 100644
--- a/src/pages/Monitor/locale/es.yml
+++ b/src/pages/Monitor/locale/es.yml
@@ -11,7 +11,8 @@ salesClientsTable:
     client: Cliente
 salesOrdersTable:
     delete: Eliminar
-    date: Fecha
+    dateSend: Fecha de envío
+    dateMake: Fecha de realización
     client: Cliente
     salesPerson: Comercial
     deleteConfirmTitle: Eliminar los elementos seleccionados
diff --git a/src/router/modules/monitor.js b/src/router/modules/monitor.js
index f0db8d3f3..904f2db74 100644
--- a/src/router/modules/monitor.js
+++ b/src/router/modules/monitor.js
@@ -11,7 +11,7 @@ export default {
     component: RouterView,
     redirect: { name: 'MonitorMain' },
     menus: {
-        main: ['MonitorList'],
+        main: ['MonitorTickets', 'MonitorClientsActions'],
         card: [],
     },
     children: [
@@ -19,16 +19,26 @@ export default {
             path: '',
             name: 'MonitorMain',
             component: () => import('src/components/common/VnSectionMain.vue'),
-            redirect: { name: 'MonitorList' },
+            redirect: { name: 'MonitorTickets' },
             children: [
                 {
-                    path: 'list',
-                    name: 'MonitorList',
+                    path: 'tickets',
+                    name: 'MonitorTickets',
                     meta: {
-                        title: 'list',
+                        title: 'ticketsMonitor',
                         icon: 'grid_view',
                     },
-                    component: () => import('src/pages/Monitor/MonitorList.vue'),
+                    component: () => import('src/pages/Monitor/MonitorTickets.vue'),
+                },
+                {
+                    path: 'clients-actions',
+                    name: 'MonitorClientsActions',
+                    meta: {
+                        title: 'clientsActionsMonitor',
+                        icon: 'grid_view',
+                    },
+                    component: () =>
+                        import('src/pages/Monitor/MonitorClientsActions.vue'),
                 },
             ],
         },