Write and read language setting from backend

server/db/dbModels.go

@@ -19,6 +19,7 @@ type User struct {
 	Name         string       `json:"name"`
 	Vehicles     []Vehicle    `gorm:"many2many:user_vehicles;" json:"vehicles"`
 	IsDisabled   bool         `json:"isDisabled"`
+	Language     string       `json:"language"`
 }
 
 func (b *User) MarshalJSON() ([]byte, error) {

server/db/migrations.go

@@ -29,7 +29,7 @@ var migrations = []localMigration{
 	},
 	{
 		Name:  "2023_02_26_13_42_AddLanguage",
-		Query: "ALTER TABLE users ADD COLUMN language text default 'English'",
+		Query: "ALTER TABLE users ADD COLUMN language text default 'English 🇬🇧'",
 	},
 }
 

ui/src/router/views/settings.vue

@@ -22,6 +22,7 @@ export default {
   data: function() {
     return {
       settingsModel: {
+        language: this.me.language,
         currency: this.me.currency,
         distanceUnit: this.me.distanceUnit,
         dateFormat: this.me.dateFormat,
@@ -36,7 +37,7 @@ export default {
     }
   },
   computed: {
-    ...mapState('vehicles', ['currencyMasters', 'distanceUnitMasters']),
+    ...mapState('masters', ['currencyMasters', 'languageMasters', 'distanceUnitMasters']),
     passwordValid() {
       if (this.changePassModel.new === '' || this.changePassModel.renew === '') {
         return true
@@ -58,6 +59,15 @@ export default {
         )
       })
     },
+    filteredLanguageMasters() {
+      return this.languageMasters.filter((option) => {
+        return (
+          option.nameNative
+            .toString()
+            .toLowerCase()
+            .indexOf(this.settingsModel.language.toLowerCase()) >= 0)
+      })
+    },
   },
   methods: {
     changePassword() {
@@ -126,6 +136,9 @@ export default {
     formatCurrency(option) {
       return `${option.namePlural} (${option.code})`
     },
+    formatLanguage(option) {
+      return `${option.nameNative} ${option.emoji}`
+    },
   },
 }
 </script>
@@ -136,9 +149,17 @@ export default {
     <div class="columns"
       ><div class="column">
         <form class="box " @submit.prevent="saveSettings">
-          <h1 class="subtitle">
+          <b-field :label="$t('language')">
-            {{ $t('settingdesc') }}
+          <b-autocomplete 
-          </h1>
+            v-model="settingsModel.language"
+            :custom-formatter="formatLanguage"
+            :data="filteredLanguageMasters"
+            :placeholder="$t('language')"
+            :keep-first="true"
+            :open-on-focus="true"
+            required
+          />
+            </b-field>
           <b-field :label="$t('currency')">
             <b-autocomplete
               v-model="settingsModel.currency"

ui/src/state/modules/masters.js

@@ -0,0 +1,52 @@
+import axios from 'axios'
+
+export const state = {
+  languageMasters: [],
+  fuelUnitMasters: [],
+  distanceUnitMasters: [],
+  currencyMasters: [],
+  fuelTypeMasters: [],
+  roleMasters: [],
+}
+export const mutations = {
+  CACHE_LANGUAGE_MASTERS(state, masters) {
+    state.languageMasters = masters
+  },
+  CACHE_FUEL_UNIT_MASTERS(state, masters) {
+    state.fuelUnitMasters = masters
+  },
+  CACHE_DISTANCE_UNIT_MASTERS(state, masters) {
+    state.distanceUnitMasters = masters
+  },
+  CACHE_FUEL_TYPE_MASTERS(state, masters) {
+    state.fuelTypeMasters = masters
+  },
+  CACHE_CURRENCY_MASTERS(state, masters) {
+    state.currencyMasters = masters
+  },
+  CACHE_ROLE_MASTERS(state, roles) {
+    state.roleMasters = roles
+  },
+}
+
+export const getters = {}
+
+export const actions = {
+  init({ dispatch, rootState }) {
+    const { currentUser } = rootState.auth
+    if (currentUser) {
+      dispatch('fetchMasters')
+    }
+  },
+  fetchMasters({ commit, state, rootState }) {
+    return axios.get('/api/masters').then((response) => {
+      commit('CACHE_LANGUAGE_MASTERS', response.data.languages)
+      commit('CACHE_FUEL_UNIT_MASTERS', response.data.fuelUnits)
+      commit('CACHE_FUEL_TYPE_MASTERS', response.data.fuelTypes)
+      commit('CACHE_CURRENCY_MASTERS', response.data.currencies)
+      commit('CACHE_DISTANCE_UNIT_MASTERS', response.data.distanceUnits)
+      commit('CACHE_ROLE_MASTERS', response.data.roles)
+      return response.data
+    })
+  },
+}

ui/src/state/modules/vehicles.js

@@ -4,11 +4,6 @@ import { filter } from 'lodash'
 import parseISO from 'date-fns/parseISO'
 export const state = {
   vehicles: [],
-  roleMasters: [],
-  fuelUnitMasters: [],
-  distanceUnitMasters: [],
-  currencyMasters: [],
-  fuelTypeMasters: [],
   quickEntries: [],
   vehicleStats: new Map(),
 }
@@ -29,24 +24,9 @@ export const mutations = {
   CACHE_VEHICLE_STATS(state, stats) {
     state.vehicleStats.set(stats.vehicleId, stats)
   },
-  CACHE_FUEL_UNIT_MASTERS(state, masters) {
-    state.fuelUnitMasters = masters
-  },
-  CACHE_DISTANCE_UNIT_MASTERS(state, masters) {
-    state.distanceUnitMasters = masters
-  },
-  CACHE_FUEL_TYPE_MASTERS(state, masters) {
-    state.fuelTypeMasters = masters
-  },
-  CACHE_CURRENCY_MASTERS(state, masters) {
-    state.currencyMasters = masters
-  },
   CACHE_QUICK_ENTRIES(state, entries) {
     state.quickEntries = entries
   },
-  CACHE_ROLE_MASTERS(state, roles) {
-    state.roleMasters = roles
-  },
 }
 
 export const actions = {
@@ -54,22 +34,9 @@ export const actions = {
     const { currentUser } = rootState.auth
     if (currentUser) {
       dispatch('fetchVehicles')
-      dispatch('fetchMasters')
       dispatch('fetchQuickEntries', { force: true })
     }
   },
-  fetchMasters({ commit, state, rootState }) {
-    return axios.get('/api/masters').then((response) => {
-      const fuelUnitMasters = response.data.fuelUnits
-      const fuelTypeMasters = response.data.fuelTypes
-      commit('CACHE_FUEL_UNIT_MASTERS', fuelUnitMasters)
-      commit('CACHE_FUEL_TYPE_MASTERS', fuelTypeMasters)
-      commit('CACHE_CURRENCY_MASTERS', response.data.currencies)
-      commit('CACHE_DISTANCE_UNIT_MASTERS', response.data.distanceUnits)
-      commit('CACHE_ROLE_MASTERS', response.data.roles)
-      return response.data
-    })
-  },
   fetchVehicles({ commit, state, rootState }) {
     return axios.get('/api/me/vehicles').then((response) => {
       const data = response.data