verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 99 Releases Wiki Activity

refactor to follow current styles

This commit is contained in:
Pau 2022-12-20 09:55:47 +01:00
parent b143f1f9c7
commit b017891508
6 changed files with 18 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -80,45 +80,30 @@ function getWorkerAvatar() {
<q-img :src="getWorkerAvatar()" class="q-mb-md" /> <q-img :src="getWorkerAvatar()" class="q-mb-md" />
<q-list> <q-list>
<q-item> <q-item>
<q-item-section side>
<q-icon name="person" />
</q-item-section>
<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>{{ worker.user.nickname }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section side>
<q-icon name="email" />
</q-item-section>
<q-item-section> <q-item-section>
<q-item-label caption> {{ t('worker.card.email') }} </q-item-label> <q-item-label caption> {{ t('worker.card.email') }} </q-item-label>
<q-item-label>{{ worker.user.email }}</q-item-label> <q-item-label>{{ worker.user.email }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section side>
<q-icon name="work" />
</q-item-section>
<q-item-section> <q-item-section>
<q-item-label caption> {{ t('worker.list.department') }} </q-item-label> <q-item-label caption> {{ t('worker.list.department') }} </q-item-label>
<q-item-label>{{ worker.department.department.name }}</q-item-label> <q-item-label>{{ worker.department.department.name }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section side>
<q-icon name="phone" />
</q-item-section>
<q-item-section> <q-item-section>
<q-item-label caption> {{ t('worker.card.phone') }} </q-item-label> <q-item-label caption> {{ t('worker.card.phone') }} </q-item-label>
<q-item-label>{{ worker.phone }}</q-item-label> <q-item-label>{{ worker.phone }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section side>
<q-icon name="extension" />
</q-item-section>
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('worker.summary.sipExtension') }} </q-item-label> <q-item-label caption>{{ t('worker.summary.sipExtension') }} </q-item-label>
<q-item-label>{{ sipExtension() }}</q-item-label> <q-item-label>{{ sipExtension() }}</q-item-label>

47
src/pages/Worker/Card/WorkerSummary.vue
View File

@ -3,7 +3,6 @@ import { ref, onMounted, computed, onUpdated } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import { useSession } from 'src/composables/useSession';
import axios from 'axios'; import axios from 'axios';
import workerDescriptorDialog from './WorkerDescriptorDialog.vue'; import workerDescriptorDialog from './WorkerDescriptorDialog.vue';
@ -14,7 +13,6 @@ onUpdated(() => fetch());
const route = useRoute(); const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
const quasar = useQuasar(); const quasar = useQuasar();
const { getToken } = useSession();
t == t; t == t;
@ -86,11 +84,6 @@ function openDescriptorDialog(id) {
}, },
}); });
} }
function getWorkerAvatar() {
const token = getToken();
return `/api/Images/user/160x160/${worker.value.boss.id}/download?access_token=${token}`;
}
</script> </script>
<template> <template>
@ -98,7 +91,9 @@ function getWorkerAvatar() {
<q-card> <q-card>
<skeleton-summary v-if="!worker" /> <skeleton-summary v-if="!worker" />
<template v-if="worker"> <template v-if="worker">
<div class="header bg-primary q-pa-sm q-mb-md">{{ worker.id }} - {{ worker.firstName }}</div> <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="row q-pa-md q-col-gutter-md q-mb-md">
<div class="col"> <div class="col">
<q-list> <q-list>
@ -106,45 +101,30 @@ function getWorkerAvatar() {
{{ t('worker.summary.basicData') }} {{ t('worker.summary.basicData') }}
</q-item-label> </q-item-label>
<q-item> <q-item>
<q-item-section side>
<q-icon name="grid_3x3" />
</q-item-section>
<q-item-section> <q-item-section>
<q-item-label caption> ID </q-item-label> <q-item-label caption> ID </q-item-label>
<q-item-label>{{ worker.id }}</q-item-label> <q-item-label>{{ worker.id }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section side>
<q-icon name="person" />
</q-item-section>
<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>{{ worker.user.nickname }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section side>
<q-icon name="work" />
</q-item-section>
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('worker.list.department') }} </q-item-label> <q-item-label caption>{{ t('worker.list.department') }} </q-item-label>
<q-item-label>{{ worker.department.department.name }}</q-item-label> <q-item-label>{{ worker.department.department.name }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section side>
<q-icon name="email" />
</q-item-section>
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('worker.list.email') }} </q-item-label> <q-item-label caption>{{ t('worker.list.email') }} </q-item-label>
<q-item-label>{{ worker.user.email }}</q-item-label> <q-item-label>{{ worker.user.email }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item class="items-start cursor-pointer q-hoverable" v-if="worker.boss"> <q-item class="items-start cursor-pointer q-hoverable" v-if="worker.boss">
<q-item-section side @click="openDescriptorDialog(worker.bossFk)">
<q-img :src="getWorkerAvatar()" class="avatar" />
</q-item-section>
<q-item-section @click="openDescriptorDialog(worker.bossFk)"> <q-item-section @click="openDescriptorDialog(worker.bossFk)">
<q-item-label caption>{{ t('worker.summary.boss') }} </q-item-label> <q-item-label caption>{{ t('worker.summary.boss') }} </q-item-label>
<q-item-label> <q-item-label>
@ -153,9 +133,6 @@ function getWorkerAvatar() {
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section side>
<q-icon name="grid_3x3" />
</q-item-section>
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('worker.summary.phoneExtension') }} </q-item-label> <q-item-label caption>{{ t('worker.summary.phoneExtension') }} </q-item-label>
<q-item-label> <q-item-label>
@ -164,18 +141,12 @@ function getWorkerAvatar() {
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section side>
<q-icon name="phone" />
</q-item-section>
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('worker.summary.entPhone') }} </q-item-label> <q-item-label caption>{{ t('worker.summary.entPhone') }} </q-item-label>
<q-item-label>{{ worker.phone }}</q-item-label> <q-item-label>{{ worker.phone }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section side>
<q-icon name="phone_android" />
</q-item-section>
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('worker.summary.personalPhone') }} </q-item-label> <q-item-label caption>{{ t('worker.summary.personalPhone') }} </q-item-label>
<q-item-label>{{ worker.client.phone }}</q-item-label> <q-item-label>{{ worker.client.phone }}</q-item-label>
@ -189,36 +160,24 @@ function getWorkerAvatar() {
{{ t('worker.summary.userData') }} {{ t('worker.summary.userData') }}
</q-item-label> </q-item-label>
<q-item> <q-item>
<q-item-section side>
<q-icon name="grid_3x3" />
</q-item-section>
<q-item-section> <q-item-section>
<q-item-label caption> {{ t('worker.summary.userId') }} </q-item-label> <q-item-label caption> {{ t('worker.summary.userId') }} </q-item-label>
<q-item-label>{{ worker.user.id }}</q-item-label> <q-item-label>{{ worker.user.id }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section side>
<q-icon name="person" />
</q-item-section>
<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>{{ worker.user.nickname }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section side>
<q-icon name="group" />
</q-item-section>
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('worker.summary.role') }} </q-item-label> <q-item-label caption>{{ t('worker.summary.role') }} </q-item-label>
<q-item-label>{{ worker.user.role.name }}</q-item-label> <q-item-label>{{ worker.user.role.name }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section side>
<q-icon name="extension" />
</q-item-section>
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('worker.summary.sipExtension') }} </q-item-label> <q-item-label caption>{{ t('worker.summary.sipExtension') }} </q-item-label>
<q-item-label>{{ sipExtension() }}</q-item-label> <q-item-label>{{ sipExtension() }}</q-item-label>

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

