salix-front/src/pages/Zone/ZoneControl.vue

<script setup>
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useQuasar } 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 { 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 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',
        label: t('zone'),
        isId: true,
        format: ({ name }, dashIfEmpty) => dashIfEmpty(name),
    },
    {
        name: 'etd',
        label: t('etd'),
        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',
        label: t('isLate'),
        component: 'checkbox',
    },
    {
        name: 'isFull',
        label: t('isFull'),
        component: 'checkbox',
        isEditable: false,
    },
]);
const fetchDataRef = ref();
const productionConfigDialogRef = ref(false);
const tableRef = ref();
const productionConfig = ref();

function openDialog() {
    productionConfigDialogRef.value = true;
}

function setFooter(data) {
    footer.value = { bought: 0, reserve: 0 };
    data.forEach((row) => {
        footer.value.bought += row?.bought;
        footer.value.reserve += row?.reserve;
    });
}
</script>
<template>
    <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('minTicketsToCloseZone')"
                    />
                    <VnCheckbox
                        v-model="data.isZoneClosedByExpeditionActivated"
                        :label="t('isZoneClosedByExpeditionActivated')"
                    />
                </VnRow>
            </template>
        </FormModelPopup>
    </QDialog>
    <div class="table-container">
        <div class="column items-center">
            <VnTable
                ref="tableRef"
                data-key="ZoneControl"
                url="Zones/controlFilter"
                search-url="Zones/controlFilter"
                order="bought DESC"
                :disable-option="{ card: true }"
                :is-editable="true"
                @on-fetch="
                    async (data) => {
                        setFooter(data);
                        if (fetchDataRef) await fetchDataRef.fetch();
                    }
                "
                :columns="columns"
                :footer="true"
                table-height="80vh"
                :user-params="{ dated: Date.vnNew(), warehouseFk: user.warehouseFk }"
                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>
</template>
<i18n>
    en:
        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
        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;
}
</style>