mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-05-25 12:44:55 +00:00
91 lines
2.3 KiB
Vue
91 lines
2.3 KiB
Vue
<template>
|
|
<BaseWizardStep
|
|
:title="$t('wizard.install_language.title')"
|
|
:description="$t('wizard.install_language.description')"
|
|
>
|
|
<div class="w-full md:w-2/3">
|
|
<div class="mb-6">
|
|
<BaseInputGroup
|
|
:label="$t('wizard.language')"
|
|
:content-loading="isFetchingInitialData"
|
|
required
|
|
>
|
|
<BaseMultiselect
|
|
v-model="currentLanguage"
|
|
:content-loading="isFetchingInitialData"
|
|
:options="languages"
|
|
label="name"
|
|
value-prop="code"
|
|
:placeholder="$t('settings.preferences.select_language')"
|
|
class="w-full"
|
|
track-by="name"
|
|
:searchable="true"
|
|
@change="changeLanguage"
|
|
/>
|
|
</BaseInputGroup>
|
|
</div>
|
|
|
|
<BaseButton
|
|
v-show="!isFetchingInitialData"
|
|
@click="next"
|
|
>
|
|
{{ $t('wizard.continue') }}
|
|
<template #left="slotProps">
|
|
<BaseIcon name="ArrowRightIcon" :class="slotProps.class" />
|
|
</template>
|
|
</BaseButton>
|
|
|
|
</div>
|
|
</BaseWizardStep>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, ref } from 'vue'
|
|
import { useInstallationStore } from '@/scripts/admin/stores/installation.js'
|
|
import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
|
|
import BaseButton from '@/scripts/components/base/BaseButton.vue'
|
|
import BaseMultiselect from '@/scripts/components/base/base-select/BaseMultiselect.vue'
|
|
import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
|
|
import BaseWizardStep from '@/scripts/components/base/BaseWizardStep.vue'
|
|
|
|
const { global } = window.i18n
|
|
|
|
const emit = defineEmits(['next'])
|
|
|
|
let isFetchingInitialData = ref(false)
|
|
let isSaving = ref(false)
|
|
let languages = ref([])
|
|
let currentLanguage = 'en'
|
|
|
|
const installationStore = useInstallationStore()
|
|
|
|
onMounted(() => {
|
|
getLanguages()
|
|
})
|
|
|
|
async function getLanguages() {
|
|
isFetchingInitialData.value = true
|
|
|
|
const res = await installationStore.fetchInstallationLanguages()
|
|
|
|
languages.value = res.data.languages
|
|
|
|
isFetchingInitialData.value = false
|
|
}
|
|
|
|
|
|
function next() {
|
|
isSaving.value = true
|
|
emit('next')
|
|
isSaving.value = false
|
|
}
|
|
|
|
function changeLanguage(event){
|
|
if(typeof global.locale !== 'string') {
|
|
global.locale.value = event
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|