Solucion a comentarios 21

src/pages/Customer/Card/CustomerAddress.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { onBeforeMount, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
@@ -47,9 +47,39 @@ const addressFilter = {
     ],
 };
 
-const setRows = (data) => {
+onBeforeMount(() => {
+    const { id } = route.params;
+    getAddressesData(id);
+    getClientData(id);
+});
+
+watch(
+    () => route.params.id,
+    (newValue) => {
+        getAddressesData(newValue);
+        getClientData(newValue);
+    }
+);
+
+const getAddressesData = async (id) => {
+    try {
+        const { data } = await axios.get(`Clients/${id}/addresses`, {
+            params: { filter: JSON.stringify(addressFilter) },
+        });
         addresses.value = data;
         sortAddresses();
+    } catch (error) {
+        return error;
+    }
+};
+
+const getClientData = async (id) => {
+    try {
+        const { data } = await axios.get(`Clients/${id}`);
+        client.value = data;
+    } catch (error) {
+        return error;
+    }
 };
 
 const setProvince = (provinceFk) => {
@@ -97,17 +127,6 @@ const toCustomerAddressEdit = (addressId) => {
 </script>
 
 <template>
-    <FetchData
-        @on-fetch="setRows"
-        auto-load
-        :filter="addressFilter"
-        :url="`Clients/${route.params.id}/addresses`"
-    />
-    <FetchData
-        @on-fetch="(data) => (client = data)"
-        auto-load
-        :url="`Clients/${route.params.id}`"
-    />
     <FetchData
         @on-fetch="(data) => (provincesLocation = data)"
         auto-load

src/pages/Customer/Card/CustomerBasicData.vue

@@ -72,11 +72,11 @@ const filterOptions = {
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <VnInput
-                        :label="t('customer.basicData.socialName')"
+                        :label="t('Comercial name')"
                         :rules="validate('client.socialName')"
                         autofocus
                         clearable
-                        v-model="data.socialName"
+                        v-model="data.name"
                     />
                 </div>
                 <div class="col">
@@ -210,4 +210,5 @@ const filterOptions = {
 <i18n>
 es:
     In case of a company succession, specify the grantor company: En el caso de que haya habido una sucesión de empresa, indicar la empresa cedente
+    Comercial name: Nombre comercial
 </i18n>

src/pages/Customer/Card/CustomerBillingData.vue

@@ -24,8 +24,9 @@ const filter = {
     limit: 30,
 };
 
-const getBankEntities = () => {
+const getBankEntities = (data, formData) => {
     bankEntitiesRef.value.fetch();
+    formData.bankEntityFk = Number(data.id);
 };
 </script>
 
@@ -89,7 +90,9 @@ const getBankEntities = () => {
                         v-model="data.bankEntityFk"
                     >
                         <template #form>
-                            <CreateBankEntityForm @on-data-saved="getBankEntities()" />
+                            <CreateBankEntityForm
+                                @on-data-saved="getBankEntities($event, data)"
+                            />
                         </template>
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">

src/pages/Customer/Card/CustomerWebPayment.vue

@@ -1,8 +1,10 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, onBeforeMount, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
+import axios from 'axios';
+
 import { toCurrency, toDateHourMinSec } from 'src/filters';
 
 import FetchData from 'components/FetchData.vue';
@@ -12,7 +14,6 @@ import CustomerCheckIconTooltip from '../components/CustomerCheckIconTooltip.vue
 const { t } = useI18n();
 const route = useRoute();
 
-const clientsTransactionsRef = ref(null);
 const rows = ref([]);
 
 const filter = {
@@ -20,7 +21,7 @@ const filter = {
         { relation: 'mandateType', scope: { fields: ['id', 'name'] } },
         { relation: 'company', scope: { fields: ['id', 'code'] } },
     ],
-    where: { clientFk: route.params.id },
+    where: { clientFk: null },
     order: ['created DESC'],
     limit: 20,
 };
@@ -90,20 +91,35 @@ const columns = computed(() => [
     },
 ]);
 
+onBeforeMount(() => {
+    getData(route.params.id);
+});
+
+watch(
+    () => route.params.id,
+    (newValue) => {
+        getData(newValue);
+    }
+);
+
+const getData = async (id) => {
+    filter.where.clientFk = id;
+    try {
+        const { data } = await axios.get('clients/transactions', {
+            params: { filter: JSON.stringify(filter) },
+        });
+        rows.value = data;
+    } catch (error) {
+        return error;
+    }
+};
+
 const refreshData = () => {
-    clientsTransactionsRef.value.fetch();
+    getData(route.params.id);
 };
 </script>
 
 <template>
-    <FetchData
-        :filter="filter"
-        @on-fetch="(data) => (rows = data)"
-        auto-load
-        ref="clientsTransactionsRef"
-        url="clients/transactions"
-    />
-
     <div class="full-width flex justify-center">
         <QPage class="card-width q-pa-lg">
             <QTable

src/pages/Worker/Card/WorkerDescriptor.vue

@@ -101,7 +101,7 @@ const setData = (entity) => {
         </template>
         <template #body="{ entity }">
             <VnLv :label="t('worker.card.name')" :value="entity.user?.nickname" />
-            <VnLv :label="t('worker.card.emailxxx')" :value="entity.user?.email" copy />
+            <VnLv :label="t('worker.card.email')" :value="entity.user?.email" copy />
             <VnLv
                 :label="t('worker.list.department')"
                 :value="entity.department ? entity.department.department.name : null"