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

Updated WorkerDescriptorProxy
gitea/salix-front/pipeline/head This commit looks good Details

This commit is contained in:
Joan Sanchez 2023-03-08 09:40:44 +01:00
parent 06333af38c
commit e7f182bbb6
9 changed files with 116 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
quasar.config.js
View File

@ -9,7 +9,7 @@
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js
const { configure } = require('quasar/wrappers'); const { configure } = require('quasar/wrappers');
const VueI18nPlugin = require('@intlify/unplugin-vue-i18n/vite') const VueI18nPlugin = require('@intlify/unplugin-vue-i18n/vite');
const path = require('path'); const path = require('path');
module.exports = configure(function (/* ctx */) { module.exports = configure(function (/* ctx */) {
@ -140,6 +140,8 @@ module.exports = configure(function (/* ctx */) {
// Quasar plugins // Quasar plugins
plugins: ['Notify', 'Dialog'], plugins: ['Notify', 'Dialog'],
//all: 'auto',
//autoImportComponentCase: 'pascal',
}, },
// animations: 'all', // --- includes all animations // animations: 'all', // --- includes all animations

19
src/components/ui/VnSearchbar.vue
View File

@ -67,6 +67,7 @@ async function search() {
dense dense
standout standout
autofocus autofocus
hide-bottom-space
> >
<template #prepend> <template #prepend>
<q-icon name="search" /> <q-icon name="search" />
@ -87,6 +88,24 @@ async function search() {
</q-form> </q-form>
</template> </template>
<style lang="scss">
@media screen and (max-width: $breakpoint-xs-max) {
.q-field {
width: 250px;
}
}
@media screen and (min-width: $breakpoint-xs-max) {
.q-field {
width: 400px;
}
}
.q-field {
transition: width 0.36s;
}
</style>
<style lang="scss"> <style lang="scss">
.cursor-info { .cursor-info {
cursor: help; cursor: help;

5
src/pages/Claim/Card/ClaimLog.vue
View File

@ -3,7 +3,6 @@ import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useSession } from 'src/composables/useSession'; import { useSession } from 'src/composables/useSession';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import TeleportSlot from 'components/ui/TeleportSlot.vue';
import Paginate from 'src/components/PaginateData.vue'; import Paginate from 'src/components/PaginateData.vue';
import ClaimLogFilter from './ClaimLogFilter.vue'; import ClaimLogFilter from './ClaimLogFilter.vue';
@ -114,7 +113,7 @@ function actionColor(action) {
</Paginate> </Paginate>
</q-timeline> </q-timeline>
</div> </div>
<TeleportSlot to="#actions-append"> <Teleport v-if="stateStore.isHeaderMounted()" to="#actions-append">
<div class="row q-gutter-x-sm"> <div class="row q-gutter-x-sm">
<q-btn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu"> <q-btn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu">
<q-tooltip bottom anchor="bottom right"> <q-tooltip bottom anchor="bottom right">
@ -122,7 +121,7 @@ function actionColor(action) {
</q-tooltip> </q-tooltip>
</q-btn> </q-btn>
</div> </div>
</TeleportSlot> </Teleport>
<q-drawer v-model="stateStore.rightDrawer" show-if-above side="right" :width="300"> <q-drawer v-model="stateStore.rightDrawer" show-if-above side="right" :width="300">
<q-scroll-area class="fit text-grey-8"> <q-scroll-area class="fit text-grey-8">
<ClaimLogFilter data-key="ClaimLogs" /> <ClaimLogFilter data-key="ClaimLogs" />

4
src/pages/Customer/Card/CustomerDescriptor.vue
View File

@ -4,6 +4,7 @@ import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { toCurrency } from 'src/filters'; import { toCurrency } from 'src/filters';
import CardDescriptor from 'components/ui/CardDescriptor.vue'; import CardDescriptor from 'components/ui/CardDescriptor.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
const $props = defineProps({ const $props = defineProps({
id: { id: {
@ -30,7 +31,10 @@ const entityId = computed(() => {
{{ t('customer.card.salesPerson') }} {{ t('customer.card.salesPerson') }}
</q-item-label> </q-item-label>
<q-item-label class="col q-ma-none"> <q-item-label class="col q-ma-none">
<span class="link">
{{ entity.salesPersonUser.name }} {{ entity.salesPersonUser.name }}
<WorkerDescriptorProxy :id="entity.salesPersonFk" />
</span>
</q-item-label> </q-item-label>
</q-item> </q-item>
<q-item class="row"> <q-item class="row">

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

@ -61,7 +61,7 @@ function getWorkerAvatar() {
@on-fetch="(data) => (worker = data)" @on-fetch="(data) => (worker = data)"
> >
<template #before> <template #before>
<q-img :src="getWorkerAvatar()"> <q-img :src="getWorkerAvatar()" class="photo">
<template #error> <template #error>
<div <div
class="absolute-full bg-grey-10 text-center q-pa-md flex flex-center" class="absolute-full bg-grey-10 text-center q-pa-md flex flex-center"
@ -130,3 +130,9 @@ function getWorkerAvatar() {
</template> </template>
</card-descriptor> </card-descriptor>
</template> </template>
<style lang="scss" scoped>
.photo {
height: 256px;
}
</style>

21
src/pages/Worker/Card/WorkerDescriptorDialog.vue
View File

@ -1,21 +0,0 @@
<script setup>
import { useDialogPluginComponent } from 'quasar';
import workerDescriptor from './WorkerDescriptor.vue';
const $props = defineProps({
id: {
type: Number,
required: true,
},
});
defineEmits([...useDialogPluginComponent.emits]);
const { dialogRef, onDialogHide } = useDialogPluginComponent();
</script>
<template>
<q-dialog ref="dialogRef" @hide="onDialogHide">
<worker-descriptor v-if="$props.id" :id="$props.id" />
</q-dialog>
</template>

7
src/pages/Worker/Card/WorkerPopover.vue → src/pages/Worker/Card/WorkerDescriptorProxy.vue
View File

@ -8,8 +8,9 @@ const $props = defineProps({
}, },
}); });
</script> </script>
<template> <template>
<q-card> <q-popup-proxy>
<worker-descriptor v-if="$props.id" :id="$props.id" /> <WorkerDescriptor v-if="$props.id" :id="$props.id" />
</q-card> </q-popup-proxy>
</template> </template>

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

@ -1,20 +1,16 @@
<script setup> <script setup>
import axios from 'axios';
import { ref, onMounted, computed, onUpdated } from 'vue'; 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 SkeletonSummary from 'components/ui/SkeletonSummary.vue';
import axios from 'axios'; import WorkerDescriptorProxy from './WorkerDescriptorProxy.vue';
import workerDescriptorDialog from './WorkerDescriptorDialog.vue';
onMounted(() => fetch()); onMounted(() => fetch());
onUpdated(() => fetch()); onUpdated(() => fetch());
const route = useRoute(); const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
const quasar = useQuasar();
t == t;
const $props = defineProps({ const $props = defineProps({
id: { id: {
@ -75,21 +71,12 @@ function sipExtension() {
if (worker.value.sip) return worker.value.sip.extension; if (worker.value.sip) return worker.value.sip.extension;
return '-'; return '-';
} }
function openDescriptorDialog(id) {
quasar.dialog({
component: workerDescriptorDialog,
componentProps: {
id,
},
});
}
</script> </script>
<template> <template>
<div class="summary container"> <div class="summary container">
<q-card> <q-card>
<skeleton-summary v-if="!worker" /> <SkeletonSummary v-if="!worker" />
<template v-if="worker"> <template v-if="worker">
<div class="header bg-primary q-pa-sm q-mb-md"> <div class="header bg-primary q-pa-sm q-mb-md">
{{ worker.id }} - {{ worker.firstName }} {{ worker.lastName }} {{ worker.id }} - {{ worker.firstName }} {{ worker.lastName }}
@ -108,49 +95,81 @@ function openDescriptorDialog(id) {
</q-item> </q-item>
<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
<q-item-label>{{ worker.user.nickname }}</q-item-label> >{{ t('worker.card.name') }}
</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> <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>{{
worker.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.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
<q-item-section @click="openDescriptorDialog(worker.bossFk)"> class="items-start cursor-pointer q-hoverable"
<q-item-label caption>{{ t('worker.summary.boss') }} </q-item-label> v-if="worker.boss"
>
<q-item-section>
<q-item-label caption>
{{ t('worker.summary.boss') }}
</q-item-label>
<q-item-label> <q-item-label>
<span class="link">
{{ worker.boss.name }} {{ worker.boss.name }}
<WorkerDescriptorProxy :id="worker.bossFk" />
</span>
</q-item-label> </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.phoneExtension') }} </q-item-label> <q-item-label caption
>{{ t('worker.summary.phoneExtension') }}
</q-item-label>
<q-item-label> <q-item-label>
{{ worker.mobileExtension == '' ? worker.mobileExtension : '-' }} {{
worker.mobileExtension == ''
? worker.mobileExtension
: '-'
}}
</q-item-label> </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.entPhone') }} </q-item-label> <q-item-label caption
<q-item-label>{{ worker.phone == '' ? worker.phone : '-' }}</q-item-label> >{{ t('worker.summary.entPhone') }}
</q-item-label>
<q-item-label>{{
worker.phone == '' ? worker.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.personalPhone') }} </q-item-label> <q-item-label caption
>{{ t('worker.summary.personalPhone') }}
</q-item-label>
<q-item-label>{{ <q-item-label>{{
worker.client.phone == '' ? worker.client.phone : '-' worker.client.phone == ''
? worker.client.phone
: '-'
}}</q-item-label> }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
@ -163,25 +182,37 @@ function openDescriptorDialog(id) {
</q-item-label> </q-item-label>
<q-item> <q-item>
<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> <q-item-section>
<q-item-label caption>{{ t('worker.card.name') }} </q-item-label> <q-item-label caption
<q-item-label>{{ worker.user.nickname }}</q-item-label> >{{ t('worker.card.name') }}
</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> <q-item-section>
<q-item-label caption>{{ t('worker.summary.role') }} </q-item-label> <q-item-label caption
<q-item-label>{{ worker.user.role.name }}</q-item-label> >{{ t('worker.summary.role') }}
</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> <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>
</q-item-section> </q-item-section>
</q-item> </q-item>

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

@ -5,7 +5,6 @@ import { useQuasar } from 'quasar';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import Paginate from 'src/components/PaginateData.vue'; import Paginate from 'src/components/PaginateData.vue';
import WorkerSummaryDialog from './Card/WorkerSummaryDialog.vue'; import WorkerSummaryDialog from './Card/WorkerSummaryDialog.vue';
import TeleportSlot from 'components/ui/TeleportSlot.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue'; import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import WorkerFilter from './WorkerFilter.vue'; import WorkerFilter from './WorkerFilter.vue';
@ -129,9 +128,9 @@ function viewSummary(id) {
icon="preview" icon="preview"
@click="viewSummary(row.id)" @click="viewSummary(row.id)"
> >
<q-tooltip>{{ <q-tooltip>
t('components.smartCard.openSummary') {{ t('components.smartCard.openSummary') }}
}}</q-tooltip> </q-tooltip>
</q-btn> </q-btn>
</q-card-actions> </q-card-actions>
</q-item> </q-item>