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

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

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 VnSelectFilter from 'src/components/common/VnSelectFilter.vue';

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

const workersOptions = ref([]);
const countriesOptions = ref([]);
const educationLevelsOptions = ref([]);

const workerFilter = {
    include: [
        {
            relation: 'user',
            scope: {
                fields: ['name', 'emailVerified'],
                include: { relation: 'emailUser', scope: { fields: ['email'] } },
            },
        },
        { relation: 'sip', scope: { fields: ['extension', 'secret'] } },
        { relation: 'department', scope: { include: { relation: 'department' } } },
    ],
};
const workersFilter = {
    fields: ['id', 'nickname'],
    order: 'nickname ASC',
    limit: 30,
};
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') },
];
</script>

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

    <FormModel
        :filter="workerFilter"
        :url="`Workers/${route.params.id}`"
        auto-load
        model="Worker"
    >
        <template #form="{ data }">
            <VnRow class="row q-gutter-md q-mb-md">
                <VnInput :label="t('Name')" clearable v-model="data.firstName" />
                <VnInput :label="t('Last name')" clearable v-model="data.lastName" />
            </VnRow>

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

            <VnRow class="row q-gutter-md q-mb-md">
                <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>
                <VnSelectFilter
                    :label="t('Marital status')"
                    :options="maritalStatus"
                    hide-selected
                    option-label="name"
                    option-value="code"
                    v-model="data.maritalStatus"
                />
            </VnRow>

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

            <VnRow class="row q-gutter-md q-mb-md">
                <VnInput v-model="data.SSN" :label="t('SSN')" clearable />
                <VnInput
                    v-model="data.locker"
                    type="number"
                    :label="t('Locker')"
                    clearable
                />
            </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
</i18n>