Merge pull request 'feature/Account-view-refactor' (!125) from wbuezas/hedera-web-mindshore:feature/Account-view-refactor into beta

Reviewed-on: #125
Reviewed-by: Javier Segarra <jsegarra@verdnatura.es>

src/pages/Account/AccountConfig.vue

@@ -3,8 +3,9 @@ import { ref, inject, onMounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
-import VnForm from 'src/components/common/VnForm.vue';
 import ChangePasswordForm from 'src/components/ui/ChangePasswordForm.vue';
+import FormModel from 'src/components/common/FormModel.vue';
+import useNotify from 'src/composables/useNotify.js';
 
 import { useUserStore } from 'stores/user';
 import { useAppStore } from 'stores/app';
@@ -12,54 +13,76 @@ import { storeToRefs } from 'pinia';
 
 const userStore = useUserStore();
 const { t } = useI18n();
-const jApi = inject('jApi');
+const api = inject('api');
 const appStore = useAppStore();
 const { isHeaderMounted } = storeToRefs(appStore);
 const { user } = storeToRefs(userStore);
+const { notify } = useNotify();
 
 const vnFormRef = ref(null);
-const vnFormRef2 = ref(null);
 const changePasswordFormDialog = ref(null);
 const showChangePasswordForm = ref(false);
 const langOptions = ref([]);
-const pks = computed(() => ({ id: userStore?.user?.id }));
-const fetchConfigDataSql = {
-    query: `
-        SELECT u.id, u.name, u.email, u.nickname,
-        u.lang, c.isToBeMailed, c.id clientFk
-        FROM account.myUser u
-        LEFT JOIN myClient c
-        ON u.id = c.id`,
-    params: {}
-};
+const formInitialData = ref({});
+const showForm = ref(false);
 
-const fetchLanguagesSql = async () => {
+const fetchLanguages = async () => {
     try {
-        const data = await jApi.query(
-            'SELECT code, name FROM language WHERE isActive'
-        );
+        const filter = { fields: ['code', 'name'], where: { isActive: true } };
+        const { data } = await api.get('/languages', {
+            params: { filter: JSON.stringify(filter) }
+        });
         langOptions.value = data;
     } catch (error) {
         console.error(error);
     }
 };
 
+const fetchFormInitialData = async () => {
+    try {
+        const filter = {
+            where: { id: user?.value?.id },
+            fields: ['id', 'name', 'isToBeMailed'],
+            include: {
+                relation: 'user',
+                scope: {
+                    fields: ['nickname', 'lang', 'email']
+                }
+            }
+        };
+        const { data } = await api.get('/Clients', {
+            params: { filter: JSON.stringify(filter) }
+        });
+
+        const { user: userData, ...restOfData } = data[0];
+
+        formInitialData.value = {
+            ...restOfData,
+            nickname: userData?.nickname,
+            lang: userData?.lang,
+            email: userData?.email
+        };
+    } catch (error) {
+        console.error(error);
+    } finally {
+        showForm.value = true;
+    }
+};
+
 const updateUserNickname = async nickname => {
     try {
-        await vnFormRef.value.submit();
+        await submitAccountData(nickname);
+        await submitNickname(nickname);
         user.value.nickname = nickname;
     } catch (error) {
         console.error(error);
     }
 };
 
-const formatMailData = data => {
-    data.isToBeMailed = Boolean(data.isToBeMailed);
-};
-
 const updateConfigLang = async lang => {
     try {
-        await vnFormRef.value.submit();
+        if (!lang) return;
+        await submitAccountData({ lang });
         userStore.updateUserLang(lang);
         const siteLocaleLang = appStore.localeOptions.find(
             locale => locale.value === lang
@@ -70,7 +93,32 @@ const updateConfigLang = async lang => {
     }
 };
 
-onMounted(() => fetchLanguagesSql());
+const submitAccountData = async data => {
+    try {
+        const params = {
+            ...data
+        };
+        await api.patch(`/VnUsers/${user?.value?.id}`, params);
+        notify(t('dataSaved'), 'positive');
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const submitIsToBeMailed = async isToBeMailed => {
+    try {
+        const payload = { isToBeMailed };
+        await api.patch(`/Clients/${user.value.id}`, payload);
+        notify(t('dataSaved'), 'positive');
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+onMounted(async () => {
+    fetchLanguages();
+    fetchFormInitialData();
+});
 </script>
 
 <template>
@@ -92,14 +140,14 @@ onMounted(() => fetchLanguagesSql());
                     @click="showChangePasswordForm = true"
                 />
             </Teleport>
-            <VnForm
+            <FormModel
+                v-if="showForm"
                 ref="vnFormRef"
+                :save-fn="submitFormFn"
+                :form-initial-data="formInitialData"
                 :title="t('personalInformation')"
-                :fetch-form-data-sql="fetchConfigDataSql"
-                :pks="pks"
-                table="myUser"
-                schema="account"
-                :default-actions="false"
+                :show-bottom-actions="false"
+                :defaultActions="false"
             >
                 <template #form="{ data }">
                     <VnInput
@@ -111,14 +159,16 @@ onMounted(() => fetchLanguagesSql());
                     <VnInput
                         v-model="data.email"
                         :label="t('email')"
-                        @keyup.enter="vnFormRef.submit()"
-                        @blur="vnFormRef.submit()"
+                        @keyup.enter="submitAccountData({ email: data.email })"
+                        @blur="submitAccountData({ email: data.email })"
                     />
                     <VnInput
                         v-model="data.nickname"
                         :label="t('nickname')"
-                        @keyup.enter="updateUserNickname(data.nickname)"
-                        @blur="updateUserNickname(data.nickname)"
+                        @keyup.enter="
+                            updateUserNickname({ nickname: data.nickname })
+                        "
+                        @blur="updateUserNickname({ nickname: data.nickname })"
                         data-cy="configViewNickname"
                     />
                     <VnSelect
@@ -130,30 +180,17 @@ onMounted(() => fetchLanguagesSql());
                         @update:model-value="updateConfigLang(data.lang)"
                         data-cy="configViewLang"
                     />
+                    <QCheckbox
+                        v-model="data.isToBeMailed"
+                        :label="t('isToBeMailed')"
+                        :toggle-indeterminate="false"
+                        @update:model-value="
+                            submitIsToBeMailed(data.isToBeMailed)
+                        "
+                        dense
+                    />
                 </template>
-                <template #extraForm>
-                    <VnForm
-                        class="no-form-container q-mt-md"
-                        ref="vnFormRef2"
-                        :pks="pks"
-                        table="myClient"
-                        schema="hedera"
-                        :fetch-form-data-sql="fetchConfigDataSql"
-                        :default-actions="false"
-                        @on-data-fetched="$event => formatMailData($event)"
-                    >
-                        <template #form="{ data }">
-                            <QCheckbox
-                                v-model="data.isToBeMailed"
-                                :label="t('isToBeMailed')"
-                                :toggle-indeterminate="false"
-                                @update:model-value="vnFormRef2.submit()"
-                                dense
-                            />
-                        </template>
-                    </VnForm>
-                </template>
-            </VnForm>
+            </FormModel>
         </QPage>
         <QDialog
             ref="changePasswordFormDialog"

src/stores/user.js

@@ -38,8 +38,8 @@ export const useUserStore = defineStore('user', () => {
                 router.push({ name: 'login' });
             }
         } else {
-            await fetchTokenConfig();
             await fetchUser();
+            await fetchTokenConfig();
             await supplantInit();
             startInterval();
         }