feat: Add dropdown for language switch

Signed-off-by: Pranav C <61551451+pranavxc@users.noreply.github.com>

packages/nc-gui/components/project/settings/appearance.vue

@@ -184,7 +184,7 @@ export default {
       get() {
         return this.$store.state.windows.language;
       }, set(val) {
-        this.$store.commit('windows/MutSetLanguage', val);
+        this.$store.commit('windows/MutLanguage', val);
       }
     },
     showMetatable: {

packages/nc-gui/components/utils/language.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <v-menu bottom offset-y>
+      <template #activator="{on}">
+        <v-btn v-on="on" small class="text-capitalize caption font-weight-bold" text>
+          <v-icon small class="">mdi-translate</v-icon>
+        </v-btn>
+      </template>
+      <v-list dense >
+        <v-list-item-group
+          v-model="language">
+        <v-list-item
+          dense
+          v-for="lan in languages" :key="lan.value"
+          :value="lan"
+          @click="language = lan"
+          color="primary"
+        >
+          <v-list-item-subtitle class="text-capitalize">{{ lan }}</v-list-item-subtitle>
+        </v-list-item>
+        </v-list-item-group>
+      </v-list>
+    </v-menu>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "language",
+  computed: {
+    languages() {
+      return this.$i18n && this.$i18n.availableLocales || ['en'];
+    },
+    language: {
+      get() {
+        return this.$store.state.windows.language;
+      }, set(val) {
+        this.$store.commit('windows/MutLanguage', val);
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

packages/nc-gui/mixins/device.js

@@ -1,6 +1,4 @@
-import rolePermissions from "@/helpers/rolePermissions";
 import {mapGetters} from "vuex";
-import browserLang from 'browser-lang';
 
 export default {
   data() {
@@ -17,16 +15,6 @@ export default {
     isLight() {
       return this.$vuetify && this.$vuetify.theme && this.$vuetify.theme.light;
     },
-    language() {
-
-      // const dummy = new Date();
-      // const offset = -dummy.getTimezoneOffset();
-
-      return browserLang({
-        languages: ["en", "ar", "nl", "fr", "de", "it", "ja", "ru", "es", "ca", "cs", "et", "lt", "no", "te", "ur", "zh-cn", "da", "tl", "el", "ms", "pl", "sr", "sv", "th", "bn", "zh-tw", "fi", "ko", "iw", "ml", "pt", "sk", "tg", "tr", "vi", "bg", "hr", "eo", "id", "lv", "mr", "ro", "sl", "ta", "uk", "kn", "hi"],
-        fallback: 'en',
-      });
-    },
     isThisMobile() { // just an example, could be one specific value if that's all you need
       return this.isHydrated ? this.$vuetify && this.$vuetify.breakpoint && this.$vuetify.breakpoint.smAndDown : false;
     },

packages/nc-gui/pages/index.vue

@@ -437,7 +437,7 @@ export default {
   },
   computed: {
     text() {
-      const text = this.lang.find(it => it.symbol === this.language);
+      const text = this.lang.find(it => it.symbol === this.$store.state.windows.language);
       return text ? text.text : 'default';
     },
     projectInfo() {

packages/nc-gui/plugins/i18n.js

@@ -11,7 +11,7 @@ export default ({app, store}) => {
   // This way we can use it globally in our components through this.$i18n
   app.i18n = new VueI18n({
     // Set the initial locale
-    locale: "en",
+    locale: store.state.windows.language,
 
     // Set the fallback locale in case the current locale can't be found
     fallbackLocale: "en",
@@ -20,14 +20,18 @@ export default ({app, store}) => {
     messages: {
       en: require("~/static/lang/en.json"),
       zh: require("~/static/lang/zh.json"),
-      ja: require("~/static/lang/ja.json"),
+      // ja: require("~/static/lang/ja.json"),
       fr: require("~/static/lang/fr.json")
     }
   });
 
   store.watch(
     (state) => state.windows.language,
-    (language) => app.i18n.locale = language
+    (language) => {
+      if (app.i18n.availableLocales.includes(language)) {
+        app.i18n.locale = language
+      }
+    }
   );
 };
 /**

packages/nc-gui/store/windows.js

@@ -1,7 +1,7 @@
 // import moment from 'moment';
 import themes from "../helpers/themes";
+import browserLang from "browser-lang";
 
-// const {machineId} = require('electron').remote.require('./libs');
 
 const defaultTheme = {
   "primary": "#0989ff",
@@ -24,7 +24,10 @@ export const state = () => ({
   isGaEnabled: true,
   isErrorReportingEnabled: true,
   customTheme: {},
-  language: 'en',
+  language: browserLang({
+    languages: ["en", "ar", "nl", "fr", "de", "it", "ja", "ru", "es", "ca", "cs", "et", "lt", "no", "te", "ur", "zh-cn", "da", "tl", "el", "ms", "pl", "sr", "sv", "th", "bn", "zh-tw", "fi", "ko", "iw", "ml", "pt", "sk", "tg", "tr", "vi", "bg", "hr", "eo", "id", "lv", "mr", "ro", "sl", "ta", "uk", "kn", "hi"],
+    fallback: 'en',
+  }),
   showTour: {
     home: true,
     dashboard: true
@@ -79,7 +82,7 @@ export const mutations = {
     state.theme = themes[state.themeName];
   }, MutSetCustomTheme(state, theme) {
     state.customTheme = theme;
-  }, MutSetLanguage(state, language) {
+  }, MutLanguage(state, language) {
     state.language = language;
   },
   MutToggleTreeviewWindow(state, show) {