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

Updated summary with computed data

This commit is contained in:
Joan Sanchez 2023-01-26 14:56:17 +01:00
parent bbdae4b629
commit c95759f302
3 changed files with 214 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.prettierrc.js
View File

@ -1,6 +1,6 @@
module.exports = { module.exports = {
singleQuote: true, singleQuote: true,
printWidth: 120, printWidth: 90,
tabWidth: 4, tabWidth: 4,
semi: true, semi: true,
endOfLine: 'auto', endOfLine: 'auto',

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

@ -15,6 +15,11 @@ onMounted(() => fetch());
const entity = ref(); const entity = ref();
const entityId = toRef(props, 'id'); const entityId = toRef(props, 'id');
defineExpose({
entity,
fetch,
});
async function fetch() { async function fetch() {
const id = entityId.value; const id = entityId.value;
const { data } = await axios.get(`Clients/${id}/summary`); const { data } = await axios.get(`Clients/${id}/summary`);

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

@ -1,5 +1,5 @@
<script setup> <script setup>
import { computed } from 'vue'; import { computed, ref } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { toCurrency, toPercentage, toDate } from 'src/filters'; import { toCurrency, toPercentage, toDate } from 'src/filters';
@ -16,65 +16,116 @@ const $props = defineProps({
}); });
const entityId = computed(() => Number($props.id) || Number(route.params.id)); const entityId = computed(() => Number($props.id) || Number(route.params.id));
const summary = ref();
const customer = computed(() => summary.value.entity);
const balanceDue = computed(() => {
return (
customer.value &&
customer.value.defaulters.length &&
customer.value.defaulters[0].amount
);
});
const balanceDueWarning = computed(() => (balanceDue.value ? 'negative' : ''));
const claimRate = computed(() => {
return customer.value.claimsRatio.claimingRate * 100;
});
const priceIncreasingRate = computed(() => {
return customer.value.claimsRatio.priceIncreasing / 100;
});
const debtWarning = computed(() => {
return customer.value.debt.debt > customer.value.credit ? 'negative' : '';
});
const creditWarning = computed(() => {
const data = customer.value;
const tooMuchInsurance = data.credit > data.creditInsurance;
const noCreditInsurance = data.credit && data.creditInsurance == null;
return tooMuchInsurance || noCreditInsurance ? 'negative' : '';
});
</script> </script>
<template> <template>
<card-summary :id="entityId"> <card-summary ref="summary" :id="entityId">
<template #body="{ entity }"> <template #body="{ entity }">
<div class="col"> <div class="col">
<q-list> <q-list>
<q-item-label header class="text-h6"> <q-item-label header class="text-h6">
{{ t('customer.summary.basicData') }} {{ t('customer.summary.basicData') }}
<router-link :to="{ name: 'CustomerBasicData', params: { id: entityId } }" target="_blank"> <router-link
:to="{ name: 'CustomerBasicData', params: { id: entityId } }"
target="_blank"
>
<q-icon name="open_in_new" /> <q-icon name="open_in_new" />
</router-link> </router-link>
</q-item-label> </q-item-label>
<q-item> <q-item>
<q-item-section> <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-label>{{ entity.id }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('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-label>{{ entity.name }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('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-label>{{ entity.contact }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item v-if="entity.salesPersonUser"> <q-item v-if="entity.salesPersonUser">
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('customer.summary.salesPerson') }}</q-item-label> <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-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <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-label>{{ entity.phone }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('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-label>{{ entity.mobile }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('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-label>{{ entity.email }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item v-if="entity.contactChannel"> <q-item v-if="entity.contactChannel">
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('customer.summary.contactChannel') }}</q-item-label> <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-section>
</q-item> </q-item>
@ -87,37 +138,49 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
</q-item-label> </q-item-label>
<q-item> <q-item>
<q-item-section> <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-label>{{ entity.socialName }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('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-label>{{ entity.fi }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('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-label>{{ entity.postcode }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item v-if="entity.province"> <q-item v-if="entity.province">
<q-item-section> <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-label>{{ entity.province.name }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item v-if="entity.country"> <q-item v-if="entity.country">
<q-item-section> <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-label>{{ entity.country.country }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('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-label>{{ entity.street }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
@ -136,7 +199,11 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
/> />
</q-item> </q-item>
<q-item dense> <q-item dense>
<q-checkbox v-model="entity.isActive" :label="t('customer.summary.isActive')" disable /> <q-checkbox
v-model="entity.isActive"
:label="t('customer.summary.isActive')"
disable
/>
</q-item> </q-item>
<q-item dense> <q-item dense>
<q-checkbox <q-checkbox
@ -153,7 +220,11 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
/> />
</q-item> </q-item>
<q-item dense> <q-item dense>
<q-checkbox v-model="entity.hasToInvoice" :label="t('customer.summary.hasToInvoice')" disable /> <q-checkbox
v-model="entity.hasToInvoice"
:label="t('customer.summary.hasToInvoice')"
disable
/>
</q-item> </q-item>
<q-item dense> <q-item dense>
<q-checkbox <q-checkbox
@ -163,7 +234,11 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
/> />
</q-item> </q-item>
<q-item dense> <q-item dense>
<q-checkbox v-model="entity.isVies" :label="t('customer.summary.vies')" disable /> <q-checkbox
v-model="entity.isVies"
:label="t('customer.summary.vies')"
disable
/>
</q-item> </q-item>
</q-list> </q-list>
</div> </div>
@ -174,30 +249,48 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
</q-item-label> </q-item-label>
<q-item> <q-item>
<q-item-section> <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-label>{{ entity.payMethod.name }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('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-label>{{ entity.iban }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('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-label>{{ entity.dueDay }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item dense> <q-item dense>
<q-checkbox v-model="entity.hasLcr" :label="t('customer.summary.hasLcr')" disable /> <q-checkbox
v-model="entity.hasLcr"
:label="t('customer.summary.hasLcr')"
disable
/>
</q-item> </q-item>
<q-item dense> <q-item dense>
<q-checkbox v-model="entity.hasCoreVnl" :label="t('customer.summary.hasCoreVnl')" disable /> <q-checkbox
v-model="entity.hasCoreVnl"
:label="t('customer.summary.hasCoreVnl')"
disable
/>
</q-item> </q-item>
<q-item dense> <q-item dense>
<q-checkbox v-model="entity.hasSepaVnl" :label="t('customer.summary.hasB2BVnl')" disable /> <q-checkbox
v-model="entity.hasSepaVnl"
:label="t('customer.summary.hasB2BVnl')"
disable
/>
</q-item> </q-item>
</q-list> </q-list>
</div> </div>
@ -208,20 +301,30 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
</q-item-label> </q-item-label>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('customer.summary.addressName') }}</q-item-label> <q-item-label caption>{{
<q-item-label>{{ entity.defaultAddress.nickname }}</q-item-label> t('customer.summary.addressName')
}}</q-item-label>
<q-item-label>{{
entity.defaultAddress.nickname
}}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('customer.summary.addressCity') }}</q-item-label> <q-item-label caption>{{
t('customer.summary.addressCity')
}}</q-item-label>
<q-item-label>{{ entity.defaultAddress.city }}</q-item-label> <q-item-label>{{ entity.defaultAddress.city }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('customer.summary.addressStreet') }}</q-item-label> <q-item-label caption>{{
<q-item-label>{{ entity.defaultAddress.street }}</q-item-label> t('customer.summary.addressStreet')
}}</q-item-label>
<q-item-label>{{
entity.defaultAddress.street
}}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
</q-list> </q-list>
@ -233,12 +336,18 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
</q-item-label> </q-item-label>
<q-item> <q-item>
<q-item-section> <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-label>{{ entity.account.name }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item dense> <q-item dense>
<q-checkbox v-model="entity.account.active" :label="t('customer.summary.webAccess')" disable /> <q-checkbox
v-model="entity.account.active"
:label="t('customer.summary.webAccess')"
disable
/>
</q-item> </q-item>
</q-list> </q-list>
</div> </div>
@ -249,14 +358,22 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
</q-item-label> </q-item-label>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('customer.summary.totalGreuge') }}</q-item-label> <q-item-label caption>{{
<q-item-label>{{ toCurrency(entity.totalGreuge) }}</q-item-label> t('customer.summary.totalGreuge')
}}</q-item-label>
<q-item-label>{{
toCurrency(entity.totalGreuge)
}}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item v-if="entity.mana"> <q-item v-if="entity.mana">
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('customer.summary.mana') }}</q-item-label> <q-item-label caption>{{
<q-item-label>{{ toCurrency(entity.mana.mana) }}</q-item-label> t('customer.summary.mana')
}}</q-item-label>
<q-item-label>{{
toCurrency(entity.mana.mana)
}}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item v-if="entity.claimsRatio"> <q-item v-if="entity.claimsRatio">
@ -264,18 +381,26 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
<q-item-label caption> <q-item-label caption>
{{ t('customer.summary.priceIncreasingRate') }} {{ t('customer.summary.priceIncreasingRate') }}
</q-item-label> </q-item-label>
<q-item-label>{{ toPercentage(priceIncreasingRate) }}</q-item-label> <q-item-label>{{
toPercentage(priceIncreasingRate)
}}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item v-if="entity.averageInvoiced"> <q-item v-if="entity.averageInvoiced">
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('customer.summary.averageInvoiced') }}</q-item-label> <q-item-label caption>{{
<q-item-label>{{ toCurrency(entity.averageInvoiced.invoiced) }}</q-item-label> t('customer.summary.averageInvoiced')
}}</q-item-label>
<q-item-label>{{
toCurrency(entity.averageInvoiced.invoiced)
}}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item v-if="entity.claimsRatio"> <q-item v-if="entity.claimsRatio">
<q-item-section> <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-label>{{ toPercentage(claimRate) }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
@ -288,69 +413,97 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
</q-item-label> </q-item-label>
<q-item v-if="entity.debt"> <q-item v-if="entity.debt">
<q-item-section> <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"> <q-item-label :class="debtWarning">
{{ toCurrency(entity.debt.debt) }} {{ toCurrency(entity.debt.debt) }}
</q-item-label> </q-item-label>
</q-item-section> </q-item-section>
<q-item-section side> <q-item-section side>
<q-icon name="vn:info"> <q-icon name="vn:info">
<q-tooltip>{{ t('customer.summary.riskInfo') }}</q-tooltip> <q-tooltip>{{
t('customer.summary.riskInfo')
}}</q-tooltip>
</q-icon> </q-icon>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('customer.summary.credit') }}</q-item-label> <q-item-label caption>{{
t('customer.summary.credit')
}}</q-item-label>
<q-item-label :class="creditWarning"> <q-item-label :class="creditWarning">
{{ toCurrency(entity.credit) }} {{ toCurrency(entity.credit) }}
</q-item-label> </q-item-label>
</q-item-section> </q-item-section>
<q-item-section side> <q-item-section side>
<q-icon name="vn:info"> <q-icon name="vn:info">
<q-tooltip>{{ t('customer.summary.creditInfo') }}</q-tooltip> <q-tooltip>{{
t('customer.summary.creditInfo')
}}</q-tooltip>
</q-icon> </q-icon>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item v-if="entity.creditInsurance"> <q-item v-if="entity.creditInsurance">
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('customer.summary.securedCredit') }}</q-item-label> <q-item-label caption>{{
<q-item-label>{{ toCurrency(entity.creditInsurance) }}</q-item-label> t('customer.summary.securedCredit')
}}</q-item-label>
<q-item-label>{{
toCurrency(entity.creditInsurance)
}}</q-item-label>
</q-item-section> </q-item-section>
<q-item-section side> <q-item-section side>
<q-icon name="vn:info"> <q-icon name="vn:info">
<q-tooltip>{{ t('customer.summary.securedCreditInfo') }}</q-tooltip> <q-tooltip>{{
t('customer.summary.securedCreditInfo')
}}</q-tooltip>
</q-icon> </q-icon>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('customer.summary.balance') }}</q-item-label> <q-item-label caption>{{
<q-item-label>{{ toCurrency(entity.sumRisk) || toCurrency(0) }}</q-item-label> t('customer.summary.balance')
}}</q-item-label>
<q-item-label>{{
toCurrency(entity.sumRisk) || toCurrency(0)
}}</q-item-label>
</q-item-section> </q-item-section>
<q-item-section side> <q-item-section side>
<q-icon name="vn:info"> <q-icon name="vn:info">
<q-tooltip>{{ t('customer.summary.balanceInfo') }}</q-tooltip> <q-tooltip>{{
t('customer.summary.balanceInfo')
}}</q-tooltip>
</q-icon> </q-icon>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item v-if="entity.defaulters"> <q-item v-if="entity.defaulters">
<q-item-section> <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"> <q-item-label :class="balanceDueWarning">
{{ toCurrency(balanceDue) }} {{ toCurrency(balanceDue) }}
</q-item-label> </q-item-label>
</q-item-section> </q-item-section>
<q-item-section side> <q-item-section side>
<q-icon name="vn:info"> <q-icon name="vn:info">
<q-tooltip>{{ t('customer.summary.balanceDueInfo') }}</q-tooltip> <q-tooltip>{{
t('customer.summary.balanceDueInfo')
}}</q-tooltip>
</q-icon> </q-icon>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item v-if="entity.recovery"> <q-item v-if="entity.recovery">
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('customer.summary.recoverySince') }}</q-item-label> <q-item-label caption>{{
<q-item-label>{{ toDate(entity.recovery.started) }}</q-item-label> t('customer.summary.recoverySince')
}}</q-item-label>
<q-item-label>{{
toDate(entity.recovery.started)
}}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
</q-list> </q-list>