- Fix: choose language : added flags

src/components/Header.vue

@@ -1,13 +1,13 @@
 <template>
     <div>
 
-<!--
-        <router-link :to="'/'" v-if="$router.currentRoute.meta.backButton">
-            <button>
-                <i>arrow_back</i>
-            </button>
-        </router-link>
--->
+        <!--
+                <router-link :to="'/'" v-if="$router.currentRoute.meta.backButton">
+                    <button>
+                        <i>arrow_back</i>
+                    </button>
+                </router-link>
+        -->
         <q-layout-header>
             <q-toolbar
                     color="primary"
@@ -43,7 +43,22 @@
                     <q-icon v-if="isUserNotAuth" name="device_unknown"></q-icon>
                 </q-btn>
 
-                <q-select class="sel_lang" v-model="lang" stack-label="" :options="selectOpLang"/>
+                <q-btn-dropdown
+                        :label="langshort"
+                >
+                    <q-list link>
+                        <q-item v-for="langrec in selectOpLang" :key="langrec.value" v-close-overlay
+                                @click.native="lang = langrec.value">
+                            <q-item-side>
+                                <img :src="langrec.image" class="flagimg">
+                            </q-item-side>
+                            <q-item-main>
+                                <q-item-tile sublabel>{{langrec.label}}</q-item-tile>
+                            </q-item-main>
+                        </q-item>
+                    </q-list>
+                </q-btn-dropdown>
+
 
                 <!--
                 <message-popover></message-popover>
@@ -77,12 +92,12 @@
   import drawer from '../layouts/drawer/drawer.vue'
   import messagePopover from '../layouts/toolbar/messagePopover/messagePopover.vue'
 
-  import { GlobalStore } from '@modules'
+  import { GlobalStore, UserStore } from '@modules'
   import { rescodes } from '../store/Modules/rescodes'
-  import QIcon from "quasar-framework/src/components/icon/QIcon";
-  import { StateConnection } from "../model";
-  import { Watch } from "vue-property-decorator";
-  import QField from "quasar-framework/src/components/field/QField";
+  import QIcon from "quasar-framework/src/components/icon/QIcon"
+  import { StateConnection } from "../model"
+  import { Watch } from "vue-property-decorator"
+  import QField from "quasar-framework/src/components/field/QField"
 
   @Component({
     components: {
@@ -101,6 +116,7 @@
     public iconConn: string = 'wifi'
     public clIconConn: string = 'clIconOnline'
     public strConn: string = ''
+    public langshort: string = ''
 
     get conn_changed() {
       return GlobalStore.state.stateConnection
@@ -147,10 +163,10 @@
     }
 
     public selectOpLang = [
-      { label: 'English (UK)', icon: 'fa-flag-us', value: 'en-uk' },
-      { label: 'German', icon: 'fa-flag-de', value: 'de' },
-      { label: 'Spanish', icon: 'fa-flag-es', value: 'es' },
-      { label: 'Italian', icon: 'fa-facebook', value: 'it' }
+      { label: 'English', icon: 'fa-flag-us', value: 'enUs', image: '../statics/images/gb.png', short: 'EN' },
+      { label: 'German', icon: 'fa-flag-de', value: 'de', image: '../statics/images/de.png', short: 'DE' },
+      { label: 'Spanish', icon: 'fa-flag-es', value: 'es', image: '../statics/images/es.png', short: 'SP' },
+      { label: 'Italian', icon: 'fa-facebook', value: 'it', image: '../statics/images/it.png', short: 'IT' }
     ]
 
     get leftDrawerOpen() {
@@ -166,26 +182,80 @@
       // return "AA"
       return "[" + process.env.APP_VERSION + "]"
     }
+
     get lang() {
       return this.$q.i18n.lang
     }
 
+
+    setshortlang (lang) {
+      for (let indrec in this.selectOpLang) {
+        if (this.selectOpLang[indrec].value === lang) {
+          // console.log('this.selectOpLang[indrec].short', this.selectOpLang[indrec].short, this.selectOpLang[indrec].value)
+          this.langshort = this.selectOpLang[indrec].short
+          return
+        }
+      }
+
+    }
+
     set lang(lang) {
       this.$i18n.locale = this.snakeToCamel(lang)
+      // this.$q.notify('IMPOSTA LANG= ' + this.$i18n.locale)
+      // console.log('IMPOSTA LANG= ' + this.$i18n.locale)
+
+      UserStore.mutations.setlang(this.$i18n.locale)
+
+      let mylangtopass = lang
+
+      this.setshortlang(mylangtopass)
+
+      if (mylangtopass === 'enUs')
+        mylangtopass = 'en-us'
 
       // dynamic import, so loading on demand only
-      import(`quasar-framework/i18n/${lang}`).then(lang => {
+      import(`quasar-framework/i18n/${mylangtopass}`).then(lang => {
         this.$q.i18n.set(lang.default)
         import(`src/statics/i18n`).then(function () {
         })
       })
     }
 
+    getLangAtt() {
+      return this.$q.i18n.lang
+    }
+
+    setLangAtt(mylang) {
+      this.$q.i18n.lang = mylang
+    }
+
+    beforeMount() {
+      // Estrai la Lang dal Localstorage
+
+      let my = this.getLangAtt()
+      // this.$q.notify('prima: ' + String(my))
+
+      let mylang = localStorage.getItem(rescodes.localStorage.lang)
+      if (mylang.toLowerCase() === 'enus')
+        mylang = 'enUs'
+      if (mylang.toLowerCase() === 'enuk')
+        mylang = 'enUk'
+
+      if (!mylang)
+        mylang = process.env.LANG_DEFAULT
+
+
+      this.setLangAtt(mylang)
+      this.setshortlang(mylang)
+      // this.$q.notify('Dopo: ' + String(this.getLangAtt()))
+
+    }
+
+    mounted() {
 
-    mounted () {
 
       // Test this by running the code snippet below and then
-        // use the "Offline" checkbox in DevTools Network panel
+      // use the "Offline" checkbox in DevTools Network panel
 
       let mythis = this
       // console.log('Event LOAD')
@@ -207,9 +277,9 @@
             }
           }
 
-          window.addEventListener('online', updateOnlineStatus);
-          window.addEventListener('offline', updateOnlineStatus);
-        });
+          window.addEventListener('online', updateOnlineStatus)
+          window.addEventListener('offline', updateOnlineStatus)
+        })
       }
     }
 
