mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
115 lines
3.1 KiB
Vue
115 lines
3.1 KiB
Vue
<template>
|
|
<b-card id="formuserlanguage" class="card-border-radius card-background-gray">
|
|
<div>
|
|
<b-row class="mb-4 text-right">
|
|
<b-col class="text-right">
|
|
<a @click="showLanguage ? (showLanguage = !showLanguage) : cancelEdit()">
|
|
<span class="pointer mr-3">{{ $t('form.changeLanguage') }}</span>
|
|
<b-icon v-if="showLanguage" class="pointer ml-3" icon="pencil"></b-icon>
|
|
<b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
|
|
</a>
|
|
</b-col>
|
|
</b-row>
|
|
</div>
|
|
|
|
<div v-if="showLanguage">
|
|
<b-row class="mb-3">
|
|
<b-col class="col-12">
|
|
<small>
|
|
<b>{{ $t('language') }}</b>
|
|
</small>
|
|
</b-col>
|
|
<b-col class="col-12">{{ $t(buildTagFromLanguageString()) }}</b-col>
|
|
</b-row>
|
|
</div>
|
|
|
|
<div v-else>
|
|
<div>
|
|
<b-form @submit.stop.prevent="onSubmit">
|
|
<b-row class="mb-2">
|
|
<b-col class="col-12">
|
|
<small>
|
|
<b>{{ $t('language') }}</b>
|
|
</small>
|
|
</b-col>
|
|
<b-col class="col-12">
|
|
<language-switch-select @update-language="updateLanguage" :language="language" />
|
|
</b-col>
|
|
</b-row>
|
|
|
|
<b-row class="text-right">
|
|
<b-col>
|
|
<div class="text-right" ref="submitButton">
|
|
<b-button
|
|
:variant="loading ? 'default' : 'success'"
|
|
@click="onSubmit"
|
|
type="submit"
|
|
class="mt-4"
|
|
:disabled="loading"
|
|
>
|
|
{{ $t('form.save') }}
|
|
</b-button>
|
|
</div>
|
|
</b-col>
|
|
</b-row>
|
|
</b-form>
|
|
</div>
|
|
</div>
|
|
</b-card>
|
|
</template>
|
|
<script>
|
|
import { localeChanged } from 'vee-validate'
|
|
import LanguageSwitchSelect from '../../../components/LanguageSwitchSelect.vue'
|
|
import { updateUserInfos } from '../../../graphql/queries'
|
|
|
|
export default {
|
|
name: 'FormUserLanguage',
|
|
components: { LanguageSwitchSelect },
|
|
data() {
|
|
return {
|
|
showLanguage: true,
|
|
language: '',
|
|
loading: true,
|
|
}
|
|
},
|
|
methods: {
|
|
updateLanguage(e) {
|
|
this.language = e
|
|
if (this.language !== this.$store.state.language) {
|
|
this.loading = false
|
|
} else {
|
|
this.loading = true
|
|
}
|
|
},
|
|
cancelEdit() {
|
|
this.showLanguage = true
|
|
},
|
|
|
|
async onSubmit() {
|
|
this.$apollo
|
|
.query({
|
|
query: updateUserInfos,
|
|
variables: {
|
|
email: this.$store.state.email,
|
|
locale: this.language,
|
|
},
|
|
})
|
|
.then(() => {
|
|
this.$i18n.locale = this.language
|
|
this.$store.commit('language', this.$i18n.locale)
|
|
localeChanged(this.$i18n.locale)
|
|
this.cancelEdit()
|
|
this.$toasted.success(this.$t('languages.success'))
|
|
})
|
|
.catch((error) => {
|
|
this.$toasted.error(error.message)
|
|
})
|
|
},
|
|
|
|
buildTagFromLanguageString() {
|
|
return 'languages.' + this.$store.state.language
|
|
},
|
|
},
|
|
}
|
|
</script>
|