feat: refs #6123 refactor ZoneControl component by removing unused imports and optimizing column definitions

src/pages/Zone/ZoneControl.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useQuasar, date } from 'quasar';
+import { useQuasar } from 'quasar';
 
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import FetchData from 'components/FetchData.vue';
@@ -9,9 +9,6 @@ import FormModelPopup from 'components/FormModelPopup.vue';
 import VnInputNumber from 'src/components/common/VnInput.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnTable from 'components/VnTable/VnTable.vue';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
-import EntryStockBoughtDetail from 'src/pages/Entry/EntryStockBoughtDetail.vue';
-import TravelDescriptorProxy from '../Travel/Card/TravelDescriptorProxy.vue';
 import { useFilterParams } from 'src/composables/useFilterParams';
 import axios from 'axios';
 import VnLv from 'src/components/ui/VnLv.vue';
@@ -24,88 +21,49 @@ const footer = ref({ bought: 0, reserve: 0 });
 const columns = computed(() => [
     {
         align: 'left',
-        label: 'Id',
-        name: 'id',
+        name: 'zoneFk',
+        label: t('zone'),
         isId: true,
-        columnFilter: false,
-        visible: false,
+        format: ({ name }, dashIfEmpty) => dashIfEmpty(name),
     },
     {
-        align: 'left',
-        name: 'workerFk',
-        label: t('entryStockBought.buyer'),
-        isTitle: true,
-        component: 'select',
-        isEditable: false,
-        cardVisible: true,
-        create: true,
-        attrs: {
-            url: 'TicketRequests/getItemTypeWorker',
-            fields: ['id', 'nickname'],
-            optionLabel: 'nickname',
-            sortBy: 'nickname ASC',
-            optionValue: 'id',
-        },
-        columnFilter: false,
-        width: '60%',
-    },
-    {
-        align: 'center',
-        label: t('entryStockBought.reserve'),
-        name: 'reserve',
-        columnFilter: false,
-        create: true,
-        component: 'number',
-        summation: true,
-        format: ({ reserve }, dashIfEmpty) => dashIfEmpty(round(reserve)),
-        width: '20%',
-    },
-    {
-        align: 'right',
-        label: t('entryStockBought.bought'),
-        name: 'bought',
-        summation: true,
-        cardVisible: true,
-        style: ({ reserve, bought }) => boughtStyle(bought, reserve),
-        columnFilter: false,
-        width: '20%',
-    },
-    {
-        label: t('entryStockBought.date'),
-        name: 'dated',
+        name: 'etd',
+        label: t('etd'),
         component: 'date',
-        visible: false,
-        create: true,
     },
     {
-        align: 'center',
-        name: 'tableActions',
-        actions: [
-            {
-                title: t('entryStockBought.viewMoreDetails'),
-                name: 'searchBtn',
-                icon: 'search',
-                isPrimary: true,
-                action: (row) => {
-                    quasar.dialog({
-                        component: EntryStockBoughtDetail,
-                        componentProps: {
-                            workerFk: row.workerFk,
-                            dated: filterDate.value.dated,
-                        },
-                    });
-                },
-            },
-        ],
+        name: 'isLate',
+        label: t('isLate'),
+        component: 'checkbox',
+    },
+    {
+        name: 'isFull',
+        label: t('isFull'),
+        component: 'checkbox',
+    },
+    {
+        name: 'm3',
+        label: t('m3'),
+        component: 'number',
+    },
+    {
+        name: 'm3enc',
+        label: t('m3enc'),
+        component: 'number',
+    },
+    {
+        name: 'm3porEnc',
+        label: t('m3porEnc'),
+        component: 'number',
     },
 ]);
 const fetchDataRef = ref();
-const travelDialogRef = ref(false);
+const productionConfigDialogRef = ref(false);
 const tableRef = ref();
 const productionConfig = ref();
 
 function openDialog() {
-    travelDialogRef.value = true;
+    productionConfigDialogRef.value = true;
 }
 
 function setFooter(data) {
@@ -115,39 +73,6 @@ function setFooter(data) {
         footer.value.reserve += row?.reserve;
     });
 }
