2020-08-31 21:34:32 +00:00
|
|
|
<template lang="html">
|
2020-09-28 23:25:36 +00:00
|
|
|
<div>
|
2020-09-26 00:09:20 +00:00
|
|
|
<b-jumbotron
|
2020-10-05 18:42:13 +00:00
|
|
|
:header="$t('languages.title')"
|
2020-09-26 00:09:20 +00:00
|
|
|
header-level="5"
|
2020-10-14 00:35:40 +00:00
|
|
|
:bg-variant="nightMode ? 'dark' : ''"
|
|
|
|
:text-variant="nightMode ? 'white' : ''"
|
|
|
|
:border-variant="nightMode ? 'dark' : ''"
|
2020-09-26 00:09:20 +00:00
|
|
|
fluid
|
|
|
|
/>
|
2020-08-31 21:34:32 +00:00
|
|
|
|
2020-09-26 00:09:20 +00:00
|
|
|
<b-container>
|
|
|
|
<b-form-select v-model="language" class="mb-2 w-50">
|
2020-08-31 21:34:32 +00:00
|
|
|
<b-form-select-option
|
2020-10-05 18:42:13 +00:00
|
|
|
v-for="{ name, value } in SUPPORTED_LANGUAGES"
|
|
|
|
:key="value"
|
|
|
|
:value="value"
|
2020-08-31 21:34:32 +00:00
|
|
|
>
|
2020-10-05 18:42:13 +00:00
|
|
|
{{ name }}
|
2020-08-31 21:34:32 +00:00
|
|
|
</b-form-select-option>
|
|
|
|
</b-form-select>
|
|
|
|
|
2020-09-26 00:09:20 +00:00
|
|
|
<br>
|
|
|
|
|
2020-08-31 21:34:32 +00:00
|
|
|
<b-button
|
|
|
|
:disabled="saving"
|
2020-09-26 00:09:20 +00:00
|
|
|
variant="primary"
|
2020-08-31 21:34:32 +00:00
|
|
|
@click="saveSettings"
|
|
|
|
>
|
|
|
|
<b-spinner small v-if="saving" />
|
2020-10-05 18:42:13 +00:00
|
|
|
<span v-else>{{ $t('languages.save') }}</span>
|
2020-08-31 21:34:32 +00:00
|
|
|
</b-button>
|
2020-09-26 00:09:20 +00:00
|
|
|
</b-container>
|
2020-09-28 23:25:36 +00:00
|
|
|
</div>
|
2020-08-31 21:34:32 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2020-10-14 00:35:40 +00:00
|
|
|
import { mapState, mapGetters } from 'vuex';
|
2020-10-05 18:42:13 +00:00
|
|
|
import { SUPPORTED_LANGUAGES } from '@/constants';
|
2020-08-31 21:34:32 +00:00
|
|
|
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
saving: false,
|
2020-10-05 18:42:13 +00:00
|
|
|
SUPPORTED_LANGUAGES,
|
2020-08-31 21:34:32 +00:00
|
|
|
language: null,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
computed: {
|
|
|
|
...mapState(['settings']),
|
2020-10-14 00:35:40 +00:00
|
|
|
...mapGetters(['nightMode']),
|
2020-08-31 21:34:32 +00:00
|
|
|
},
|
|
|
|
|
2020-09-26 00:09:20 +00:00
|
|
|
mounted() {
|
|
|
|
const { settings } = this;
|
2020-08-31 21:34:32 +00:00
|
|
|
|
2020-10-09 18:11:32 +00:00
|
|
|
this.language = settings && settings.language
|
|
|
|
? settings.language
|
|
|
|
: 'en';
|
2020-09-26 00:09:20 +00:00
|
|
|
},
|
2020-08-31 21:34:32 +00:00
|
|
|
|
2020-09-26 00:09:20 +00:00
|
|
|
methods: {
|
2020-08-31 21:34:32 +00:00
|
|
|
saveSettings() {
|
|
|
|
const { language, settings } = this;
|
|
|
|
|
|
|
|
const payload = {
|
|
|
|
...settings,
|
|
|
|
language,
|
|
|
|
};
|
|
|
|
|
2020-10-05 18:42:13 +00:00
|
|
|
// TODO: Make async
|
2020-08-31 21:34:32 +00:00
|
|
|
this.$store.dispatch('SAVE_SETTINGS', payload)
|
|
|
|
.then(() => {
|
|
|
|
this.$bvToast.toast('Settings saved', { title: 'Success', variant: 'success' });
|
|
|
|
location.reload();
|
|
|
|
})
|
|
|
|
.catch(() => {
|
|
|
|
this.$bvToast.toast('There was an error saving your settings', { title: 'Error', variant: 'danger' });
|
|
|
|
this.saving = false;
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|