salix-front-mindshore-fork2/src/pages/Worker/Card/WorkerSummary.vue

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { dashIfEmpty, toDate } from 'src/filters';
import { getUrl } from 'src/composables/getUrl';
import VnLv from 'src/components/ui/VnLv.vue';
import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
import CardSummary from 'components/ui/CardSummary.vue';
import VnUserLink from 'src/components/ui/VnUserLink.vue';
import VnTitle from 'src/components/common/VnTitle.vue';

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

const $props = defineProps({
    id: {
        type: Number,
        default: 0,
    },
});

const entityId = computed(() => $props.id || route.params.id);
const workerUrl = ref();

onMounted(async () => {
    workerUrl.value = (await getUrl('')) + `worker/${entityId.value}/`;
});

const filter = {
    include: [
        {
            relation: 'user',
            scope: {
                fields: ['email', 'name', 'nickname', 'roleFk'],
                include: {
                    relation: 'role',
                    scope: {
                        fields: ['name'],
                    },
                },
            },
        },
        {
            relation: 'department',
            scope: {
                include: {
                    relation: 'department',
                    scope: {
                        fields: ['name'],
                    },
                },
            },
        },
        {
            relation: 'boss',
        },
        {
            relation: 'client',
        },
        {
            relation: 'sip',
        },
    ],
};
</script>

<template>
    <CardSummary ref="summary" :url="`Workers/${entityId}`" :filter="filter">
        <template #header="{ entity }">
            <div>{{ entity.id }} - {{ entity.firstName }} {{ entity.lastName }}</div>
        </template>
        <template #body="{ entity: worker }">
            <QCard class="vn-one">
                <VnTitle
                    :url="workerUrl + `basic-data`"
                    :text="t('worker.summary.basicData')"
                />
                <VnLv :label="t('worker.card.name')" :value="worker.user?.nickname" />
                <VnLv
                    :label="t('worker.list.department')"
                    :value="worker.department?.department?.name"
                />
                <VnLv :label="t('worker.list.email')" :value="worker.user.email" copy />
                <VnLv :label="t('worker.summary.boss')" link>
                    <template #value>
                        <VnUserLink
                            v-if="worker.boss"
                            :name="dashIfEmpty(worker.boss?.name)"
                            :worker-id="worker.bossFk"
                        />
                    </template>
                </VnLv>
                <VnLv :value="worker.mobileExtension">
                    <template #label>
                        {{ t('worker.summary.phoneExtension') }}
                        <VnLinkPhone :phone-number="worker.mobileExtension" />
                    </template>
                </VnLv>
                <VnLv :value="worker.phone">
                    <template #label>
                        {{ t('worker.summary.entPhone') }}
                        <VnLinkPhone :phone-number="worker.phone" />
                    </template>
                </VnLv>
                <VnLv :value="worker.client?.phone">
                    <template #label>
                        {{ t('worker.summary.personalPhone') }}
                        <VnLinkPhone :phone-number="worker.client?.phone" />
                    </template>
                </VnLv>
                <VnLv :label="t('worker.summary.locker')" :value="worker.locker" />
            </QCard>
            <QCard class="vn-one">
                <VnTitle
                    :url="workerUrl + `basic-data`"
                    :text="t('worker.summary.basicData')"
                />
                <VnLv
                    :label="t('worker.summary.fiDueDate')"
                    :value="toDate(worker.fiDueDate)"
                />
                <VnLv :label="t('worker.summary.sex')" :value="worker.sex" />
                <VnLv
                    :label="t('worker.summary.seniority')"
                    :value="toDate(worker.seniority)"
                />
                <VnLv :label="t('worker.summary.fi')" :value="worker.fi" />
                <VnLv :label="t('worker.summary.birth')" :value="toDate(worker.birth)" />
                <QCheckbox
                    class="padding-none"
                    :label="t('worker.summary.isFreelance')"
                    v-model="worker.isFreelance"
                    :disable="true"
                />
                <QCheckbox
                    class="padding-none"
                    :label="t('worker.summary.isSsDiscounted')"
                    v-model="worker.isSsDiscounted"
                    :disable="true"
                />
                <QCheckbox
                    class="padding-none"
                    :label="t('worker.summary.hasMachineryAuthorized')"
                    v-model="worker.hasMachineryAuthorized"
                    :disable="true"
                />
                <QCheckbox
                    class="padding-none"
                    :label="t('worker.summary.isDisable')"
                    v-model="worker.isDisable"
                    :disable="true"
                />
            </QCard>
            <QCard class="vn-one">
                <VnTitle :text="t('worker.summary.userData')" />
                <VnLv :label="t('worker.summary.userId')" :value="worker.user.id" />
                <VnLv :label="t('worker.card.name')" :value="worker.user.nickname" />
                <VnLv :label="t('worker.summary.role')" :value="worker.user.role.name" />
                <VnLv :value="worker?.sip?.extension">
                    <template #label>
                        {{ t('worker.summary.sipExtension') }}
                        <VnLinkPhone :phone-number="worker?.sip?.extension" />
                    </template>
                </VnLv>
            </QCard>
        </template>
    </CardSummary>
</template>