forked from verdnatura/salix-front
Updated summary with computed data
This commit is contained in:
parent
bbdae4b629
commit
c95759f302
|
|
@ -1,6 +1,6 @@
|
|||
module.exports = {
|
||||
singleQuote: true,
|
||||
printWidth: 120,
|
||||
printWidth: 90,
|
||||
tabWidth: 4,
|
||||
semi: true,
|
||||
endOfLine: 'auto',
|
||||
|
|
|
|||
|
|
@ -15,6 +15,11 @@ onMounted(() => fetch());
|
|||
const entity = ref();
|
||||
const entityId = toRef(props, 'id');
|
||||
|
||||
defineExpose({
|
||||
entity,
|
||||
fetch,
|
||||
});
|
||||
|
||||
async function fetch() {
|
||||
const id = entityId.value;
|
||||
const { data } = await axios.get(`Clients/${id}/summary`);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
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 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>
|
||||
|
||||
<template>
|
||||
<card-summary :id="entityId">
|
||||
<card-summary ref="summary" :id="entityId">
|
||||
<template #body="{ entity }">
|
||||
<div class="col">
|
||||
<q-list>
|
||||
<q-item-label header class="text-h6">
|
||||
{{ 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" />
|
||||
</router-link>
|
||||
</q-item-label>
|
||||
|
||||
<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>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.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.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>
|
||||
<q-item-label caption>{{
|
||||
t('customer.summary.contactChannel')
|
||||
}}</q-item-label>
|
||||
<q-item-label>{{ entity.contactChannel.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
|
@ -87,37 +138,49 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
|
|||
</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>
|
||||
|
|
@ -136,7 +199,11 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
|
|||
/>
|
||||
</q-item>
|
||||
<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 dense>
|
||||
<q-checkbox
|
||||
|
|
@ -153,7 +220,11 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
|
|||
/>
|
||||
</q-item>
|
||||
<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 dense>
|
||||
<q-checkbox
|
||||
|
|
@ -163,7 +234,11 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
|
|||
/>
|
||||
</q-item>
|
||||
<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-list>
|
||||
</div>
|
||||
|
|
@ -174,30 +249,48 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
|
|||
</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>
|
||||
<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 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 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-list>
|
||||
</div>
|
||||
|
|
@ -208,20 +301,30 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
|
|||
</q-item-label>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.summary.addressName') }}</q-item-label>
|
||||
<q-item-label>{{ entity.defaultAddress.nickname }}</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 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>
|
||||
|
|
@ -233,12 +336,18 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
|
|||
</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>
|
||||
<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-list>
|
||||
</div>
|
||||
|
|
@ -249,14 +358,22 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
|
|||
</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">
|
||||
|
|
@ -264,18 +381,26 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
|
|||
<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>
|
||||
|
|
@ -288,69 +413,97 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
|
|||
</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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue