hedera-web/src/pages/Account/AccountConfig.vue

<script setup>
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 { useUserStore } from 'stores/user';
import { useAppStore } from 'stores/app';
import { storeToRefs } from 'pinia';

const userStore = useUserStore();
const { t } = useI18n();
const jApi = inject('jApi');
const appStore = useAppStore();
const { isHeaderMounted } = storeToRefs(appStore);
const { user } = storeToRefs(userStore);

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 fetchLanguagesSql = async () => {
    try {
        const data = await jApi.query(
            'SELECT code, name FROM language WHERE isActive'
        );
        langOptions.value = data;
    } catch (error) {
        console.error(error);
    }
};

const updateUserNickname = async nickname => {
    try {
        await vnFormRef.value.submit();
        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();
        userStore.updateUserLang(lang);
        const siteLocaleLang = appStore.localeOptions.find(
            locale => locale.value === lang
        ).lang;
        appStore.updateSiteLocale(siteLocaleLang);
    } catch (error) {
        console.error(error);
    }
};

onMounted(() => fetchLanguagesSql());
</script>

<template>
    <QPage>
        <QPage class="q-pa-md flex justify-center">
            <Teleport v-if="isHeaderMounted" to="#actions">
                <QBtn
                    :label="t('addresses')"
                    icon="location_on"
                    rounded
                    no-caps
                    :to="{ name: 'addressesList' }"
                />
                <QBtn
                    :label="t('changePassword')"
                    icon="lock_reset"
                    rounded
                    no-caps
                    @click="showChangePasswordForm = true"
                />
            </Teleport>
            <VnForm
                ref="vnFormRef"
                :title="t('personalInformation')"
                :fetch-form-data-sql="fetchConfigDataSql"
                :pks="pks"
                table="myUser"
                schema="account"
                :default-actions="false"
            >
                <template #form="{ data }">
                    <VnInput
                        v-model="data.name"
                        :label="t('name')"
                        disable
                        :clearable="false"
                    />
                    <VnInput
                        v-model="data.email"
                        :label="t('email')"
                        @keyup.enter="vnFormRef.submit()"
                        @blur="vnFormRef.submit()"
                    />
                    <VnInput
                        v-model="data.nickname"
                        :label="t('nickname')"
                        @keyup.enter="updateUserNickname(data.nickname)"
                        @blur="updateUserNickname(data.nickname)"
                        data-testid="configViewNickname"
                    />
                    <VnSelect
                        v-model="data.lang"
                        :label="t('lang')"
                        option-label="name"
                        option-value="code"
                        :options="langOptions"
                        @update:model-value="updateConfigLang(data.lang)"
                        data-testid="configViewLang"
                    />
                </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>
        </QPage>
        <QDialog
            ref="changePasswordFormDialog"
            v-model="showChangePasswordForm"
        >
            <ChangePasswordForm
                @on-password-changed="showChangePasswordForm = false"
            />
        </QDialog>
    </QPage>
</template>

<i18n lang="yaml">
en-US:
    personalInformation: Personal Information
    isToBeMailed: Receive invoices by email
    name: Name
    email: Email
    nickname: Display name
    lang: Language
    receiveInvoicesByMail: Receive invoices by mail
    addresses: Addresses
    changePassword: Change password
es-ES:
    personalInformation: Datos personales
    isToBeMailed: Recibir facturas por correo electrónico
    name: Nombre
    email: Correo electrónico
    nickname: Nombre a mostrar
    lang: Idioma
    receiveInvoicesByMail: Recibir facturas por correo
    addresses: Direcciones
    changePassword: Cambiar contraseña
ca-ES:
    personalInformation: Dades personals
    isToBeMailed: Rebre factures per correu electrònic
    name: Nom
    email: Correu electrònic
    nickname: Nom a mostrar
    lang: Idioma
    receiveInvoicesByMail: Rebre factures per correu
    addresses: Adreces
    changePassword: Canviar contrasenya
fr-FR:
    personalInformation: Informations personnelles
    isToBeMailed: Recevoir des factures par e-mail
    name: Nom
    email: E-mail
    nickname: Nom à afficher
    lang: Langue
    receiveInvoicesByMail: Recevoir des factures par courrier
    addresses: Adresses
    changePassword: Changer le mot de passe
pt-PT:
    personalInformation: Dados pessoais
    isToBeMailed: Receber facturas por e-mail
    name: Nome
    email: E-mail
    nickname: Nom à afficher
    lang: Língua
    receiveInvoicesByMail: Receber faturas por correio
    addresses: Endereços
    changePassword: Alterar palavra-passe
</i18n>