Allow to change language

src/components/Settings.vue

@@ -16,13 +16,12 @@
 
       <tags-settings />
       <wallpaper-settings />
+      <language />
       <b-dropdown-divider />
       <releases />
       <themes />
       <about />
       <b-dropdown-divider />
-      <!-- language -->
-      <!-- theme -->
       <account-settings />
       <sign-out />
     </b-dropdown>
@@ -35,6 +34,7 @@ import AccountSettings from '@/components/Settings/AccountSettings';
 import WallpaperSettings from '@/components/Settings/WallpaperSettings';
 import Releases from '@/components/Settings/Releases';
 import Themes from '@/components/Settings/Themes';
+import Language from '@/components/Settings/Language';
 import SignOut from '@/components/Settings/SignOut';
 import About from '@/components/Settings/About';
 import { mapState } from 'vuex';
@@ -46,6 +46,7 @@ export default {
     WallpaperSettings,
     Releases,
     Themes,
+    Language,
     SignOut,
     About,
   },

src/components/Settings/Language.vue

@@ -0,0 +1,86 @@
+<template lang="html">
+  <b-dropdown-item v-b-modal:language>
+    <b-icon-chat-left-text class="mr-1" />
+    {{ $t('settings.language') }}
+
+    <b-modal
+      id="language"
+      title="Language"
+      hide-footer
+      @show="show"
+    >
+      <b-form-select v-model="language" class="mb-2">
+        <b-form-select-option
+          v-for="{ flag, code } in languages"
+          :key="code"
+          :value="code"
+        >
+          {{ flag }}  {{ $t(`settings.languages.${code}`) }}
+        </b-form-select-option>
+      </b-form-select>
+
+      <b-button
+        :disabled="saving"
+        @click="saveSettings"
+      >
+        <b-spinner small v-if="saving" />
+        <span v-else>Save and reload browser</span>
+      </b-button>
+    </b-modal>
+  </b-dropdown-item>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+  data() {
+    return {
+      saving: false,
+      languages: [
+        { flag: '🇺🇸', code: 'en' },
+        { flag: '🇪🇸', code: 'es' },
+        { flag: '🇵🇱', code: 'pl' },
+        { flag: '🇩🇪', code: 'de' },
+        { flag: '🇦🇪', code: 'ar' },
+        { flag: '🇫🇷', code: 'fr' },
+        { flag: '🇯🇵', code: 'ja' },
+        { flag: '🇮🇹', code: 'it' },
+        { flag: '🇨🇿', code: 'cs' },
+      ],
+      language: null,
+    };
+  },
+
+  computed: {
+    ...mapState(['settings']),
+  },
+
+  methods: {
+    show() {
+      const { settings } = this;
+
+      this.language = settings.language || 'en';
+    },
+
+    saveSettings() {
+      const { language, settings } = this;
+
+      const payload = {
+        ...settings,
+        language,
+      };
+
+      this.$store.dispatch('SAVE_SETTINGS', payload)
+        .then(() => {
+          this.$bvToast.toast('Settings saved', { title: 'Success', variant: 'success' });
+          location.reload();
+        })
+        .catch(() => {
+          this.$bvToast.toast('There was an error saving your settings', { title: 'Error', variant: 'danger' });
+          this.saving = false;
+        });
+    },
+  },
+};
+</script>

src/components/Settings/SettingsGlobal.vue

@@ -1,53 +0,0 @@
-<template lang="html">
-  <section>
-    <h3>General</h3>
-
-    <div class="setting">
-      <h5>{{ $t('settings.language') }}</h5>
-
-      <b-form-select v-model="value.language">
-        <b-form-select-option value="en">🇺🇸 {{ $t('settings.languages.en') }}</b-form-select-option>
-        <b-form-select-option value="es">🇪🇸 {{ $t('settings.languages.es') }}</b-form-select-option>
-        <b-form-select-option value="pl">🇵🇱 {{ $t('settings.languages.pl') }}</b-form-select-option>
-        <b-form-select-option value="de">🇩🇪 {{ $t('settings.languages.de') }}</b-form-select-option>
-        <b-form-select-option value="ar">🇦🇪 {{ $t('settings.languages.ar') }}</b-form-select-option>
-        <b-form-select-option value="fr">🇫🇷 {{ $t('settings.languages.fr') }}</b-form-select-option>
-        <b-form-select-option value="ja">🇯🇵 {{ $t('settings.languages.ja') }}</b-form-select-option>
-        <b-form-select-option value="it">🇮🇹 {{ $t('settings.languages.it') }}</b-form-select-option>
-        <b-form-select-option value="eu">🏴 {{ $t('settings.languages.eu') }}</b-form-select-option>
-        <b-form-select-option value="cs">🇨🇿 {{ $t('settings.languages.cs') }}</b-form-select-option>
-      </b-form-select>
-    </div>
-    <small>Browser reload required</small>
-  </section>
-</template>
-
-<script>
-export default {
-  props: {
-    value: {
-      type: Object,
-      default: () => {},
-    },
-  },
-
-  computed: {
-    hasLists() {
-      return Object.keys(this.gameLists).length > 0;
-    },
-  },
-};
-</script>
-
-<style lang="scss" rel="stylesheet/scss" scoped>
-// @import "~styles/styles";
-
-.reloading {
-  width: 100%;
-  text-align: center;
-}
-
-select {
-  margin: 0;
-}
-</style>