52 lines
1.1 KiB
Vue
52 lines
1.1 KiB
Vue
<template>
|
|
<div class="language-switcher">
|
|
<pill-radio-buttons
|
|
data-cy="language-switcher-buttons"
|
|
:items="languages"
|
|
:selected-item="language"
|
|
@update:selected-item="changeLanguage"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { graphql } from '@/__generated__';
|
|
import { useMutation, useQuery } from '@vue/apollo-composable';
|
|
import { computed } from '@vue/reactivity';
|
|
import PillRadioButtons from '@/components/ui/PillRadioButtons.vue';
|
|
|
|
const { result } = useQuery(
|
|
graphql(`
|
|
query LanguageQuery {
|
|
me {
|
|
language @client
|
|
}
|
|
}
|
|
`)
|
|
);
|
|
|
|
const languages = ['de', 'en', 'fr'];
|
|
const language = computed(() => result.value?.me.language || 'de');
|
|
const { mutate: changeLanguageMutation } = useMutation(
|
|
graphql(`
|
|
mutation SetLanguage($language: String!) {
|
|
setLanguage(language: $language) @client {
|
|
language
|
|
}
|
|
}
|
|
`)
|
|
);
|
|
|
|
const changeLanguage = (lang: string) => changeLanguageMutation({ language: lang });
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import 'styles/helpers';
|
|
.language-switcher {
|
|
width: 100%;
|
|
@include desktop {
|
|
width: auto;
|
|
}
|
|
}
|
|
</style>
|