Summary refactor
gitea/salix-front/pipeline/head This commit looks good
Details
gitea/salix-front/pipeline/head This commit looks good
Details
This commit is contained in:
parent
c95759f302
commit
5809e36ddb
|
|
@ -1,44 +1,40 @@
|
|||
<script setup>
|
||||
import { onMounted, useSlots, computed, ref, toRef, watch } from 'vue';
|
||||
import { onMounted, useSlots, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import axios from 'axios';
|
||||
import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
required: true,
|
||||
url: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
filter: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
module: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
const slots = useSlots();
|
||||
const { t } = useI18n();
|
||||
|
||||
onMounted(async () => {
|
||||
await fetch();
|
||||
});
|
||||
onMounted(() => fetch());
|
||||
|
||||
const entity = ref();
|
||||
const entityId = toRef(props, 'id');
|
||||
const description = computed(() => {
|
||||
return props.description || entity.value.name;
|
||||
});
|
||||
|
||||
async function fetch() {
|
||||
const { data } = await axios.get(`Clients/${entityId.value}/getCard`);
|
||||
const params = {};
|
||||
|
||||
if (props.filter) params.filter = props.filter;
|
||||
|
||||
const { data } = await axios.get(props.url, { params });
|
||||
entity.value = data;
|
||||
}
|
||||
|
||||
watch(entityId, async () => {
|
||||
watch(props, async () => {
|
||||
entity.value = null;
|
||||
await fetch();
|
||||
});
|
||||
|
|
@ -46,40 +42,63 @@ watch(entityId, async () => {
|
|||
|
||||
<template>
|
||||
<div class="descriptor">
|
||||
<template v-if="entity">
|
||||
<div class="header bg-primary q-pa-sm">
|
||||
<router-link :to="{ name: `${module}List` }">
|
||||
<q-btn round flat dense size="md" icon="view_list" color="white">
|
||||
<q-tooltip>{{ t('components.cardDescriptor.mainList') }}</q-tooltip>
|
||||
<q-tooltip>{{
|
||||
t('components.cardDescriptor.mainList')
|
||||
}}</q-tooltip>
|
||||
</q-btn>
|
||||
</router-link>
|
||||
<router-link :to="{ name: `${module}Summary`, params: { id: entityId } }">
|
||||
<router-link
|
||||
:to="{ name: `${module}Summary`, params: { id: entity.id } }"
|
||||
>
|
||||
<q-btn round flat dense size="md" icon="launch" color="white">
|
||||
<q-tooltip>{{ t('components.cardDescriptor.summary') }}</q-tooltip>
|
||||
<q-tooltip>{{
|
||||
t('components.cardDescriptor.summary')
|
||||
}}</q-tooltip>
|
||||
</q-btn>
|
||||
</router-link>
|
||||
|
||||
<q-btn v-if="slots.menu" size="md" icon="more_vert" color="white" round flat dense>
|
||||
<q-tooltip>{{ t('components.cardDescriptor.moreOptions') }}</q-tooltip>
|
||||
<q-btn
|
||||
v-if="slots.menu"
|
||||
size="md"
|
||||
icon="more_vert"
|
||||
color="white"
|
||||
round
|
||||
flat
|
||||
dense
|
||||
>
|
||||
<q-tooltip>
|
||||
{{ t('components.cardDescriptor.moreOptions') }}
|
||||
</q-tooltip>
|
||||
<q-menu>
|
||||
<q-list>
|
||||
<slot name="menu" />
|
||||
<slot name="menu" :entity="entity" />
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</div>
|
||||
<div v-if="entity" class="body q-py-sm">
|
||||
<div class="body q-py-sm">
|
||||
<q-list>
|
||||
<q-item-label header class="ellipsis text-h5" :lines="1">
|
||||
{{ description }}
|
||||
<q-tooltip>{{ description }}</q-tooltip>
|
||||
<slot name="description" :entity="entity">
|
||||
<span>
|
||||
{{ entity.name }}
|
||||
<q-tooltip>{{ entity.name }}</q-tooltip>
|
||||
</span>
|
||||
</slot>
|
||||
</q-item-label>
|
||||
<q-item dense>
|
||||
<q-item-label class="text-subtitle2" caption>#{{ entity.id }}</q-item-label>
|
||||
<q-item-label class="text-subtitle2" caption>
|
||||
#{{ entity.id }}
|
||||
</q-item-label>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<slot name="body" :entity="entity" />
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<!-- Skeleton -->
|
||||
<skeleton-descriptor v-if="!entity" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,21 @@
|
|||
<script setup>
|
||||
import { onMounted, toRef, ref, watch } from 'vue';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import axios from 'axios';
|
||||
import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
onMounted(() => fetch());
|
||||
|
||||
const entity = ref();
|
||||
const entityId = toRef(props, 'id');
|
||||
const props = defineProps({
|
||||
url: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
filter: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(['onFetch']);
|
||||
|
||||
defineExpose({
|
||||
entity,
|
||||
|
|
@ -21,12 +23,17 @@ defineExpose({
|
|||
});
|
||||
|
||||
async function fetch() {
|
||||
const id = entityId.value;
|
||||
const { data } = await axios.get(`Clients/${id}/summary`);
|
||||
const params = {};
|
||||
|
||||
if (props.filter) params.filter = props.filter;
|
||||
|
||||
const { data } = await axios.get(props.url, { params });
|
||||
entity.value = data;
|
||||
|
||||
emit('onFetch', data);
|
||||
}
|
||||
|
||||
watch(entityId, async () => {
|
||||
watch(props, async () => {
|
||||
entity.value = null;
|
||||
fetch();
|
||||
});
|
||||
|
|
@ -38,9 +45,11 @@ watch(entityId, async () => {
|
|||
<skeleton-summary v-if="!entity" />
|
||||
<template v-if="entity">
|
||||
<div class="header bg-primary q-pa-sm q-mb-md">
|
||||
<slot name="header" :entity="entity"> {{ entity.id }} - {{ entity.name }} </slot>
|
||||
<slot name="header" :entity="entity">
|
||||
{{ entity.id }} - {{ entity.name }}
|
||||
</slot>
|
||||
</div>
|
||||
<div class="row q-pa-md q-col-gutter-md q-mb-md">
|
||||
<div class="body q-pa-md q-mb-md">
|
||||
<slot name="body" :entity="entity" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -73,10 +82,11 @@ watch(entityId, async () => {
|
|||
}
|
||||
}
|
||||
}
|
||||
.row {
|
||||
|
||||
.body > .q-card__section.row {
|
||||
flex-wrap: wrap;
|
||||
|
||||
.col {
|
||||
& > .col {
|
||||
min-width: 250px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ $color-spacer: rgba(255, 255, 255, 0.3);
|
|||
$border-thin-light: 1px solid $color-spacer-light;
|
||||
|
||||
$dark-shadow-color: #000;
|
||||
$dark: #3c3b3b;
|
||||
$dark: #292929;
|
||||
$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;
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const state = useState();
|
|||
</q-page-container>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
<!-- <style lang="scss">
|
||||
.q-scrollarea__content {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
@ -47,4 +47,4 @@ const state = useState();
|
|||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style> -->
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
<script setup>
|
||||
import { onMounted, computed, ref } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { toDate } from 'src/filters';
|
||||
import axios from 'axios';
|
||||
|
||||
import TicketDescriptorPopover from 'pages/Ticket/Card/TicketDescriptorPopover.vue';
|
||||
import ClaimDescriptorMenu from 'pages/Claim/Card/ClaimDescriptorMenu.vue';
|
||||
import CardDescriptor from 'components/ui/CardDescriptor.vue';
|
||||
import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
|
||||
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
|
|
@ -17,10 +16,6 @@ const $props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await fetch();
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
|
||||
|
|
@ -28,8 +23,6 @@ const entityId = computed(() => {
|
|||
return $props.id || route.params.id;
|
||||
});
|
||||
|
||||
const claim = ref();
|
||||
async function fetch() {
|
||||
const filter = {
|
||||
include: [
|
||||
{ relation: 'client' },
|
||||
|
|
@ -45,11 +38,6 @@ async function fetch() {
|
|||
},
|
||||
],
|
||||
};
|
||||
const options = { params: { filter } };
|
||||
const { data } = await axios.get(`Claims/${entityId.value}`, options);
|
||||
|
||||
if (data) claim.value = data;
|
||||
}
|
||||
|
||||
function stateColor(code) {
|
||||
if (code === 'pending') return 'green';
|
||||
|
|
@ -59,40 +47,56 @@ function stateColor(code) {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<skeleton-descriptor v-if="!claim" />
|
||||
<card-descriptor v-if="claim" module="Claim" :data="claim" :description="claim.client.name">
|
||||
<template #menu>
|
||||
<claim-descriptor-menu v-if="claim" :claim="claim" />
|
||||
<card-descriptor
|
||||
ref="descriptor"
|
||||
:url="`Claims/${entityId}`"
|
||||
:filter="filter"
|
||||
module="Claim"
|
||||
>
|
||||
<template #menu="{ entity }">
|
||||
<claim-descriptor-menu :claim="entity" />
|
||||
</template>
|
||||
<template #body>
|
||||
<template #description="{ entity }">
|
||||
<span>
|
||||
{{ entity.client.name }}
|
||||
<q-tooltip>{{ entity.client.name }}</q-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<template #body="{ entity }">
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('claim.card.created') }}</q-item-label>
|
||||
<q-item-label>{{ toDate(claim.created) }}</q-item-label>
|
||||
<q-item-label>{{ toDate(entity.created) }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-section v-if="entity.claimState">
|
||||
<q-item-label caption>{{ t('claim.card.state') }}</q-item-label>
|
||||
<q-item-label>
|
||||
<q-chip :color="stateColor(claim.claimState.code)" dense>
|
||||
{{ claim.claimState.description }}
|
||||
<q-chip :color="stateColor(entity.claimState.code)" dense>
|
||||
{{ entity.claimState.description }}
|
||||
</q-chip>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('claim.card.ticketId') }}</q-item-label>
|
||||
<q-item-label class="link">
|
||||
{{ claim.ticketFk }}
|
||||
<q-item-label caption>
|
||||
{{ t('claim.card.ticketId') }}
|
||||
</q-item-label>
|
||||
<q-item-label>
|
||||
<span class="link">
|
||||
{{ entity.ticketFk }}
|
||||
<q-popup-proxy>
|
||||
<ticket-descriptor-popover :id="claim.ticketFk" />
|
||||
<ticket-descriptor-popover :id="entity.ticketFk" />
|
||||
</q-popup-proxy>
|
||||
</span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('claim.card.assignedTo') }}</q-item-label>
|
||||
<q-item-label>{{ claim.worker.user.name }}</q-item-label>
|
||||
<q-item-section v-if="entity.worker">
|
||||
<q-item-label caption>
|
||||
{{ t('claim.card.assignedTo') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ entity.worker.user.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
|
|
@ -102,7 +106,7 @@ function stateColor(code) {
|
|||
size="md"
|
||||
icon="vn:client"
|
||||
color="primary"
|
||||
:to="{ name: 'CustomerCard', params: { id: claim.clientFk } }"
|
||||
:to="{ name: 'CustomerCard', params: { id: entity.clientFk } }"
|
||||
>
|
||||
<q-tooltip>{{ t('claim.card.customerSummary') }}</q-tooltip>
|
||||
</q-btn>
|
||||
|
|
@ -110,7 +114,7 @@ function stateColor(code) {
|
|||
size="md"
|
||||
icon="vn:ticket"
|
||||
color="primary"
|
||||
:to="{ name: 'TicketCard', params: { id: claim.ticketFk } }"
|
||||
:to="{ name: 'TicketCard', params: { id: entity.ticketFk } }"
|
||||
>
|
||||
<q-tooltip>{{ t('claim.card.claimedTicket') }}</q-tooltip>
|
||||
</q-btn>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,9 @@
|
|||
<script setup>
|
||||
import { onMounted, ref, computed } from 'vue';
|
||||
import { ref, computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import axios from 'axios';
|
||||
import { toDate, toCurrency } from 'src/filters';
|
||||
import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
|
||||
|
||||
onMounted(() => fetch());
|
||||
import CardSummary from 'components/ui/CardSummary.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
|
|
@ -20,16 +17,6 @@ const $props = defineProps({
|
|||
|
||||
const entityId = computed(() => $props.id || route.params.id);
|
||||
|
||||
const claim = ref(null);
|
||||
const salesClaimed = ref(null);
|
||||
function fetch() {
|
||||
const id = entityId.value;
|
||||
axios.get(`Claims/${id}/getSummary`).then(({ data }) => {
|
||||
claim.value = data.claim;
|
||||
salesClaimed.value = data.salesClaimed;
|
||||
});
|
||||
}
|
||||
|
||||
const detailsColumns = ref([
|
||||
{
|
||||
name: 'item',
|
||||
|
|
@ -77,7 +64,8 @@ const detailsColumns = ref([
|
|||
{
|
||||
name: 'total',
|
||||
label: 'claim.summary.total',
|
||||
field: ({ sale }) => toCurrency(sale.quantity * sale.price * ((100 - sale.discount) / 100)),
|
||||
field: ({ sale }) =>
|
||||
toCurrency(sale.quantity * sale.price * ((100 - sale.discount) / 100)),
|
||||
sortable: true,
|
||||
},
|
||||
]);
|
||||
|
|
@ -90,43 +78,68 @@ function stateColor(code) {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="summary container">
|
||||
<q-card>
|
||||
<skeleton-summary v-if="!claim" />
|
||||
<template v-if="claim">
|
||||
<div class="header bg-primary q-pa-sm q-mb-md">{{ claim.id }} - {{ claim.client.name }}</div>
|
||||
<card-summary ref="summary" :url="`Claims/${entityId}/getSummary`">
|
||||
<template #header="{ entity: { claim } }">
|
||||
{{ claim.id }} - {{ claim.client.name }}
|
||||
</template>
|
||||
<template #body="{ entity: { claim, salesClaimed } }">
|
||||
<q-card-section class="row q-pa-none q-col-gutter-md">
|
||||
<div class="col">
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('claim.summary.created') }}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('claim.summary.created') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ toDate(claim.created) }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('claim.summary.state') }}</q-item-label>
|
||||
<q-item-section v-if="claim.claimState">
|
||||
<q-item-label caption>{{
|
||||
t('claim.summary.state')
|
||||
}}</q-item-label>
|
||||
<q-item-label>
|
||||
<q-chip :color="stateColor(claim.claimState.code)" dense>
|
||||
<q-chip
|
||||
:color="stateColor(claim.claimState.code)"
|
||||
dense
|
||||
>
|
||||
{{ claim.claimState.description }}
|
||||
</q-chip>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('claim.summary.assignedTo') }}</q-item-label>
|
||||
<q-item-label>{{ claim.worker.user.nickname }}</q-item-label>
|
||||
<q-item-section v-if="claim.worker && claim.worker.user">
|
||||
<q-item-label caption>{{
|
||||
t('claim.summary.assignedTo')
|
||||
}}</q-item-label>
|
||||
<q-item-label>{{
|
||||
claim.worker.user.nickname
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('claim.summary.attendedBy') }}</q-item-label>
|
||||
<q-item-label>{{ claim.client.salesPersonUser.name }}</q-item-label>
|
||||
<q-item-section
|
||||
v-if="claim.client && claim.client.salesPersonUser"
|
||||
>
|
||||
<q-item-label caption>{{
|
||||
t('claim.summary.attendedBy')
|
||||
}}</q-item-label>
|
||||
<q-item-label>{{
|
||||
claim.client.salesPersonUser.name
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section class="q-pa-md">
|
||||
<h6>{{ t('claim.summary.details') }}</h6>
|
||||
<q-table :columns="detailsColumns" :rows="salesClaimed" flat>
|
||||
<template #header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<q-th
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
{{ t(col.label) }}
|
||||
</q-th>
|
||||
</q-tr>
|
||||
|
|
@ -155,45 +168,39 @@ function stateColor(code) {
|
|||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
</q-card>
|
||||
</div>
|
||||
</card-summary>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
// .container {
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// }
|
||||
|
||||
.q-card {
|
||||
width: 100%;
|
||||
max-width: 950px;
|
||||
}
|
||||
// .q-card {
|
||||
// width: 100%;
|
||||
// max-width: 950px;
|
||||
// }
|
||||
|
||||
.summary {
|
||||
.header {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
// .summary {
|
||||
// #slider-container {
|
||||
// max-width: 80%;
|
||||
// margin: 0 auto;
|
||||
|
||||
#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-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;
|
||||
}
|
||||
// .q-dialog .summary {
|
||||
// max-width: 1200px;
|
||||
// }
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const $props = defineProps({
|
|||
id: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 0,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -17,56 +17,90 @@ const route = useRoute();
|
|||
const { t } = useI18n();
|
||||
|
||||
const entityId = computed(() => {
|
||||
return $props.id || Number(route.params.id);
|
||||
return $props.id || route.params.id;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<card-descriptor ref="descriptor" :id="entityId" module="Customer">
|
||||
<!-- <template #menu>
|
||||
<q-item clickable v-ripple>Option 1</q-item>
|
||||
<q-item clickable v-ripple>Option 2</q-item>
|
||||
</template> -->
|
||||
<card-descriptor module="Customer" :url="`Clients/${entityId}/getCard`">
|
||||
<template #body="{ entity }">
|
||||
<q-list>
|
||||
<q-item v-if="entity.salesPersonUser">
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.card.salesPerson') }}</q-item-label>
|
||||
<q-item-label>{{ entity.salesPersonUser.name }}</q-item-label>
|
||||
<q-item-label caption>{{
|
||||
t('customer.card.salesPerson')
|
||||
}}</q-item-label>
|
||||
<q-item-label>
|
||||
{{ entity.salesPersonUser.name }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.card.credit') }}</q-item-label>
|
||||
<q-item-label>{{ toCurrency(entity.credit) }}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.card.credit') }}
|
||||
</q-item-label>
|
||||
<q-item-label>
|
||||
{{ toCurrency(entity.credit) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.card.securedCredit') }}</q-item-label>
|
||||
<q-item-label>{{ toCurrency(entity.creditInsurance) }}</q-item-label>
|
||||
<q-item-label caption>{{
|
||||
t('customer.card.securedCredit')
|
||||
}}</q-item-label>
|
||||
<q-item-label>
|
||||
{{ toCurrency(entity.creditInsurance) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section v-if="entity.payMethod">
|
||||
<q-item-label caption>{{ t('customer.card.payMethod') }}</q-item-label>
|
||||
<q-item-label>{{ entity.payMethod.name }}</q-item-label>
|
||||
<q-item-label caption>{{
|
||||
t('customer.card.payMethod')
|
||||
}}</q-item-label>
|
||||
<q-item-label>
|
||||
{{ entity.payMethod.name }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.card.debt') }}</q-item-label>
|
||||
<q-item-label>{{ toCurrency(entity.debt) }}</q-item-label>
|
||||
<q-item-label>
|
||||
{{ toCurrency(entity.debt) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<q-card-actions class="q-gutter-md">
|
||||
<q-icon v-if="entity.isActive == false" name="vn:disabled" size="xs" color="primary">
|
||||
<q-icon
|
||||
v-if="entity.isActive == false"
|
||||
name="vn:disabled"
|
||||
size="xs"
|
||||
color="primary"
|
||||
>
|
||||
<q-tooltip>{{ t('customer.card.isDisabled') }}</q-tooltip>
|
||||
</q-icon>
|
||||
<q-icon v-if="entity.isFreezed == true" name="vn:frozen" size="xs" color="primary">
|
||||
<q-icon
|
||||
v-if="entity.isFreezed == true"
|
||||
name="vn:frozen"
|
||||
size="xs"
|
||||
color="primary"
|
||||
>
|
||||
<q-tooltip>{{ t('customer.card.isFrozen') }}</q-tooltip>
|
||||
</q-icon>
|
||||
<q-icon v-if="entity.debt > entity.credit" name="vn:risk" size="xs" color="primary">
|
||||
<q-icon
|
||||
v-if="entity.debt > entity.credit"
|
||||
name="vn:risk"
|
||||
size="xs"
|
||||
color="primary"
|
||||
>
|
||||
<q-tooltip>{{ t('customer.card.hasDebt') }}</q-tooltip>
|
||||
</q-icon>
|
||||
<q-icon v-if="entity.isTaxDataChecked == false" name="vn:no036" size="xs" color="primary">
|
||||
<q-icon
|
||||
v-if="entity.isTaxDataChecked == false"
|
||||
name="vn:no036"
|
||||
size="xs"
|
||||
color="primary"
|
||||
>
|
||||
<q-tooltip>{{ t('customer.card.notChecked') }}</q-tooltip>
|
||||
</q-icon>
|
||||
<q-icon
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const $props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const entityId = computed(() => Number($props.id) || Number(route.params.id));
|
||||
const entityId = computed(() => $props.id || route.params.id);
|
||||
const summary = ref();
|
||||
const customer = computed(() => summary.value.entity);
|
||||
|
||||
|
|
@ -51,14 +51,18 @@ const creditWarning = computed(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<card-summary ref="summary" :id="entityId">
|
||||
<card-summary ref="summary" :url="`Clients/${entityId}/summary`">
|
||||
<template #body="{ entity }">
|
||||
<q-card-section class="row q-pa-none q-col-gutter-md">
|
||||
<div class="col">
|
||||
<q-list>
|
||||
<q-item-label header class="text-h6">
|
||||
{{ t('customer.summary.basicData') }}
|
||||
<router-link
|
||||
:to="{ name: 'CustomerBasicData', params: { id: entityId } }"
|
||||
:to="{
|
||||
name: 'CustomerBasicData',
|
||||
params: { id: entity.id },
|
||||
}"
|
||||
target="_blank"
|
||||
>
|
||||
<q-icon name="open_in_new" />
|
||||
|
|
@ -67,66 +71,70 @@ const creditWarning = computed(() => {
|
|||
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.customerId')
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.customerId') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ entity.id }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.name')
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.name') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ entity.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.contact')
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.contact') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ entity.contact }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item v-if="entity.salesPersonUser">
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.salesPerson')
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.salesPerson') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{
|
||||
entity.salesPersonUser.name
|
||||
}}</q-item-label>
|
||||
<q-item-label>{{ entity.salesPersonUser.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.phone')
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.phone') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ entity.phone }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.mobile')
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.mobile') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ entity.mobile }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.email')
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.email') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ entity.email }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item v-if="entity.contactChannel">
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.contactChannel')
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.contactChannel') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{
|
||||
entity.contactChannel.name
|
||||
}}</q-item-label>
|
||||
<q-item-label>{{ entity.contactChannel.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
|
|
@ -138,49 +146,49 @@ const creditWarning = computed(() => {
|
|||
</q-item-label>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.socialName')
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.socialName') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ entity.socialName }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.fiscalId')
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.fiscalId') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ entity.fi }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.postcode')
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.postcode') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ entity.postcode }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item v-if="entity.province">
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.province')
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.province') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ entity.province.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item v-if="entity.country">
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.country')
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.country') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ entity.country.country }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.street')
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.street') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ entity.street }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
|
@ -249,25 +257,25 @@ const creditWarning = computed(() => {
|
|||
</q-item-label>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.payMethod')
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.payMethod') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ entity.payMethod.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.bankAccount')
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.bankAccount') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ entity.iban }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.dueDay')
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.dueDay') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ entity.dueDay }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
|
@ -301,30 +309,32 @@ const creditWarning = computed(() => {
|
|||
</q-item-label>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.addressName')
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.addressName') }}
|
||||
</q-item-label>
|
||||
<q-item-label>
|
||||
{{ entity.defaultAddress.nickname }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.addressCity') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{
|
||||
entity.defaultAddress.nickname
|
||||
entity.defaultAddress.city
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.addressCity')
|
||||
}}</q-item-label>
|
||||
<q-item-label>{{ entity.defaultAddress.city }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.addressStreet')
|
||||
}}</q-item-label>
|
||||
<q-item-label>{{
|
||||
entity.defaultAddress.street
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.addressStreet') }}
|
||||
</q-item-label>
|
||||
<q-item-label>
|
||||
{{ entity.defaultAddress.street }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
|
|
@ -336,9 +346,9 @@ const creditWarning = computed(() => {
|
|||
</q-item-label>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.username')
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.username') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ entity.account.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
|
@ -358,22 +368,22 @@ const creditWarning = computed(() => {
|
|||
</q-item-label>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.totalGreuge')
|
||||
}}</q-item-label>
|
||||
<q-item-label>{{
|
||||
toCurrency(entity.totalGreuge)
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.totalGreuge') }}
|
||||
</q-item-label>
|
||||
<q-item-label>
|
||||
{{ toCurrency(entity.totalGreuge) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item v-if="entity.mana">
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.mana')
|
||||
}}</q-item-label>
|
||||
<q-item-label>{{
|
||||
toCurrency(entity.mana.mana)
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.mana') }}
|
||||
</q-item-label>
|
||||
<q-item-label>
|
||||
{{ toCurrency(entity.mana.mana) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item v-if="entity.claimsRatio">
|
||||
|
|
@ -381,26 +391,26 @@ const creditWarning = computed(() => {
|
|||
<q-item-label caption>
|
||||
{{ t('customer.summary.priceIncreasingRate') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{
|
||||
toPercentage(priceIncreasingRate)
|
||||
}}</q-item-label>
|
||||
<q-item-label>
|
||||
{{ toPercentage(priceIncreasingRate) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item v-if="entity.averageInvoiced">
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.averageInvoiced')
|
||||
}}</q-item-label>
|
||||
<q-item-label>{{
|
||||
toCurrency(entity.averageInvoiced.invoiced)
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.averageInvoiced') }}
|
||||
</q-item-label>
|
||||
<q-item-label>
|
||||
{{ toCurrency(entity.averageInvoiced.invoiced) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item v-if="entity.claimsRatio">
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.claimRate')
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.claimRate') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ toPercentage(claimRate) }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
|
@ -413,101 +423,102 @@ const creditWarning = computed(() => {
|
|||
</q-item-label>
|
||||
<q-item v-if="entity.debt">
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.risk')
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.risk') }}
|
||||
</q-item-label>
|
||||
<q-item-label :class="debtWarning">
|
||||
{{ toCurrency(entity.debt.debt) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-icon name="vn:info">
|
||||
<q-tooltip>{{
|
||||
t('customer.summary.riskInfo')
|
||||
}}</q-tooltip>
|
||||
<q-tooltip>
|
||||
{{ t('customer.summary.riskInfo') }}
|
||||
</q-tooltip>
|
||||
</q-icon>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.credit')
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.credit') }}
|
||||
</q-item-label>
|
||||
<q-item-label :class="creditWarning">
|
||||
{{ toCurrency(entity.credit) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-icon name="vn:info">
|
||||
<q-tooltip>{{
|
||||
t('customer.summary.creditInfo')
|
||||
}}</q-tooltip>
|
||||
<q-tooltip>
|
||||
{{ t('customer.summary.creditInfo') }}
|
||||
</q-tooltip>
|
||||
</q-icon>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item v-if="entity.creditInsurance">
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.securedCredit')
|
||||
}}</q-item-label>
|
||||
<q-item-label>{{
|
||||
toCurrency(entity.creditInsurance)
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.securedCredit') }}
|
||||
</q-item-label>
|
||||
<q-item-label>
|
||||
{{ toCurrency(entity.creditInsurance) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-icon name="vn:info">
|
||||
<q-tooltip>{{
|
||||
t('customer.summary.securedCreditInfo')
|
||||
}}</q-tooltip>
|
||||
<q-tooltip>
|
||||
{{ t('customer.summary.securedCreditInfo') }}
|
||||
</q-tooltip>
|
||||
</q-icon>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.balance')
|
||||
}}</q-item-label>
|
||||
<q-item-label>{{
|
||||
toCurrency(entity.sumRisk) || toCurrency(0)
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.balance') }}
|
||||
</q-item-label>
|
||||
<q-item-label>
|
||||
{{ toCurrency(entity.sumRisk) || toCurrency(0) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-icon name="vn:info">
|
||||
<q-tooltip>{{
|
||||
t('customer.summary.balanceInfo')
|
||||
}}</q-tooltip>
|
||||
<q-tooltip>
|
||||
{{ t('customer.summary.balanceInfo') }}
|
||||
</q-tooltip>
|
||||
</q-icon>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item v-if="entity.defaulters">
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.balanceDue')
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.balanceDue') }}
|
||||
</q-item-label>
|
||||
<q-item-label :class="balanceDueWarning">
|
||||
{{ toCurrency(balanceDue) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-icon name="vn:info">
|
||||
<q-tooltip>{{
|
||||
t('customer.summary.balanceDueInfo')
|
||||
}}</q-tooltip>
|
||||
<q-tooltip>
|
||||
{{ t('customer.summary.balanceDueInfo') }}
|
||||
</q-tooltip>
|
||||
</q-icon>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item v-if="entity.recovery">
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.recoverySince')
|
||||
}}</q-item-label>
|
||||
<q-item-label>{{
|
||||
toDate(entity.recovery.started)
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.recoverySince') }}
|
||||
</q-item-label>
|
||||
<q-item-label>
|
||||
{{ toDate(entity.recovery.started) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
</card-summary>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
<script setup>
|
||||
import { onMounted, ref, computed } from 'vue';
|
||||
import { ref, computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { toCurrency, toDate } from 'src/filters';
|
||||
import axios from 'axios';
|
||||
import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
|
||||
import CustomerDescriptorPopover from 'src/pages/Customer/Card/CustomerDescriptorPopover.vue';
|
||||
|
||||
|
|
@ -15,19 +14,14 @@ const $props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await fetch();
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
|
||||
const entityId = computed(() => {
|
||||
return $props.id || route.params.id;
|
||||
});
|
||||
const descriptor = ref();
|
||||
|
||||
const invoiceOut = ref();
|
||||
async function fetch() {
|
||||
const filter = {
|
||||
include: [
|
||||
{
|
||||
|
|
@ -45,56 +39,79 @@ async function fetch() {
|
|||
],
|
||||
};
|
||||
|
||||
const options = { params: { filter } };
|
||||
const { data } = await axios.get(`InvoiceOuts/${entityId.value}`, options);
|
||||
if (data) invoiceOut.value = data;
|
||||
function ticketFilter(invoice) {
|
||||
return JSON.stringify({ refFk: invoice.ref });
|
||||
}
|
||||
|
||||
const filter = computed(() => {
|
||||
return invoiceOut.value ? JSON.stringify({ refFk: invoiceOut.value.ref }) : null;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<card-descriptor v-if="invoiceOut" module="InvoiceOut" :data="invoiceOut" :description="invoiceOut.ref">
|
||||
<template #body>
|
||||
<card-descriptor
|
||||
ref="descriptor"
|
||||
module="InvoiceOut"
|
||||
:url="`InvoiceOuts/${entityId}`"
|
||||
:filter="filter"
|
||||
>
|
||||
<template #description="{ entity }">
|
||||
<span>
|
||||
{{ entity.ref }}
|
||||
<q-tooltip>{{ entity.ref }}</q-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<template #body="{ entity }">
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('invoiceOut.card.issued') }}</q-item-label>
|
||||
<q-item-label>{{ toDate(invoiceOut.issued) }}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('invoiceOut.card.issued') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ toDate(entity.issued) }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('invoiceOut.card.amount') }}</q-item-label>
|
||||
<q-item-label>{{ toCurrency(invoiceOut.amount) }}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('invoiceOut.card.amount') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ toCurrency(entity.amount) }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section v-if="invoiceOut.company">
|
||||
<q-item-label caption>{{ t('invoiceOut.card.client') }}</q-item-label>
|
||||
<q-item-section v-if="entity.client">
|
||||
<q-item-label caption>
|
||||
{{ t('invoiceOut.card.client') }}
|
||||
</q-item-label>
|
||||
<q-item-label class="link">
|
||||
{{ invoiceOut.client.name }}
|
||||
{{ entity.client.name }}
|
||||
<q-popup-proxy>
|
||||
<customer-descriptor-popover :id="invoiceOut.client.id" />
|
||||
<customer-descriptor-popover :id="entity.client.id" />
|
||||
</q-popup-proxy>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section v-if="invoiceOut.company">
|
||||
<q-item-label caption>{{ t('invoiceOut.card.company') }}</q-item-label>
|
||||
<q-item-label>{{ invoiceOut.company.code }}</q-item-label>
|
||||
<q-item-section v-if="entity.company">
|
||||
<q-item-label caption>{{
|
||||
t('invoiceOut.card.company')
|
||||
}}</q-item-label>
|
||||
<q-item-label>{{ entity.company.code }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<q-card-actions>
|
||||
<q-btn
|
||||
v-if="entity.client"
|
||||
size="md"
|
||||
icon="vn:client"
|
||||
color="primary"
|
||||
:to="{ name: 'CustomerCard', params: { id: invoiceOut.client.id } }"
|
||||
:to="{ name: 'CustomerCard', params: { id: entity.client.id } }"
|
||||
>
|
||||
<q-tooltip>{{ t('invoiceOut.card.customerCard') }}</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn size="md" icon="vn:ticket" color="primary" :to="{ name: 'TicketList', params: { q: filter } }">
|
||||
<q-btn
|
||||
size="md"
|
||||
icon="vn:ticket"
|
||||
color="primary"
|
||||
:to="{
|
||||
name: 'TicketList',
|
||||
query: { q: ticketFilter(entity) },
|
||||
}"
|
||||
>
|
||||
<q-tooltip>{{ t('invoiceOut.card.ticketList') }}</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
<script setup>
|
||||
import { onMounted, computed, ref } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { toDate } from 'src/filters';
|
||||
import axios from 'axios';
|
||||
import CustomerDescriptorPopover from 'src/pages/Customer/Card/CustomerDescriptorPopover.vue';
|
||||
import CardDescriptor from 'components/ui/CardDescriptor.vue';
|
||||
import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
|
||||
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
|
|
@ -16,10 +14,6 @@ const $props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await fetch();
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
|
||||
|
|
@ -27,12 +21,35 @@ const entityId = computed(() => {
|
|||
return $props.id || route.params.id;
|
||||
});
|
||||
|
||||
const ticket = ref();
|
||||
async function fetch() {
|
||||
const { data } = await axios.get(`Tickets/${entityId.value}/summary`);
|
||||
|
||||
if (data) ticket.value = data;
|
||||
}
|
||||
const filter = {
|
||||
include: [
|
||||
{
|
||||
relation: 'client',
|
||||
scope: {
|
||||
fields: ['id', 'name', 'salesPersonFk'],
|
||||
include: { relation: 'salesPersonUser' },
|
||||
},
|
||||
},
|
||||
{
|
||||
relation: 'ticketState',
|
||||
scope: {
|
||||
include: { relation: 'state' },
|
||||
},
|
||||
},
|
||||
{
|
||||
relation: 'warehouse',
|
||||
scope: {
|
||||
fields: ['id', 'name'],
|
||||
},
|
||||
},
|
||||
{
|
||||
relation: 'agencyMode',
|
||||
scope: {
|
||||
fields: ['id', 'name'],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
function stateColor(state) {
|
||||
if (state.code === 'OK') return 'text-green';
|
||||
|
|
@ -43,55 +60,64 @@ function stateColor(state) {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<skeleton-descriptor v-if="!ticket" />
|
||||
<card-descriptor v-if="ticket" module="Ticket" :data="ticket" :description="ticket.client.name">
|
||||
<!-- <template #menu>
|
||||
<q-item clickable v-ripple>Option 1</q-item>
|
||||
<q-item clickable v-ripple>Option 2</q-item>
|
||||
</template> -->
|
||||
<template #body>
|
||||
<card-descriptor module="Ticket" :url="`Tickets/${entityId}`" :filter="filter">
|
||||
<template #description="{ entity }">
|
||||
<span>
|
||||
{{ entity.client.name }}
|
||||
<q-tooltip>{{ entity.client.name }}</q-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<template #body="{ entity }">
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('ticket.card.ticketId') }}</q-item-label>
|
||||
<q-item-label>#{{ ticket.id }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-section v-if="entity.ticketState">
|
||||
<q-item-label caption>{{ t('ticket.card.state') }}</q-item-label>
|
||||
<q-item-label :class="stateColor(ticket.ticketState.state)">
|
||||
{{ ticket.ticketState.state.name }}
|
||||
<q-item-label :class="stateColor(entity.ticketState.state)">
|
||||
{{ entity.ticketState.state.name }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label caption>
|
||||
{{ t('ticket.card.shipped') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ toDate(entity.shipped) }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('ticket.card.customerId') }}</q-item-label>
|
||||
<q-item-label class="link">
|
||||
{{ ticket.clientFk }}
|
||||
<q-item-label caption>
|
||||
{{ t('ticket.card.customerId') }}
|
||||
</q-item-label>
|
||||
<q-item-label>
|
||||
<span class="link">
|
||||
{{ entity.clientFk }}
|
||||
<q-popup-proxy>
|
||||
<customer-descriptor-popover :id="ticket.client.id" />
|
||||
<customer-descriptor-popover :id="entity.client.id" />
|
||||
</q-popup-proxy>
|
||||
</span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('ticket.card.salesPerson') }}</q-item-label>
|
||||
<q-item-label>{{ ticket.client.salesPersonUser.name }}</q-item-label>
|
||||
<q-item-section v-if="entity.client && entity.client.salesPersonUser">
|
||||
<q-item-label caption>
|
||||
{{ t('ticket.card.salesPerson') }}
|
||||
</q-item-label>
|
||||
<q-item-label>
|
||||
{{ entity.client.salesPersonUser.name }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('ticket.card.warehouse') }}</q-item-label>
|
||||
<q-item-label>{{ ticket.warehouse.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('ticket.card.shipped') }}</q-item-label>
|
||||
<q-item-label>{{ toDate(ticket.shipped) }}</q-item-label>
|
||||
<q-item-section v-if="entity.warehouse">
|
||||
<q-item-label caption>
|
||||
{{ t('ticket.card.warehouse') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ entity.warehouse.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item v-if="entity.agencyMode">
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('ticket.card.agency') }}</q-item-label>
|
||||
<q-item-label>{{ ticket.agencyMode.name }}</q-item-label>
|
||||
<q-item-label>{{ entity.agencyMode.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
|
|
@ -101,7 +127,7 @@ function stateColor(state) {
|
|||
size="md"
|
||||
icon="vn:client"
|
||||
color="primary"
|
||||
:to="{ name: 'CustomerCard', params: { id: ticket.clientFk } }"
|
||||
:to="{ name: 'CustomerCard', params: { id: entity.clientFk } }"
|
||||
>
|
||||
<q-tooltip>{{ t('ticket.card.customerCard') }}</q-tooltip>
|
||||
</q-btn>
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ const entityId = computed(() => $props.id || route.params.id);
|
|||
const ticket = ref();
|
||||
const salesLines = ref(null);
|
||||
const editableStates = ref([]);
|
||||
|
||||
async function fetch() {
|
||||
const { data } = await axios.get(`Tickets/${entityId.value}/summary`);
|
||||
if (data) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue