verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 99 Releases Wiki Activity

refactor(card): refresh data when state params changes
gitea/salix-front/pipeline/head This commit looks good Details 

refs: #4909
This commit is contained in:
Joan Sanchez 2023-01-24 14:46:30 +01:00
parent 70ebb0f286
commit a41d5dae3e
2 changed files with 60 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/ui/CardDescriptor.vue
View File

@ -1,23 +1,47 @@
<script setup> <script setup>
import { useSlots } from 'vue'; import { onMounted, useSlots, computed, ref, toRef, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import axios from 'axios';
import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
defineProps({ const props = defineProps({
id: {
type: Number,
required: true,
},
module: { module: {
type: String, type: String,
required: true, required: true,
}, },
data: {
type: Object,
required: true,
},
description: { description: {
type: String, type: String,
required: true, required: false,
default: '',
}, },
}); });
const slots = useSlots(); const slots = useSlots();
const { t } = useI18n(); const { t } = useI18n();
onMounted(async () => {
await 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`);
entity.value = data;
}
watch(entityId, async () => {
entity.value = null;
await fetch();
});
</script> </script>
<template> <template>
@ -28,7 +52,7 @@ const { t } = useI18n();
<q-tooltip>{{ t('components.cardDescriptor.mainList') }}</q-tooltip> <q-tooltip>{{ t('components.cardDescriptor.mainList') }}</q-tooltip>
</q-btn> </q-btn>
</router-link> </router-link>
<router-link :to="{ name: `${module}Summary`, params: { id: data.id } }"> <router-link :to="{ name: `${module}Summary`, params: { id: entityId } }">
<q-btn round flat dense size="md" icon="launch" color="white"> <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> </q-btn>
@ -43,37 +67,21 @@ const { t } = useI18n();
</q-menu> </q-menu>
</q-btn> </q-btn>
</div> </div>
<div v-if="entity" class="body q-py-sm">
<div v-if="$props.data" class="body q-py-sm">
<q-list> <q-list>
<q-item-label header class="ellipsis text-h5" :lines="1"> <q-item-label header class="ellipsis text-h5" :lines="1">
{{ $props.description }} {{ description }}
<q-tooltip>{{ $props.description }}</q-tooltip> <q-tooltip>{{ description }}</q-tooltip>
</q-item-label> </q-item-label>
<q-item dense> <q-item dense>
<q-item-label class="text-subtitle2" caption>#{{ data.id }}</q-item-label> <q-item-label class="text-subtitle2" caption>#{{ entity.id }}</q-item-label>
</q-item> </q-item>
</q-list> </q-list>
<slot name="body" /> <slot name="body" :entity="entity" />
</div> </div>
<!-- Skeleton --> <!-- Skeleton -->
<div id="descriptor-skeleton" v-if="!$props.data"> <skeleton-descriptor v-if="!entity" />
<div class="col q-pl-sm q-pa-sm">
<q-skeleton type="text" square height="45px" />
<q-skeleton type="text" square height="18px" />
<q-skeleton type="text" square height="18px" />
<q-skeleton type="text" square height="18px" />
</div>
<q-card-actions>
<q-skeleton size="40px" />
<q-skeleton size="40px" />
<q-skeleton size="40px" />
<q-skeleton size="40px" />
<q-skeleton size="40px" />
</q-card-actions>
</div>
</div> </div>
</template> </template>

53
src/pages/Customer/Card/CustomerDescriptor.vue
View File

@ -1,89 +1,80 @@
<script setup> <script setup>
import { onMounted, ref, 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 { toCurrency } from 'src/filters'; import { toCurrency } from 'src/filters';
import axios from 'axios';
import CardDescriptor from 'components/ui/CardDescriptor.vue'; import CardDescriptor from 'components/ui/CardDescriptor.vue';
import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
const $props = defineProps({ const $props = defineProps({
id: { id: {
type: Number, type: Number,
required: false, required: false,
default: null, default: 0,
}, },
}); });
onMounted(async () => {
await fetch();
});
const route = useRoute(); const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
const entityId = computed(() => { const entityId = computed(() => {
return $props.id || route.params.id; return $props.id || Number(route.params.id);
}); });
const customer = ref();
async function fetch() {
const { data } = await axios.get(`Clients/${entityId.value}/getCard`);
if (data) customer.value = data;
}
</script> </script>
<template> <template>
<skeleton-descriptor v-if="!customer" /> <card-descriptor ref="descriptor" :id="entityId" module="Customer">
<card-descriptor v-if="customer" module="Customer" :data="customer" :description="customer.name">
<!-- <template #menu> <!-- <template #menu>
<q-item clickable v-ripple>Option 1</q-item> <q-item clickable v-ripple>Option 1</q-item>
<q-item clickable v-ripple>Option 2</q-item> <q-item clickable v-ripple>Option 2</q-item>
</template> --> </template> -->
<template #body> <template #body="{ entity }">
<q-list> <q-list>
<q-item v-if="customer.salesPersonUser"> <q-item v-if="entity.salesPersonUser">
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('customer.card.salesPerson') }}</q-item-label> <q-item-label caption>{{ t('customer.card.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.card.credit') }}</q-item-label> <q-item-label caption>{{ t('customer.card.credit') }}</q-item-label>
<q-item-label>{{ toCurrency(customer.credit) }}</q-item-label> <q-item-label>{{ toCurrency(entity.credit) }}</q-item-label>
</q-item-section> </q-item-section>
<q-item-section> <q-item-section>
<q-item-label caption>{{ t('customer.card.securedCredit') }}</q-item-label> <q-item-label caption>{{ t('customer.card.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> </q-item>
<q-item> <q-item>
<q-item-section v-if="customer.payMethod"> <q-item-section v-if="entity.payMethod">
<q-item-label caption>{{ t('customer.card.payMethod') }}</q-item-label> <q-item-label caption>{{ t('customer.card.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-section> <q-item-section>
<q-item-label caption>{{ t('customer.card.debt') }}</q-item-label> <q-item-label caption>{{ t('customer.card.debt') }}</q-item-label>
<q-item-label>{{ toCurrency(customer.debt) }}</q-item-label> <q-item-label>{{ toCurrency(entity.debt) }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
</q-list> </q-list>
<q-card-actions class="q-gutter-md"> <q-card-actions class="q-gutter-md">
<q-icon v-if="customer.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-tooltip>{{ t('customer.card.isDisabled') }}</q-tooltip>
</q-icon> </q-icon>
<q-icon v-if="customer.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-tooltip>{{ t('customer.card.isFrozen') }}</q-tooltip>
</q-icon> </q-icon>
<q-icon v-if="customer.debt > customer.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-tooltip>{{ t('customer.card.hasDebt') }}</q-tooltip>
</q-icon> </q-icon>
<q-icon v-if="customer.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-tooltip>{{ t('customer.card.notChecked') }}</q-tooltip>
</q-icon> </q-icon>
<q-icon v-if="customer.account.active == false" name="vn:noweb" size="xs" color="primary"> <q-icon
v-if="entity.account && entity.account.active == false"
name="vn:noweb"
size="xs"
color="primary"
>
<q-tooltip>{{ t('customer.card.noWebAccess') }}</q-tooltip> <q-tooltip>{{ t('customer.card.noWebAccess') }}</q-tooltip>
</q-icon> </q-icon>
</q-card-actions> </q-card-actions>