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

<script setup>
import { onMounted, computed } from 'vue';
import { Dark, Quasar, useQuasar } 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';
import { localeEquivalence } from "src/i18n/index";

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

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

        value = localeEquivalence[value] ?? value

        try {
            /* @vite-ignore */
            import(`../../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 = `/VnUsers/${user.value.id}`;
    await axios.patch(query, {
        lang: value,
    });
    user.value.lang = value;
}

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

function copyUserToken(){
    navigator.clipboard.writeText(session.getToken());
    quasar.notify({
        type: 'positive',
        message: t('components.userPanel.copyToken'),
    });
}
</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 copyUserToken" @click="copyUserToken()" >@{{ 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;
}

.copyUserToken {
   &:hover{
    cursor: alias;
   }
}
</style>