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

130 lines
4.5 KiB
Vue

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { dashIfEmpty } 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';
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">
<a class="header header-link" :href="workerUrl + `basic-data`">
{{ t('worker.summary.basicData') }}
<QIcon name="open_in_new" />
</a>
<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">
<div class="header header-link">
{{ t('worker.summary.userData') }}
</div>
<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>