Restore Language Component

Author: elsiosanchez

src/api/ADempiere/common/index.ts

@@ -136,6 +136,17 @@ export function requestLanguagesList({
       page_size: pageSize
     }
   })
+    .then(languagesListResponse => {
+      const { convertLanguage } = require('@/utils/ADempiere/apiConverts/core.js')
+
+      return {
+        nextPageToken: languagesListResponse.next_page_token,
+        recordCount: languagesListResponse.record_count,
+        languagesList: languagesListResponse.languages.map(language => {
+          return convertLanguage(language)
+        })
+      }
+    })
 }
 
 /**

src/components/LangSelect/index.vue

@@ -1,35 +1,20 @@
 <template>
-  <el-dropdown
-    trigger="click"
-  >
-    <span class="el-dropdown-link">
+  <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
+    <div style="margin-right: 5px;margin-left: 4px;">
       <svg-icon class-name="international-icon" icon-class="language" />
-    </span>
+    </div>
     <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item
-        v-for="(language, key) in list"
-        :key="key"
-      >
-        <el-dropdown
-          @command="handleSetLanguage"
-        >
-          <span class="el-dropdown-link">
-            {{ language.language_name }}
-            <i
-              class="el-icon-arrow-down el-icon--right"
-            />
-          </span>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item
-              v-for="(languageChild, index) in language.childs"
-              :key="index"
-              :command="languageChild"
-              :disabled="languageChild.language === currentLanguage"
-            >
-              {{ languageChild.language_name }}
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
+      <el-dropdown-item :disabled="language==='zh'" command="zh">
+        中文
+      </el-dropdown-item>
+      <el-dropdown-item :disabled="language==='en'" command="en">
+        English
+      </el-dropdown-item>
+      <el-dropdown-item :disabled="language==='es'" command="es">
+        Español
+      </el-dropdown-item>
+      <el-dropdown-item :disabled="language==='ja'" command="ja">
+        日本語
       </el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>
@@ -40,14 +25,9 @@ import { defineComponent, computed } from '@vue/composition-api'
 
 import store from '@/store'
 import router from '@/router'
-// Constants
-import {
-  DEFAULT_LANGUAGE_LIST
-} from '@/utils/ADempiere/dictionary/language.ts'
 
 // Utils and Helper Methods
 import { showMessage } from '@/utils/ADempiere/notification'
-import { isEmptyValue } from '@/utils/ADempiere'
 
 export default defineComponent({
   name: 'SearchCriteria',
@@ -61,38 +41,17 @@ export default defineComponent({
     * Computed
     */
 
-    const currentLanguage = computed(() => {
-      return store.getters.getCurrentLanguage
-    })
-
-    const languageAll = computed(() => {
-      return store.getters.getLanguages
-    })
-
-    const list = computed(() => {
-      const groupedLanguages = languageAll.value.reduce((acc, lang) => {
-        const languageCode = lang.language_iso
-        if (!acc[languageCode]) {
-          acc[languageCode] = []
-        }
-        acc[languageCode].push(lang)
-        return acc
-      }, {})
-
-      const result = Object.entries(groupedLanguages).map(([languageCode, languages]) => ({
-        ...displayLanguage(languageCode),
-        childs: languages
-      }))
-      return result
+    const language = computed(() => {
+      return store.getters.language
     })
 
     /**
      * Methods
      */
     function handleSetLanguage(lang) {
-      this.$i18n.locale = lang.language_iso
-      store.dispatch('app/setLanguage', lang.language)
-        .then(() => {
+      this.$i18n.locale = lang
+      store.dispatch('app/setLanguage', lang)
+        .then(response => {
           const { path } = currentRoute
           if (path !== '/login') {
             location.reload()
@@ -110,32 +69,10 @@ export default defineComponent({
         })
     }
 
-    function load() {
-      store.dispatch('requestLanguagesLoaded')
-    }
-
-    function displayLanguage(lang) {
-      if (isEmptyValue(lang) && isEmptyValue(DEFAULT_LANGUAGE_LIST)) return lang
-      const langs = DEFAULT_LANGUAGE_LIST.find(item => {
-        if (item.language_iso === lang) {
-          return item
-        }
-      })
-      return langs || {
-        language_iso: lang,
-        label: lang
-      }
-    }
-
-    load()
-
     return {
       // Computed
-      list,
-      languageAll,
-      currentLanguage,
+      language,
       // Methods
-      load,
       handleSetLanguage
     }
   }

src/store/modules/ADempiere/system.js

@@ -32,8 +32,7 @@ import { convertDateFormat } from '@/utils/ADempiere/formatValue/dateFormat.js'
 const system = {
   state: {
     systemDefinition: {},
-    languagesList: [],
-    languages: []
+    languagesList: []
   },
 
   mutations: {
@@ -50,9 +49,6 @@ const system = {
       })
 
       state.languagesList = Object.freeze(languagesList)
-    },
-    setLanguages(state, list) {
-      state.languages = list
     }
   },
 
@@ -89,20 +85,6 @@ const system = {
         .then(() => {
           location.reload(true)
         })
-    },
-    requestLanguagesLoaded({ commit }) {
-      return new Promise((resolve, reject) => {
-        requestLanguagesList({})
-          .then(response => {
-            const { languages } = response
-            commit('setLanguages', languages)
-            resolve(languages)
-          })
-          .catch(error => {
-            console.warn(`Error getting Languages List: ${error.message}. Code: ${error.code}.`)
-            reject(error)
-          })
-      })
     }
 
   },
@@ -147,9 +129,6 @@ const system = {
       return state.languagesList.find(definition => {
         return definition.language === language
       })
-    },
-    getLanguages: (state) => {
-      return state.languages
     }
   }
 }