feat: refs #6123 enhance VnColumn and ZoneControl optimized data fetching

src/components/VnTable/VnColumn.vue

@@ -129,6 +129,7 @@ const defaultComponents = {
         forceAttrs: {
             label,
             autofocus: true,
+            size: 'sm',
         },
         events: {
             blur: () => emit('blur'),
@@ -154,6 +155,9 @@ const defaultComponents = {
     },
     toggle: {
         component: markRaw(QToggle),
+        forceAttrs: {
+            size: 'sm',
+        },
     },
 };
 

src/components/common/VnCheckbox.vue

@@ -7,6 +7,10 @@ const $props = defineProps({
         type: String,
         default: null,
     },
+    infoSize: {
+        type: String,
+        default: 'sm',
+    },
 });
 
 const checkboxModel = computed({
@@ -37,7 +41,7 @@ const checkboxModel = computed({
             v-bind="$attrs"
             class="cursor-info q-ml-sm"
             name="info"
-            size="sm"
+            :size="infoSize"
         >
             <QTooltip>
                 {{ info }}

src/components/ui/VnLv.vue

@@ -3,6 +3,7 @@ import { dashIfEmpty } from 'src/filters';
 import { useI18n } from 'vue-i18n';
 import { useClipboard } from 'src/composables/useClipboard';
 import { computed } from 'vue';
+import VnCheckbox from '../common/VnCheckbox.vue';
 
 const $props = defineProps({
     label: { type: String, default: null },
@@ -30,12 +31,14 @@ const val = computed(() => $props.value);
 </script>
 <template>
     <div class="vn-label-value" :data-cy="`${$attrs['data-cy'] ?? 'vnLv'}${label ?? ''}`">
-        <QCheckbox
+        <VnCheckbox
             v-if="typeof value === 'boolean'"
             v-model="val"
             :label="label"
+            :info="info"
             disable
             dense
+            infoSize="xs"
             size="sm"
         />
         <template v-else>

src/composables/getColAlign.js

@@ -1,8 +1,6 @@
 export function getColAlign(col) {
     let align;
     switch (col.component) {
-        case 'time':
-        case 'date':
         case 'select':
             align = 'left';
             break;

src/css/app.scss

@@ -180,7 +180,7 @@ select:-webkit-autofill {
 
 .disabled {
     & .q-checkbox__label {
-        color: var(--vn-text-color);
+        color: var(--vn-label-color);
     }
     & .q-checkbox__inner {
         color: var(--vn-label-color);
@@ -359,4 +359,4 @@ input::-webkit-inner-spin-button {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-evenly;
-}
+}

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/Login/LoginMain.vue

@@ -68,7 +68,6 @@ async function onSubmit() {
             :label="t('login.password')"
             :toggle-visibility="true"
             :rules="[(val) => (val && val.length > 0) || t('login.fieldRequired')]"
-            class="red"
         />
         <QToggle v-model="keepLogin" :label="t('login.keepLogin')" />
         <div class="column flex-center q-mt-lg">

src/pages/Wagon/WagonCounter.vue

@@ -110,7 +110,6 @@ function confirm() {
                     </QBtn>
                     <QBtn
                         class="text-center q-ml-xs"
-                        color="red"
                         dense
                         size="sm"
                         @click="handleEvent(name, 'flush')"

src/pages/Zone/ZoneControl.vue

@@ -0,0 +1,257 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+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 VnLv from 'src/components/ui/VnLv.vue';
+import VnCheckbox from 'src/components/common/VnCheckbox.vue';
+import { useState } from 'src/composables/useState';
+import { useArrayData } from 'src/composables/useArrayData';
+import axios from 'axios';
+import { date } from 'quasar';
+
+const { t } = useI18n();
+const state = useState();
+const user = state.getUser().fn();
+const arrayData = useArrayData('ZoneControl');
+const footer = computed(() => arrayData.store.data.footer[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,
+    },
+    {
+        name: 'zoneFk',
+        label: t('zone.params.zoneFk'),
+        component: 'select',
+        columnClass: 'expand',
+        isEditable: false,
+        attrs: {
+            url: 'Zones',
+            fields: ['id', 'name'],
+            optionValue: 'id',
+            optionLabel: 'name',
+            sortBy: 'name ASC',
+        },
+        isId: true,
+        format: ({ name }, dashIfEmpty) => dashIfEmpty(name),
+    },
+    {
+        name: 'etd',
+        label: t('zone.params.etd'),
+        component: 'time',
+        columnClass: 'shrink',
+        columnFilter: false,
+        isEditable: false,
+    },
+    {
+        name: 'volume',
+        label: t('zone.params.volume'),
+        component: 'number',
+        columnClass: 'shrink',
+        format: ({ volume }) => Math.round(volume),
+        columnFilter: false,
+        isEditable: false,
+    },
+    {
+        name: 'packingVolume',
+        label: t('packingVolume'),
+        component: 'number',
+        visible: false,
+    },
+    {
+        name: 'packingProgress',
+        label: t('packingProgress'),
+        component: 'number',
+        format: ({ packingProgress }) => expressAsPercent(packingProgress),
+        style: ({ packingProgress }) => progressStyle(packingProgress),
+        columnFilter: false,
+        isEditable: false,
+    },
+    {
+        name: 'isLate',
+        label: t('zone.params.isLate'),
+        component: 'checkbox',
+        cellEvent: {
+            'update:modelValue': async (value, oldValue, row) => {
+                const filter = {
+                    where: {
+                        zoneFk: row.zoneFk,
+                        type: 'day',
+                        dated: row.landed,
+                    },
+                };
+                const zoneEvent = await axios.get('ZoneEvents', {
+                    params: { filter: JSON.stringify(filter) },
+                });
+                console.log('zoneEvent: ', zoneEvent);
+
+                /* await axios.delete('ZoneEvents/1', {
+                    zoneFk: row.zoneFk,
+                    type: 'day',
+                    dated: row.landed,
+                }); */
+            },
+        },
+    },
+    {
+        name: 'isFull',
+        label: t('zone.params.isFull'),
+        component: 'checkbox',
+        isEditable: false,
+    },
+]);
+const fetchDataRef = ref();
+const productionConfigDialogRef = ref(false);
+const tableRef = ref();
+const productionConfig = ref();
+
+function openDialog() {
+    productionConfigDialogRef.value = true;
+}
+
+function expressAsPercent(value) {
+    return value ? Math.round(value * 100) + '%' : '-';
+}
+
+function progressStyle(value) {
+    if (value < 1 && value) return 'color: var(--q-negative)';
+    if (value === 1) return 'color: var(--q-positive)';
+}
+</script>
+<template>
+    <FetchData
+        ref="fetchDataRef"
+        url="ProductionConfigs"
+        :filter="{
+            fields: ['isZoneClosedByExpeditionActivated', 'minTicketsToCloseZone'],
+        }"
+        @on-fetch="(data) => (productionConfig = data[0])"
+    />
+    <QDialog v-model="productionConfigDialogRef" :class="['vn-row', 'wrap']">
+        <FormModelPopup
+            url-update="ProductionConfigs/1"
+            :title="t('popUpTitle')"
+            :form-initial-data="productionConfig"
+            @on-data-saved="fetchDataRef.fetch()"
+        >
+            <template #form-inputs="{ data }">
+                <VnRow>
+                    <VnInputNumber
+                        v-model="data.minTicketsToCloseZone"
+                        :label="t('minTicketsInfo')"
+                    />
+                    <VnCheckbox
+                        v-model="data.isZoneClosedByExpeditionActivated"
+                        :label="t('isZoneClosedInfo')"
+                    />
+                </VnRow>
+            </template>
+        </FormModelPopup>
+    </QDialog>
+    <div class="table-container">
+        <div class="column items-center" style="width: 80%">
+            <VnTable
+                ref="tableRef"
+                data-key="ZoneControl"
+                url="Zones/controlFilter"
+                search-url="Zones/controlFilter"
+                order="volume DESC"
+                :disable-option="{ card: true }"
+                :is-editable="true"
+                @on-fetch="
+                    async () => {
+                        await fetchDataRef.fetch();
+                    }
+                "
+                :columns="columns"
+                :footer="true"
+                table-height="80vh"
+                :user-params="{ dated: Date.vnNew(), warehouseFk: user.warehouseFk }"
+                auto-load
+                key-data="zones"
+            >
+                <template #top-left>
+                    <VnRow>
+                        <VnLv
+                            :label="t('minTicketsToCloseZone')"
+                            :value="productionConfig?.minTicketsToCloseZone"
+                            :info="t('minTicketsInfo')"
+                        />
+                        <VnLv
+                            :label="t('isZoneClosedByExpeditionActivated')"
+                            :value="productionConfig?.isZoneClosedByExpeditionActivated"
+                            style="color: var(--vn-label-color)"
+                            :info="t('isZoneClosedInfo')"
+                        />
+                        <QBtn
+                            style="max-width: 5%"
+                            flat
+                            icon="edit"
+                            @click="openDialog()"
+                            :title="t('editProductionConfig')"
+                            color="primary"
+                            data-cy="edit-travel"
+                        />
+                    </VnRow>
+                </template>
+                <template #column-footer-volume>
+                    <span v-text="Math.round(footer.volume)" />
+                </template>
+                <template #column-footer-packingProgress>
+                    <span
+                        v-text="expressAsPercent(footer.packingProgress)"
+                        :style="progressStyle(footer.packingProgress)"
+                    />
+                </template>
+            </VnTable>
+        </div>
+    </div>
+</template>
+<i18n>
+    en:
+        minTicketsToCloseZone: Min tickets 
+        minTicketsInfo: Min tickets to close zone
+        isZoneClosedByExpeditionActivated: By expedition
+        isZoneClosedInfo: Zone closed by expedition
+        popUpTitle: Edit config
+        warehouse: Warehouse
+        packingVolume: Pac. volume
+        packingProgress: Progress
+    es:
+        minTicketsToCloseZone: Tickets minimos
+        minTicketsInfo: Tickets minimos para cerrar zona
+        isZoneClosedByExpeditionActivated: Por expedición
+        isZoneClosedInfo: Zona cerrada por expedición
+        popUpTitle: Editar configuración
+        volume: Volumen
+        packingVolume: Vol. Encajado
+        packingProgress: Progreso
+</i18n>
+<style lang="scss" scoped>
+.table-container {
+    display: flex;
+    justify-content: center;
+}
+</style>

src/pages/Zone/locale/en.yml

@@ -18,6 +18,15 @@ zone:
     searchInfo: Search zone by id or name
     searchLocations: Search locations
     searchLocationsInfo: Search locations by post code
+    params:
+        dated: Date
+        zoneFk: Zone
+        etd: Etd
+        volume: Volume
+        packingVolume: Packing volume
+        packingProgress: Packing progress
+        isLate: Late
+        isFull: Full
 list:
     clone: Clone
     id: Id

src/pages/Zone/locale/es.yml

@@ -19,6 +19,15 @@ zone:
     searchInfo: Buscar zona por Id o nombre
     searchLocations: Buscar localización
     searchLocationsInfo: Buscar localización por código postal
+    params:
+        dated: Fecha
+        zoneFk: Zona
+        etd: Etd
+        volume: Volumen
+        packingVolume: Volumen encajado
+        packingProgress: Progreso de encajado
+        isLate: Tarde
+        isFull: Completo
 list:
     clone: Clonar
     id: Id

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'),
+                },
             ],
         },
     ],