289 lines
9.9 KiB
Vue
289 lines
9.9 KiB
Vue
<script setup>
|
|
import axios from 'axios';
|
|
import { ref, onMounted, computed, onUpdated } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
|
|
import WorkerDescriptorProxy from './WorkerDescriptorProxy.vue';
|
|
|
|
onMounted(() => fetch());
|
|
onUpdated(() => fetch());
|
|
|
|
const route = useRoute();
|
|
const { t } = useI18n();
|
|
|
|
const $props = defineProps({
|
|
id: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
});
|
|
|
|
const entityId = computed(() => $props.id || route.params.id);
|
|
|
|
const worker = ref(null);
|
|
|
|
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',
|
|
},
|
|
],
|
|
};
|
|
|
|
function fetch() {
|
|
const id = entityId.value;
|
|
axios.get(`/Workers/${id}`, { params: { filter } }).then((response) => {
|
|
worker.value = response.data;
|
|
});
|
|
}
|
|
|
|
function sipExtension() {
|
|
if (worker.value.sip) return worker.value.sip.extension;
|
|
return '-';
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="summary container">
|
|
<QCard>
|
|
<SkeletonSummary v-if="!worker" />
|
|
<template v-if="worker">
|
|
<div class="header bg-primary q-pa-sm q-mb-md">
|
|
{{ worker.id }} - {{ worker.firstName }} {{ worker.lastName }}
|
|
</div>
|
|
<div class="row q-pa-md q-col-gutter-md q-mb-md">
|
|
<div class="col">
|
|
<QList>
|
|
<QItemLabel header class="text-h6">
|
|
{{ t('worker.summary.basicData') }}
|
|
</QItemLabel>
|
|
<QItem>
|
|
<QItemSection>
|
|
<QItemLabel caption> ID </QItemLabel>
|
|
<QItemLabel>{{ worker.id }}</QItemLabel>
|
|
</QItemSection>
|
|
</QItem>
|
|
<QItem>
|
|
<QItemSection>
|
|
<QItemLabel caption
|
|
>{{ t('worker.card.name') }}
|
|
</QItemLabel>
|
|
<QItemLabel>
|
|
{{ worker.user.nickname }}
|
|
</QItemLabel>
|
|
</QItemSection>
|
|
</QItem>
|
|
<QItem>
|
|
<QItemSection>
|
|
<QItemLabel caption
|
|
>{{ t('worker.list.department') }}
|
|
</QItemLabel>
|
|
<QItemLabel>{{
|
|
worker.department.department.name
|
|
}}</QItemLabel>
|
|
</QItemSection>
|
|
</QItem>
|
|
<QItem>
|
|
<QItemSection>
|
|
<QItemLabel caption
|
|
>{{ t('worker.list.email') }}
|
|
</QItemLabel>
|
|
<QItemLabel>{{ worker.user.email }}</QItemLabel>
|
|
</QItemSection>
|
|
</QItem>
|
|
<QItem
|
|
class="items-start cursor-pointer q-hoverable"
|
|
v-if="worker.boss"
|
|
>
|
|
<QItemSection>
|
|
<QItemLabel caption>
|
|
{{ t('worker.summary.boss') }}
|
|
</QItemLabel>
|
|
<QItemLabel>
|
|
<span class="link">
|
|
{{ worker.boss.name }}
|
|
<WorkerDescriptorProxy :id="worker.bossFk" />
|
|
</span>
|
|
</QItemLabel>
|
|
</QItemSection>
|
|
</QItem>
|
|
<QItem>
|
|
<QItemSection>
|
|
<QItemLabel caption
|
|
>{{ t('worker.summary.phoneExtension') }}
|
|
</QItemLabel>
|
|
<QItemLabel>
|
|
{{
|
|
worker.mobileExtension == ''
|
|
? worker.mobileExtension
|
|
: '-'
|
|
}}
|
|
</QItemLabel>
|
|
</QItemSection>
|
|
</QItem>
|
|
<QItem>
|
|
<QItemSection>
|
|
<QItemLabel caption
|
|
>{{ t('worker.summary.entPhone') }}
|
|
</QItemLabel>
|
|
<QItemLabel>{{
|
|
worker.phone == '' ? worker.phone : '-'
|
|
}}</QItemLabel>
|
|
</QItemSection>
|
|
</QItem>
|
|
<QItem>
|
|
<QItemSection>
|
|
<QItemLabel caption
|
|
>{{ t('worker.summary.personalPhone') }}
|
|
</QItemLabel>
|
|
<QItemLabel>{{
|
|
worker.client.phone == ''
|
|
? worker.client.phone
|
|
: '-'
|
|
}}</QItemLabel>
|
|
</QItemSection>
|
|
</QItem>
|
|
</QList>
|
|
</div>
|
|
<div class="col">
|
|
<QList>
|
|
<QItemLabel header class="text-h6">
|
|
{{ t('worker.summary.userData') }}
|
|
</QItemLabel>
|
|
<QItem>
|
|
<QItemSection>
|
|
<QItemLabel caption>
|
|
{{ t('worker.summary.userId') }}
|
|
</QItemLabel>
|
|
<QItemLabel>{{ worker.user.id }}</QItemLabel>
|
|
</QItemSection>
|
|
</QItem>
|
|
<QItem>
|
|
<QItemSection>
|
|
<QItemLabel caption
|
|
>{{ t('worker.card.name') }}
|
|
</QItemLabel>
|
|
<QItemLabel>{{ worker.user.nickname }}</QItemLabel>
|
|
</QItemSection>
|
|
</QItem>
|
|
<QItem>
|
|
<QItemSection>
|
|
<QItemLabel caption
|
|
>{{ t('worker.summary.role') }}
|
|
</QItemLabel>
|
|
<QItemLabel>{{ worker.user.role.name }}</QItemLabel>
|
|
</QItemSection>
|
|
</QItem>
|
|
<QItem>
|
|
<QItemSection>
|
|
<QItemLabel caption
|
|
>{{ t('worker.summary.sipExtension') }}
|
|
</QItemLabel>
|
|
<QItemLabel>{{ sipExtension() }}</QItemLabel>
|
|
</QItemSection>
|
|
</QItem>
|
|
</QList>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</QCard>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.q-card {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
}
|
|
|
|
.negative {
|
|
color: red;
|
|
}
|
|
|
|
.summary {
|
|
.q-list {
|
|
.q-item__label--header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
a {
|
|
color: $primary;
|
|
}
|
|
}
|
|
}
|
|
.row {
|
|
flex-wrap: wrap;
|
|
|
|
.col {
|
|
min-width: 250px;
|
|
}
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
font-size: 18px;
|
|
}
|
|
|
|
#slider-container {
|
|
max-width: 80%;
|
|
margin: 0 auto;
|
|
|
|
.q-slider {
|
|
.q-slider__marker-labels:nth-child(1) {
|
|
transform: none;
|
|
}
|
|
.q-slider__marker-labels:nth-child(2) {
|
|
transform: none;
|
|
left: auto !important;
|
|
right: 0%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.q-dialog .summary {
|
|
max-width: 1200px;
|
|
}
|
|
</style>
|