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

Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix-front into 6105-createClaimNotes

This commit is contained in:
Jorge Penadés 2023-08-17 10:34:35 +02:00
parent ee7c2389b5 ab2e1f4553
commit e7fe7e1888
14 changed files with 962 additions and 1650 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/LeftMenu.vue
View File

@ -31,7 +31,7 @@ function findMatches(search, item) {
const matches = []; const matches = [];
function findRoute(search, item) { function findRoute(search, item) {
for (const child of item.children) { for (const child of item.children) {
if (search.indexOf(child.name) > -1) { if (search?.indexOf(child.name) > -1) {
matches.push(child); matches.push(child);
} else if (child.children) { } else if (child.children) {
findRoute(search, child); findRoute(search, child);

113
src/components/ui/CardSummary.vue
View File

@ -2,6 +2,8 @@
import { onMounted, ref, watch } from 'vue'; import { onMounted, ref, watch } from 'vue';
import axios from 'axios'; import axios from 'axios';
import SkeletonSummary from 'components/ui/SkeletonSummary.vue'; import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
import VnLv from 'src/components/ui/VnLv.vue';
onMounted(() => fetch()); onMounted(() => fetch());
const entity = ref(); const entity = ref();
@ -41,15 +43,21 @@ watch(props, async () => {
<template> <template>
<div class="summary container"> <div class="summary container">
<QCard> <QCard class="cardSummary">
<SkeletonSummary v-if="!entity" /> <SkeletonSummary v-if="!entity" />
<template v-if="entity"> <template v-if="entity">
<div class="header bg-primary q-pa-sm q-mb-md"> <div class="summaryHeader bg-primary q-pa-md text-weight-bolder">
<slot name="header-left">
<span></span>
</slot>
<slot name="header" :entity="entity"> <slot name="header" :entity="entity">
{{ entity.id }} - {{ entity.name }} <VnLv :label="`${entity.id} -`" :value="entity.name" />
</slot>
<slot name="header-right">
<span></span>
</slot> </slot>
</div> </div>
<div class="body q-pa-md q-mb-md"> <div class="summaryBody row q-mb-md">
<slot name="body" :entity="entity" /> <slot name="body" :entity="entity" />
</div> </div>
</template> </template>
@ -63,57 +71,84 @@ watch(props, async () => {
justify-content: center; justify-content: center;
} }
.summary { .cardSummary {
.q-card {
width: 100%; width: 100%;
max-width: 1200px; .summaryHeader {
} text-align: center;
font-size: 20px;
.negative {
color: red;
}
.q-list {
.q-item__label--header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
}
.summaryBody {
display: flex;
flex-direction: row;
justify-content: space-evenly;
gap: 15px;
padding: 15px;
a { > .q-card.vn-one {
color: $primary; flex: 1;
} }
> .q-card.vn-two {
flex: 2;
} }
> .q-card.vn-three {
flex: 3;
}
> .q-card.vn-max {
width: 100%;
} }
.body > .q-card__section.row { > .q-card {
flex-wrap: wrap; width: 100%;
background-color: var(--vn-gray);
padding: 15px;
font-size: 16px;
min-width: 275px;
& > .col { .vn-label-value {
min-width: 250px; display: flex;
flex-direction: row;
margin-top: 5px;
.label {
color: var(--vn-label);
width: 10em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: 10px;
}
.value {
color: var(--vn-text);
width: max-content;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
} }
.header { .header {
text-align: center; color: $primary;
font-size: 18px; font-weight: bold;
} margin-bottom: 25px;
font-size: 20px;
#slider-container { display: inline-block;
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%;
} }
.header.link:hover {
color: lighten($primary, 20%);
} }
} }
} }
.q-dialog .summary { @media (max-width: $breakpoint-xs) {
max-width: 1200px; .summaryBody {
padding: 0;
}
}
}
</style>
<style lang="scss" scoped>
.summaryHeader .vn-label-value {
display: flex;
flex-direction: row;
} }
</style> </style>

10
src/components/ui/VnLv.vue
View File

@ -1,5 +1,7 @@
<script setup> <script setup>
import { computed } from 'vue'; import { computed } from 'vue';
import { dashIfEmpty } from 'src/filters';
const $props = defineProps({ const $props = defineProps({
label: { type: String, default: null }, label: { type: String, default: null },
value: { value: {
@ -7,6 +9,7 @@ const $props = defineProps({
default: null, default: null,
}, },
info: { type: String, default: null }, info: { type: String, default: null },
dash: { type: Boolean, default: true },
}); });
const isBooleanValue = computed(() => typeof $props.value === 'boolean'); const isBooleanValue = computed(() => typeof $props.value === 'boolean');
</script> </script>
@ -17,15 +20,18 @@ const isBooleanValue = computed(() => typeof $props.value === 'boolean');
<span>{{ $props.label }}</span> <span>{{ $props.label }}</span>
</slot> </slot>
</div> </div>
<div v-if="$props.value || $slots.value" class="value"> <div class="value">
<span v-if="isBooleanValue"> <span v-if="isBooleanValue">
<QIcon <QIcon
:name="$props.value ? `check` : `close`" :name="$props.value ? `check` : `close`"
:color="$props.value ? `positive` : `negative`" :color="$props.value ? `positive` : `negative`"
size="sm"
/> />
</span> </span>
<slot v-else name="value"> <slot v-else name="value">
<span :title="$props.value">{{ $props.value }}</span> <span :title="$props.value">
{{ $props.dash ? dashIfEmpty($props.value) : $props.value }}
</span>
</slot> </slot>
</div> </div>
<div class="info" v-if="$props.info"> <div class="info" v-if="$props.info">

9
src/css/app.scss
View File

@ -35,4 +35,13 @@ body.body--light {
color: white; color: white;
} }
} }
--vn-text: #000000;
--vn-gray: #dddddd;
--vn-label: #5f5f5f;
}
body.body--dark {
--vn-text: #ffffff;
--vn-gray: #313131;
--vn-label: #a8a8a8;
} }

2
src/css/quasar.variables.scss
View File

@ -47,4 +47,4 @@ $dark: #292929;
$layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24); $layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24);
$spacing-md: 16px; $spacing-md: 16px;
$label-color: rgba(255, 255, 255, 0.6); $label-color: #ffffff99;

8
src/i18n/en/index.js
View File

@ -33,6 +33,9 @@ export default {
rowRemoved: 'Row removed', rowRemoved: 'Row removed',
pleaseWait: 'Please wait...', pleaseWait: 'Please wait...',
noPinnedModules: 'You have dont have any pinned modules', noPinnedModules: 'You have dont have any pinned modules',
summary: {
basicData: 'Basic data',
},
}, },
errors: { errors: {
statusUnauthorized: 'Access denied', statusUnauthorized: 'Access denied',
@ -154,6 +157,8 @@ export default {
balanceDue: 'Balance due', balanceDue: 'Balance due',
balanceDueInfo: 'Deviated invoices minus payments', balanceDueInfo: 'Deviated invoices minus payments',
recoverySince: 'Recovery since', recoverySince: 'Recovery since',
businessType: 'Business Type',
city: 'City',
}, },
basicData: { basicData: {
socialName: 'Fiscal name', socialName: 'Fiscal name',
@ -175,6 +180,7 @@ export default {
basicData: 'Basic Data', basicData: 'Basic Data',
boxing: 'Boxing', boxing: 'Boxing',
sms: 'Sms', sms: 'Sms',
notes: 'Notes',
}, },
list: { list: {
nickname: 'Nickname', nickname: 'Nickname',
@ -244,6 +250,7 @@ export default {
requester: 'Requester', requester: 'Requester',
atender: 'Atender', atender: 'Atender',
request: 'Request', request: 'Request',
weight: 'Weight',
goTo: 'Go to', goTo: 'Go to',
}, },
}, },
@ -411,6 +418,7 @@ export default {
userId: 'User ID', userId: 'User ID',
role: 'Role', role: 'Role',
sipExtension: 'Extension', sipExtension: 'Extension',
locker: 'Locker',
}, },
notificationsManager: { notificationsManager: {
activeNotifications: 'Active notifications', activeNotifications: 'Active notifications',

10
src/i18n/es/index.js
View File

@ -33,6 +33,9 @@ export default {
rowRemoved: 'Fila eliminada', rowRemoved: 'Fila eliminada',
pleaseWait: 'Por favor, espera...', pleaseWait: 'Por favor, espera...',
noPinnedModules: 'No has fijado ningún módulo', noPinnedModules: 'No has fijado ningún módulo',
summary: {
basicData: 'Datos básicos',
},
}, },
errors: { errors: {
statusUnauthorized: 'Acceso denegado', statusUnauthorized: 'Acceso denegado',
@ -119,7 +122,7 @@ export default {
province: 'Provincia', province: 'Provincia',
country: 'País', country: 'País',
street: 'Calle', street: 'Calle',
isEqualizated: 'Equalizado', isEqualizated: 'Recargo de equivalencia',
isActive: 'Activo', isActive: 'Activo',
invoiceByAddress: 'Facturar por consignatario', invoiceByAddress: 'Facturar por consignatario',
verifiedData: 'Datos verificados', verifiedData: 'Datos verificados',
@ -153,6 +156,8 @@ export default {
balanceDue: 'Saldo vencido', balanceDue: 'Saldo vencido',
balanceDueInfo: 'Facturas fuera de plazo menos recibos', balanceDueInfo: 'Facturas fuera de plazo menos recibos',
recoverySince: 'Recobro desde', recoverySince: 'Recobro desde',
businessType: 'Tipo de negocio',
city: 'Población',
}, },
basicData: { basicData: {
socialName: 'Nombre fiscal', socialName: 'Nombre fiscal',
@ -174,6 +179,7 @@ export default {
basicData: 'Datos básicos', basicData: 'Datos básicos',
boxing: 'Encajado', boxing: 'Encajado',
sms: 'Sms', sms: 'Sms',
notes: 'Notas',
}, },
list: { list: {
nickname: 'Alias', nickname: 'Alias',
@ -243,6 +249,7 @@ export default {
requester: 'Solicitante', requester: 'Solicitante',
atender: 'Comprador', atender: 'Comprador',
request: 'Petición de compra', request: 'Petición de compra',
weight: 'Peso',
goTo: 'Ir a', goTo: 'Ir a',
}, },
}, },
@ -411,6 +418,7 @@ export default {
userId: 'ID del usuario', userId: 'ID del usuario',
role: 'Rol', role: 'Rol',
sipExtension: 'Extensión', sipExtension: 'Extensión',
locker: 'Taquilla',
}, },
notificationsManager: { notificationsManager: {
activeNotifications: 'Notificaciones activas', activeNotifications: 'Notificaciones activas',

199
src/pages/Claim/Card/ClaimSummary.vue
View File

@ -1,12 +1,14 @@
<script setup> <script setup>
import { ref, computed } from 'vue'; import { onMounted, ref, computed } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { toDate, toCurrency } from 'src/filters'; import { toDate, toCurrency } from 'src/filters';
import CardSummary from 'components/ui/CardSummary.vue'; import CardSummary from 'components/ui/CardSummary.vue';
import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import { getUrl } from 'src/composables/getUrl';
import { useSession } from 'src/composables/useSession'; import { useSession } from 'src/composables/useSession';
import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
import VnLv from 'src/components/ui/VnLv.vue';
const route = useRoute(); const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
@ -22,6 +24,14 @@ const $props = defineProps({
const entityId = computed(() => $props.id || route.params.id); const entityId = computed(() => $props.id || route.params.id);
const claimUrl = ref();
const salixUrl = ref();
onMounted(async () => {
salixUrl.value = await getUrl('');
claimUrl.value = salixUrl.value + `claim/${entityId.value}/`;
});
const detailsColumns = ref([ const detailsColumns = ref([
{ {
name: 'item', name: 'item',
@ -155,78 +165,52 @@ function openDialog(dmsId) {
<template #header="{ entity: { claim } }"> <template #header="{ entity: { claim } }">
{{ claim.id }} - {{ claim.client.name }} {{ claim.id }} - {{ claim.client.name }}
</template> </template>
<template #body="{ entity: { developments, observations, claim, salesClaimed } }"> <template #body="{ entity: { claim, salesClaimed, developments } }">
<QCardSection class="row q-pa-none q-col-gutter-md"> <QCard class="vn-one">
<div class="col"> <a class="header" :href="`#/claim/${entityId}/basic-data`">
<QList> {{ t('claim.pageTitles.basicData') }}
<QItem> <QIcon name="open_in_new" color="primary" />
<QItemSection> </a>
<QItemLabel caption> <VnLv
{{ t('claim.summary.created') }} :label="t('claim.summary.created')"
</QItemLabel> :value="toDate(claim.created)"
<QItemLabel>{{ toDate(claim.created) }}</QItemLabel> />
</QItemSection> <VnLv :label="t('claim.summary.state')">
<QItemSection v-if="claim.claimState"> <template #value>
<QItemLabel caption> <QChip :color="stateColor(claim.claimState.code)" dense>
{{ t('claim.summary.state') }}
</QItemLabel>
<QItemLabel>
<QChip
:color="stateColor(claim.claimState.code)"
dense
>
{{ claim.claimState.description }} {{ claim.claimState.description }}
</QChip> </QChip>
</QItemLabel> </template>
</QItemSection> </VnLv>
</QItem> <VnLv :label="t('claim.summary.assignedTo')">
<QItem> <template #value>
<QItemSection v-if="claim.worker && claim.worker.user">
<QItemLabel caption>
{{ t('claim.summary.assignedTo') }}
</QItemLabel>
<QItemLabel>
<span class="link"> <span class="link">
{{ claim.worker.user.nickname }} {{ claim.worker.user.nickname }}
<WorkerDescriptorProxy :id="claim.workerFk" /> <WorkerDescriptorProxy :id="claim.workerFk" />
</span> </span>
</QItemLabel> </template>
</QItemSection> </VnLv>
<QItemSection <VnLv :label="t('claim.summary.attendedBy')">
v-if="claim.client && claim.client.salesPersonUser" <template #value>
>
<QItemLabel caption>
{{ t('claim.summary.attendedBy') }}
</QItemLabel>
<QItemLabel>
<span class="link"> <span class="link">
{{ claim.client.salesPersonUser.name }} {{ claim.client.salesPersonUser.name }}
<WorkerDescriptorProxy <WorkerDescriptorProxy :id="claim.client.salesPersonFk" />
:id="claim.client.salesPersonFk"
/>
</span> </span>
</QItemLabel> </template>
</QItemSection> </VnLv>
</QItem> </QCard>
</QList> <QCard class="vn-one">
</div> <a class="header" :href="claimUrl + 'note/index'">
</QCardSection> {{ t('claim.summary.notes') }}
<QCardSection class="q-pa-md" v-if="observations.length > 0"> <QIcon name="open_in_new" color="primary" />
<h6>{{ t('claim.summary.notes') }}</h6> </a>
<div class="note-list" v-for="note in observations" :key="note.id"> <!-- Use VnNotes and maybe VirtualScroll-->
<div class="note-caption"> </QCard>
<span <QCard class="vn-max" v-if="salesClaimed.length > 0">
>{{ note.worker.firstName }} {{ note.worker.lastName }} <a class="header" :href="claimUrl + 'note/index'">
</span> {{ t('claim.summary.details') }}
<span>{{ toDate(note.created) }}</span> <QIcon name="open_in_new" color="primary" />
</div> </a>
<div class="note-text">
<span>{{ note.text }}</span>
</div>
</div>
</QCardSection>
<QCardSection class="q-pa-md" v-if="salesClaimed.length > 0">
<h6>{{ t('claim.summary.details') }}</h6>
<QTable :columns="detailsColumns" :rows="salesClaimed" flat> <QTable :columns="detailsColumns" :rows="salesClaimed" flat>
<template #header="props"> <template #header="props">
<QTr :props="props"> <QTr :props="props">
@ -236,16 +220,19 @@ function openDialog(dmsId) {
</QTr> </QTr>
</template> </template>
</QTable> </QTable>
</QCardSection> </QCard>
<QCardSection class="q-pa-md" v-if="claimDms.length > 0"> <QCard class="vn-max" v-if="claimDms.length > 0">
<h6>{{ t('claim.summary.photos') }}</h6> <a class="header" :href="`#/claim/${entityId}/photos`">
{{ t('claim.summary.photos') }}
<QIcon name="open_in_new" color="primary" />
</a>
<div class="container"> <div class="container">
<div class="multimediaParent bg-transparent">
<div <div
class="multimedia-container"
v-for="(media, index) of claimDms" v-for="(media, index) of claimDms"
:key="index" :key="index"
class="relative-position"
> >
<div class="relative-position">
<QIcon <QIcon
name="play_circle" name="play_circle"
color="primary" color="primary"
@ -275,9 +262,12 @@ function openDialog(dmsId) {
</div> </div>
</div> </div>
</div> </div>
</QCardSection> </QCard>
<QCardSection class="q-pa-md" v-if="developments.length > 0"> <QCard class="vn-two" v-if="developments.length > 0">
<h6>{{ t('claim.summary.development') }}</h6> <a class="header" :href="claimUrl + 'development'">
{{ t('claim.summary.development') }}
<QIcon name="open_in_new" color="primary" />
</a>
<QTable :columns="developmentColumns" :rows="developments" flat> <QTable :columns="developmentColumns" :rows="developments" flat>
<template #header="props"> <template #header="props">
<QTr :props="props"> <QTr :props="props">
@ -287,11 +277,13 @@ function openDialog(dmsId) {
</QTr> </QTr>
</template> </template>
</QTable> </QTable>
</QCardSection> </QCard>
<QCardSection class="q-pa-md"> <QCard class="vn-max" v-if="developments.length > 0">
<h6>{{ t('claim.summary.actions') }}</h6> <a class="header" :href="claimUrl + 'action'">
<QSeparator /> {{ t('claim.summary.actions') }}
<div id="slider-container"> <QIcon name="open_in_new" color="primary" />
</a>
<div id="slider-container" class="q-px-xl q-py-md">
<QSlider <QSlider
v-model="claim.responsibility" v-model="claim.responsibility"
label label
@ -308,7 +300,21 @@ function openDialog(dmsId) {
readonly readonly
/> />
</div> </div>
</QCardSection> </QCard>
<!-- <QCardSection class="q-pa-md" v-if="observations.length > 0">
<h6>{{ t('claim.summary.notes') }}</h6>
<div class="note-list" v-for="note in observations" :key="note.id">
<div class="note-caption">
<span
>{{ note.worker.firstName }} {{ note.worker.lastName }}
</span>
<span>{{ toDate(note.created) }}</span>
</div>
<div class="note-text">
<span>{{ note.text }}</span>
</div>
</div>
</QCardSection> -->
<QDialog <QDialog
v-model="multimediaDialog" v-model="multimediaDialog"
transition-show="slide-up" transition-show="slide-up"
@ -352,22 +358,19 @@ function openDialog(dmsId) {
</CardSummary> </CardSummary>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.container {
min-width: 80%;
}
.q-dialog__inner--minimized > div { .q-dialog__inner--minimized > div {
max-width: 80%; max-width: 80%;
} }
.container {
.multimediaParent { display: flex;
display: grid; flex-direction: row;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); flex-wrap: wrap;
gap: 15px;
grid-auto-rows: auto; flex-basis: 30%;
}
grid-gap: 1rem; .multimedia-container {
flex: 1 0 21%;
} }
.multimedia { .multimedia {
transition: all 0.5s; transition: all 0.5s;
opacity: 1; opacity: 1;
@ -395,18 +398,4 @@ function openDialog(dmsId) {
.zindex { .zindex {
z-index: 1; z-index: 1;
} }
.note-list {
width: 100%;
border: 0.1rem solid $grey-7;
padding: 0.5rem;
margin-bottom: 0.5rem;
}
.note-caption {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
color: $grey-7;
}
</style> </style>

645
src/pages/Customer/Card/CustomerSummary.vue
View File

@ -1,9 +1,11 @@
<script setup> <script setup>
import { computed, ref } from 'vue'; import { computed, ref, onMounted } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { toCurrency, toPercentage, toDate } from 'src/filters'; import { toCurrency, toPercentage, toDate } from 'src/filters';
import CardSummary from 'components/ui/CardSummary.vue'; import CardSummary from 'components/ui/CardSummary.vue';
import { getUrl } from 'src/composables/getUrl';
import VnLv from 'src/components/ui/VnLv.vue';
const route = useRoute(); const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
@ -16,8 +18,13 @@ const $props = defineProps({
}); });
const entityId = computed(() => $props.id || route.params.id); const entityId = computed(() => $props.id || route.params.id);
const summary = ref();
const customer = computed(() => summary.value.entity); const customer = computed(() => summary.value.entity);
const summary = ref();
const clientUrl = ref();
onMounted(async () => {
clientUrl.value = (await getUrl('client/')) + entityId.value + '/';
});
const balanceDue = computed(() => { const balanceDue = computed(() => {
return ( return (
@ -38,7 +45,7 @@ const priceIncreasingRate = computed(() => {
}); });
const debtWarning = computed(() => { const debtWarning = computed(() => {
return customer.value.debt.debt > customer.value.credit ? 'negative' : ''; return customer.value?.debt?.debt > customer.value.credit ? 'negative' : '';
}); });
const creditWarning = computed(() => { const creditWarning = computed(() => {
@ -53,478 +60,212 @@ const creditWarning = computed(() => {
<template> <template>
<CardSummary ref="summary" :url="`Clients/${entityId}/summary`"> <CardSummary ref="summary" :url="`Clients/${entityId}/summary`">
<template #body="{ entity }"> <template #body="{ entity }">
<QCardSection class="row q-pa-none QCol-gutter-md"> <QCard class="vn-one">
<div class="col"> <a class="header" :href="clientUrl + `basic-data`">
<QList dense>
<QItemLabel header class="text-h6">
{{ t('customer.summary.basicData') }} {{ t('customer.summary.basicData') }}
<RouterLink <QIcon name="open_in_new" color="primary" />
:to="{ </a>
name: 'CustomerBasicData', <VnLv :label="t('customer.summary.customerId')" :value="entity.id" />
params: { id: entity.id }, <VnLv :label="t('customer.summary.name')" :value="entity.name" />
}" <VnLv :label="t('customer.summary.contact')" :value="entity.contact" />
target="_blank" <VnLv :label="t('customer.summary.phone')" :value="entity.phone" />
> <VnLv :label="t('customer.summary.mobile')" :value="entity.mobile" />
<QIcon name="open_in_new" /> <VnLv :label="t('customer.summary.email')" :value="entity.email" />
</RouterLink> <VnLv
</QItemLabel> :label="t('customer.summary.salesPerson')"
<QSeparator class="q-mb-md" /> :value="entity?.salesPersonUser?.name"
/>
<QItem class="row col"> <VnLv
<QItemLabel class="col" caption> :label="t('customer.summary.contactChannel')"
{{ t('customer.summary.customerId') }} :value="entity?.contactChannel?.name"
</QItemLabel> />
<QItemLabel class="col q-ma-none"> <VnLv
{{ entity.id }} :label="t('customer.summary.businessType')"
</QItemLabel> :value="entity.businessType.description"
</QItem> />
<QItem class="row col"> </QCard>
<QItemLabel class="col" caption> <QCard class="vn-one">
{{ t('customer.summary.name') }} <a class="header" :href="clientUrl + `fiscal-data`">
</QItemLabel>
<QItemLabel class="col q-ma-none">
{{ entity.name }}
</QItemLabel>
</QItem>
<QItem class="row col">
<QItemLabel class="col" caption>
{{ t('customer.summary.contact') }}
</QItemLabel>
<QItemLabel class="col q-ma-none">
{{ entity.contact }}
</QItemLabel>
</QItem>
<QItem v-if="entity.salesPersonUser" class="row col">
<QItemLabel class="col" caption>
{{ t('customer.summary.salesPerson') }}
</QItemLabel>
<QItemLabel class="col q-ma-none">
{{ entity.salesPersonUser.name }}
</QItemLabel>
</QItem>
<QItem class="row col">
<QItemLabel class="col" caption>
{{ t('customer.summary.phone') }}
</QItemLabel>
<QItemLabel class="col q-ma-none">
{{ entity.phone }}
</QItemLabel>
</QItem>
<QItem class="row col">
<QItemLabel class="col" caption>
{{ t('customer.summary.mobile') }}
</QItemLabel>
<QItemLabel class="col q-ma-none">{{
entity.mobile
}}</QItemLabel>
</QItem>
<QItem v-if="entity.contactChannel" class="row col">
<QItemLabel class="col" caption>
{{ t('customer.summary.contactChannel') }}
</QItemLabel>
<QItemLabel class="col q-ma-none">
{{ entity.contactChannel.name }}
</QItemLabel>
</QItem>
<QItem>
<QItemSection>
<QItemLabel caption>
{{ t('customer.summary.email') }}
</QItemLabel>
<QItemLabel>{{ entity.email }}</QItemLabel>
</QItemSection>
</QItem>
</QList>
</div>
<div class="col">
<QList>
<QItemLabel header class="text-h6">
{{ t('customer.summary.fiscalAddress') }} {{ t('customer.summary.fiscalAddress') }}
</QItemLabel> <QIcon name="open_in_new" color="primary" />
<QItem> </a>
<QItemSection> <VnLv
<QItemLabel caption> :label="t('customer.summary.socialName')"
{{ t('customer.summary.socialName') }} :value="entity.socialName"
</QItemLabel> />
<QItemLabel>{{ entity.socialName }}</QItemLabel> <VnLv :label="t('customer.summary.fiscalId')" :value="entity.fi" />
</QItemSection> <VnLv :label="t('customer.summary.city')" :value="entity.city" />
</QItem> <VnLv :label="t('customer.summary.postcode')" :value="entity.postcode" />
<QItem>
<QItemSection> <VnLv
<QItemLabel caption> v-if="entity.province"
{{ t('customer.summary.fiscalId') }} :label="t('customer.summary.province')"
</QItemLabel> :value="entity.province.name"
<QItemLabel>{{ entity.fi }}</QItemLabel> />
</QItemSection> <VnLv
</QItem> v-if="entity.country"
<QItem> :label="t('customer.summary.country')"
<QItemSection> :value="entity.country.country"
<QItemLabel caption> />
{{ t('customer.summary.postcode') }} <VnLv :label="t('customer.summary.street')" :value="entity.street" />
</QItemLabel> </QCard>
<QItemLabel>{{ entity.postcode }}</QItemLabel> <QCard class="vn-one">
</QItemSection> <a class="header link" :href="clientUrl + `fiscal-data`" link>
</QItem> {{ t('customer.summary.fiscalAddress') }}
<QItem v-if="entity.province"> <QIcon name="open_in_new" color="primary" />
<QItemSection> </a>
<QItemLabel caption> <VnLv
{{ t('customer.summary.province') }}
</QItemLabel>
<QItemLabel>{{ entity.province.name }}</QItemLabel>
</QItemSection>
</QItem>
<QItem v-if="entity.country">
<QItemSection>
<QItemLabel caption>
{{ t('customer.summary.country') }}
</QItemLabel>
<QItemLabel>{{ entity.country.country }}</QItemLabel>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QItemLabel caption>
{{ t('customer.summary.street') }}
</QItemLabel>
<QItemLabel>{{ entity.street }}</QItemLabel>
</QItemSection>
</QItem>
</QList>
</div>
<div class="col">
<QList>
<QItemLabel header class="text-h6">
{{ t('customer.summary.fiscalData') }}
</QItemLabel>
<QItem dense>
<QCheckbox
v-model="entity.isEqualizated"
:label="t('customer.summary.isEqualizated')" :label="t('customer.summary.isEqualizated')"
disable :value="entity.isEqualizated"
/> />
</QItem> <VnLv :label="t('customer.summary.isActive')" :value="entity.isActive" />
<QItem dense> <VnLv
<QCheckbox
v-model="entity.isActive"
:label="t('customer.summary.isActive')"
disable
/>
</QItem>
<QItem dense>
<QCheckbox
v-model="entity.hasToInvoiceByAddress"
:label="t('customer.summary.invoiceByAddress')" :label="t('customer.summary.invoiceByAddress')"
disable :value="entity.hasToInvoiceByAddress"
/> />
</QItem> <VnLv
<QItem dense>
<QCheckbox
v-model="entity.isTaxDataChecked"
:label="t('customer.summary.verifiedData')" :label="t('customer.summary.verifiedData')"
disable :value="entity.isTaxDataChecked"
/> />
</QItem> <VnLv
<QItem dense>
<QCheckbox
v-model="entity.hasToInvoice"
:label="t('customer.summary.hasToInvoice')" :label="t('customer.summary.hasToInvoice')"
disable :value="entity.hasToInvoice"
/> />
</QItem> <VnLv
<QItem dense>
<QCheckbox
v-model="entity.isToBeMailed"
:label="t('customer.summary.notifyByEmail')" :label="t('customer.summary.notifyByEmail')"
disable :value="entity.isToBeMailed"
/> />
</QItem> <VnLv :label="t('customer.summary.vies')" :value="entity.isVies" />
<QItem dense> </QCard>
<QCheckbox <QCard class="vn-one">
v-model="entity.isVies" <a class="header link" :href="clientUrl + `billing-data`" link>
:label="t('customer.summary.vies')"
disable
/>
</QItem>
</QList>
</div>
<div class="col">
<QList>
<QItemLabel header class="text-h6">
{{ t('customer.summary.billingData') }} {{ t('customer.summary.billingData') }}
</QItemLabel> <QIcon name="open_in_new" color="primary" />
<QItem> </a>
<QItemSection> <VnLv
<QItemLabel caption> :label="t('customer.summary.payMethod')"
{{ t('customer.summary.payMethod') }} :value="entity.payMethod.name"
</QItemLabel>
<QItemLabel>{{ entity.payMethod.name }}</QItemLabel>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QItemLabel caption>
{{ t('customer.summary.bankAccount') }}
</QItemLabel>
<QItemLabel>{{ entity.iban }}</QItemLabel>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QItemLabel caption>
{{ t('customer.summary.dueDay') }}
</QItemLabel>
<QItemLabel>{{ entity.dueDay }}</QItemLabel>
</QItemSection>
</QItem>
<QItem dense>
<QCheckbox
v-model="entity.hasLcr"
:label="t('customer.summary.hasLcr')"
disable
/> />
</QItem> <VnLv :label="t('customer.summary.bankAccount')" :value="entity.iban" />
<QItem dense> <VnLv :label="t('customer.summary.dueDay')" :value="entity.dueDay" />
<QCheckbox <VnLv :label="t('customer.summary.hasLcr')" :value="entity.hasLcr" />
v-model="entity.hasCoreVnl" <VnLv
:label="t('customer.summary.hasCoreVnl')" :label="t('customer.summary.hasCoreVnl')"
disable :value="entity.hasCoreVnl"
/> />
</QItem> <VnLv
<QItem dense>
<QCheckbox
v-model="entity.hasSepaVnl"
:label="t('customer.summary.hasB2BVnl')" :label="t('customer.summary.hasB2BVnl')"
disable :value="entity.hasSepaVnl"
/> />
</QItem> </QCard>
</QList> <QCard class="vn-one" v-if="entity.defaultAddress">
</div> <a class="header link" :href="clientUrl + `address/index`" link>
<div class="col" v-if="entity.defaultAddress">
<QList>
<QItemLabel header class="text-h6">
{{ t('customer.summary.consignee') }} {{ t('customer.summary.consignee') }}
</QItemLabel> <QIcon name="open_in_new" color="primary" />
<QItem> </a>
<QItemSection> <VnLv
<QItemLabel caption> :label="t('customer.summary.addressName')"
{{ t('customer.summary.addressName') }} :value="entity.defaultAddress.nickname"
</QItemLabel>
<QItemLabel>
{{ entity.defaultAddress.nickname }}
</QItemLabel>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QItemLabel caption>
{{ t('customer.summary.addressCity') }}
</QItemLabel>
<QItemLabel>{{ entity.defaultAddress.city }}</QItemLabel>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QItemLabel caption>
{{ t('customer.summary.addressStreet') }}
</QItemLabel>
<QItemLabel>
{{ entity.defaultAddress.street }}
</QItemLabel>
</QItemSection>
</QItem>
</QList>
</div>
<div class="col" v-if="entity.account">
<QList>
<QItemLabel header class="text-h6">
{{ t('customer.summary.webAccess') }}
</QItemLabel>
<QItem>
<QItemSection>
<QItemLabel caption>
{{ t('customer.summary.username') }}
</QItemLabel>
<QItemLabel>{{ entity.account.name }}</QItemLabel>
</QItemSection>
</QItem>
<QItem dense>
<QCheckbox
v-model="entity.account.active"
:label="t('customer.summary.webAccess')"
disable
/> />
</QItem> <VnLv
</QList> :label="t('customer.summary.addressCity')"
</div> :value="entity.defaultAddress.city"
<div class="col"> />
<QList> <VnLv
<QItemLabel header class="text-h6"> :label="t('customer.summary.addressStreet')"
:value="entity.defaultAddress.street"
/>
</QCard>
<QCard class="vn-one" v-if="entity.account">
<a class="header link" :href="clientUrl + `web-access`">
{{ t('customer.summary.webAccess') }}
<QIcon name="open_in_new" color="primary" />
</a>
<VnLv
:label="t('customer.summary.username')"
:value="entity.account.name"
/>
<VnLv
:label="t('customer.summary.webAccess')"
:value="entity.account.active"
/>
</QCard>
<QCard class="vn-one" v-if="entity.account">
<div class="header">
{{ t('customer.summary.businessData') }} {{ t('customer.summary.businessData') }}
</QItemLabel>
<QItem>
<QItemSection>
<QItemLabel caption>
{{ t('customer.summary.totalGreuge') }}
</QItemLabel>
<QItemLabel>
{{ toCurrency(entity.totalGreuge) }}
</QItemLabel>
</QItemSection>
</QItem>
<QItem v-if="entity.mana">
<QItemSection>
<QItemLabel caption>
{{ t('customer.summary.mana') }}
</QItemLabel>
<QItemLabel>
{{ toCurrency(entity.mana.mana) }}
</QItemLabel>
</QItemSection>
</QItem>
<QItem v-if="entity.claimsRatio">
<QItemSection>
<QItemLabel caption>
{{ t('customer.summary.priceIncreasingRate') }}
</QItemLabel>
<QItemLabel>
{{ toPercentage(priceIncreasingRate) }}
</QItemLabel>
</QItemSection>
</QItem>
<QItem v-if="entity.averageInvoiced">
<QItemSection>
<QItemLabel caption>
{{ t('customer.summary.averageInvoiced') }}
</QItemLabel>
<QItemLabel>
{{ toCurrency(entity.averageInvoiced.invoiced) }}
</QItemLabel>
</QItemSection>
</QItem>
<QItem v-if="entity.claimsRatio">
<QItemSection>
<QItemLabel caption>
{{ t('customer.summary.claimRate') }}
</QItemLabel>
<QItemLabel>{{ toPercentage(claimRate) }}</QItemLabel>
</QItemSection>
</QItem>
</QList>
</div> </div>
<div class="col"> <VnLv
<QList> :label="t('customer.summary.totalGreuge')"
<QItemLabel header class="text-h6"> :value="toCurrency(entity.totalGreuge)"
/>
<VnLv
:label="t('customer.summary.mana')"
:value="toCurrency(entity?.mana?.mana)"
/>
<VnLv
v-if="entity.claimsRatio"
:label="t('customer.summary.priceIncreasingRate')"
:value="toPercentage(priceIncreasingRate)"
/>
<VnLv
:label="t('customer.summary.averageInvoiced')"
:value="toCurrency(entity?.averageInvoiced?.invoiced)"
/>
<VnLv
v-if="entity.claimsRatio"
:label="t('customer.summary.claimRate')"
:value="toPercentage(claimRate)"
/>
</QCard>
<QCard class="vn-one" v-if="entity.account">
<a
class="header link"
:href="`https://grafana.verdnatura.es/d/40buzE4Vk/comportamiento-pagos-clientes?orgId=1&var-clientFk=${entityId}`"
link
>
{{ t('customer.summary.financialData') }} {{ t('customer.summary.financialData') }}
</QItemLabel> <QIcon name="vn:grafana" color="primary" />
<QItem v-if="entity.debt"> </a>
<QItemSection> <VnLv
<QItemLabel caption> :label="t('customer.summary.risk')"
{{ t('customer.summary.risk') }} :value="toCurrency(entity?.debt?.debt)"
</QItemLabel> :class="debtWarning"
<QItemLabel :class="debtWarning"> :info="t('customer.summary.riskInfo')"
{{ toCurrency(entity.debt.debt) }} />
</QItemLabel>
</QItemSection> <VnLv
<QItemSection side> :label="t('customer.summary.credit')"
<QIcon name="vn:info"> :value="toCurrency(entity.credit)"
<QTooltip> :class="creditWarning"
{{ t('customer.summary.riskInfo') }} :info="t('customer.summary.creditInfo')"
</QTooltip> />
</QIcon>
</QItemSection> <VnLv
</QItem> v-if="entity.creditInsurance"
<QItem> :label="t('customer.summary.securedCredit')"
<QItemSection> :value="toCurrency(entity.creditInsurance)"
<QItemLabel caption> :info="t('customer.summary.securedCreditInfo')"
{{ t('customer.summary.credit') }} />
</QItemLabel>
<QItemLabel :class="creditWarning"> <VnLv
{{ toCurrency(entity.credit) }} :label="t('customer.summary.balance')"
</QItemLabel> :value="toCurrency(entity.sumRisk) || toCurrency(0)"
</QItemSection> :info="t('customer.summary.balanceInfo')"
<QItemSection side> />
<QIcon name="vn:info">
<QTooltip> <VnLv
{{ t('customer.summary.creditInfo') }} v-if="entity.defaulters"
</QTooltip> :label="t('customer.summary.balanceDue')"
</QIcon> :value="toCurrency(balanceDue)"
</QItemSection> :class="balanceDueWarning"
</QItem> :info="t('customer.summary.balanceDueInfo')"
<QItem v-if="entity.creditInsurance"> />
<QItemSection> <VnLv
<QItemLabel caption> v-if="entity.recovery"
{{ t('customer.summary.securedCredit') }} :label="t('customer.summary.recoverySince')"
</QItemLabel> :value="toDate(entity.recovery.started)"
<QItemLabel> />
{{ toCurrency(entity.creditInsurance) }} </QCard>
</QItemLabel>
</QItemSection>
<QItemSection side>
<QIcon name="vn:info">
<QTooltip>
{{ t('customer.summary.securedCreditInfo') }}
</QTooltip>
</QIcon>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QItemLabel caption>
{{ t('customer.summary.balance') }}
</QItemLabel>
<QItemLabel>
{{ toCurrency(entity.sumRisk) || toCurrency(0) }}
</QItemLabel>
</QItemSection>
<QItemSection side>
<QIcon name="vn:info">
<QTooltip>
{{ t('customer.summary.balanceInfo') }}
</QTooltip>
</QIcon>
</QItemSection>
</QItem>
<QItem v-if="entity.defaulters">
<QItemSection>
<QItemLabel caption>
{{ t('customer.summary.balanceDue') }}
</QItemLabel>
<QItemLabel :class="balanceDueWarning">
{{ toCurrency(balanceDue) }}
</QItemLabel>
</QItemSection>
<QItemSection side>
<QIcon name="vn:info">
<QTooltip>
{{ t('customer.summary.balanceDueInfo') }}
</QTooltip>
</QIcon>
</QItemSection>
</QItem>
<QItem v-if="entity.recovery">
<QItemSection>
<QItemLabel caption>
{{ t('customer.summary.recoverySince') }}
</QItemLabel>
<QItemLabel>
{{ toDate(entity.recovery.started) }}
</QItemLabel>
</QItemSection>
</QItem>
</QList>
</div>
</QCardSection>
</template> </template>
</CardSummary> </CardSummary>
</template> </template>
<style lang="scss">
.q-item__label + .q-item__label {
margin: 0;
}
</style>

202
src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
View File

@ -4,8 +4,15 @@ import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import axios from 'axios'; import axios from 'axios';
import { toCurrency, toDate } from 'src/filters'; import { toCurrency, toDate } from 'src/filters';
import SkeletonSummary from 'components/ui/SkeletonSummary.vue'; import CardSummary from 'components/ui/CardSummary.vue';
onMounted(() => fetch()); import VnLv from 'src/components/ui/VnLv.vue';
import { getUrl } from 'src/composables/getUrl';
onMounted(async () => {
fetch();
salixUrl.value = await getUrl('');
invoiceOutUrl.value = salixUrl.value + `invoiceOut/${entityId.value}/`;
});
const route = useRoute(); const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
@ -19,20 +26,13 @@ const $props = defineProps({
const entityId = computed(() => $props.id || route.params.id); const entityId = computed(() => $props.id || route.params.id);
const invoiceOut = ref(null); const salixUrl = ref();
const tax = ref(null); const invoiceOutUrl = ref();
const tikets = ref(null); const tickets = ref(null);
function fetch() { function fetch() {
const id = entityId.value; axios.get(`InvoiceOuts/${entityId.value}/getTickets`).then(({ data }) => {
tickets.value = data;
axios.get(`InvoiceOuts/${id}/summary`).then(({ data }) => {
invoiceOut.value = data.invoiceOut;
tax.value = data.invoiceOut.taxesBreakdown;
});
axios.get(`InvoiceOuts/${id}/getTickets`).then(({ data }) => {
tikets.value = data;
}); });
} }
@ -95,124 +95,64 @@ const ticketsColumns = ref([
</script> </script>
<template> <template>
<div class="summary container"> <CardSummary ref="summary" :url="`InvoiceOuts/${entityId}/summary`">
<QCard> <template #header="{ entity: { invoiceOut } }">
<SkeletonSummary v-if="!invoiceOut" /> <div>{{ invoiceOut.ref }} - {{ invoiceOut.client?.socialName }}</div>
<template v-if="invoiceOut"> </template>
<div class="header bg-primary q-pa-sm q-mb-md"> <template #body="{ entity: { invoiceOut } }">
{{ invoiceOut.ref }} - {{ invoiceOut.client.socialName }} <QCard class="vn-one">
<div class="header">
{{ t('invoiceOut.pageTitles.basicData') }}
</div> </div>
<QList> <VnLv
<QItem> :label="t('invoiceOut.summary.issued')"
<QItemSection> :value="toDate(invoiceOut.issued)"
<QItemLabel caption>{{ />
t('invoiceOut.summary.issued') <VnLv
}}</QItemLabel> :label="t('invoiceOut.summary.dued')"
<QItemLabel>{{ toDate(invoiceOut.issued) }}</QItemLabel> :value="toDate(invoiceOut.dued)"
</QItemSection> />
<QItemSection> <VnLv
<QItemLabel caption>{{ :label="t('invoiceOut.summary.created')"
t('invoiceOut.summary.dued') :value="toDate(invoiceOut.created)"
}}</QItemLabel> />
<QItemLabel>{{ toDate(invoiceOut.dued) }}</QItemLabel> <VnLv
</QItemSection> :label="t('invoiceOut.summary.booked')"
</QItem> :value="toDate(invoiceOut.booked)"
<QItem> />
<QItemSection> <VnLv
<QItemLabel caption>{{ :label="t('invoiceOut.summary.company')"
t('invoiceOut.summary.created') :value="invoiceOut.company.code"
}}</QItemLabel> />
<QItemLabel>{{ toDate(invoiceOut.created) }}</QItemLabel>
</QItemSection>
<QItemSection>
<QItemLabel caption>{{
t('invoiceOut.summary.booked')
}}</QItemLabel>
<QItemLabel>{{ toDate(invoiceOut.booked) }}</QItemLabel>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QItemLabel caption>{{
t('invoiceOut.summary.company')
}}</QItemLabel>
<QItemLabel>{{ invoiceOut.company.code }}</QItemLabel>
</QItemSection>
</QItem>
</QList>
<QCardSection class="q-pa-md">
<h6>{{ t('invoiceOut.summary.taxBreakdown') }}</h6>
<QTable :columns="taxColumns" :rows="tax" flat>
<template #header="props">
<QTr :props="props">
<QTh
v-for="col in props.cols"
:key="col.name"
:props="props"
>
{{ t(col.label) }}
</QTh>
</QTr>
</template>
</QTable>
</QCardSection>
<QCardSection class="q-pa-md">
<h6>{{ t('invoiceOut.summary.tickets') }}</h6>
<QTable :columns="ticketsColumns" :rows="tikets" flat>
<template #header="props">
<QTr :props="props">
<QTh
v-for="col in props.cols"
:key="col.name"
:props="props"
>
{{ t(col.label) }}
</QTh>
</QTr>
</template>
</QTable>
</QCardSection>
</template>
</QCard> </QCard>
<QCard class="vn-three">
<div class="header">
{{ t('invoiceOut.summary.taxBreakdown') }}
</div> </div>
<QTable :columns="taxColumns" :rows="invoiceOut.taxesBreakdown" flat>
<template #header="props">
<QTr :props="props">
<QTh v-for="col in props.cols" :key="col.name" :props="props">
{{ t(col.label) }}
</QTh>
</QTr>
</template>
</QTable>
</QCard>
<QCard class="vn-three">
<div class="header">
{{ t('invoiceOut.summary.tickets') }}
</div>
<QTable :columns="ticketsColumns" :rows="tickets" flat>
<template #header="props">
<QTr :props="props">
<QTh v-for="col in props.cols" :key="col.name" :props="props">
{{ t(col.label) }}
</QTh>
</QTr>
</template>
</QTable>
</QCard>
</template>
</CardSummary>
</template> </template>
<style lang="scss" scoped>
.container {
display: flex;
justify-content: center;
}
.q-card {
width: 100%;
min-width: 950px;
max-width: 950px;
}
.summary {
.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>

20
src/pages/Ticket/Card/TicketDescriptor.vue
View File

@ -102,16 +102,18 @@ const setData = (entity) =>
</span> </span>
</template> </template>
</VnLv> </VnLv>
<VnLv <VnLv :label="t('ticket.summary.salesPerson')">
v-if="entity.client && entity.client.salesPersonUser" <template #value>
:label="t('ticket.card.salesPerson')" <span class="link">
:value="entity.client.salesPersonUser.name" {{ ticket.client?.salesPersonUser?.name }}
/> <WorkerDescriptorProxy
<VnLv :id="ticket.client.salesPersonFk"
v-if="entity.warehouse" v-if="ticket.client.salesPersonFk"
:label="t('ticket.card.warehouse')"
:value="entity.warehouse.name"
/> />
</span>
</template>
</VnLv>
<VnLv :label="t('ticket.card.warehouse')" :value="entity.warehouse?.name" />
<VnLv <VnLv
v-if="entity.agencyMode" v-if="entity.agencyMode"
:label="t('ticket.card.agency')" :label="t('ticket.card.agency')"

650
src/pages/Ticket/Card/TicketSummary.vue
View File

@ -4,14 +4,15 @@ import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import axios from 'axios'; import axios from 'axios';
import { dashIfEmpty, toDate, toCurrency } from 'src/filters'; import { dashIfEmpty, toDate, toCurrency } from 'src/filters';
import SkeletonSummary from 'components/ui/SkeletonSummary.vue'; import CardSummary from 'components/ui/CardSummary.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import FetchedTags from 'components/ui/FetchedTags.vue'; import FetchedTags from 'components/ui/FetchedTags.vue';
import InvoiceOutDescriptorProxy from 'pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue'; import InvoiceOutDescriptorProxy from 'pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue'; import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import { getUrl } from 'src/composables/getUrl';
onMounted(() => fetch()); onUpdated(() => summaryRef.value.fetch());
onUpdated(() => fetch());
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
@ -28,25 +29,22 @@ const $props = defineProps({
const entityId = computed(() => $props.id || route.params.id); const entityId = computed(() => $props.id || route.params.id);
const summaryRef = ref();
const ticket = ref(); const ticket = ref();
const salesLines = ref(null); const salesLines = ref(null);
const editableStates = ref([]); const editableStates = ref([]);
const ticketUrl = ref();
async function fetch() { onMounted(async () => {
const { data } = await axios.get(`Tickets/${entityId.value}/summary`); ticketUrl.value = (await getUrl('ticket/')) + entityId.value + '/';
});
async function setData(data) {
if (data) { if (data) {
ticket.value = data; ticket.value = data;
salesLines.value = data.sales; salesLines.value = data.sales;
} }
} }
function stateColor(state) {
if (state.code === 'OK') return 'text-green';
if (state.code === 'FREE') return 'text-blue-3';
if (state.alertLevel === 1) return 'text-primary';
if (state.alertLevel === 0) return 'text-red';
}
function formattedAddress() { function formattedAddress() {
if (!ticket.value) return ''; if (!ticket.value) return '';
@ -76,7 +74,7 @@ async function changeState(value) {
}; };
await axios.post(`TicketTrackings/changeState`, formData); await axios.post(`TicketTrackings/changeState`, formData);
await router.go(route.fullPath); router.go(route.fullPath);
} }
</script> </script>
@ -86,17 +84,20 @@ async function changeState(value) {
@on-fetch="(data) => (editableStates = data)" @on-fetch="(data) => (editableStates = data)"
auto-load auto-load
/> />
<div class="summary container"> <CardSummary
<QCard> ref="summaryRef"
<SkeletonSummary v-if="!ticket" /> :url="`Tickets/${entityId}/summary`"
<template v-if="ticket"> @on-fetch="(data) => setData(data)"
<div class="header bg-primary q-pa-sm q-mb-md"> >
<span> <template #header="{ entity }">
Ticket #{{ ticket.id }} - {{ ticket.client.name }} ({{ <div>
ticket.client.id Ticket #{{ entity.id }} - {{ entity.client.name }} ({{
entity.client.id
}}) - }}) -
{{ ticket.nickname }} {{ entity.nickname }}
</span> </div>
</template>
<template #header-right>
<QBtnDropdown <QBtnDropdown
side side
top top
@ -126,249 +127,148 @@ async function changeState(value) {
</QVirtualScroll> </QVirtualScroll>
</QList> </QList>
</QBtnDropdown> </QBtnDropdown>
</template>
<template #body>
<QCard class="vn-max">
<div class="taxes">
<VnLv
:label="t('ticket.summary.subtotal')"
:value="toCurrency(ticket.totalWithoutVat)"
/>
<VnLv
:label="t('ticket.summary.vat')"
:value="toCurrency(ticket.totalWithVat - ticket.totalWithoutVat)"
/>
<VnLv
:label="t('ticket.summary.total')"
:value="toCurrency(ticket.totalWithVat)"
/>
</div> </div>
<div class="row q-pa-md q-col-gutter-md q-mb-md"> </QCard>
<div class="col"> <QCard class="vn-one">
<QList> <a class="header link" :href="ticketUrl + 'basic-data/step-one'">
<QItem> {{ t('globals.summary.basicData') }}
<QItemSection> <QIcon name="open_in_new" color="primary" />
<QItemLabel caption> </a>
{{ t('ticket.summary.state') }} <VnLv :label="t('ticket.summary.state')">
</QItemLabel> <template #value>
<QItemLabel> <QChip :color="ticket.ticketState.state.classColor ?? 'dark'">
<QBadge
:color="
ticket.ticketState.state.classColor
? ticket.ticketState.state.classColor
: 'dark'
"
>
{{ ticket.ticketState.state.name }} {{ ticket.ticketState.state.name }}
</QBadge> </QChip>
</QItemLabel> </template>
</QItemSection> </VnLv>
</QItem> <VnLv :label="t('ticket.summary.salesPerson')">
<QItem> <template #value>
<QItemSection>
<QItemLabel caption>{{
t('ticket.summary.salesPerson')
}}</QItemLabel>
<QItemLabel>
<span class="link"> <span class="link">
{{ ticket.client.salesPersonUser.name }} {{ ticket.client?.salesPersonUser?.name }}
<WorkerDescriptorProxy <WorkerDescriptorProxy
:id="ticket.client.salesPersonFk" :id="ticket.client.salesPersonFk"
v-if="ticket.client.salesPersonFk"
/> />
</span> </span>
</QItemLabel> </template>
</QItemSection> </VnLv>
</QItem> <VnLv
<QItem> :label="t('ticket.summary.agency')"
<QItemSection> :value="ticket.agencyMode.name"
<QItemLabel caption>{{ />
t('ticket.summary.agency') <VnLv :label="t('ticket.summary.zone')" :value="ticket.zone.name" />
}}</QItemLabel> <VnLv
<QItemLabel>{{ ticket.agencyMode.name }}</QItemLabel> :label="t('ticket.summary.warehouse')"
</QItemSection> :value="ticket.warehouse?.name"
</QItem> />
<QItem> <VnLv :label="t('ticket.summary.route')" :value="ticket.routeFk" />
<QItemSection> <VnLv :label="t('ticket.summary.invoice')">
<QItemLabel caption>{{ <template #value>
t('ticket.summary.zone')
}}</QItemLabel>
<QItemLabel class="link">{{
ticket.routeFk
}}</QItemLabel>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QItemLabel caption>{{
t('ticket.summary.warehouse')
}}</QItemLabel>
<QItemLabel>{{ ticket.warehouse.name }}</QItemLabel>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QItemLabel caption>{{
t('ticket.summary.invoice')
}}</QItemLabel>
<QItemLabel v-if="ticket.refFk">
<span class="link"> <span class="link">
{{ ticket.refFk }} {{ dashIfEmpty(ticket.refFk) }}
<InvoiceOutDescriptorProxy :id="ticket.id" /> <InvoiceOutDescriptorProxy
:id="ticket.id"
v-if="ticket.refFk"
/>
</span> </span>
</QItemLabel> </template>
</QItemSection> </VnLv>
</QItem> <VnLv
</QList> :label="t('ticket.summary.weight')"
</div> :value="dashIfEmpty(ticket.weight)"
<div class="col"> />
<QList> </QCard>
<QItem> <QCard class="vn-one">
<QItemSection> <a class="header link" :href="ticketUrl + 'basic-data/step-one'">
<QItemLabel caption>{{ {{ t('globals.summary.basicData') }}
t('ticket.summary.shipped') <QIcon name="open_in_new" color="primary" />
}}</QItemLabel> </a>
<QItemLabel>{{ toDate(ticket.shipped) }}</QItemLabel> <VnLv
</QItemSection> :label="t('ticket.summary.shipped')"
</QItem> :value="toDate(ticket.shipped)"
<QItem> />
<QItemSection> <VnLv
<QItemLabel caption>{{ :label="t('ticket.summary.landed')"
t('ticket.summary.landed') :value="toDate(ticket.landed)"
}}</QItemLabel> />
<QItemLabel>{{ toDate(ticket.landed) }}</QItemLabel> <VnLv :label="t('ticket.summary.packages')" :value="ticket.packages" />
</QItemSection> <VnLv
</QItem> :label="t('ticket.summary.consigneePhone')"
<QItem> :value="ticket.address.phone"
<QItemSection> />
<QItemLabel caption>{{ <VnLv
t('ticket.summary.packages') :label="t('ticket.summary.consigneeMobile')"
}}</QItemLabel> :value="ticket.address.mobile"
<QItemLabel>{{ ticket.packages }}</QItemLabel> />
</QItemSection> <VnLv
</QItem> :label="t('ticket.summary.clientPhone')"
<QItem> :value="ticket.client.phone"
<QItemSection> />
<QItemLabel caption>{{ <VnLv
t('ticket.summary.consigneePhone') :label="t('ticket.summary.clientMobile')"
}}</QItemLabel> :value="ticket.client.mobile"
<QItemLabel>{{ ticket.address.phone }}</QItemLabel> />
</QItemSection> <VnLv
</QItem> :label="t('ticket.summary.consignee')"
<QItem> :value="formattedAddress()"
<QItemSection> />
<QItemLabel caption>{{ </QCard>
t('ticket.summary.consigneeMobile') <QCard class="vn-one">
}}</QItemLabel> <a class="header link" :href="ticketUrl + 'observation'">
<QItemLabel>{{ ticket.address.mobile }}</QItemLabel> {{ t('ticket.pageTitles.notes') }}
</QItemSection> <QIcon name="open_in_new" color="primary" />
</QItem> </a>
<QItem> <VnLv
<QItemSection> v-for="note in ticket.notes"
<QItemLabel caption>{{ :key="note.id"
t('ticket.summary.clientPhone') :label="note.observationType.description"
}}</QItemLabel> :value="note.description"
<QItemLabel>{{ ticket.client.phone }}</QItemLabel>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QItemLabel caption>{{
t('ticket.summary.clientMobile')
}}</QItemLabel>
<QItemLabel>{{ ticket.client.mobile }}</QItemLabel>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QItemLabel caption>{{
t('ticket.summary.consignee')
}}</QItemLabel>
<QItemLabel>{{ formattedAddress() }}</QItemLabel>
</QItemSection>
</QItem>
</QList>
</div>
<div class="col">
<QList>
<QItem v-for="note in ticket.notes" :key="note.id">
<QItemSection>
<QItemLabel caption>
{{ note.observationType.description }}
</QItemLabel>
<QItemLabel>
{{ note.description }}
</QItemLabel>
</QItemSection>
</QItem>
</QList>
</div>
<div class="col">
<QList class="taxes">
<QItem>
<QItemSection>
<QItemLabel caption>{{
t('ticket.summary.subtotal')
}}</QItemLabel>
<QItemLabel>{{
toCurrency(ticket.totalWithoutVat)
}}</QItemLabel>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QItemLabel caption>{{
t('ticket.summary.vat')
}}</QItemLabel>
<QItemLabel>{{
toCurrency(
ticket.totalWithVat - ticket.totalWithoutVat
)
}}</QItemLabel>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QItemLabel caption>{{
t('ticket.summary.total')
}}</QItemLabel>
<QItemLabel>{{
toCurrency(ticket.totalWithVat)
}}</QItemLabel>
</QItemSection>
</QItem>
</QList>
</div>
</div>
<div class="row q-pa-md" v-if="salesLines.length > 0">
<div class="col">
<QList>
<QItemLabel header class="text-h6">
{{ t('ticket.summary.saleLines') }}
<RouterLink
:to="{
name: 'TicketBasicData',
params: { id: entityId },
}"
target="_blank"
> >
<QIcon name="open_in_new" /> <template #value>
</RouterLink> <QInput
</QItemLabel> v-model="note.description"
<QTable :rows="ticket.sales" flat> filled
type="textarea"
class="notes"
readonly
/>
</template>
</VnLv>
</QCard>
<QCard class="vn-max">
<a class="header link" :href="ticketUrl + 'sale'">
{{ t('ticket.summary.saleLines') }}
<QIcon name="open_in_new" color="primary" />
</a>
<QTable :rows="ticket.sales">
<template #header="props"> <template #header="props">
<QTr :props="props"> <QTr :props="props">
<QTh auto-width></QTh> <QTh auto-width></QTh>
<QTh auto-width>{{ <QTh auto-width>{{ t('ticket.summary.item') }}</QTh>
t('ticket.summary.item') <QTh auto-width>{{ t('ticket.summary.visible') }}</QTh>
}}</QTh> <QTh auto-width>{{ t('ticket.summary.available') }}</QTh>
<QTh auto-width>{{ <QTh auto-width>{{ t('ticket.summary.quantity') }}</QTh>
t('ticket.summary.visible') <QTh auto-width>{{ t('ticket.summary.description') }}</QTh>
}}</QTh> <QTh auto-width>{{ t('ticket.summary.price') }}</QTh>
<QTh auto-width>{{ <QTh auto-width>{{ t('ticket.summary.discount') }}</QTh>
t('ticket.summary.available') <QTh auto-width>{{ t('ticket.summary.amount') }}</QTh>
}}</QTh> <QTh auto-width>{{ t('ticket.summary.packing') }}</QTh>
<QTh auto-width>{{
t('ticket.summary.quantity')
}}</QTh>
<QTh auto-width>{{
t('ticket.summary.description')
}}</QTh>
<QTh auto-width>{{
t('ticket.summary.price')
}}</QTh>
<QTh auto-width>{{
t('ticket.summary.discount')
}}</QTh>
<QTh auto-width>{{
t('ticket.summary.amount')
}}</QTh>
<QTh auto-width>{{
t('ticket.summary.packing')
}}</QTh>
</QTr> </QTr>
</template> </template>
<template #body="props"> <template #body="props">
@ -390,9 +290,7 @@ async function changeState(value) {
> >
<QTooltip <QTooltip
>{{ t('ticket.summary.claim') }}: >{{ t('ticket.summary.claim') }}:
{{ {{ props.row.claim.claimFk }}</QTooltip
props.row.claim.claimFk
}}</QTooltip
> >
</QBtn> </QBtn>
<QBtn <QBtn
@ -405,16 +303,13 @@ async function changeState(value) {
:to="{ :to="{
name: 'ClaimCard', name: 'ClaimCard',
params: { params: {
id: props.row.claimBeginning id: props.row.claimBeginning.claimFk,
.claimFk,
}, },
}" }"
> >
<QTooltip <QTooltip
>{{ t('ticket.summary.claim') }}: >{{ t('ticket.summary.claim') }}:
{{ {{ props.row.claimBeginning.claimFk }}</QTooltip
props.row.claimBeginning.claimFk
}}</QTooltip
> >
</QBtn> </QBtn>
<QIcon <QIcon
@ -455,11 +350,7 @@ async function changeState(value) {
color="primary" color="primary"
> >
<QTooltip> <QTooltip>
{{ {{ t('ticket.summary.hasComponentLack') }}
t(
'ticket.summary.hasComponentLack'
)
}}
</QTooltip> </QTooltip>
</QIcon> </QIcon>
</QTd> </QTd>
@ -470,11 +361,9 @@ async function changeState(value) {
<QTd> <QTd>
<div class="fetched-tags"> <div class="fetched-tags">
<span>{{ props.row.item.name }}</span> <span>{{ props.row.item.name }}</span>
<span <span v-if="props.row.item.subName" class="subName">{{
v-if="props.row.item.subName" props.row.item.subName
class="subName" }}</span>
>{{ props.row.item.subName }}</span
>
</div> </div>
<fetched-tags <fetched-tags
:item="props.row.item" :item="props.row.item"
@ -492,37 +381,25 @@ async function changeState(value) {
) )
}} }}
</QTd> </QTd>
<QTd>{{ <QTd>{{ dashIfEmpty(props.row.item.itemPackingTypeFk) }}</QTd>
dashIfEmpty(props.row.item.itemPackingTypeFk)
}}</QTd>
</QTr> </QTr>
</template> </template>
</QTable> </QTable>
</QList> </QCard>
</div> <QCard
</div> class="vn-max"
<div
class="row q-pa-md"
v-if="ticket.packagings.length > 0 || ticket.services.length > 0" v-if="ticket.packagings.length > 0 || ticket.services.length > 0"
> >
<div class="col" v-if="ticket.packagings.length > 0"> <a class="header link" :href="ticketUrl + 'package'">
<QList>
<QItemLabel header class="text-h6">
{{ t('ticket.summary.packages') }} {{ t('ticket.summary.packages') }}
<QIcon name="open_in_new" /> <QIcon name="open_in_new" color="primary" />
</QItemLabel> </a>
<QTable :rows="ticket.packagings" flat> <QTable :rows="ticket.packagings" flat>
<template #header="props"> <template #header="props">
<QTr :props="props"> <QTr :props="props">
<QTh auto-width>{{ <QTh auto-width>{{ t('ticket.summary.created') }}</QTh>
t('ticket.summary.created') <QTh auto-width>{{ t('ticket.summary.package') }}</QTh>
}}</QTh> <QTh auto-width>{{ t('ticket.summary.quantity') }}</QTh>
<QTh auto-width>{{
t('ticket.summary.package')
}}</QTh>
<QTh auto-width>{{
t('ticket.summary.quantity')
}}</QTh>
</QTr> </QTr>
</template> </template>
<template #body="props"> <template #body="props">
@ -533,32 +410,19 @@ async function changeState(value) {
</QTr> </QTr>
</template> </template>
</QTable> </QTable>
</QList>
</div> <a class="header link q-mt-xl" :href="ticketUrl + 'service'">
<div class="col" v-if="ticket.services.length > 0"> {{ t('ticket.summary.service') }}
<QList> <QIcon name="open_in_new" color="primary" />
<QItemLabel header class="text-h6"> </a>
{{ t('ticket.summary.services') }}
<QIcon name="open_in_new" />
</QItemLabel>
<QTable :rows="ticket.services" flat> <QTable :rows="ticket.services" flat>
<template #header="props"> <template #header="props">
<QTr :props="props"> <QTr :props="props">
<QTh auto-width>{{ <QTh auto-width>{{ t('ticket.summary.quantity') }}</QTh>
t('ticket.summary.quantity') <QTh auto-width>{{ t('ticket.summary.description') }}</QTh>
}}</QTh> <QTh auto-width>{{ t('ticket.summary.price') }}</QTh>
<QTh auto-width>{{ <QTh auto-width>{{ t('ticket.summary.taxClass') }}</QTh>
t('ticket.summary.description') <QTh auto-width>{{ t('ticket.summary.amount') }}</QTh>
}}</QTh>
<QTh auto-width>{{
t('ticket.summary.price')
}}</QTh>
<QTh auto-width>{{
t('ticket.summary.taxClass')
}}</QTh>
<QTh auto-width>{{
t('ticket.summary.amount')
}}</QTh>
</QTr> </QTr>
</template> </template>
<template #body="props"> <template #body="props">
@ -568,156 +432,34 @@ async function changeState(value) {
<QTd>{{ toCurrency(props.row.price) }}</QTd> <QTd>{{ toCurrency(props.row.price) }}</QTd>
<QTd>{{ props.row.taxClass.description }}</QTd> <QTd>{{ props.row.taxClass.description }}</QTd>
<QTd>{{ <QTd>{{
toCurrency( toCurrency(props.row.quantity * props.row.price)
props.row.quantity * props.row.price
)
}}</QTd> }}</QTd>
</QTr> </QTr>
</template> </template>
</QTable> </QTable>
</QList>
</div>
</div>
<div class="row q-pa-md" v-if="ticket.requests.length > 0">
<div class="col">
<QList>
<QItemLabel header class="text-h6">
{{ t('ticket.summary.request') }}
<QIcon name="open_in_new" />
</QItemLabel>
<QTable :rows="ticket.requests" flat>
<template #header="props">
<QTr :props="props">
<QTh auto-width>{{
t('ticket.summary.description')
}}</QTh>
<QTh auto-width>{{
t('ticket.summary.created')
}}</QTh>
<QTh auto-width>{{
t('ticket.summary.requester')
}}</QTh>
<QTh auto-width>{{
t('ticket.summary.atender')
}}</QTh>
<QTh auto-width>{{
t('ticket.summary.quantity')
}}</QTh>
<QTh auto-width>{{
t('ticket.summary.price')
}}</QTh>
<QTh auto-width>{{
t('ticket.summary.item')
}}</QTh>
<QTh auto-width>Ok</QTh>
</QTr>
</template>
<template #body="props">
<QTr :props="props">
<QTd>{{ props.row.description }}</QTd>
<QTd>{{ toDate(props.row.created) }}</QTd>
<QTd>{{ props.row.requester.user.name }}</QTd>
<QTd>{{ props.row.atender.user.name }}</QTd>
<QTd>{{ props.row.quantity }}</QTd>
<QTd>{{ toCurrency(props.row.price) }}</QTd>
<QTd v-if="!props.row.sale">-</QTd>
<QTd v-if="props.row.sale" class="link">{{
props.row.sale.itemFk
}}</QTd>
<QTd
><QCheckbox
v-model="props.row.isOk"
:disable="true"
/></QTd>
</QTr>
</template>
</QTable>
</QList>
</div>
</div>
</template>
</QCard> </QCard>
</div> </template>
</CardSummary>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .notes {
display: flex; width: max-content;
justify-content: center;
} }
.cardSummary .summaryBody > .q-card > .taxes {
.q-card { border: 2px solid gray;
width: 100%; padding: 0;
height: 100%; > .vn-label-value {
max-width: 1200px;
}
.summary {
.q-list {
.q-item__label--header {
display: flex;
justify-content: space-between;
a {
color: $primary;
}
}
}
.fetched-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
& span {
flex-basis: 50%;
}
& span.subName {
flex-basis: 50%;
color: $secondary;
text-transform: uppercase;
font-size: 0.75rem;
}
}
.q-table__container {
text-align: left;
.q-icon {
padding: 2%;
}
}
.taxes {
border: $border-thin-light;
text-align: right; text-align: right;
padding: 8px;
}
.row {
flex-wrap: wrap;
.col {
min-width: 250px;
padding-left: 1.5%;
padding-right: 1.5%;
}
}
.header {
font-size: 18px;
display: flex; display: flex;
justify-content: space-between; flex-direction: row;
align-items: center; margin-top: 5px;
align-content: center; justify-content: flex-end;
margin: 0; padding-right: 20px;
text-align: center;
span {
flex: 1;
}
.q-btn {
flex: none;
}
} }
} }
.q-dialog .summary { .cardSummary .summaryBody > .q-card:has(.taxes) {
max-width: 1200px; margin-top: 2px;
padding: 0;
} }
</style> </style>

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

@ -3,11 +3,11 @@ 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 SkeletonSummary from 'components/ui/SkeletonSummary.vue'; import CardSummary from 'components/ui/CardSummary.vue';
import { getUrl } from 'src/composables/getUrl';
import VnLv from 'src/components/ui/VnLv.vue';
import WorkerDescriptorProxy from './WorkerDescriptorProxy.vue'; import WorkerDescriptorProxy from './WorkerDescriptorProxy.vue';
import { dashIfEmpty } from 'src/filters';
onMounted(() => fetch());
onUpdated(() => fetch());
const route = useRoute(); const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
@ -20,8 +20,11 @@ const $props = defineProps({
}); });
const entityId = computed(() => $props.id || route.params.id); const entityId = computed(() => $props.id || route.params.id);
const workerUrl = ref();
const worker = ref(null); onMounted(async () => {
workerUrl.value = (await getUrl('')) + `worker/${entityId.value}/`;
});
const filter = { const filter = {
include: [ include: [
@ -59,230 +62,59 @@ const filter = {
}, },
], ],
}; };
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> </script>
<template> <template>
<div class="summary container"> <CardSummary ref="summary" :url="`Workers/${entityId}`" :filter="filter">
<QCard> <template #header="{ entity }">
<SkeletonSummary v-if="!worker" /> <div>{{ entity.id }} - {{ entity.firstName }} {{ entity.lastName }}</div>
<template v-if="worker"> </template>
<div class="header bg-primary q-pa-sm q-mb-md"> <template #body="{ entity: worker }">
{{ worker.id }} - {{ worker.firstName }} {{ worker.lastName }} <QCard class="vn-one">
</div> <a class="header" :href="workerUrl + `basic-data`">
<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') }} {{ t('worker.summary.basicData') }}
</QItemLabel> <QIcon name="open_in_new" color="primary" />
<QItem> </a>
<QItemSection> <VnLv :label="t('worker.card.name')" :value="worker.user.nickname" />
<QItemLabel caption> ID </QItemLabel> <VnLv
<QItemLabel>{{ worker.id }}</QItemLabel> :label="t('worker.list.department')"
</QItemSection> :value="worker.department.department.name"
</QItem> />
<QItem> <VnLv :label="t('worker.list.email')" :value="worker.user.email" />
<QItemSection> <VnLv :label="t('worker.summary.boss')" link>
<QItemLabel caption <template #value>
>{{ 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"> <span class="link">
{{ worker.boss.name }} {{ dashIfEmpty(worker.boss?.name) }}
<WorkerDescriptorProxy :id="worker.bossFk" /> <WorkerDescriptorProxy
:id="worker.bossFk"
v-if="worker.boss"
/>
</span> </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> </template>
</VnLv>
<VnLv
:label="t('worker.summary.phoneExtension')"
:value="worker.mobileExtension"
/>
<VnLv :label="t('worker.summary.entPhone')" :value="worker.phone" />
<VnLv
:label="t('worker.summary.personalPhone')"
:value="worker.client.phone"
/>
<VnLv :label="t('worker.summary.locker')" :value="worker.locker" />
</QCard> </QCard>
<QCard class="vn-one">
<div class="header">
{{ t('worker.summary.userData') }}
</div> </div>
<VnLv :label="t('worker.summary.userId')" :value="worker.user.id" />
<VnLv :label="t('worker.card.name')" :value="worker.user.nickname" />
<VnLv :label="t('worker.summary.role')" :value="worker.user.role.name" />
<VnLv
:label="t('worker.summary.sipExtension')"
:value="worker?.sip?.extension"
/>
</QCard>
</template>
</CardSummary>
</template> </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>

14
test/cypress/integration/workerSummary.spec.js
View File

@ -1,15 +1,15 @@
describe('WorkerSummary', () => { describe('WorkerSummary', () => {
beforeEach(() => { beforeEach(() => {
cy.viewport(1280, 720) cy.viewport(1280, 720);
cy.login('developer') cy.login('developer');
cy.visit('/#/worker/19/summary'); cy.visit('/#/worker/19/summary');
}); });
it('should load worker summary', () => { it('should load worker summary', () => {
cy.get('div[class="header bg-primary q-pa-sm q-mb-md"').should('have.text', '19 - salesBoss salesBoss'); cy.get('.summaryHeader > div').should('have.text', '19 - salesBoss salesBoss');
cy.get('div[class="q-item__label q-item__label--header text-h6"]').eq(0).should('have.text', 'Basic data'); cy.get(':nth-child(1) > :nth-child(2) > .value > span').should(
cy.get('div[class="q-item__label q-item__label--header text-h6"]').eq(1).should('have.text', 'User data'); 'have.text',
cy.get('div[class="q-item__section column q-item__section--main justify-center"]').eq(0).should('have.text', 'NamesalesBossNick'); 'salesBossNick'
);
}); });
}); });