feat: refs #6123 refactor ZoneControl component to enhance data handling and improve UI elements

src/pages/Zone/ZoneControl.vue

@@ -13,12 +13,36 @@ import { useFilterParams } from 'src/composables/useFilterParams';
 import axios from 'axios';
 import VnLv from 'src/components/ui/VnLv.vue';
 import VnCheckbox from 'src/components/common/VnCheckbox.vue';
+import { useState } from 'src/composables/useState';
 
 const { t } = useI18n();
 const quasar = useQuasar();
-const filterDate = ref(useFilterParams('StockBoughts').params);
+const state = useState();
+const user = state.getUser().fn();
 const footer = ref({ bought: 0, reserve: 0 });
 const columns = computed(() => [
+    {
+        align: 'left',
+        label: t('warehouse'),
+        name: 'warehouseFk',
+        component: 'select',
+        attrs: {
+            url: 'Warehouses',
+            fields: ['id', 'name'],
+            optionValue: 'id',
+            optionLabel: 'name',
+            sortBy: 'name ASC',
+        },
+        isEditable: false,
+        format: ({ warehouseName }, dashIfEmpty) => dashIfEmpty(warehouseName),
+    },
+    {
+        label: t('date'),
+        name: 'dated',
+        component: 'date',
+        visible: false,
+        create: true,
+    },
     {
         align: 'left',
         name: 'zoneFk',
@@ -29,7 +53,26 @@ const columns = computed(() => [
     {
         name: 'etd',
         label: t('etd'),
-        component: 'date',
+        component: 'time',
+        isEditable: false,
+    },
+    {
+        name: 'volume',
+        label: t('volume'),
+        component: 'number',
+        isEditable: false,
+    },
+    {
+        name: 'packingVolume',
+        label: t('packingVolume'),
+        component: 'number',
+        isEditable: false,
+    },
+    {
+        name: 'packingProgress',
+        label: t('packingProgress'),
+        component: 'number',
+        isEditable: false,
     },
     {
         name: 'isLate',
@@ -40,21 +83,7 @@ const columns = computed(() => [
         name: 'isFull',
         label: t('isFull'),
         component: 'checkbox',
-    },
+        isEditable: false,
-    {
-        name: 'm3',
-        label: t('m3'),
-        component: 'number',
-    },
-    {
-        name: 'm3enc',
-        label: t('m3enc'),
-        component: 'number',
-    },
-    {
-        name: 'm3porEnc',
-        label: t('m3porEnc'),
-        component: 'number',
     },
 ]);
 const fetchDataRef = ref();
@@ -75,41 +104,6 @@ function setFooter(data) {
 }
 </script>
 <template>
-    <VnSubToolbar>
-        <template #st-data>
-            <FetchData
-                ref="fetchDataRef"
-                url="ProductionConfigs"
-                :filter="{
-                    fields: [
-                        'isZoneClosedByExpeditionActivated',
-                        'minTicketsToCloseZone',
-                    ],
-                }"
-                @on-fetch="(data) => (productionConfig = data[0])"
-            />
-            <VnRow>
-                <VnLv
-                    :label="t('minTicketsToCloseZone')"
-                    :value="productionConfig?.minTicketsToCloseZone"
-                />
-                <VnLv
-                    :label="t('isZoneClosedByExpeditionActivated')"
-                    :value="productionConfig?.isZoneClosedByExpeditionActivated"
-                    style="max-width: 100%"
-                />
-                <QBtn
-                    style="max-width: 5%"
-                    flat
-                    icon="edit"
-                    @click="openDialog()"
-                    :title="t('entryStockBought.editTravel')"
-                    color="primary"
-                    data-cy="edit-travel"
-                />
-            </VnRow>
-        </template>
-    </VnSubToolbar>
     <QDialog v-model="productionConfigDialogRef" :class="['vn-row', 'wrap']">
         <FormModelPopup
             url-update="ProductionConfigs/1"
@@ -139,21 +133,55 @@ function setFooter(data) {
                 url="Zones/controlFilter"
                 search-url="Zones/controlFilter"
                 order="bought DESC"
+                :disable-option="{ card: true }"
                 :is-editable="true"
                 @on-fetch="
                     async (data) => {
                         setFooter(data);
-                        await fetchDataRef.fetch();
+                        if (fetchDataRef) await fetchDataRef.fetch();
                     }
                 "
                 :columns="columns"
                 :footer="true"
                 table-height="80vh"
-                :column-search="false"
+                :user-params="{ dated: Date.vnNew(), warehouseFk: user.warehouseFk }"
-                :without-header="true"
-                :user-params="{ dated: Date.vnNew() }"
                 auto-load
             >
+                <template #top-left>
+                    <FetchData
+                        ref="fetchDataRef"
+                        url="ProductionConfigs"
+                        :filter="{
+                            fields: [
+                                'isZoneClosedByExpeditionActivated',
+                                'minTicketsToCloseZone',
+                            ],
+                        }"
+                        @on-fetch="(data) => (productionConfig = data[0])"
+                    />
+                    <VnRow>
+                        <VnLv
+                            :label="t('minTicketsToCloseZone')"
+                            :value="productionConfig?.minTicketsToCloseZone"
+                            info="test"
+                        />
+                        <VnLv
+                            :label="t('isZoneClosedByExpeditionActivated')"
+                            :value="productionConfig?.isZoneClosedByExpeditionActivated"
+                            style="max-width: 100%"
+                            info="test"
+                        />
+                        <QBtn
+                            style="max-width: 5%"
+                            flat
+                            icon="edit"
+                            @click="openDialog()"
+                            :title="t('editProductionConfig')"
+                            color="primary"
+                            data-cy="edit-travel"
+                        />
+                    </VnRow>
+                </template>
             </VnTable>
         </div>
     </div>
@@ -163,21 +191,30 @@ function setFooter(data) {
         minTicketsToCloseZone: Min tickets to close
         isZoneClosedByExpeditionActivated: Closed by expedition
         popUpTitle: Edit config
+        isLate: Is late
+        isFull: Is full
+        zone: Zone
+        warehouse: Warehouse
+        etd: Etd
+        volume: Volume
+        packingVolume: Pac. volume
+        packingProgress: Progress
     es:
-        minTicketsToCloseZone: Tickets minimos para cerrar zona
+        minTicketsToCloseZone: Tickets minimos
-        isZoneClosedByExpeditionActivated: Zona cerrada por expedición activada
+        isZoneClosedByExpeditionActivated: Por expedición
         popUpTitle: Editar configuración
+        isLate: Tarde
+        isFull: Completo
+        zone: Zona
+        warehouse: Almacen
+        etd: Etd
+        volume: Volumen
+        packingVolume: Vol. Encajado
+        packingProgress: Progreso
 </i18n>
 <style lang="scss" scoped>
 .table-container {
     display: flex;
     justify-content: center;
 }
-.column {
-    min-width: 35%;
-    margin-top: 1%;
-}
-.text-negative {
-    color: $negative !important;
-}
 </style>