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

Refresh FormModel on state changes

This commit is contained in:
Joan Sanchez 2023-01-26 14:29:01 +01:00
parent 37c91f47b6
commit bbdae4b629
4 changed files with 372 additions and 499 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/FormModel.vue
View File

@ -1,9 +1,8 @@
<script setup> <script setup>
import axios from 'axios';
import { onMounted, onUnmounted, computed, ref, watch } from 'vue'; import { onMounted, onUnmounted, computed, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import axios from 'axios';
import { useState } from 'src/composables/useState'; import { useState } from 'src/composables/useState';
import { useValidator } from 'src/composables/useValidator'; import { useValidator } from 'src/composables/useValidator';
import SkeletonForm from 'components/ui/SkeletonForm.vue'; import SkeletonForm from 'components/ui/SkeletonForm.vue';
@ -44,6 +43,7 @@ const isLoading = ref(false);
const hasChanges = ref(false); const hasChanges = ref(false);
const formData = computed(() => state.get($props.model)); const formData = computed(() => state.get($props.model));
const originalData = ref(); const originalData = ref();
const formUrl = computed(() => $props.url);
async function fetch() { async function fetch() {
const { data } = await axios.get($props.url, { const { data } = await axios.get($props.url, {
@ -91,6 +91,12 @@ function filter(value, update, filterOptions) {
} }
); );
} }
watch(formUrl, async () => {
originalData.value = null;
reset();
fetch();
});
</script> </script>
<template> <template>
<q-banner v-if="hasChanges" class="text-white bg-warning"> <q-banner v-if="hasChanges" class="text-white bg-warning">

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

@ -1,26 +1,19 @@
<script setup> <script setup>
import { onMounted, toRef, ref, watch } from 'vue'; import { onMounted, toRef, ref, watch } from 'vue';
import axios from 'axios'; import axios from 'axios';
import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
const props = defineProps({ const props = defineProps({
id: { id: {
type: Number, type: Number,
required: true, required: true,
}, },
description: {
type: String,
required: false,
default: '',
},
}); });
onMounted(() => fetch()); onMounted(() => fetch());
const entity = ref(); const entity = ref();
const entityId = toRef(props, 'id'); const entityId = toRef(props, 'id');
// const description = computed(() => {
// return props.description || entity.value.name;
// });
async function fetch() { async function fetch() {
const id = entityId.value; const id = entityId.value;
@ -35,25 +28,36 @@ watch(entityId, async () => {
</script> </script>
<template> <template>
<div class="summary container">
<q-card>
<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>
</div>
<div class="row q-pa-md q-col-gutter-md q-mb-md">
<slot name="body" :entity="entity" /> <slot name="body" :entity="entity" />
</div>
</template>
</q-card>
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss">
.container { .summary.container {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.q-card { .summary {
.q-card {
width: 100%; width: 100%;
max-width: 1200px; max-width: 1200px;
} }
.negative { .negative {
color: red; color: red;
} }
.summary {
.q-list { .q-list {
.q-item__label--header { .q-item__label--header {
display: flex; display: flex;

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

@ -28,6 +28,7 @@ $color-spacer: rgba(255, 255, 255, 0.3);
$border-thin-light: 1px solid $color-spacer-light; $border-thin-light: 1px solid $color-spacer-light;
$dark-shadow-color: #000; $dark-shadow-color: #000;
$dark: #3c3b3b;
$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;

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

@ -1,16 +1,12 @@
<script setup> <script setup>
import { onMounted, computed } from 'vue'; import { computed } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
// import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
// import axios from 'axios'; 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 SkeletonSummary from 'components/ui/SkeletonSummary.vue';
onMounted(() => fetch());
const route = useRoute(); const route = useRoute();
// const { t } = useI18n(); const { t } = useI18n();
const $props = defineProps({ const $props = defineProps({
id: { id: {
@ -19,69 +15,17 @@ const $props = defineProps({
}, },
}); });
const entityId = computed(() => $props.id || route.params.id); const entityId = computed(() => Number($props.id) || Number(route.params.id));
// const customer = ref(null);
// function fetch() {
// const id = entityId.value;
// axios.get(`Clients/${id}/summary`).then(({ data }) => {
// customer.value = data;
// });
// }
// const balanceDue = computed(() => {
// return customer.value.defaulters.length && customer.value.defaulters[0].amount;
// });
// const balanceDueWarning = computed(() => (balanceDue.value ? 'negative' : ''));
// const claimRate = computed(() => {
// const data = customer.value;
// return data.claimsRatio.claimingRate * 100;
// });
// const priceIncreasingRate = computed(() => {
// const data = customer.value;
// return data.claimsRatio.priceIncreasing / 100;
// });
// const debtWarning = computed(() => {
// const data = customer.value;
// return data.debt.debt > data.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 :id="entityId">
<template #body="{ entity }"> <template #body="{ entity }">
{{ entity }}
</template>
</card-summary>
<!-- <div class="summary container">
<q-card>
<skeleton-summary v-if="!customer" />
<template v-if="customer">
<div class="header bg-primary q-pa-sm q-mb-md">{{ customer.id }} - {{ customer.name }}</div>
<div class="row q-pa-md q-col-gutter-md q-mb-md">
<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 <router-link :to="{ name: 'CustomerBasicData', params: { id: entityId } }" target="_blank">
: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>
@ -89,49 +33,49 @@ const entityId = computed(() => $props.id || route.params.id);
<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>{{ customer.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>{{ customer.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>{{ customer.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="customer.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>{{ customer.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>{{ customer.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>{{ customer.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>{{ customer.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="customer.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>{{ customer.contactChannel.name }}</q-item-label> <q-item-label>{{ entity.contactChannel.name }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
</q-list> </q-list>
@ -144,37 +88,37 @@ const entityId = computed(() => $props.id || route.params.id);
<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>{{ customer.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>{{ customer.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>{{ customer.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="customer.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>{{ customer.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="customer.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>{{ customer.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>{{ customer.street }}</q-item-label> <q-item-label>{{ entity.street }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
</q-list> </q-list>
@ -186,48 +130,40 @@ const entityId = computed(() => $props.id || route.params.id);
</q-item-label> </q-item-label>
<q-item dense> <q-item dense>
<q-checkbox <q-checkbox
v-model="customer.isEqualizated" v-model="entity.isEqualizated"
:label="t('customer.summary.isEqualizated')" :label="t('customer.summary.isEqualizated')"
disable disable
/> />
</q-item> </q-item>
<q-item dense> <q-item dense>
<q-checkbox <q-checkbox v-model="entity.isActive" :label="t('customer.summary.isActive')" disable />
v-model="customer.isActive"
:label="t('customer.summary.isActive')"
disable
/>
</q-item> </q-item>
<q-item dense> <q-item dense>
<q-checkbox <q-checkbox
v-model="customer.hasToInvoiceByAddress" v-model="entity.hasToInvoiceByAddress"
:label="t('customer.summary.invoiceByAddress')" :label="t('customer.summary.invoiceByAddress')"
disable disable
/> />
</q-item> </q-item>
<q-item dense> <q-item dense>
<q-checkbox <q-checkbox
v-model="customer.isTaxDataChecked" v-model="entity.isTaxDataChecked"
:label="t('customer.summary.verifiedData')" :label="t('customer.summary.verifiedData')"
disable disable
/> />
</q-item> </q-item>
<q-item dense> <q-item dense>
<q-checkbox <q-checkbox v-model="entity.hasToInvoice" :label="t('customer.summary.hasToInvoice')" disable />
v-model="customer.hasToInvoice"
:label="t('customer.summary.hasToInvoice')"
disable
/>
</q-item> </q-item>
<q-item dense> <q-item dense>
<q-checkbox <q-checkbox
v-model="customer.isToBeMailed" v-model="entity.isToBeMailed"
:label="t('customer.summary.notifyByEmail')" :label="t('customer.summary.notifyByEmail')"
disable disable
/> />
</q-item> </q-item>
<q-item dense> <q-item dense>
<q-checkbox v-model="customer.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>
@ -239,41 +175,33 @@ const entityId = computed(() => $props.id || route.params.id);
<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>{{ customer.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>{{ customer.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>{{ customer.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="customer.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 <q-checkbox v-model="entity.hasCoreVnl" :label="t('customer.summary.hasCoreVnl')" disable />
v-model="customer.hasCoreVnl"
:label="t('customer.summary.hasCoreVnl')"
disable
/>
</q-item> </q-item>
<q-item dense> <q-item dense>
<q-checkbox <q-checkbox v-model="entity.hasSepaVnl" :label="t('customer.summary.hasB2BVnl')" disable />
v-model="customer.hasSepaVnl"
:label="t('customer.summary.hasB2BVnl')"
disable
/>
</q-item> </q-item>
</q-list> </q-list>
</div> </div>
<div class="col" v-if="customer.defaultAddress"> <div class="col" v-if="entity.defaultAddress">
<q-list> <q-list>
<q-item-label header class="text-h6"> <q-item-label header class="text-h6">
{{ t('customer.summary.consignee') }} {{ t('customer.summary.consignee') }}
@ -281,24 +209,24 @@ const entityId = computed(() => $props.id || route.params.id);
<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>{{ t('customer.summary.addressName') }}</q-item-label>
<q-item-label>{{ customer.defaultAddress.nickname }}</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>{{ customer.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>{{ t('customer.summary.addressStreet') }}</q-item-label>
<q-item-label>{{ customer.defaultAddress.street }}</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>
</div> </div>
<div class="col" v-if="customer.account"> <div class="col" v-if="entity.account">
<q-list> <q-list>
<q-item-label header class="text-h6"> <q-item-label header class="text-h6">
{{ t('customer.summary.webAccess') }} {{ t('customer.summary.webAccess') }}
@ -306,15 +234,11 @@ const entityId = computed(() => $props.id || route.params.id);
<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>{{ customer.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 <q-checkbox v-model="entity.account.active" :label="t('customer.summary.webAccess')" disable />
v-model="customer.account.active"
:label="t('customer.summary.webAccess')"
disable
/>
</q-item> </q-item>
</q-list> </q-list>
</div> </div>
@ -326,16 +250,16 @@ const entityId = computed(() => $props.id || route.params.id);
<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>{{ t('customer.summary.totalGreuge') }}</q-item-label>
<q-item-label>{{ toCurrency(customer.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="customer.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>{{ t('customer.summary.mana') }}</q-item-label>
<q-item-label>{{ toCurrency(customer.mana.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="customer.claimsRatio"> <q-item v-if="entity.claimsRatio">
<q-item-section> <q-item-section>
<q-item-label caption> <q-item-label caption>
{{ t('customer.summary.priceIncreasingRate') }} {{ t('customer.summary.priceIncreasingRate') }}
@ -343,13 +267,13 @@ const entityId = computed(() => $props.id || route.params.id);
<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="customer.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>{{ t('customer.summary.averageInvoiced') }}</q-item-label>
<q-item-label>{{ toCurrency(customer.averageInvoiced.invoiced) }}</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="customer.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>
@ -362,11 +286,11 @@ const entityId = computed(() => $props.id || route.params.id);
<q-item-label header class="text-h6"> <q-item-label header class="text-h6">
{{ t('customer.summary.financialData') }} {{ t('customer.summary.financialData') }}
</q-item-label> </q-item-label>
<q-item v-if="customer.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(customer.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>
@ -379,7 +303,7 @@ const entityId = computed(() => $props.id || route.params.id);
<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(customer.credit) }} {{ toCurrency(entity.credit) }}
</q-item-label> </q-item-label>
</q-item-section> </q-item-section>
<q-item-section side> <q-item-section side>
@ -388,10 +312,10 @@ const entityId = computed(() => $props.id || route.params.id);
</q-icon> </q-icon>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item v-if="customer.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>{{ t('customer.summary.securedCredit') }}</q-item-label>
<q-item-label>{{ toCurrency(customer.creditInsurance) }}</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">
@ -402,7 +326,7 @@ const entityId = computed(() => $props.id || route.params.id);
<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>{{ t('customer.summary.balance') }}</q-item-label>
<q-item-label>{{ toCurrency(customer.sumRisk) || toCurrency(0) }}</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">
@ -410,7 +334,7 @@ const entityId = computed(() => $props.id || route.params.id);
</q-icon> </q-icon>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item v-if="customer.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">
@ -423,76 +347,14 @@ const entityId = computed(() => $props.id || route.params.id);
</q-icon> </q-icon>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item v-if="customer.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>{{ t('customer.summary.recoverySince') }}</q-item-label>
<q-item-label>{{ toDate(customer.recovery.started) }}</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>
</div> </div>
</div>
</template> </template>
</q-card> </card-summary>
</div> -->
</template> </template>
<style lang="scss" scoped>
.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>