wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

Updated worker module

This commit is contained in:
Joan Sanchez 2023-03-07 09:41:46 +01:00
parent cfadaa8e38
commit e2ea4227b1
7 changed files with 107 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/ui/CardDescriptor.vue
View File

@ -24,14 +24,18 @@ const { t } = useI18n();
onMounted(() => fetch()); onMounted(() => fetch());
const emit = defineEmits(['onFetch']);
const entity = ref(); const entity = ref();
async function fetch() { async function fetch() {
const params = {}; 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 }); const { data } = await axios.get(props.url, { params });
entity.value = data; entity.value = data;
emit('onFetch', data);
} }
watch(props, async () => { watch(props, async () => {
@ -46,9 +50,9 @@ watch(props, async () => {
<div class="header bg-primary q-pa-sm"> <div class="header bg-primary q-pa-sm">
<router-link :to="{ name: `${module}List` }"> <router-link :to="{ name: `${module}List` }">
<q-btn round flat dense size="md" icon="view_list" color="white"> <q-btn round flat dense size="md" icon="view_list" color="white">
<q-tooltip>{{ <q-tooltip>
t('components.cardDescriptor.mainList') {{ t('components.cardDescriptor.mainList') }}
}}</q-tooltip> </q-tooltip>
</q-btn> </q-btn>
</router-link> </router-link>
<router-link <router-link
@ -80,8 +84,9 @@ watch(props, async () => {
</q-menu> </q-menu>
</q-btn> </q-btn>
</div> </div>
<slot name="before" />
<div class="body q-py-sm"> <div class="body q-py-sm">
<q-list> <q-list dense>
<q-item-label header class="ellipsis text-h5" :lines="1"> <q-item-label header class="ellipsis text-h5" :lines="1">
<slot name="description" :entity="entity"> <slot name="description" :entity="entity">
<span> <span>
@ -98,6 +103,7 @@ watch(props, async () => {
</q-list> </q-list>
<slot name="body" :entity="entity" /> <slot name="body" :entity="entity" />
</div> </div>
<slot name="after" />
</template> </template>
<!-- Skeleton --> <!-- Skeleton -->
<skeleton-descriptor v-if="!entity" /> <skeleton-descriptor v-if="!entity" />

2
src/pages/Customer/CustomerList.vue
View File

@ -100,7 +100,7 @@ function viewSummary(id) {
<q-btn <q-btn
flat flat
round round
color="orange" color="primary"
icon="arrow_circle_right" icon="arrow_circle_right"
@click="navigate(row.id)" @click="navigate(row.id)"
> >

51
src/pages/Worker/Card/WorkerCard.vue
View File

@ -1,24 +1,18 @@
<script setup> <script setup>
import { useI18n } from 'vue-i18n'; // import { useI18n } from 'vue-i18n';
import { useState } from 'src/composables/useState'; import { useStateStore } from 'stores/useStateStore';
import WorkerDescriptor from './WorkerDescriptor.vue'; import WorkerDescriptor from './WorkerDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue';
const state = useState(); const stateStore = useStateStore();
const { t } = useI18n(); // const { t } = useI18n();
</script> </script>
<template> <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"> <q-scroll-area class="fit">
<worker-descriptor /> <WorkerDescriptor />
<q-separator /> <q-separator />
<q-list> <left-menu source="card" />
<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>
</q-scroll-area> </q-scroll-area>
</q-drawer> </q-drawer>
<q-page-container> <q-page-container>
@ -27,32 +21,3 @@ const { t } = useI18n();
</q-page> </q-page>
</q-page-container> </q-page-container>
</template> </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>

76
src/pages/Worker/Card/WorkerDescriptor.vue
View File

@ -1,9 +1,8 @@
<script setup> <script setup>
import { onMounted, computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useSession } from 'src/composables/useSession'; import { useSession } from 'src/composables/useSession';
import axios from 'axios';
import CardDescriptor from 'src/components/ui/CardDescriptor.vue'; import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
const $props = defineProps({ const $props = defineProps({
@ -14,10 +13,6 @@ const $props = defineProps({
}, },
}); });
onMounted(() => {
fetch();
});
const route = useRoute(); const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
const { getToken } = useSession(); const { getToken } = useSession();
@ -27,7 +22,6 @@ const entityId = computed(() => {
}); });
const worker = ref(); const worker = ref();
const filter = { const filter = {
include: [ include: [
{ {
@ -52,34 +46,26 @@ const filter = {
], ],
}; };
async function fetch() { const sip = computed(() => worker.value.sip && worker.value.sip.extension);
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 '-';
}
function getWorkerAvatar() { function getWorkerAvatar() {
const token = getToken(); 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> </script>
<template> <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> <template #before>
<q-img :src="getWorkerAvatar()" class="q-mb-md"> <q-img :src="getWorkerAvatar()">
<template #error> <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>
<div class="text-grey-5" style="opacity: 0.4; font-size: 5vh"> <div class="text-grey-5" style="opacity: 0.4; font-size: 5vh">
<q-icon name="vn:claims" /> <q-icon name="vn:claims" />
@ -92,36 +78,52 @@ function getWorkerAvatar() {
</template> </template>
</q-img> </q-img>
</template> </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-list>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label caption> {{ t('worker.card.name') }} </q-item-label> <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-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label caption> {{ t('worker.card.email') }} </q-item-label> <q-item-label caption>
<q-item-label>{{ worker.user.email }}</q-item-label> {{ t('worker.card.email') }}
</q-item-label>
<q-item-label>{{ entity.user.email }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label caption> {{ t('worker.list.department') }} </q-item-label> <q-item-label caption>
<q-item-label>{{ worker.department.department.name }}</q-item-label> {{ t('worker.list.department') }}
</q-item-label>
<q-item-label>
{{ entity.department.department.name }}
</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label caption> {{ t('worker.card.phone') }} </q-item-label> <q-item-label caption>
<q-item-label>{{ worker.phone }}</q-item-label> {{ t('worker.card.phone') }}
</q-item-label>
<q-item-label>{{ entity.phone }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('worker.summary.sipExtension') }} </q-item-label> <q-item-label caption
<q-item-label>{{ sipExtension() }}</q-item-label> >{{ t('worker.summary.sipExtension') }}
</q-item-label>
<q-item-label>{{ sip }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
</q-list> </q-list>

80
src/pages/Worker/WorkerList.vue
View File

@ -9,28 +9,6 @@ const router = useRouter();
const { t } = useI18n(); const { t } = useI18n();
const quasar = useQuasar(); 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) { function navigate(id) {
router.push({ path: `/worker/${id}` }); router.push({ path: `/worker/${id}` });
} }
@ -47,41 +25,71 @@ function viewSummary(id) {
<template> <template>
<q-page class="q-pa-md"> <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 }"> <template #body="{ rows }">
<q-card class="card" v-for="row in rows" :key="row.id"> <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
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-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-item-label caption>#{{ row.id }}</q-item-label>
<q-list> <q-list>
<q-item class="q-pa-none"> <q-item class="q-pa-none">
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('worker.list.name') }}</q-item-label> <q-item-label caption>
<q-item-label>{{ row.user.name }}</q-item-label> {{ t('worker.list.name') }}
</q-item-label>
<q-item-label>{{ row.userName }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item class="q-pa-none"> <q-item class="q-pa-none">
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('worker.list.email') }}</q-item-label> <q-item-label caption>
<q-item-label>{{ row.user.email }}</q-item-label> {{ t('worker.list.email') }}
</q-item-label>
<q-item-label>{{ row.email }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item class="q-pa-none"> <q-item class="q-pa-none">
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('worker.list.department') }}</q-item-label> <q-item-label caption>{{
<q-item-label>{{ row.department.department.name }}</q-item-label> t('worker.list.department')
}}</q-item-label>
<q-item-label>
{{ row.department }}
</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
</q-list> </q-list>
</q-item-section> </q-item-section>
<q-separator vertical /> <q-separator vertical />
<q-card-actions vertical class="justify-between"> <q-card-actions vertical class="justify-between">
<q-btn flat round color="orange" icon="preview" @click="viewSummary(row.id)"> <q-btn
<q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip> flat
round
color="primary"
icon="arrow_circle_right"
@click="navigate(row.id)"
>
<q-tooltip>
{{ t('components.smartCard.openCard') }}
</q-tooltip>
</q-btn> </q-btn>
<q-btn flat round color="grey-7" icon="schedule" @click="navigate(row.id)"> <q-btn
<q-tooltip>{{ t('worker.list.schedule') }}</q-tooltip> flat
round
color="grey-7"
icon="preview"
@click="viewSummary(row.id)"
>
<q-tooltip>{{
t('components.smartCard.openSummary')
}}</q-tooltip>
</q-btn> </q-btn>
</q-card-actions> </q-card-actions>
</q-item> </q-item>

6
src/pages/Worker/WorkerMain.vue
View File

@ -1,12 +1,12 @@
<script setup> <script setup>
import { useState } from 'src/composables/useState'; import { useStateStore } from 'stores/useStateStore';
import LeftMenu from 'src/components/LeftMenu.vue'; import LeftMenu from 'src/components/LeftMenu.vue';
const state = useState(); const stateStore = useStateStore();
</script> </script>
<template> <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"> <q-scroll-area class="fit text-grey-8">
<LeftMenu /> <LeftMenu />
</q-scroll-area> </q-scroll-area>

1
src/router/modules/worker.js
View File

@ -11,6 +11,7 @@ export default {
redirect: { name: 'WorkerMain' }, redirect: { name: 'WorkerMain' },
menus: { menus: {
main: ['WorkerList'], main: ['WorkerList'],
card: [],
}, },
children: [ children: [
{ {