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

<script setup>
import { ref, nextTick } from 'vue';
import { useI18n } from 'vue-i18n';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import FetchData from 'components/FetchData.vue';
import FormModel from 'src/components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import { useAdvancedSummary } from 'src/composables/useAdvancedSummary';

const { t } = useI18n();
const form = ref();
const educationLevels = ref([]);
const countries = ref([]);
const maritalStatus = [
    { code: 'M', name: t('Married') },
    { code: 'S', name: t('Single') },
];
async function setAdvancedSummary(data) {
    const advanced = (await useAdvancedSummary('Workers', data.id)) ?? {};
    Object.assign(form.value.formData, advanced);
    await nextTick();
    if (form.value) form.value.hasChanges = false;
}
</script>
<template>
    <FetchData
        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
        @on-fetch="(data) => (educationLevels = data)"
        auto-load
        url="EducationLevels"
    />
    <FetchData
        url="Countries"
        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
        @on-fetch="(data) => (countries = data)"
        auto-load
    />
    <FormModel
        ref="form"
        :url-update="`Workers/${$route.params.id}`"
        auto-load
        model="Worker"
        @on-fetch="setAdvancedSummary"
    >
        <template #form="{ data }">
            <VnRow>
                <VnInput
                    :label="t('Name')"
                    clearable
                    v-model="data.firstName"
                    :required="true"
                />
                <VnInput
                    :label="t('Last name')"
                    clearable
                    v-model="data.lastName"
                    :required="true"
                />
            </VnRow>
            <VnRow>
                <VnInput v-model="data.phone" :label="t('Business phone')" clearable />
                <VnInput
                    v-model="data.mobileExtension"
                    :label="t('Mobile extension')"
                    clearable
                />
            </VnRow>

            <VnRow>
                <VnSelect
                    :label="t('Boss')"
                    url="Workers/search"
                    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>
                </VnSelect>
                <VnSelect
                    :label="t('Marital status')"
                    :options="maritalStatus"
                    hide-selected
                    option-label="name"
                    option-value="code"
                    v-model="data.maritalStatus"
                    data-cy="MaritalStatus"
                />
            </VnRow>

            <VnRow>
                <VnSelect
                    :label="t('Origin country')"
                    :options="countries"
                    hide-selected
                    option-label="name"
                    option-value="id"
                    v-model="data.originCountryFk"
                    data-cy="country"
                />
                <VnSelect
                    :label="t('Education level')"
                    :options="educationLevels"
                    hide-selected
                    option-label="name"
                    option-value="id"
                    v-model="data.educationLevelFk"
                />
            </VnRow>

            <VnRow>
                <VnInput v-model="data.SSN" :label="t('SSN')" clearable />
                <VnInputDate :label="t('fiDueDate')" v-model="data.fiDueDate" />
            </VnRow>
            <VnRow>
                <VnSelect
                    :label="t('sex')"
                    :options="['M', 'F']"
                    hide-selected
                    v-model="data.sex"
                />
                <VnInputDate :label="t('seniority')" v-model="data.seniority" />
            </VnRow>
            <VnRow>
                <VnInput v-model="data.fi" :label="t('fi')" data-cy="fi" />
                <VnInputDate :label="t('birth')" v-model="data.birth" />
            </VnRow>
            <VnRow wrap>
                <QCheckbox
                    size="sm"
                    :label="t('isFreelance')"
                    v-model="data.isFreelance"
                />
                <QCheckbox
                    size="sm"
                    v-model="data.isSsDiscounted"
                    :label="t(`isSsDiscounted`)"
                />
                <QCheckbox
                    size="sm"
                    v-model="data.hasMachineryAuthorized"
                    :label="t(`hasMachineryAuthorized`)"
                />
                <QCheckbox size="sm" v-model="data.isDisable" :label="t(`isDisable`)" />
            </VnRow>
        </template>
    </FormModel>
</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
    fiDueDate: Fecha de caducidad del DNI
    seniority: Antigüedad
    hasMachineryAuthorized: Autorizado para llevar maquinaria
    isFreelance: Autónomo
    isDisable: Trabajador desactivado
    fi: DNI/NIE/NIF
    sex: Sexo
    birth: Fecha de Nacimiento
    isSsDiscounted: Bonificación SS
</i18n>