A lot of progress

frontend/app/components/windows/SettingsWindow.vue

@@ -6,6 +6,7 @@ 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);
@@ -13,11 +14,12 @@ const wrapper = ref(null);
 const props = defineProps(['data']);
 const data = props.data;
 
-const { locales, setLocale, locale } = useI18n();
+const { locale } = useI18n();
+
 
 const changeLocale = (lang) => {
     console.log(lang);
-    setLocale(lang.code);
+    locale.value = lang.code;
     SetUserSetting('lang', lang.code);
 }
 
@@ -28,12 +30,18 @@ const rows = ref([{id: "account-settings", value: "settings.tabs.account-setting
 /* TODO
 const languageOptions = ref(["English", "Spanish", "Catalan"])
 const langSelector = ref(null);
-const currentLanguage = ref("");
 */
+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 => {
-        currentLanguage.value = codes[value ?? 'en']
-        console.log(currentLanguage.value)
+        locale.value = value;
+        selectedLocale.value = getLocaleFromCode(value); // Set selected in dropdown
     });
     if(GetUser().admin) rows.value.push({
         id: "site-administration",
@@ -44,11 +52,11 @@ onBeforeMount(() => {
 onMounted(() => {
     Top(wrapper);
     SetupHandle(id, handle);
-    SetSize(id, {width: 400, height: 480});
+    SetSize(id, {width: 600, height: 480});
     ResetPosition(id, "center");
 
     SetResizable(id, true);
-    SetMinSize(id, {width: 350, height: 280});
+    SetMinSize(id, {width: 450, height: 280});
 });
 
 function OpenManageAccounts(){
@@ -86,7 +94,7 @@ const getLocaleName = (locale) => {
                 <div class="form-container">
                     <div class="form-element">
                         <label>{{ $t('settings.account-settings.language') }}</label>
-                        <Dropdown :options="locales" :keyFunc="getLocaleName" :onselect="changeLocale" :selected="locale"></Dropdown>
+                        <Dropdown :options="locales" :keyFunc="getLocaleName" :onselect="changeLocale" :selected="selectedLocale"></Dropdown>
                     </div>
                 </div>
             </template>