50 lines
1.5 KiB
Vue
50 lines
1.5 KiB
Vue
<script
|
|
lang="ts"
|
|
setup
|
|
>
|
|
import { useUiStore } from 'src/stores/ui-store';
|
|
import type { MessageLanguages } from 'src/boot/i18n';
|
|
|
|
const ui_store = useUiStore();
|
|
|
|
const setDisplayLanguage = (locale: MessageLanguages) => {
|
|
if (ui_store.user_preferences !== undefined) {
|
|
ui_store.user_preferences.display_language = locale;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<q-list
|
|
dense
|
|
class="full-width"
|
|
:class="ui_store.is_mobile_mode ? 'column' : 'row'"
|
|
>
|
|
<q-item
|
|
v-for="locale in $i18n.availableLocales"
|
|
:key="locale"
|
|
clickable
|
|
dense
|
|
v-ripple
|
|
class="col rounded-5 q-ma-sm shadow-4"
|
|
:class="locale === $i18n.locale ? 'bg-accent text-white text-weight-bolder' : ''"
|
|
@click="setDisplayLanguage(locale as MessageLanguages)"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-img :src="`src/assets/${locale}.png`"/>
|
|
</q-item-section>
|
|
|
|
<q-item-section class="text-uppercase justify-center">
|
|
<q-item-label> {{ $t(`profile.preferences.${locale}`) }}</q-item-label>
|
|
</q-item-section>
|
|
|
|
<q-item-section side>
|
|
<q-icon
|
|
v-if="locale === $i18n.locale"
|
|
name="check"
|
|
color="white"
|
|
/>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</template> |