feat: refs #6123 add control option to globals and create ZoneControl page

src/i18n/locale/en.yml

@@ -352,6 +352,7 @@ globals:
         vehicle: Vehicle
         entryPreAccount: Pre-account
         management: Worker management
+        control: Control
     unsavedPopup:
         title: Unsaved changes will be lost
         subtitle: Are you sure exit without saving?

src/i18n/locale/es.yml

@@ -355,6 +355,7 @@ globals:
         vehicle: Vehículo
         entryPreAccount: Precontabilizar
         management: Gestión de trabajadores
+        control: Control
     unsavedPopup:
         title: Los cambios que no haya guardado se perderán
         subtitle: ¿Seguro que quiere salir sin guardar?

src/pages/Zone/ZoneControl.vue

@@ -0,0 +1,275 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useQuasar, date } from 'quasar';
+
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import FetchData from 'components/FetchData.vue';
+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';
+import VnCheckbox from 'src/components/common/VnCheckbox.vue';
+
+const { t } = useI18n();
+const quasar = useQuasar();
+const filterDate = ref(useFilterParams('StockBoughts').params);
+const footer = ref({ bought: 0, reserve: 0 });
+const columns = computed(() => [
+    {
+        align: 'left',
+        label: 'Id',
+        name: 'id',
+        isId: true,
+        columnFilter: false,
+        visible: false,
+    },
+    {
+        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',
+        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,
+                        },
+                    });
+                },
+            },
+        ],
+    },
+]);
+const fetchDataRef = ref();
+const travelDialogRef = ref(false);
+const tableRef = ref();
+const productionConfig = ref();
+
+function openDialog() {
+    travelDialogRef.value = true;
+}
+
+function setFooter(data) {
+    footer.value = { bought: 0, reserve: 0 };
+    data.forEach((row) => {
+        footer.value.bought += row?.bought;
+        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>
+        <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="travelDialogRef" :class="['vn-row', 'wrap']">
+        <FormModelPopup
+            model="ProductionConfigs"
+            :title="t('Production Config')"
+            :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')"
+                />
+            </template>
+        </FormModelPopup>
+    </QDialog>
+    <div class="table-container">
+        <div class="column items-center">
+            <VnTable
+                ref="tableRef"
+                data-key="StockBoughts"
+                url="StockBoughts/getStockBought"
+                :beforeSaveFn="beforeSave"
+                save-url="StockBoughts/crud"
+                search-url="StockBoughts"
+                order="bought DESC"
+                :is-editable="true"
+                @on-fetch="
+                    async (data) => {
+                        setFooter(data);
+                        await fetchDataRef.fetch();
+                    }
+                "
+                :columns="columns"
+                :footer="true"
+                table-height="80vh"
+                :column-search="false"
+                :without-header="true"
+                :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>
+</template>
+<i18n>
+    en:
+        minTicketsToCloseZone: Min tickets to close
+        isZoneClosedByExpeditionActivated: Closed by expedition
+    es:
+        minTicketsToCloseZone: Tickets minimos para cerrar zona
+        isZoneClosedByExpeditionActivated: Zona cerrada por expedición activada
+</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>

src/router/modules/zone.js

@@ -85,6 +85,7 @@ export default {
             'ZoneDeliveryDays',
             'ZoneUpcomingList',
             'ZoneUpcomingDeliveries',
+            'ZoneControl',
         ],
     },
     component: RouterView,
@@ -131,6 +132,15 @@ export default {
                     },
                     component: () => import('src/pages/Zone/ZoneUpcoming.vue'),
                 },
+                {
+                    name: 'ZoneControl',
+                    path: 'control',
+                    meta: {
+                        title: 'control',
+                        icon: 'track_changes',
+                    },
+                    component: () => import('src/pages/Zone/ZoneControl.vue'),
+                },
             ],
         },
     ],