-
-function round(value) {
-    return Math.round(value * 100) / 100;
-}
-
-function boughtStyle(bought, reserve) {
-    return reserve < bought ? { color: 'var(--q-negative)' } : '';
-}
-
-async function beforeSave(data, getChanges) {
-    const changes = data.creates;
-    if (!changes) return data;
-    const patchPromises = [];
-
-    for (const change of changes) {
-        if (change?.isReal === false && change?.reserve > 0) {
-            const postData = {
-                workerFk: change.workerFk,
-                reserve: change.reserve,
-                dated: filterDate.value.dated,
-            };
-            const promise = axios.post('StockBoughts', postData).catch((error) => {
-                console.error('Error processing change: ', change, error);
-            });
-
-            patchPromises.push(promise);
-        }
-    }
-
-    await Promise.all(patchPromises);
-    data.creates = [];
-    return data;
-}
 </script>
 <template>
     <VnSubToolbar>
@@ -185,22 +110,24 @@ async function beforeSave(data, getChanges) {
             </VnRow>
         </template>
     </VnSubToolbar>
-    <QDialog v-model="travelDialogRef" :class="['vn-row', 'wrap']">
+    <QDialog v-model="productionConfigDialogRef" :class="['vn-row', 'wrap']">
         <FormModelPopup
-            model="ProductionConfigs"
-            :title="t('Production Config')"
+            url-update="ProductionConfigs/1"
+            :title="t('popUpTitle')"
             :form-initial-data="productionConfig"
             @on-data-saved="fetchDataRef.fetch()"
         >
             <template #form-inputs="{ data }">
-                <VnInputNumber
-                    v-model="data.minTicketsToCloseZone"
-                    :label="t('minTicketsToCloseZone')"
-                />
-                <VnCheckbox
-                    v-model="data.isZoneClosedByExpeditionActivated"
-                    :label="t('isZoneClosedByExpeditionActivated')"
-                />
+                <VnRow>
+                    <VnInputNumber
+                        v-model="data.minTicketsToCloseZone"
+                        :label="t('minTicketsToCloseZone')"
+                    />
+                    <VnCheckbox
+                        v-model="data.isZoneClosedByExpeditionActivated"
+                        :label="t('isZoneClosedByExpeditionActivated')"
+                    />
+                </VnRow>
             </template>
         </FormModelPopup>
     </QDialog>
@@ -208,11 +135,9 @@ async function beforeSave(data, getChanges) {
         <div class="column items-center">
             <VnTable
                 ref="tableRef"
-                data-key="StockBoughts"
-                url="StockBoughts/getStockBought"
-                :beforeSaveFn="beforeSave"
-                save-url="StockBoughts/crud"
-                search-url="StockBoughts"
+                data-key="ZoneControl"
+                url="Zones/controlFilter"
+                search-url="Zones/controlFilter"
                 order="bought DESC"
                 :is-editable="true"
                 @on-fetch="
@@ -229,25 +154,6 @@ async function beforeSave(data, getChanges) {
                 :user-params="{ dated: Date.vnNew() }"
                 auto-load
             >
-                <template #column-workerFk="{ row }">
-                    <span class="link" @click.stop>
-                        {{ row?.worker?.user?.nickname }}
-                        <WorkerDescriptorProxy :id="row?.workerFk" />
-                    </span>
-                </template>
-                <template #column-footer-reserve>
-                    <span class="q-pr-xs">
-                        {{ round(footer.reserve) }}
-                    </span>
-                </template>
-                <template #column-footer-bought>
-                    <span
-                        :style="boughtStyle(footer?.bought, footer?.reserve)"
-                        class="q-pr-xs"
-                    >
-                        {{ round(footer.bought) }}
-                    </span>
-                </template>
             </VnTable>
         </div>
     </div>
@@ -256,9 +162,11 @@ async function beforeSave(data, getChanges) {
     en:
         minTicketsToCloseZone: Min tickets to close
         isZoneClosedByExpeditionActivated: Closed by expedition
+        popUpTitle: Edit config
     es:
         minTicketsToCloseZone: Tickets minimos para cerrar zona
         isZoneClosedByExpeditionActivated: Zona cerrada por expedición activada
+        popUpTitle: Editar configuración
 </i18n>
 <style lang="scss" scoped>
 .table-container {