Merge branch '229-join-page-language-display' into 'dev'

Resolve "Join page language display,  rtl & ltr fixes for safari browser"

See merge request keanuapp/keanuapp-weblite!38

src/components/Join.vue

@@ -77,8 +77,11 @@
     <div class="join-lang">
       <h3 class="mb-2">{{ $t("profile.select_language") }}</h3>
       <v-row class="align-center">
-        <v-col v-for="(lang,key) in getSortedLangByActive.slice(0, 4)" :key="key">
-          <span :class="$i18n.locale==lang.value?'active':''" >  {{lang.text}} </span>
+        <v-col v-for="lang in activeLanguage" :key="lang.value">
+          <span class="active">{{ lang.text }}</span>
+        </v-col>
+        <v-col v-for="(lang, key) in getDisplayLanguage.slice(0,3)" :key="key">
+          <button class="inactive" @click="updateLanguage(lang.value)">{{ lang.text }}</button>
         </v-col>
         <v-col>
           <v-btn
@@ -202,16 +205,13 @@ export default {
         this.$store.commit("setUseLocalStorage", rememberMe);
       },
     },
-
-    getSortedLangByActive() {
-      const context = this;
-      return this.getLanguages().sort(function(lang) {
-        if(lang.value == context.$i18n.locale) {
-          return -1;
-        } else {
-          return 1;
-        }
-      });
+    getDisplayLanguage() {
+      let displayLanguages = [...this.getLanguages()];
+      return displayLanguages.filter(lang => lang.display && lang.value !== this.$i18n.locale);
+    },
+    activeLanguage() {
+      let activeLanguages = [...this.getLanguages()]
+      return activeLanguages.filter(lang => lang.value === this.$i18n.locale);
     }
   },
   watch: {

src/components/languageMixin.js

@@ -3,18 +3,25 @@ export default {
     return {
       languages: [],
       activeLang:null,
+      displayLanguage: ['en','bo','zh_Hans','ug']
     }
   },
   methods: {
     getLanguages() {
       return this.languages;
+    },
+    updateLanguage(lang) {
+      this.$i18n.locale = lang;
+      this.$store.commit('setLanguage', lang);
     }
   },
   mounted() {
+    const context = this
     for (const locale of Object.keys(this.$i18n.messages)) {
       this.languages.push({
         text: this.$i18n.messages[locale].language_display_name || locale,
         value: locale,
+        display: context.displayLanguage.includes(locale)
       });
     }
   }