90 lines
2.8 KiB
Vue
90 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import LoadingSpinner from "@/components/ui/LoadingSpinner.vue";
|
|
import { useCurrentCourseSession } from "@/composables";
|
|
import { useCSRFFetch } from "@/fetchHelpers";
|
|
import { useLearningMentees } from "@/services/learningMentees";
|
|
import { computed } from "vue";
|
|
|
|
const courseSession = useCurrentCourseSession();
|
|
const { isLoading, summary, fetchData } = useLearningMentees(courseSession.value.id);
|
|
|
|
const removeMyMentee = async (relationId: string) => {
|
|
await useCSRFFetch(
|
|
`/api/mentor/${courseSession.value.id}/mentors/${relationId}/delete`
|
|
).delete();
|
|
fetchData();
|
|
};
|
|
|
|
const noMenteesText = computed(() =>
|
|
courseSession.value.course.configuration.is_uk
|
|
? "a.Aktuell begleitest du niemanden als Praxisbildner."
|
|
: "a.Aktuell begleitest du niemanden als Lernbegleitung."
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="isLoading" class="m-8 flex justify-center">
|
|
<LoadingSpinner />
|
|
</div>
|
|
<div v-else>
|
|
<h2 class="heading-2 py-6">{{ $t("a.Personen, die du begleitest") }}</h2>
|
|
<div
|
|
v-if="(summary?.participant_relations.length ?? 0) > 0"
|
|
class="bg-white px-4 py-2"
|
|
>
|
|
<div
|
|
v-for="relation in summary?.participant_relations ?? []"
|
|
:key="relation.id"
|
|
data-cy="lm-my-mentee-list-item"
|
|
class="flex flex-col items-start justify-between gap-4 border-b py-2 last:border-b-0 md:flex-row md:items-center md:gap-16"
|
|
>
|
|
<div class="flex items-center space-x-2">
|
|
<img
|
|
:alt="relation.participant_user.last_name"
|
|
class="h-11 w-11 rounded-full"
|
|
:src="
|
|
relation.participant_user.avatar_url ||
|
|
'/static/avatars/myvbv-default-avatar.png'
|
|
"
|
|
/>
|
|
<div>
|
|
<div class="text-bold">
|
|
{{ relation.participant_user.first_name }}
|
|
{{ relation.participant_user.last_name }}
|
|
</div>
|
|
{{ relation.participant_user.email }}
|
|
</div>
|
|
</div>
|
|
<div class="space-x-5">
|
|
<router-link
|
|
data-cy="lm-my-mentee-profile"
|
|
:to="{
|
|
name: 'profileLearningPath',
|
|
params: {
|
|
userId: relation.participant_user.id,
|
|
courseSlug: courseSession.course.slug,
|
|
},
|
|
}"
|
|
class="underline"
|
|
>
|
|
{{ $t("cockpit.profileLink") }}
|
|
</router-link>
|
|
<button
|
|
class="underline"
|
|
data-cy="lm-my-mentee-remove"
|
|
@click="removeMyMentee(relation.id)"
|
|
>
|
|
{{ $t("a.Entfernen") }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<div class="flex items-center bg-white px-4 py-2">
|
|
<it-icon-info class="it-icon mr-2 h-6 w-6" />
|
|
{{ $t(noMenteesText) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|