dragonroll/frontend/app/components/windows/SettingsWindow.vue

<script setup>
import { onMounted, ref } from 'vue';

import WindowHandle from './partials/WindowHandle.vue';
import Tabs from '../layouts/Tabs.vue';
import Dropdown from '../layouts/Dropdown.vue';
import { GetUser, GetUserSetting, SetUserSetting } from '@/services/User';
import { SetupHandle, SetSize, ResetPosition, Top, ClearWindow, CreateWindow, SetMinSize, SetResizable } from '@/services/Windows';
import { locales } from '~~/i18n/locales';

const handle = ref(null);
const wrapper = ref(null);

const props = defineProps(['data']);
const data = props.data;

const { locale } = useI18n();


const changeLocale = (lang) => {
    console.log(lang);
    locale.value = lang.code;
    SetUserSetting('lang', lang.code);
}

const id = data.id;

const rows = ref([{id: "account-settings", value: "settings.tabs.account-settings"}]);

/* TODO
const languageOptions = ref(["English", "Spanish", "Catalan"])
const langSelector = ref(null);
*/
function getLocaleFromCode(code){
    for(let i = 0; i < locales.length; i++){
        if(locales[i].code == code) return locales[i];
    }
}

const selectedLocale = ref("");
onBeforeMount(() => {
    GetUserSetting('lang').then(value => {
        locale.value = value;
        selectedLocale.value = getLocaleFromCode(value); // Set selected in dropdown
    });
    if(GetUser().admin) rows.value.push({
        id: "site-administration",
        value: "settings.tabs.site-administration"
    });
});

onMounted(() => {
    Top(wrapper);
    SetupHandle(id, handle);
    SetSize(id, {width: 600, height: 480});
    ResetPosition(id, "center");

    SetResizable(id, true);
    SetMinSize(id, {width: 450, height: 280});
});

function OpenManageAccounts(){
    ClearWindow('settings');
    CreateWindow('account_management', {
        type: 'account_management',
        title: 'settings.site-administration.manage-accounts.title',
        id: 'account-management',
        back: () => {
            ClearWindow('account-management')
            CreateWindow('settings', {
                id: 'settings',
                type: 'settings',
                title: 'settings.title',
                back: () => { ClearWindow('settings'); CreateWindow('main_menu');  }
            });
        }
    })
}

const getLocaleName = (locale) => {
    return locale.name;
}

</script>


<template>
    <div class="window-wrapper" :id="'window-wrapper-' + id" ref="wrapper">
        <WindowHandle :window="id" ref="handle"></WindowHandle>

        <!-- Body -->
        <Tabs :rows="rows">
            <template #account-settings>
                <div class="form-container">
                    <div class="form-element">
                        <label>{{ $t('settings.account-settings.language') }}</label>
                        <Dropdown :options="locales" :keyFunc="getLocaleName" :onselect="changeLocale" :selected="selectedLocale"></Dropdown>
                    </div>
                </div>
            </template>
            <template #site-administration>
                <div class="form-element centered">
                    <button v-on:click.prevent="OpenManageAccounts">{{ $t('settings.site-administration.manage-accounts') }}</button>
                </div>
            </template>
        </Tabs>
    </div>
</template>


<style scoped>
.window-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
}

.splash-image {
    width: 600px;
    height: 250px;
}

.form-field {
    padding: 10px;
    display: flex;
    align-items: left;
    flex-direction: column;
    justify-content: left;
    width: 600px;
}

label {
    text-align: left;
}

</style>