129 lines
3.6 KiB
Vue
129 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import WizardPage from "@/components/onboarding/WizardPage.vue";
|
|
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
|
|
import { computed, ref, watch } from "vue";
|
|
import { useUserStore } from "@/stores/user";
|
|
import { useRoute } from "vue-router";
|
|
import { useTranslation } from "i18next-vue";
|
|
import { profileNextRoute, useEntities } from "@/services/onboarding";
|
|
import AvatarImage from "@/components/ui/AvatarImage.vue";
|
|
|
|
const { t } = useTranslation();
|
|
|
|
const user = useUserStore();
|
|
const route = useRoute();
|
|
|
|
const { organisations } = useEntities();
|
|
|
|
const selectedOrganisation = ref({
|
|
id: 0,
|
|
name: t("a.Auswählen"),
|
|
});
|
|
|
|
watch(
|
|
organisations,
|
|
(newOrganisations) => {
|
|
if (newOrganisations) {
|
|
const userOrganisation = newOrganisations.find((c) => c.id === user.organisation);
|
|
if (userOrganisation) {
|
|
selectedOrganisation.value = userOrganisation;
|
|
}
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
const validOrganisation = computed(() => {
|
|
return selectedOrganisation.value.id !== 0;
|
|
});
|
|
|
|
const avatarError = ref(false);
|
|
const avatarLoading = ref(false);
|
|
|
|
async function avatarUpload(e: Event) {
|
|
const { files } = e.target as HTMLInputElement;
|
|
if (!files?.length) return;
|
|
avatarLoading.value = true;
|
|
avatarError.value = false;
|
|
|
|
try {
|
|
await user.setUserAvatar(files[0]);
|
|
} catch (e) {
|
|
avatarError.value = true;
|
|
} finally {
|
|
avatarLoading.value = false;
|
|
}
|
|
}
|
|
|
|
watch(selectedOrganisation, async (organisation) => {
|
|
await user.setUserOrganisation(organisation.id);
|
|
});
|
|
|
|
const nextRoute = computed(() => {
|
|
return profileNextRoute(route.params.courseType);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<WizardPage :step="1">
|
|
<template #content>
|
|
<h2 class="my-10">{{ $t("a.Profil ergänzen") }}</h2>
|
|
|
|
<h3 class="mb-3">{{ $t("a.Gesellschaft") }}</h3>
|
|
|
|
<p class="mb-6 max-w-md hyphens-none">
|
|
{{
|
|
$t(
|
|
"a.Wähle hier den Namen der Gesellschaft aus, in der du arbeitest. So können dich andere Personen einfacher finden."
|
|
)
|
|
}}
|
|
</p>
|
|
|
|
<ItDropdownSelect v-model="selectedOrganisation" :items="organisations" />
|
|
|
|
<div class="mt-16 flex flex-col justify-between gap-12 lg:flex-row lg:gap-24">
|
|
<div>
|
|
<h3 class="mb-3">{{ $t("a.Profilbild") }}</h3>
|
|
<p class="mb-6 max-w-md hyphens-none">
|
|
{{
|
|
$t(
|
|
"a.Lade ein Profilbild hoch, damit dich andere Personen auf den ersten Blick erkennen."
|
|
)
|
|
}}
|
|
</p>
|
|
<div class="btn-primary relative inline-flex cursor-pointer items-center">
|
|
<input
|
|
id="upload"
|
|
type="file"
|
|
class="absolute opacity-0"
|
|
accept="image/*"
|
|
:disabled="avatarLoading"
|
|
@change="avatarUpload"
|
|
/>
|
|
{{ $t("a.Bild hochladen") }}
|
|
<it-icon-upload class="it-icon ml-2 h-6 w-6" />
|
|
</div>
|
|
<p v-if="avatarError" class="mt-3 text-red-700">
|
|
{{ $t("a.Datei kann nicht gespeichert werden.") }}
|
|
</p>
|
|
</div>
|
|
<AvatarImage :loading="avatarLoading" :image-url="user.avatar_url" />
|
|
</div>
|
|
</template>
|
|
|
|
<template #footer>
|
|
<router-link v-slot="{ navigate }" :to="{ name: nextRoute }" custom>
|
|
<button
|
|
:disabled="!validOrganisation"
|
|
class="btn-blue flex items-center"
|
|
role="link"
|
|
@click="navigate"
|
|
>
|
|
{{ $t("general.next") }}
|
|
<it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
|
|
</button>
|
|
</router-link>
|
|
</template>
|
|
</WizardPage>
|
|
</template>
|