closes #4834 create-worker-module #28
|
|
@ -24,14 +24,18 @@ const { t } = useI18n();
|
|||
|
||||
onMounted(() => fetch());
|
||||
|
||||
const emit = defineEmits(['onFetch']);
|
||||
|
||||
const entity = ref();
|
||||
async function fetch() {
|
||||
const params = {};
|
||||
|
||||
if (props.filter) params.filter = props.filter;
|
||||
if (props.filter) params.filter = JSON.stringify(props.filter);
|
||||
|
||||
const { data } = await axios.get(props.url, { params });
|
||||
entity.value = data;
|
||||
|
||||
emit('onFetch', data);
|
||||
}
|
||||
|
||||
watch(props, async () => {
|
||||
|
|
@ -46,9 +50,9 @@ watch(props, async () => {
|
|||
<div class="header bg-primary q-pa-sm">
|
||||
<router-link :to="{ name: `${module}List` }">
|
||||
<q-btn round flat dense size="md" icon="view_list" color="white">
|
||||
<q-tooltip>{{
|
||||
t('components.cardDescriptor.mainList')
|
||||
}}</q-tooltip>
|
||||
<q-tooltip>
|
||||
{{ t('components.cardDescriptor.mainList') }}
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
</router-link>
|
||||
<router-link
|
||||
|
|
@ -80,8 +84,9 @@ watch(props, async () => {
|
|||
</q-menu>
|
||||
</q-btn>
|
||||
</div>
|
||||
<slot name="before" />
|
||||
<div class="body q-py-sm">
|
||||
<q-list>
|
||||
<q-list dense>
|
||||
<q-item-label header class="ellipsis text-h5" :lines="1">
|
||||
<slot name="description" :entity="entity">
|
||||
<span>
|
||||
|
|
@ -98,6 +103,7 @@ watch(props, async () => {
|
|||
</q-list>
|
||||
<slot name="body" :entity="entity" />
|
||||
</div>
|
||||
<slot name="after" />
|
||||
</template>
|
||||
<!-- Skeleton -->
|
||||
<skeleton-descriptor v-if="!entity" />
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ function viewSummary(id) {
|
|||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="orange"
|
||||
color="primary"
|
||||
icon="arrow_circle_right"
|
||||
@click="navigate(row.id)"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,18 @@
|
|||
<script setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useState } from 'src/composables/useState';
|
||||
// import { useI18n } from 'vue-i18n';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import WorkerDescriptor from './WorkerDescriptor.vue';
|
||||
import LeftMenu from 'components/LeftMenu.vue';
|
||||
|
||||
const state = useState();
|
||||
const { t } = useI18n();
|
||||
const stateStore = useStateStore();
|
||||
// const { t } = useI18n();
|
||||
</script>
|
||||
<template>
|
||||
<q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
|
||||
<q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
|
||||
<q-scroll-area class="fit">
|
||||
<worker-descriptor />
|
||||
<WorkerDescriptor />
|
||||
<q-separator />
|
||||
<q-list>
|
||||
<q-item :to="{ name: 'WorkerBasicData' }" clickable v-ripple>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="person" />
|
||||
</q-item-section>
|
||||
<q-item-section>{{ t('worker.pageTitles.basicData') }}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<left-menu source="card" />
|
||||
</q-scroll-area>
|
||||
</q-drawer>
|
||||
<q-page-container>
|
||||
|
|
@ -27,32 +21,3 @@ const { t } = useI18n();
|
|||
</q-page>
|
||||
</q-page-container>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.q-scrollarea__content {
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.descriptor {
|
||||
max-width: 256px;
|
||||
|
||||
h5 {
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.q-card__actions {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#descriptor-skeleton .q-card__actions {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
<script setup>
|
||||
import { onMounted, computed, ref } from 'vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
import axios from 'axios';
|
||||
import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
|
||||
|
||||
const $props = defineProps({
|
||||
|
|
@ -14,10 +13,6 @@ const $props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
fetch();
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
const { getToken } = useSession();
|
||||
|
|
@ -27,7 +22,6 @@ const entityId = computed(() => {
|
|||
});
|
||||
|
||||
const worker = ref();
|
||||
|
||||
const filter = {
|
||||
include: [
|
||||
{
|
||||
|
|
@ -52,34 +46,26 @@ const filter = {
|
|||
],
|
||||
};
|
||||
|
||||
async function fetch() {
|
||||
axios
|
||||
.get(`Workers/${entityId.value}`, {
|
||||
params: {
|
||||
filter: JSON.stringify(filter),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
worker.value = response.data;
|
||||
});
|
||||
}
|
||||
|
||||
function sipExtension() {
|
||||
if (worker.value.sip) return worker.value.sip.extension;
|
||||
return '-';
|
||||
}
|
||||
const sip = computed(() => worker.value.sip && worker.value.sip.extension);
|
||||
|
||||
function getWorkerAvatar() {
|
||||
const token = getToken();
|
||||
return `/api/Images/user/160x160/${worker.value.user.id}/download?access_token=${token}`;
|
||||
return `/api/Images/user/160x160/${route.params.id}/download?access_token=${token}`;
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<card-descriptor v-if="worker" module="Worker" :data="worker" :description="worker.user.name">
|
||||
<card-descriptor
|
||||
module="Worker"
|
||||
:url="`Workers/${entityId}`"
|
||||
:filter="filter"
|
||||
@on-fetch="(data) => (worker = data)"
|
||||
>
|
||||
<template #before>
|
||||
<q-img :src="getWorkerAvatar()" class="q-mb-md">
|
||||
<q-img :src="getWorkerAvatar()">
|
||||
<template #error>
|
||||
<div class="absolute-full bg-grey-10 text-center q-pa-md flex flex-center">
|
||||
<div
|
||||
class="absolute-full bg-grey-10 text-center q-pa-md flex flex-center"
|
||||
>
|
||||
<div>
|
||||
<div class="text-grey-5" style="opacity: 0.4; font-size: 5vh">
|
||||
<q-icon name="vn:claims" />
|
||||
|
|
@ -92,36 +78,52 @@ function getWorkerAvatar() {
|
|||
</template>
|
||||
</q-img>
|
||||
</template>
|
||||
<template #body>
|
||||
<template #description="{ entity }">
|
||||
<span>
|
||||
{{ entity.user.nickname }}
|
||||
<q-tooltip>{{ entity.user.nickname }}</q-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<template #body="{ entity }">
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption> {{ t('worker.card.name') }} </q-item-label>
|
||||
<q-item-label>{{ worker.user.nickname }}</q-item-label>
|
||||
<q-item-label>{{ entity.user.nickname }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption> {{ t('worker.card.email') }} </q-item-label>
|
||||
<q-item-label>{{ worker.user.email }}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('worker.card.email') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ entity.user.email }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption> {{ t('worker.list.department') }} </q-item-label>
|
||||
<q-item-label>{{ worker.department.department.name }}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('worker.list.department') }}
|
||||
</q-item-label>
|
||||
<q-item-label>
|
||||
{{ entity.department.department.name }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption> {{ t('worker.card.phone') }} </q-item-label>
|
||||
<q-item-label>{{ worker.phone }}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('worker.card.phone') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ entity.phone }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('worker.summary.sipExtension') }} </q-item-label>
|
||||
<q-item-label>{{ sipExtension() }}</q-item-label>
|
||||
<q-item-label caption
|
||||
>{{ t('worker.summary.sipExtension') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ sip }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
|
|
|
|||
|
|
@ -9,28 +9,6 @@ const router = useRouter();
|
|||
const { t } = useI18n();
|
||||
const quasar = useQuasar();
|
||||
|
||||
const filter = {
|
||||
include: [
|
||||
{
|
||||
relation: 'user',
|
||||
scope: {
|
||||
fields: ['email', 'name', 'nickname'],
|
||||
},
|
||||
},
|
||||
{
|
||||
relation: 'department',
|
||||
scope: {
|
||||
include: {
|
||||
relation: 'department',
|
||||
scope: {
|
||||
fields: ['name'],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
function navigate(id) {
|
||||
router.push({ path: `/worker/${id}` });
|
||||
}
|
||||
|
|
@ -47,41 +25,71 @@ function viewSummary(id) {
|
|||
|
||||
<template>
|
||||
<q-page class="q-pa-md">
|
||||
<paginate url="/Workers" :filter="filter" sort-by="id DESC" auto-load>
|
||||
<paginate data-key="WorkerList" url="Workers/filter" sort-by="id DESC" auto-load>
|
||||
<template #body="{ rows }">
|
||||
<q-card class="card" v-for="row in rows" :key="row.id">
|
||||
<q-item class="q-pa-none items-start cursor-pointer q-hoverable" v-ripple clickable>
|
||||
<q-card class="card" v-for="row of rows" :key="row.id">
|
||||
<q-item
|
||||
class="q-pa-none items-start cursor-pointer q-hoverable"
|
||||
v-ripple
|
||||
clickable
|
||||
>
|
||||
<q-item-section class="q-pa-md" @click="navigate(row.id)">
|
||||
<q-item-label class="text-h6">{{ row.user.nickname }}</q-item-label>
|
||||
<q-item-label class="text-h6">
|
||||
{{ row.nickname }}
|
||||
</q-item-label>
|
||||
<q-item-label caption>#{{ row.id }}</q-item-label>
|
||||
<q-list>
|
||||
<q-item class="q-pa-none">
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('worker.list.name') }}</q-item-label>
|
||||
<q-item-label>{{ row.user.name }}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('worker.list.name') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ row.userName }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item class="q-pa-none">
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('worker.list.email') }}</q-item-label>
|
||||
<q-item-label>{{ row.user.email }}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('worker.list.email') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ row.email }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item class="q-pa-none">
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('worker.list.department') }}</q-item-label>
|
||||
<q-item-label>{{ row.department.department.name }}</q-item-label>
|
||||
<q-item-label caption>{{
|
||||
t('worker.list.department')
|
||||
}}</q-item-label>
|
||||
<q-item-label>
|
||||
{{ row.department }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-item-section>
|
||||
<q-separator vertical />
|
||||
<q-card-actions vertical class="justify-between">
|
||||
<q-btn flat round color="orange" icon="preview" @click="viewSummary(row.id)">
|
||||
<q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="arrow_circle_right"
|
||||
@click="navigate(row.id)"
|
||||
>
|
||||
<q-tooltip>
|
||||
{{ t('components.smartCard.openCard') }}
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn flat round color="grey-7" icon="schedule" @click="navigate(row.id)">
|
||||
<q-tooltip>{{ t('worker.list.schedule') }}</q-tooltip>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="grey-7"
|
||||
icon="preview"
|
||||
@click="viewSummary(row.id)"
|
||||
>
|
||||
<q-tooltip>{{
|
||||
t('components.smartCard.openSummary')
|
||||
}}</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</q-item>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<script setup>
|
||||
import { useState } from 'src/composables/useState';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import LeftMenu from 'src/components/LeftMenu.vue';
|
||||
|
||||
const state = useState();
|
||||
const stateStore = useStateStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
|
||||
<q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
|
||||
<q-scroll-area class="fit text-grey-8">
|
||||
<LeftMenu />
|
||||
</q-scroll-area>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ export default {
|
|||
redirect: { name: 'WorkerMain' },
|
||||
menus: {
|
||||
main: ['WorkerList'],
|
||||
card: [],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue