From a41d5dae3e735860c9f7a71aebddf6ccfbeee10f Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 24 Jan 2023 14:46:30 +0100
Subject: [PATCH] refactor(card): refresh data when state params changes refs:
 #4909

---
 src/components/ui/CardDescriptor.vue          | 68 +++++++++++--------
 .../Customer/Card/CustomerDescriptor.vue      | 53 ++++++---------
 2 files changed, 60 insertions(+), 61 deletions(-)

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index d80c0498c..f905d58b0 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -1,23 +1,47 @@
 <script setup>
-import { useSlots } from 'vue';
+import { onMounted, useSlots, computed, ref, toRef, watch } from 'vue';
 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: {
         type: String,
         required: true,
     },
-    data: {
-        type: Object,
-        required: true,
-    },
     description: {
         type: String,
-        required: true,
+        required: false,
+        default: '',
     },
 });
+
 const slots = useSlots();
 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>
 
 <template>
@@ -28,7 +52,7 @@ const { t } = useI18n();
                     <q-tooltip>{{ t('components.cardDescriptor.mainList') }}</q-tooltip>
                 </q-btn>
             </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-tooltip>{{ t('components.cardDescriptor.summary') }}</q-tooltip>
                 </q-btn>
@@ -43,37 +67,21 @@ const { t } = useI18n();
                 </q-menu>
             </q-btn>
         </div>
-
-        <div v-if="$props.data" class="body q-py-sm">
+        <div v-if="entity" class="body q-py-sm">
             <q-list>
                 <q-item-label header class="ellipsis text-h5" :lines="1">
-                    {{ $props.description }}
-                    <q-tooltip>{{ $props.description }}</q-tooltip>
+                    {{ description }}
+                    <q-tooltip>{{ description }}</q-tooltip>
                 </q-item-label>
                 <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-list>
-            <slot name="body" />
+            <slot name="body" :entity="entity" />
         </div>
 
         <!-- Skeleton -->
-        <div id="descriptor-skeleton" v-if="!$props.data">
-            <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>
+        <skeleton-descriptor v-if="!entity" />
     </div>
 </template>
 
diff --git a/src/pages/Customer/Card/CustomerDescriptor.vue b/src/pages/Customer/Card/CustomerDescriptor.vue
index 778c5071d..68f239e35 100644
--- a/src/pages/Customer/Card/CustomerDescriptor.vue
+++ b/src/pages/Customer/Card/CustomerDescriptor.vue
@@ -1,89 +1,80 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue';
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toCurrency } from 'src/filters';
-import axios from 'axios';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
-import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 
 const $props = defineProps({
     id: {
         type: Number,
         required: false,
-        default: null,
+        default: 0,
     },
 });
 
-onMounted(async () => {
-    await fetch();
-});
-
 const route = useRoute();
 const { t } = useI18n();
 
 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>
 
 <template>
-    <skeleton-descriptor v-if="!customer" />
-    <card-descriptor v-if="customer" module="Customer" :data="customer" :description="customer.name">
+    <card-descriptor ref="descriptor" :id="entityId" module="Customer">
         <!-- <template #menu>
             <q-item clickable v-ripple>Option 1</q-item>
             <q-item clickable v-ripple>Option 2</q-item>
         </template> -->
-        <template #body>
+        <template #body="{ entity }">
             <q-list>
-                <q-item v-if="customer.salesPersonUser">
+                <q-item v-if="entity.salesPersonUser">
                     <q-item-section>
                         <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>
                 <q-item>
                     <q-item-section>
                         <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-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>
                 <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>{{ customer.payMethod.name }}</q-item-label>
+                        <q-item-label>{{ entity.payMethod.name }}</q-item-label>
                     </q-item-section>
                     <q-item-section>
                         <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>
             </q-list>
             <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-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-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-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-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-icon>
             </q-card-actions>