Add reactivity to supplier descriptor icons

src/components/FormModel.vue

@@ -59,6 +59,10 @@ const $props = defineProps({
         type: Function,
         default: null,
     },
+    clearStoreOnUnmount: {
+        type: Boolean,
+        default: true,
+    },
 });
 
 const emit = defineEmits(['onFetch', 'onDataSaved']);
@@ -91,7 +95,12 @@ onMounted(async () => {
 });
 
 onUnmounted(() => {
-    state.unset($props.model);
+    // Restauramos los datos originales en el store si se realizaron cambios en el formulario pero no se guardaron, evitando modificaciones erróneas.
+    if (hasChanges.value) {
+        state.set($props.model, originalData.value);
+        return;
+    }
+    if ($props.clearStoreOnUnmount) state.unset($props.model);
 });
 
 const isLoading = ref(false);

src/components/ui/CardDescriptor.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { useState } from 'src/composables/useState';
 
 const $props = defineProps({
     url: {
@@ -35,6 +36,8 @@ const $props = defineProps({
         default: null,
     },
 });
+
+const state = useState();
 const slots = useSlots();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
@@ -64,6 +67,7 @@ async function getData() {
     isLoading.value = true;
     try {
         const { data } = await arrayData.fetch({ append: false, updateRouter: false });
+        state.set($props.dataKey, data);
         emit('onFetch', data);
     } finally {
         isLoading.value = false;

src/pages/Supplier/Card/SupplierBasicData.vue

@@ -26,6 +26,7 @@ const workersOptions = ref([]);
         :url-update="`Suppliers/${route.params.id}`"
         model="supplier"
         auto-load
+        :clear-store-on-unmount="false"
     >
         <template #form="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">

src/pages/Supplier/Card/SupplierBillingData.vue

@@ -33,6 +33,7 @@ const formatPayDems = (data) => {
         :url-update="`Suppliers/${route.params.id}`"
         model="supplier"
         auto-load
+        :clear-store-on-unmount="false"
     >
         <template #form="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">

src/pages/Supplier/Card/SupplierDescriptor.vue

@@ -9,6 +9,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import { toDateString } from 'src/filters';
 import useCardDescription from 'src/composables/useCardDescription';
 import { getUrl } from 'src/composables/getUrl';
+import { useState } from 'src/composables/useState';
 
 const $props = defineProps({
     id: {
@@ -21,6 +22,7 @@ const $props = defineProps({
 const route = useRoute();
 const { t } = useI18n();
 const url = ref();
+const state = useState();
 
 const filter = {
     fields: [
@@ -71,6 +73,8 @@ const setData = (entity) => {
     data.value = useCardDescription(entity.ref, entity.id);
 };
 
+const currentSupplier = computed(() => state.get('supplier'));
+
 const getEntryQueryParams = (supplier) => {
     if (!supplier) return null;
 
@@ -101,7 +105,7 @@ const getEntryQueryParams = (supplier) => {
         :subtitle="data.subtitle"
         :filter="filter"
         @on-fetch="setData"
-        data-key="Supplier"
+        data-key="supplier"
     >
         <template #header-extra-action>
             <QBtn
@@ -133,10 +137,10 @@ const getEntryQueryParams = (supplier) => {
             <VnLv :label="t('supplier.summary.payDay')" :value="entity.payDay" />
             <VnLv :label="t('supplier.summary.account')" :value="entity.account" />
         </template>
-        <template #icons="{ entity }">
+        <template #icons>
-            <QCardActions class="q-gutter-x-md">
+            <QCardActions v-if="currentSupplier" class="q-gutter-x-md">
                 <QIcon
-                    v-if="!entity.isActive"
+                    v-if="!currentSupplier.isActive"
                     name="vn:disabled"
                     color="primary"
                     size="xs"
@@ -144,7 +148,7 @@ const getEntryQueryParams = (supplier) => {
                     <QTooltip>{{ t('Inactive supplier') }}</QTooltip>
                 </QIcon>
                 <QIcon
-                    v-if="!entity.isSerious"
+                    v-if="!currentSupplier.isSerious"
                     name="vn:supplierfalse"
                     color="primary"
                     size="xs"

src/pages/Supplier/Card/SupplierFiscalData.vue

@@ -53,6 +53,7 @@ function handleLocation(data, location) {
         :url-update="`Suppliers/${route.params.id}/updateFiscalData`"
         model="supplier"
         auto-load
+        :clear-store-on-unmount="false"
     >
         <template #form="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">