@@ -239,7 +309,7 @@
         }
     }
 
-    .fixed-left:hover{
+    .fixed-left:hover {
         cursor: ew-resize;
     }
 
@@ -465,5 +535,10 @@
         color: red;
     }
 
+    .flagimg {
+        width: 30px;
+        height: 24px;
+    }
+
 </style>
 

src/components/todos/SingleTodo/SingleTodo.vue

@@ -1,6 +1,10 @@
 <template>
     <div :class="getClassRow()">
-
+        <!--<div v-if="isFirst">-->
+            <!--<q-context-menu ref="contextMenu">-->
+                <!--<SubMenus :menuPopupTodo="menuPopupTodo" :itemtodo="itemtodo" @clickMenu="clickMenu" @setPriority="setPriority"></SubMenus>-->
+            <!--</q-context-menu>-->
+        <!--</div>-->
 
         <div v-if="isTodo()" class="flex-item completed-item">
             <q-btn push flat

src/components/todos/todo/todo.ts

@@ -354,9 +354,11 @@ export default class Todo extends Vue {
   setarrPriority() {
     this.arrPrior = []
     const arr = rescodes.selectPriority[UserStore.state.lang]
-    arr.forEach(rec => {
-      this.arrPrior.push(rec.value)
-    })
+    if (arr) {
+      arr.forEach(rec => {
+        this.arrPrior.push(rec.value)
+      })
+    }
     // console.log('Array PRIOR:', this.arrPrior)
   }
 
@@ -424,10 +426,15 @@ export default class Todo extends Vue {
   }
 
   getPriorityByInd(index) {
-    const arr = rescodes.selectPriority[UserStore.state.lang]
-    for (let rec of arr) {
-      if (rec.value === index)
-        return rec.label
+    // console.log('LANG in PRIOR', UserStore.state.lang)
+    try {
+      const arr = rescodes.selectPriority[UserStore.state.lang]
+      for (let rec of arr) {
+        if (rec.value === index)
+          return rec.label
+      }
+    } catch (e) {
+
     }
     return ''
   }

src/components/todos/todo/todo.vue

@@ -31,9 +31,8 @@
                     <!--</transition-group>-->
                 </draggable>
             </div>
-            <q-context-menu ref="contextMenu">
-            <SubMenus :menuPopupTodo="menuPopupTodo" :itemtodo="itemtodo" @clickMenu="clickMenu" @setPriority="setPriority"></SubMenus>
-            </q-context-menu>
+
+
 
             <q-input ref="insertTask" v-model="todo" inverted :float-label="$t('todo.insert')"
                      :after="[{icon: 'arrow_forward', content: true, handler () {}}]"