salix-front-mindshore-fork2/src/components/UserPanel.vue

<script setup>
import { onMounted, computed } from 'vue';
import { Dark, Quasar } from 'quasar';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import axios from 'axios';

import { useState } from 'src/composables/useState';
import { useSession } from 'src/composables/useSession';

const state = useState();
const session = useSession();
const router = useRouter();
const { t, locale } = useI18n();

const userLocale = computed({
    get() {
        return locale.value;
    },
    set(value) {
        locale.value = value;

        if (value === 'en') value = 'en-GB';

        // FIXME: Dynamic imports from absolute paths are not compatible with vite:
        // https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations
        try {
            const langList = import.meta.glob('../../node_modules/quasar/lang/*.mjs');
            langList[`../../node_modules/quasar/lang/${value}.mjs`]().then((lang) => {
                Quasar.lang.set(lang.default);
            });
        } catch (error) {
            //
        }
    },
});

const darkMode = computed({
    get() {
        return Dark.isActive;
    },
    set(value) {
        Dark.set(value);
    },
});

const user = state.getUser();
const token = session.getToken();

onMounted(async () => {
    updatePreferences();
});

function updatePreferences() {
    if (user.value.darkMode !== null) {
        darkMode.value = user.value.darkMode;
    }
    if (user.value.lang) {
        locale.value = user.value.lang;
        userLocale.value = user.value.lang;
    }
}

async function saveDarkMode(value) {
    const query = `/UserConfigs/${user.value.id}`;
    await axios.patch(query, {
        darkMode: value,
    });
    user.value.darkMode = value;
}

async function saveLanguage(value) {
    const query = `/Accounts/${user.value.id}`;
    await axios.patch(query, {
        lang: value,
    });
    user.value.lang = value;
}

function logout() {
    session.destroy();
    router.push('/login');
}
</script>

<template>
    <QMenu anchor="bottom left">
        <div class="row no-wrap q-pa-md">
            <div class="column panel">
                <div class="text-h6 q-mb-md">
                    {{ t('components.userPanel.settings') }}
                </div>
                <QToggle
                    v-model="userLocale"
                    @update:model-value="saveLanguage"
                    :label="t(`globals.lang['${userLocale}']`)"
                    icon="public"
                    color="orange"
                    false-value="es"
                    true-value="en"
                />
                <QToggle
                    v-model="darkMode"
                    @update:model-value="saveDarkMode"
                    :label="t(`globals.darkMode`)"
                    checked-icon="dark_mode"
                    color="orange"
                    unchecked-icon="light_mode"
                />
            </div>

            <QSeparator vertical inset class="q-mx-lg" />

            <div class="column items-center panel">
                <QAvatar size="80px">
                    <QImg
                        :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
                        spinner-color="white"
                    />
                </QAvatar>

                <div class="text-subtitle1 q-mt-md">
                    <strong>{{ user.nickname }}</strong>
                </div>
                <div class="text-subtitle3 text-grey-7 q-mb-xs">@{{ user.name }}</div>

                <QBtn
                    id="logout"
                    color="orange"
                    flat
                    :label="t('globals.logOut')"
                    size="sm"
                    icon="logout"
                    @click="logout()"
                    v-close-popup
                />
            </div>
        </div>
    </QMenu>
</template>

<style lang="scss" scoped>
.panel {
    width: 150px;
}
</style>