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

Added CardSummary

This commit is contained in:
Joan Sanchez 2023-01-24 14:58:57 +01:00
parent a41d5dae3e
commit 37c91f47b6
2 changed files with 143 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
src/components/ui/CardSummary.vue Normal file
View File

@ -0,0 +1,100 @@
<script setup>
import { onMounted, toRef, ref, watch } from 'vue';
import axios from 'axios';
const props = defineProps({
id: {
type: Number,
required: true,
},
description: {
type: String,
required: false,
default: '',
},
});
onMounted(() => fetch());
const entity = ref();
const entityId = toRef(props, 'id');
// const description = computed(() => {
// return props.description || entity.value.name;
// });
async function fetch() {
const id = entityId.value;
const { data } = await axios.get(`Clients/${id}/summary`);
entity.value = data;
}
watch(entityId, async () => {
entity.value = null;
fetch();
});
</script>
<template>
<slot name="body" :entity="entity" />
</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>

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

@ -1,15 +1,16 @@
<script setup> <script setup>
import { onMounted, ref, computed } from 'vue'; import { onMounted, 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 axios from 'axios';
import { toCurrency, toPercentage, toDate } from 'src/filters'; // import { toCurrency, toPercentage, toDate } from 'src/filters';
import SkeletonSummary from 'components/ui/SkeletonSummary.vue'; import CardSummary from 'components/ui/CardSummary.vue';
// import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
onMounted(() => fetch()); onMounted(() => fetch());
const route = useRoute(); const route = useRoute();
const { t } = useI18n(); // const { t } = useI18n();
const $props = defineProps({ const $props = defineProps({
id: { id: {
@ -20,49 +21,54 @@ const $props = defineProps({
const entityId = computed(() => $props.id || route.params.id); const entityId = computed(() => $props.id || route.params.id);
const customer = ref(null); // const customer = ref(null);
function fetch() { // function fetch() {
const id = entityId.value; // const id = entityId.value;
axios.get(`Clients/${id}/summary`).then(({ data }) => { // axios.get(`Clients/${id}/summary`).then(({ data }) => {
customer.value = data; // customer.value = data;
}); // });
} // }
const balanceDue = computed(() => { // const balanceDue = computed(() => {
return customer.value.defaulters.length && customer.value.defaulters[0].amount; // return customer.value.defaulters.length && customer.value.defaulters[0].amount;
}); // });
const balanceDueWarning = computed(() => (balanceDue.value ? 'negative' : '')); // const balanceDueWarning = computed(() => (balanceDue.value ? 'negative' : ''));
const claimRate = computed(() => { // const claimRate = computed(() => {
const data = customer.value; // const data = customer.value;
return data.claimsRatio.claimingRate * 100; // return data.claimsRatio.claimingRate * 100;
}); // });
const priceIncreasingRate = computed(() => { // const priceIncreasingRate = computed(() => {
const data = customer.value; // const data = customer.value;
return data.claimsRatio.priceIncreasing / 100; // return data.claimsRatio.priceIncreasing / 100;
}); // });
const debtWarning = computed(() => { // const debtWarning = computed(() => {
const data = customer.value; // const data = customer.value;
return data.debt.debt > data.credit ? 'negative' : ''; // return data.debt.debt > data.credit ? 'negative' : '';
}); // });
const creditWarning = computed(() => { // const creditWarning = computed(() => {
const data = customer.value; // const data = customer.value;
const tooMuchInsurance = data.credit > data.creditInsurance; // const tooMuchInsurance = data.credit > data.creditInsurance;
const noCreditInsurance = data.credit && data.creditInsurance == null; // const noCreditInsurance = data.credit && data.creditInsurance == null;
return tooMuchInsurance || noCreditInsurance ? 'negative' : ''; // return tooMuchInsurance || noCreditInsurance ? 'negative' : '';
}); // });
</script> </script>
<template> <template>
<div class="summary container"> <card-summary :id="entityId">
<template #body="{ entity }">
{{ entity }}
</template>
</card-summary>
<!-- <div class="summary container">
<q-card> <q-card>
<skeleton-summary v-if="!customer" /> <skeleton-summary v-if="!customer" />
<template v-if="customer"> <template v-if="customer">
@ -428,7 +434,7 @@ const creditWarning = computed(() => {
</div> </div>
</template> </template>
</q-card> </q-card>
</div> </div> -->
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {