chore: refs #7353 use Vue component nomenclature

src/pages/Monitor/MonitorClientsActions.vue

@@ -1,26 +1,9 @@
 <script setup>
-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';
+import SalesClientTable from './MonitorSaleClients.vue';
+import SalesOrdersTable from './MonitorSaleOrders.vue';
 import VnRow from 'src/components/ui/VnRow.vue';
-
-const { t } = useI18n();
-const stateStore = useStateStore();
 </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>
     <VnRow
         class="q-pa-md"
         :style="{ 'flex-direction': $q.screen.lt.lg ? 'column' : 'row', gap: '0px' }"
@@ -28,14 +11,14 @@ const stateStore = useStateStore();
         <div style="flex: 0.25">
             <span
                 class="q-ml-md text-body1"
-                v-text="t('salesMonitor.clientsOnWebsite')"
+                v-text="$t('salesMonitor.clientsOnWebsite')"
             />
             <SalesClientTable />
         </div>
         <div style="flex: 0.75">
             <span
                 class="q-ml-md text-body1"
-                v-text="t('salesMonitor.recentOrderActions')"
+                v-text="$t('salesMonitor.recentOrderActions')"
             />
             <SalesOrdersTable />
         </div>

src/pages/Monitor/MonitorSaleClients.vue

@@ -112,7 +112,6 @@ const columns = computed(() => [
         url="SalesMonitors/clientsFilter"
         search-url="SalesMonitorClients"
         :order="['dated DESC', 'hour DESC']"
-        :limit="6"
         :expr-builder="exprBuilder"
         :filter="filter"
         :offset="50"
@@ -122,7 +121,6 @@ const columns = computed(() => [
         default-mode="table"
         :disable-option="{ card: true }"
         dense
-        style="max-height: 380px; overflow-y: scroll"
     >
         <template #top-left>
             <VnRow>

src/pages/Monitor/MonitorSaleOrders.vue

@@ -111,7 +111,6 @@ const openTab = (id) =>
         url="SalesMonitors/ordersFilter"
         search-url="SalesMonitorOrders"
         order="date_send DESC"
-        :limit="6"
         :right-search="false"
         :expr-builder="exprBuilder"
         auto-load
@@ -125,7 +124,6 @@ const openTab = (id) =>
         :row-click="({ id }) => openTab(id)"
         v-model:selected="selectedRows"
         :disable-option="{ card: true }"
-        style="max-height: 380px; overflow-y: scroll"
     >
         <template #top-left>
             <QBtn

src/pages/Monitor/MonitorTickets.vue

@@ -12,9 +12,12 @@ import VnTable from 'components/VnTable/VnTable.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { toDateFormat } from 'src/filters/date.js';
 import { toCurrency, dateRange } from 'src/filters';
+import { useStateStore } from 'stores/useStateStore';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
 
 const DEFAULT_AUTO_REFRESH = 2 * 60 * 1000; // 2min in ms
 const { t } = useI18n();
+const stateStore = useStateStore();
 const autoRefresh = ref(false);
 const tableRef = ref(null);
 const provinceOpts = ref([]);
@@ -322,6 +325,17 @@ const openTab = (id) =>
         auto-load
         @on-fetch="(data) => (zoneOpts = data)"
     />
+    <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>
     <VnTable
         ref="tableRef"
         data-key="SalesMonitorTickets"
@@ -339,11 +353,21 @@ const openTab = (id) =>
         :disable-option="{ card: true }"
     >
         <template #top-left>
+            <QBtn
+                icon="refresh"
+                size="md"
+                color="primary"
+                dense
+                flat
+                @click="$refs.tableRef.reload()"
+            />
             <QCheckbox
                 v-model="autoRefresh"
-                :label="t('salesTicketsTable.autoRefresh')"
+                :label="$t('salesTicketsTable.autoRefresh')"
                 @update:model-value="autoRefreshHandler"
-            />
+            >
+                <QTooltip>{{ $t('refreshInfo') }}</QTooltip>
+            </QCheckbox>
         </template>
         <template #column-totalProblems="{ row }">
             <QTd class="no-padding" style="max-width: 50px">
@@ -353,7 +377,7 @@ const openTab = (id) =>
                     color="primary"
                     size="xs"
                 >
-                    <QTooltip>{{ t('salesTicketsTable.noVerifiedData') }}</QTooltip>
+                    <QTooltip>{{ $t('salesTicketsTable.noVerifiedData') }}</QTooltip>
                 </QIcon>
                 <QIcon
                     v-if="row.hasTicketRequest"
@@ -361,7 +385,7 @@ const openTab = (id) =>
                     color="primary"
                     size="xs"
                 >
-                    <QTooltip>{{ t('salesTicketsTable.purchaseRequest') }}</QTooltip>
+                    <QTooltip>{{ $t('salesTicketsTable.purchaseRequest') }}</QTooltip>
                 </QIcon>
                 <QIcon
                     v-if="row.itemShortage"
@@ -369,10 +393,10 @@ const openTab = (id) =>
                     color="primary"
                     size="xs"
                 >
-                    <QTooltip>{{ t('salesTicketsTable.notVisible') }}</QTooltip>
+                    <QTooltip>{{ $t('salesTicketsTable.notVisible') }}</QTooltip>
                 </QIcon>
                 <QIcon v-if="row.isFreezed" name="vn:frozen" color="primary" size="xs">
-                    <QTooltip>{{ t('salesTicketsTable.clientFrozen') }}</QTooltip>
+                    <QTooltip>{{ $t('salesTicketsTable.clientFrozen') }}</QTooltip>
                 </QIcon>
                 <QIcon
                     v-if="row.risk"
@@ -380,7 +404,9 @@ const openTab = (id) =>
                     :color="row.hasHighRisk ? 'negative' : 'primary'"
                     size="xs"
                 >
-                    <QTooltip>{{ t('salesTicketsTable.risk') }}: {{ row.risk }}</QTooltip>
+                    <QTooltip
+                        >{{ $t('salesTicketsTable.risk') }}: {{ row.risk }}</QTooltip
+                    >
                 </QIcon>
                 <QIcon
                     v-if="row.hasComponentLack"
@@ -388,7 +414,7 @@ const openTab = (id) =>
                     color="primary"
                     size="xs"
                 >
-                    <QTooltip>{{ t('salesTicketsTable.componentLack') }}</QTooltip>
+                    <QTooltip>{{ $t('salesTicketsTable.componentLack') }}</QTooltip>
                 </QIcon>
                 <QIcon
                     v-if="row.isTooLittle"
@@ -396,7 +422,7 @@ const openTab = (id) =>
                     color="primary"
                     size="xs"
                 >
-                    <QTooltip>{{ t('salesTicketsTable.tooLittle') }}</QTooltip>
+                    <QTooltip>{{ $t('salesTicketsTable.tooLittle') }}</QTooltip>
                 </QIcon>
             </QTd>
         </template>
@@ -451,7 +477,7 @@ const openTab = (id) =>
         <template #column-isFragile="{ row }">
             <QTd class="no-padding">
                 <QIcon v-if="row.isFragile" name="local_bar" color="primary" size="sm">
-                    <QTooltip>{{ t('salesTicketsTable.isFragile') }}</QTooltip>
+                    <QTooltip>{{ $t('salesTicketsTable.isFragile') }}</QTooltip>
                 </QIcon>
             </QTd>
         </template>

src/pages/Monitor/locale/en.yml

@@ -44,3 +44,4 @@ salesTicketsTable:
 searchBar:
     label: Search tickets
     info: Search tickets by id or alias
+refreshInfo: Toggle auto-refresh every 2 minutes

src/pages/Monitor/locale/es.yml

@@ -44,3 +44,4 @@ salesTicketsTable:
 searchBar:
     label: Buscar tickets
     info: Buscar tickets por identificador o alias
+refreshInfo: Conmuta el refresco automático cada 2 minutos