Solucion a comentarios 9

src/pages/Customer/Card/CustomerCredits.vue

@@ -114,7 +114,7 @@ const toCustomerCreditCreate = () => {
             </template>
         </QTable>
 
-        <h5 class="flex justify-center label-color" v-else>
+        <h5 class="flex justify-center color-vn-label" v-else>
             {{ t('globals.noResults') }}
         </h5>
     </QPage>
@@ -127,12 +127,6 @@ const toCustomerCreditCreate = () => {
     </QPageSticky>
 </template>
 
-<style lang="scss">
-.label-color {
-    color: var(--vn-label);
-}
-</style>
-
 <i18n>
 es:
     Since: Desde

src/pages/Customer/Card/CustomerDescriptorMenu.vue

@@ -22,7 +22,6 @@ const quasar = useQuasar();
 const route = useRoute();
 
 const showSmsDialog = () => {
-    console.log('showSmsDialog()');
     quasar.dialog({
         component: VnSmsDialog,
         componentProps: {

src/pages/Customer/Card/CustomerFileManagement.vue

@@ -226,7 +226,7 @@ const toCustomerFileManagementCreate = () => {
             </template>
         </QTable>
 
-        <h5 class="flex justify-center label-color" v-else>
+        <h5 class="flex justify-center color-vn-label" v-else>
             {{ t('globals.noResults') }}
         </h5>
     </QPage>
@@ -244,12 +244,6 @@ const toCustomerFileManagementCreate = () => {
     </QPageSticky>
 </template>
 
-<style lang="scss">
-.label-color {
-    color: var(--vn-label);
-}
-</style>
-
 <i18n>
 es:
     Id: Id

src/pages/Customer/Card/CustomerMandates.vue

@@ -119,7 +119,7 @@ const columns = computed(() => [
             </template>
         </QTable>
 
-        <h5 class="flex justify-center label-color" v-else>
+        <h5 class="flex justify-center color-vn-label" v-else>
             {{ t('globals.noResults') }}
         </h5>
     </QPage>

src/pages/Customer/Card/CustomerWebAccess.vue

@@ -1,24 +1,41 @@
 <script setup>
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
+import axios from 'axios';
 import { useQuasar } from 'quasar';
 
+import { useValidator } from 'src/composables/useValidator';
+import useNotify from 'src/composables/useNotify';
+
 import FetchData from 'components/FetchData.vue';
-import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import CustomerChangePassword from 'src/pages/Customer/components/CustomerChangePassword.vue';
 
+const { notify } = useNotify();
 const { t } = useI18n();
+const { validate } = useValidator();
 const quasar = useQuasar();
 const route = useRoute();
 
-const updateUserRef = ref(null);
+const active = ref(false);
 const canChangePassword = ref(0);
-const userPasswords = ref(0);
+const email = ref(null);
 const isLoading = ref(false);
+const name = ref(null);
+const usersPreviewRef = ref(null);
+const user = ref([]);
+const userPasswords = ref(0);
+
+const dataChanges = computed(() => {
+    return (
+        user.value.active !== active.value ||
+        user.value.email !== email.value ||
+        user.value.name !== name.value
+    );
+});
 
 const filter = { where: { id: `${route.params.id}` } };
 
@@ -28,17 +45,46 @@ const showChangePasswordDialog = () => {
         componentProps: {
             id: route.params.id,
             userPasswords: userPasswords.value,
-            promise: refreshData,
+            promise: getData,
         },
     });
 };
 
-const refreshData = () => {
+const getData = (data) => {
-    updateUserRef.value.fetch();
+    active.value = data[0].active;
+    email.value = data[0].email;
+    name.value = data[0].name;
+    user.value = data[0];
+};
+
+const onSubmit = async () => {
+    isLoading.value = true;
+
+    const payload = {
+        active: active.value,
+        email: email.value,
+        name: name.value,
+    };
+    try {
+        await axios.patch(`Clients/${route.params.id}/updateUser`, payload);
+        notify('globals.dataSaved', 'positive');
+        if (usersPreviewRef.value) usersPreviewRef.value.fetch();
+    } catch (error) {
+        notify('errors.create', 'negative');
+    } finally {
+        isLoading.value = false;
+    }
 };
 </script>
 
 <template>
+    <FetchData
+        :filter="filter"
+        @on-fetch="getData"
+        auto-load
+        ref="usersPreviewRef"
+        url="VnUsers/preview"
+    />
     <FetchData
         :url="`Clients/${route.params.id}/hasCustomerRole`"
         @on-fetch="(data) => (canChangePassword = data)"
@@ -50,58 +96,39 @@ const refreshData = () => {
         url="UserPasswords"
     />
 
-    <FormModel
+    <QCard class="q-pa-lg">
-        :default-actions="false"
+        <QCardSection>
-        :filter="filter"
+            <QForm @submit.prevent="onSubmit">
-        :observe-form-changes="false"
+                <VnRow class="row q-gutter-md q-mb-md">
-        :url-update="`Clients/${route.params.id}/updateUser`"
+                    <div class="col">
-        :url="'VnUsers/preview'"
+                        <QCheckbox :label="t('Enable web access')" v-model="active" />
-        model="client"
+                    </div>
-        ref="updateUserRef"
+                </VnRow>
-    >
-        <template #form="{ data, validate }">
-            <div v-if="data?.length">
-                <div
-                    v-for="(item, index) in data"
-                    :key="index"
-                    :class="{
-                        'q-mb-md': index < data.length - 1,
-                    }"
-                >
-                    <VnRow class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QCheckbox
-                                :label="t('Enable web access')"
-                                v-model="item.active"
-                            />
-                        </div>
-                    </VnRow>
 
-                    <VnRow class="row q-gutter-md q-mb-md">
+                <VnRow class="row q-gutter-md q-mb-md">
-                        <div class="col">
+                    <div class="col">
-                            <VnInput :label="t('User')" clearable v-model="item.name" />
+                        <VnInput :label="t('User')" clearable v-model="name" />
-                        </div>
+                    </div>
-                        <div class="col">
+                    <div class="col">
-                            <VnInput
+                        <VnInput
-                                :label="t('Recovery email')"
+                            :label="t('Recovery email')"
-                                :rules="validate('client.email')"
+                            :rules="validate('client.email')"
-                                clearable
+                            clearable
-                                type="email"
+                            type="email"
-                                v-model="item.email"
+                            v-model="email"
-                            >
+                        >
-                                <template #append>
+                            <template #append>
-                                    <QIcon name="info" class="cursor-pointer">
+                                <QIcon name="info" class="cursor-pointer">
-                                        <QTooltip>{{
+                                    <QTooltip>{{
-                                            t(
+                                        t(
-                                                'This email is used for user to regain access their account'
+                                            'This email is used for user to regain access their account'
-                                            )
+                                        )
-                                        }}</QTooltip>
+                                    }}</QTooltip>
-                                    </QIcon>
+                                </QIcon>
-                                </template>
+                            </template>
-                            </VnInput>
+                        </VnInput>
-                        </div>
+                    </div>
-                    </VnRow>
+                </VnRow>
-                </div>
 
                 <div class="q-mt-lg row justify-end">
                     <QBtn
@@ -124,16 +151,16 @@ const refreshData = () => {
                         v-if="canChangePassword"
                     />
                     <QBtn
-                        :disabled="isLoading || canChangePassword"
+                        :disabled="isLoading || !dataChanges"
                         :label="t('globals.save')"
                         :loading="isLoading"
                         color="primary"
                         type="submit"
                     />
                 </div>
-            </div>
+            </QForm>
-        </template>
+        </QCardSection>
-    </FormModel>
+    </QCard>
 </template>
 
 <i18n>

src/pages/Customer/Card/CustomerWebPayment.vue

@@ -129,7 +129,7 @@ const refreshData = () => {
             </template>
         </QTable>
 
-        <h5 class="flex justify-center label-color" v-else>
+        <h5 class="flex justify-center color-vn-label" v-else>
             {{ t('globals.noResults') }}
         </h5>
     </QPage>