feat: add multiple trainers/experts

This commit is contained in:
Reto Aebersold 2024-01-10 13:50:02 +01:00
parent 6272b84b8e
commit 23bbb01eb6
1 changed files with 36 additions and 19 deletions

View File

@ -97,13 +97,26 @@ const { data: mentors } = useCSRFFetch(
`/api/mentor/${courseSession.value.id}/mentors` `/api/mentor/${courseSession.value.id}/mentors`
).json(); ).json();
const expert = computed(() => { interface Expert {
id: string;
email: string;
avatar_url: string;
first_name: string;
last_name: string;
}
interface Mentor {
id: number;
mentor: Expert;
}
const experts = computed<Expert[] | null>(() => {
if (courseConfig.value.showContact) { if (courseConfig.value.showContact) {
if (lpQueryResult.course.value?.circle_contact_type === "EXPERT") { if (lpQueryResult.course.value?.circle_contact_type === "EXPERT") {
return circleExperts.value[0]; return circleExperts.value;
} else if (lpQueryResult.course.value?.circle_contact_type === "LEARNING_MENTOR") { } else if (lpQueryResult.course.value?.circle_contact_type === "LEARNING_MENTOR") {
if (mentors.value?.length > 0) { if (mentors.value?.length > 0) {
return mentors.value[0].mentor; return mentors.value.map((m: Mentor) => m.mentor);
} }
} }
} }
@ -246,23 +259,27 @@ watch(
}) })
}} }}
</div> </div>
<template v-if="expert">
<div class="mb-6 mt-4 flex flex-row items-center"> <div
<img v-for="expert in experts"
class="mr-2 h-[45px] rounded-full" :key="expert.id"
:src=" class="mb-6 mt-6 flex flex-row items-center space-x-2 last:mb-0"
expert.avatar_url || >
'/static/avatars/myvbv-default-avatar.png' <img
" class="h-[48px] rounded-full"
/> :alt="expert.last_name"
<p class="lg:leading-[45px]"> :src="
{{ expert.first_name }} {{ expert.last_name }} expert.avatar_url ||
</p> '/static/avatars/myvbv-default-avatar.png'
"
/>
<div class="flex flex-col">
{{ expert.first_name }} {{ expert.last_name }}
<a class="text-gray-800" :href="`mailto:${expert.email}`">
{{ expert.email }}
</a>
</div> </div>
<a :href="'mailto:' + expert.email" class="btn-secondary text-xl"> </div>
{{ $t(courseConfig.contactButton) }}
</a>
</template>
</div> </div>
</div> </div>
</div> </div>