@ -52,21 +52,23 @@ function viewSummary(id) {
<q-card class="card" v-for="row in rows" :key="row.id"> <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-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 caption>#{{ row.id }}</q-item-label>
<q-item-label class="text-h6">{{ row.user.nickname }}</q-item-label> <q-item-label class="text-h6">{{ row.user.nickname }}</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 class="q-pa-md"> <q-item-section>
<q-item-label caption>{{ t('worker.list.name') }}</q-item-label> <q-item-label caption>{{ t('worker.list.name') }}</q-item-label>
<q-item-label>{{ row.user.name }}</q-item-label> <q-item-label>{{ row.user.name }}</q-item-label>
</q-item-section> </q-item-section>
<q-item-section class="q-pa-md"> </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 caption>{{ t('worker.list.email') }}</q-item-label>
<q-item-label>{{ row.user.email }}</q-item-label> <q-item-label>{{ row.user.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 class="q-pa-md"> <q-item-section>
<q-item-label caption>{{ t('worker.list.department') }}</q-item-label> <q-item-label caption>{{ t('worker.list.department') }}</q-item-label>
<q-item-label>{{ row.department.department.name }}</q-item-label> <q-item-label>{{ row.department.department.name }}</q-item-label>
</q-item-section> </q-item-section>

4
src/router/modules/index.js
View File

@ -2,10 +2,12 @@ import Customer from './customer';
import Ticket from './ticket'; import Ticket from './ticket';
import Claim from './claim'; import Claim from './claim';
import InvoiceOut from './invoiceOut'; import InvoiceOut from './invoiceOut';
import Worker from './worker';
export default [ export default [
Customer, Customer,
Ticket, Ticket,
Claim, Claim,
InvoiceOut InvoiceOut,
Worker
] ]

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

@ -8,14 +8,14 @@ export default {
icon: 'vn:worker', icon: 'vn:worker',
}, },
component: RouterView, component: RouterView,
redirect: { name: 'workerMain' }, redirect: { name: 'WorkerMain' },
menus: { menus: {
main: ['workerMain'], main: ['WorkerList'],
}, },
children: [ children: [
{ {
path: '', path: '',
name: 'workerMain', name: 'WorkerMain',
component: () => import('src/pages/Worker/WorkerMain.vue'), component: () => import('src/pages/Worker/WorkerMain.vue'),
redirect: { name: 'WorkerList' }, redirect: { name: 'WorkerList' },
children: [ children: [
@ -31,13 +31,13 @@ export default {
], ],
}, },
{ {
name: 'workerCard', name: 'WorkerCard',
path: ':id', path: ':id',
component: () => import('src/pages/Worker/Card/WorkerCard.vue'), component: () => import('src/pages/Worker/Card/WorkerCard.vue'),
redirect: { name: 'WorkerSummary' }, redirect: { name: 'WorkerSummary' },
children: [ children: [
{ {
name: 'workerSummary', name: 'WorkerSummary',
path: 'summary', path: 'summary',
meta: { meta: {
title: 'summary', title: 'summary',

2
src/stores/useNavigationStore.js
View File

@ -6,7 +6,7 @@ import { useRole } from 'src/composables/useRole';
import routes from 'src/router/modules'; import routes from 'src/router/modules';
export const useNavigationStore = defineStore('navigationStore', () => { export const useNavigationStore = defineStore('navigationStore', () => {
const modules = ['customer', 'claim', 'ticket', 'invoiceOut']; const modules = ['customer', 'claim', 'ticket', 'invoiceOut', 'worker'];
const pinnedModules = ref([]); const pinnedModules = ref([]);
const role = useRole(); const role = useRole();