ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Show "noMenteesText" for Lernbegleiter

This commit is contained in:
Daniel Egger 2024-05-02 12:02:03 +02:00
parent 92d96f4710
commit f11d51b333
1 changed files with 52 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
client/src/components/learningMentor/MyMentees.vue
View File

@ -3,6 +3,7 @@ import { useLearningMentees } from "@/services/learningMentees";
import { useCurrentCourseSession } from "@/composables"; import { useCurrentCourseSession } from "@/composables";
import { useCSRFFetch } from "@/fetchHelpers"; import { useCSRFFetch } from "@/fetchHelpers";
import { computed } from "vue"; import { computed } from "vue";
import LoadingSpinner from "@/components/ui/LoadingSpinner.vue";
const courseSession = useCurrentCourseSession(); const courseSession = useCurrentCourseSession();
const { isLoading, summary, fetchData } = useLearningMentees(courseSession.value.id); const { isLoading, summary, fetchData } = useLearningMentees(courseSession.value.id);
@ -22,63 +23,61 @@ const noMenteesText = computed(() =>
</script> </script>
<template> <template>
<div v-if="summary"> <div v-if="isLoading" class="m-8 flex justify-center">
<template v-if="summary.participants.length > 0"> <LoadingSpinner />
<h2 class="heading-2 py-6">{{ $t("a.Personen, die du begleitest") }}</h2> </div>
<div class="bg-white px-4 py-2"> <div v-else>
<div <h2 class="heading-2 py-6">{{ $t("a.Personen, die du begleitest") }}</h2>
v-for="participant in summary.participants" <div v-if="(summary?.participants?.length ?? 0) > 0" class="bg-white px-4 py-2">
:key="participant.id" <div
data-cy="lm-my-mentee-list-item" v-for="participant in summary?.participants ?? []"
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" :key="participant.id"
> data-cy="lm-my-mentee-list-item"
<div class="flex items-center space-x-2"> 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"
<img >
:alt="participant.last_name" <div class="flex items-center space-x-2">
class="h-11 w-11 rounded-full" <img
:src=" :alt="participant.last_name"
participant.avatar_url || '/static/avatars/myvbv-default-avatar.png' class="h-11 w-11 rounded-full"
" :src="participant.avatar_url || '/static/avatars/myvbv-default-avatar.png'"
/> />
<div> <div>
<div class="text-bold"> <div class="text-bold">
{{ participant.first_name }} {{ participant.first_name }}
{{ participant.last_name }} {{ participant.last_name }}
</div>
{{ participant.email }}
</div> </div>
</div> {{ participant.email }}
<div class="space-x-5">
<router-link
data-cy="lm-my-mentee-profile"
:to="{
name: 'profileLearningPath',
params: {
userId: participant.id,
courseSlug: courseSession.course.slug,
},
}"
class="underline"
>
{{ $t("cockpit.profileLink") }}
</router-link>
<button
class="underline"
data-cy="lm-my-mentee-remove"
@click="removeMyMentee(participant.id)"
>
{{ $t("a.Entfernen") }}
</button>
</div> </div>
</div> </div>
<div class="space-x-5">
<router-link
data-cy="lm-my-mentee-profile"
:to="{
name: 'profileLearningPath',
params: {
userId: participant.id,
courseSlug: courseSession.course.slug,
},
}"
class="underline"
>
{{ $t("cockpit.profileLink") }}
</router-link>
<button
class="underline"
data-cy="lm-my-mentee-remove"
@click="removeMyMentee(participant.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>
</template>
</div>
<div v-if="!isLoading && !summary">
<h2 class="heading-2 py-6">{{ $t("a.Personen, die du begleitest") }}</h2>
<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> </div>
</template> </template>