Add Language setting to Profile front-end

This commit is contained in:
Bubka 2020-02-26 22:26:26 +01:00
parent 48edaa6907
commit 83aa5667e2
7 changed files with 68 additions and 4 deletions

View File

@ -0,0 +1,54 @@
<template>
<div class="field">
<label class="label" v-html="label"></label>
<div class="control">
<div class="select">
<select v-model="form[fieldName]">
<option v-for="option in options" :value="option.value">{{ option.text }}</option>
</select>
</div>
</div>
<field-error :form="form" :field="fieldName" />
<p class="help" v-html="help" v-if="help"></p>
</div>
</template>
<script>
export default {
name: 'FormSelect',
data() {
return {
}
},
props: {
label: {
type: String,
default: ''
},
fieldName: {
type: String,
default: '',
required: true
},
options: {
type: Array,
required: true
},
form: {
type: Object,
required: true
},
help: {
type: String,
default: ''
},
}
}
</script>

View File

@ -3,6 +3,7 @@ import Button from './Button'
import FieldError from './FieldError' import FieldError from './FieldError'
import FormWrapper from './FormWrapper' import FormWrapper from './FormWrapper'
import FormField from './FormField' import FormField from './FormField'
import FormSelect from './FormSelect'
import FormButtons from './FormButtons' import FormButtons from './FormButtons'
import VueFooter from './Footer' import VueFooter from './Footer'
@ -12,6 +13,7 @@ import VueFooter from './Footer'
FieldError, FieldError,
FormWrapper, FormWrapper,
FormField, FormField,
FormSelect,
FormButtons, FormButtons,
VueFooter, VueFooter,
].forEach(Component => { ].forEach(Component => {

View File

@ -69,6 +69,7 @@ export default {
"settings": "Settings", "settings": "Settings",
"account": "Account", "account": "Account",
"password": "Password", "password": "Password",
"language": "Language",
"confirm": [], "confirm": [],
"forms": { "forms": {
"edit_settings": "Edit settings" "edit_settings": "Edit settings"
@ -311,6 +312,7 @@ export default {
"settings": "Réglages", "settings": "Réglages",
"account": "Compte", "account": "Compte",
"password": "Mot de passe", "password": "Mot de passe",
"language": "Langue",
"confirm": [], "confirm": [],
"forms": { "forms": {
"edit_settings": "Modifier les réglages" "edit_settings": "Modifier les réglages"

View File

@ -1,7 +1,7 @@
<template> <template>
<form-wrapper :fail="fail" :success="success"> <form-wrapper :fail="fail" :success="success">
<form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)"> <form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
<form-field :form="form" fieldName="FirstSetting" :label="$t('auth.forms.FirstSetting')" /> <form-select :options="options" :form="form" fieldName="lang" :label="$t('settings.language')" />
<form-buttons :isBusy="form.isBusy" :caption="$t('commons.save')" /> <form-buttons :isBusy="form.isBusy" :caption="$t('commons.save')" />
</form> </form>
</form-wrapper> </form-wrapper>
@ -17,8 +17,12 @@
success: '', success: '',
fail: '', fail: '',
form: new Form({ form: new Form({
FirstSetting: '' lang: 'fr'
}) }),
options: [
{ text: 'en', value: 'en' },
{ text: 'fr', value: 'fr' },
]
} }
}, },

View File

@ -16,6 +16,7 @@
'settings' => 'Settings', 'settings' => 'Settings',
'account' => 'Account', 'account' => 'Account',
'password' => 'Password', 'password' => 'Password',
'language' => 'Language',
'confirm' => [ 'confirm' => [
], ],

View File

@ -16,6 +16,7 @@
'settings' => 'Réglages', 'settings' => 'Réglages',
'account' => 'Compte', 'account' => 'Compte',
'password' => 'Mot de passe', 'password' => 'Mot de passe',
'language' => 'Langue',
'confirm' => [ 'confirm' => [
], ],

View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class="has-background-black-ter" lang="en"> <html class="has-background-black-ter" lang="{{ option('lang', 'en') }}">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">