Store settings in store, fix #12

This commit is contained in:
Lucas Verney 2018-07-10 14:32:48 +02:00
parent 1f9c0bd623
commit 3e2e034fc8
6 changed files with 76 additions and 51 deletions

View File

@ -1,14 +1,9 @@
import moment from 'moment';
import Vue from 'vue'; import Vue from 'vue';
import VueI18n from 'vue-i18n'; import VueI18n from 'vue-i18n';
import { storageAvailable } from '@/tools';
import en from './en'; import en from './en';
import fr from './fr'; import fr from './fr';
Vue.use(VueI18n);
export function getBrowserLocales() { export function getBrowserLocales() {
let langs = []; let langs = [];
@ -34,37 +29,13 @@ export function getBrowserLocales() {
return locales; return locales;
} }
Vue.use(VueI18n);
export const messages = { export const messages = {
en, en,
fr, fr,
}; };
let locale = null;
if (storageAvailable('localStorage')) {
locale = localStorage.getItem('i18nSetting');
if (!messages[locale]) {
locale = null;
}
} else {
// Get best matching locale from browser
const locales = getBrowserLocales();
for (let i = 0; i < locales.length; i += 1) {
if (messages[locales[i]]) {
locale = locales[i];
break; // Break at first matching locale
}
}
}
if (!locale) {
locale = 'en'; // Safe default
}
if (locale) {
// Set moment locale
moment.locale(locale);
}
export default new VueI18n({ export default new VueI18n({
locale,
messages, messages,
}); });

View File

@ -14,6 +14,9 @@ import i18n from './i18n';
import router from './router'; import router from './router';
import store from './store'; import store from './store';
// Ensure locale is correctly set from the store value
store.dispatch('setLocale', store.state.settings.locale);
Vue.use(Vuetify); Vue.use(Vuetify);
Vue.component('v-lmap', Vue2Leaflet.LMap); Vue.component('v-lmap', Vue2Leaflet.LMap);

View File

@ -1,5 +1,16 @@
import moment from 'moment';
import * as api from '@/api'; import * as api from '@/api';
import { IS_LOADING, IS_DONE_LOADING, PUSH_REPORT, SHOW_REPORT_DETAILS, STORE_REPORTS } from './mutations-types'; import i18n from '@/i18n';
import {
IS_LOADING,
IS_DONE_LOADING,
PUSH_REPORT,
SET_SETTING,
SHOW_REPORT_DETAILS,
STORE_REPORTS,
} from './mutations-types';
export function fetchReports({ commit }) { export function fetchReports({ commit }) {
commit(IS_LOADING); commit(IS_LOADING);
@ -28,3 +39,16 @@ export function saveReport({ commit }, { type, lat, lng }) {
export function showReportDetails({ commit }, id) { export function showReportDetails({ commit }, id) {
return commit(SHOW_REPORT_DETAILS, { id }); return commit(SHOW_REPORT_DETAILS, { id });
} }
export function setLocale({ commit }, locale) {
// Set global Vue-i18n locale
i18n.locale = locale;
// Set moment locale
moment.locale(locale);
// Commit setting into the store
return commit(SET_SETTING, { setting: 'locale', value: locale });
}
export function setSetting({ commit }, { setting, value }) {
return commit(SET_SETTING, { setting, value });
}

View File

@ -1,5 +1,6 @@
export const IS_LOADING = 'IS_LOADING'; export const IS_LOADING = 'IS_LOADING';
export const IS_DONE_LOADING = 'IS_DONE_LOADING'; export const IS_DONE_LOADING = 'IS_DONE_LOADING';
export const PUSH_REPORT = 'PUSH_REPORT'; export const PUSH_REPORT = 'PUSH_REPORT';
export const SET_SETTING = 'SET_SETTING';
export const SHOW_REPORT_DETAILS = 'SHOW_REPORT_DETAILS'; export const SHOW_REPORT_DETAILS = 'SHOW_REPORT_DETAILS';
export const STORE_REPORTS = 'STORE_REPORTS'; export const STORE_REPORTS = 'STORE_REPORTS';

View File

@ -1,11 +1,45 @@
import moment from 'moment';
import Vue from 'vue'; import Vue from 'vue';
import { messages, getBrowserLocales } from '@/i18n';
import { storageAvailable } from '@/tools';
import * as types from './mutations-types'; import * as types from './mutations-types';
// Load settings from storage
let locale = null;
let preventSuspend = null;
if (storageAvailable('localStorage')) {
preventSuspend = localStorage.getItem('preventSuspend');
if (preventSuspend) {
preventSuspend = JSON.parse(preventSuspend);
}
locale = localStorage.getItem('locale');
if (!messages[locale]) {
locale = null;
}
if (!locale) {
// Get best matching locale from browser
const locales = getBrowserLocales();
for (let i = 0; i < locales.length; i += 1) {
if (messages[locales[i]]) {
locale = locales[i];
break; // Break at first matching locale
}
}
}
// Set moment locale
moment.locale(locale);
}
export const initialState = { export const initialState = {
isLoading: false, isLoading: false,
reportDetailsID: null, reportDetailsID: null,
reports: [], reports: [],
settings: {
locale: locale || 'en',
preventSuspend: preventSuspend || true,
},
}; };
export const mutations = { export const mutations = {
@ -15,6 +49,12 @@ export const mutations = {
[types.IS_DONE_LOADING](state) { [types.IS_DONE_LOADING](state) {
state.isLoading = false; state.isLoading = false;
}, },
[types.SET_SETTING](state, { setting, value }) {
if (storageAvailable('localStorage')) {
localStorage.setItem(setting, value);
}
state.settings[setting] = value;
},
[types.SHOW_REPORT_DETAILS](state, { id }) { [types.SHOW_REPORT_DETAILS](state, { id }) {
state.reportDetailsID = id; state.reportDetailsID = id;
}, },

View File

@ -6,7 +6,7 @@
<form> <form>
<v-select <v-select
:items="i18nItems" :items="i18nItems"
v-model="i18nSelect" v-model="locale"
:label="$t('settings.locale')" :label="$t('settings.locale')"
required required
></v-select> ></v-select>
@ -24,34 +24,20 @@
</template> </template>
<script> <script>
import moment from 'moment';
import { messages } from '@/i18n'; import { messages } from '@/i18n';
import { storageAvailable } from '@/tools';
export default { export default {
data() { data() {
let preventSuspend = localStorage.getItem('preventSuspend');
if (preventSuspend) {
preventSuspend = JSON.parse(preventSuspend);
} else {
preventSuspend = true;
}
return { return {
i18nItems: Object.keys(messages), i18nItems: Object.keys(messages),
i18nSelect: this.$i18n.locale, locale: this.$store.state.settings.locale,
preventSuspend, preventSuspend: this.$store.state.settings.preventSuspend,
}; };
}, },
methods: { methods: {
submit() { submit() {
if (storageAvailable('localStorage')) { this.$store.dispatch('setLocale', this.locale);
localStorage.setItem('i18nSetting', this.i18nSelect); this.$store.dispatch('setSetting', { setting: 'preventSuspend', value: this.preventSuspend });
localStorage.setItem('preventSuspend', JSON.stringify(this.preventSuspend));
}
this.$i18n.locale = this.i18nSelect;
// Set moment locale
moment.locale(this.i18nSelect);
}, },
}, },
}; };