65 lines
1.8 KiB
Vue
65 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { useUserStore } from "@/stores/user";
|
|
|
|
import { ref } from "vue";
|
|
|
|
import ProfileView from "@/components/personalProfile/ProfileView.vue";
|
|
import ProfileEdit from "@/components/personalProfile/ProfileEdit.vue";
|
|
|
|
const user = useUserStore();
|
|
const editMode = ref(false);
|
|
const saved = ref(false);
|
|
|
|
let saveBannerTimeout: ReturnType<typeof setTimeout> | null = null;
|
|
|
|
function saveComplete() {
|
|
editMode.value = false;
|
|
saved.value = true;
|
|
if (saveBannerTimeout) {
|
|
clearTimeout(saveBannerTimeout);
|
|
}
|
|
saveBannerTimeout = setTimeout(() => {
|
|
saved.value = false;
|
|
}, 10 * 1000);
|
|
}
|
|
|
|
function startEditMode() {
|
|
editMode.value = true;
|
|
saved.value = false;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-grow flex-col bg-gray-200 md:flex-row">
|
|
<div class="bg-white p-8">
|
|
<section class="flex max-w-lg flex-col items-center space-y-2">
|
|
<img
|
|
:alt="user.first_name"
|
|
class="h-auto w-32 rounded-full md:w-48"
|
|
:src="user.avatar_url"
|
|
/>
|
|
<h3>{{ user.first_name }} {{ user.last_name }}</h3>
|
|
<span>{{ user.email }}</span>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="flex flex-grow flex-col space-y-4 px-8 py-8 md:px-16">
|
|
<div v-if="!editMode" class="flex justify-end space-x-4">
|
|
<button
|
|
class="btn btn-secondary"
|
|
data-cy="editProfileButton"
|
|
@click="startEditMode"
|
|
>
|
|
{{ $t("a.Profil bearbeiten") }}
|
|
</button>
|
|
</div>
|
|
<div v-if="saved" class="flex items-center space-x-3 bg-green-200 px-6 py-3">
|
|
<it-icon-check class="h-10 w-10 text-green-800" />
|
|
<span>{{ $t("a.Deine Änderungen wurden gespeichert") }}.</span>
|
|
</div>
|
|
<ProfileEdit v-if="editMode" @cancel="editMode = false" @save="saveComplete" />
|
|
<ProfileView v-else />
|
|
</div>
|
|
</div>
|
|
</template>
|