salix-front/src/pages/Worker/Card/WorkerBasicData.vue

<script setup>
import { onBeforeMount, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';

import axios from 'axios';

import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';

const route = useRoute();
const { t } = useI18n();

const data = ref({});
const workersOptions = ref([]);
const countriesOptions = ref([]);
const educationLevelsOptions = ref([]);

const workerFilter = { fields: ['id', 'nickname'], where: { id: null } };
const workersFilter = {
    fields: ['id', 'nickname'],
    order: 'nickname ASC',
    limit: 30,
    skip: 60,
};
const countriesFilter = {
    fields: ['id', 'country', 'code'],
    order: 'country ASC',
    limit: 30,
};
const educationLevelsFilter = { fields: ['id', 'name'], order: 'name ASC', limit: 30 };

const maritalStatus = [
    { code: 'M', name: t('Married') },
    { code: 'S', name: t('Single') },
];

onBeforeMount(() => {
    getData(route.params.id);
});

watch(
    () => route.params.id,
    (newValue) => {
        getData(newValue);
    }
);

const getData = async (id) => {
    try {
        const worker = await axios.get(`Workers/${id}`);
        workerFilter.where.id = worker.data.bossFk;
        data.value = worker.data;

        const workers = await axios.get('Workers/search', {
            params: { filter: JSON.stringify(workerFilter) },
        });
        data.value.bossFk = Number(workers.data[0].code);
    } catch (error) {
        data.value = {
            SSN: null,
            bossFk: null,
            educationLevelFk: null,
            firstName: null,
            lastName: null,
            locker: null,
            maritalStatus: null,
            mobileExtension: null,
            originCountryFk: null,
            phone: null,
        };
        console.error(error);
    }
};

const saveData = async () => {
    try {
        await axios.patch(`Workers/${route.params.id}`, data.value);
    } catch (error) {
        console.error(error);
    }
};
</script>

<template>
    <fetch-data
        :filter="workersFilter"
        @on-fetch="(data) => (workersOptions = data)"
        auto-load
        url="Workers/search"
    />
    <fetch-data
        :filter="countriesFilter"
        @on-fetch="(data) => (countriesOptions = data)"
        auto-load
        url="Countries"
    />
    <fetch-data
        :filter="educationLevelsFilter"
        @on-fetch="(data) => (educationLevelsOptions = data)"
        auto-load
        url="EducationLevels"
    />

    <Teleport to="#st-actions">
        <QBtnGroup push class="q-gutter-x-sm">
            <QBtn
                :disabled="!hasChanged"
                :label="t('globals.reset')"
                :loading="isLoading"
                @click="setInitialData"
                color="primary"
                flat
                icon="restart_alt"
            />
            <QBtn
                :disabled="isLoading"
                :label="t('globals.save')"
                :loading="isLoading"
                @click.stop="saveData"
                color="primary"
                icon="save"
            />
        </QBtnGroup>
    </Teleport>

    <div class="full-width flex justify-center">
        <QCard class="card-width q-pa-lg">
            <QCardSection>
                <QForm>
                    <VnRow class="row q-gutter-md q-mb-md">
                        <div class="col">
                            <VnInput
                                :label="t('Name')"
                                clearable
                                v-model="data.firstName"
                            />
                        </div>
                        <div class="col">
                            <VnInput
                                :label="t('Last name')"
                                clearable
                                v-model="data.lastName"
                            />
                        </div>
                    </VnRow>

                    <VnRow class="row q-gutter-md q-mb-md">
                        <div class="col">
                            <VnInput
                                v-model="data.phone"
                                :label="t('Business phone')"
                                clearable
                            />
                        </div>
                        <div class="col">
                            <VnInput
                                v-model="data.mobileExtension"
                                :label="t('Mobile extension')"
                                clearable
                            />
                        </div>
                    </VnRow>

                    <VnRow class="row q-gutter-md q-mb-md">
                        <div class="col">
                            <VnSelectFilter
                                :label="t('Boss')"
                                :options="workersOptions"
                                hide-selected
                                option-label="nickname"
                                option-value="id"
                                v-model="data.bossFk"
                            >
                                <template #option="scope">
                                    <QItem v-bind="scope.itemProps">
                                        <QItemSection>
                                            <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
                                            <QItemLabel caption>
                                                {{ scope.opt?.nickname }},
                                                {{ scope.opt?.code }}
                                            </QItemLabel>
                                        </QItemSection>
                                    </QItem>
                                </template>
                            </VnSelectFilter>
                        </div>
                        <div class="col">
                            <VnSelectFilter
                                :label="t('Marital status')"
                                :options="maritalStatus"
                                hide-selected
                                option-label="name"
                                option-value="code"
                                v-model="data.maritalStatus"
                            />
                        </div>
                    </VnRow>

                    <VnRow class="row q-gutter-md q-mb-md">
                        <div class="col">
                            <VnSelectFilter
                                :label="t('Origin country')"
                                :options="countriesOptions"
                                hide-selected
                                option-label="country"
                                option-value="id"
                                v-model="data.originCountryFk"
                            />
                        </div>
                        <div class="col">
                            <VnSelectFilter
                                :label="t('Education level')"
                                :options="educationLevelsOptions"
                                hide-selected
                                option-label="name"
                                option-value="id"
                                v-model="data.educationLevelFk"
                            />
                        </div>
                    </VnRow>

                    <VnRow class="row q-gutter-md q-mb-md">
                        <div class="col">
                            <VnInput v-model="data.SSN" :label="t('SSN')" clearable />
                        </div>
                        <div class="col">
                            <VnInput
                                v-model="data.locker"
                                type="number"
                                :label="t('Locker')"
                                clearable
                            />
                        </div>
                    </VnRow>
                </QForm>
            </QCardSection>
        </QCard>
    </div>
</template>

<i18n>
es:
    Name: Nombre
    Last name: Apellidos
    Business phone: Teléfono de empresa
    Mobile extension: Extensión móvil
    Boss: Jefe
    Marital status: Estado civil
    Married: Casado/a
    Single: Soltero/a
    Origin country: País origen
    Education level: Nivel educación
    SSN: NSS
    Locker: Taquilla
</i18n>