feat: mentor & mentee list styling

client/src/components/header/MainNavigationBar.vue

@@ -265,7 +265,7 @@ const hasLearningMentor = computed(() => {
                     class="nav-item"
                     :class="{ 'nav-item--active': inLearningMentor() }"
                   >
-                    {{ t("a.Lernbegleitung") }}🆕
+                    {{ t("a.Lernbegleitung") }}
                   </router-link>
                 </div>
               </template>

client/src/components/learningMentor/MyMentees.vue

@@ -8,7 +8,7 @@ const { summary } = useLearningMentees(courseSession.value.id);
 
 <template>
   <div v-if="summary">
-    <h2 class="heading-2 mb-6 mt-6">{{ $t("a.Personen, die du begleitest") }}</h2>
+    <h2 class="heading-2 py-6">{{ $t("a.Personen, die du begleitest") }}</h2>
     <div class="bg-white px-4 py-2">
       <div
         v-for="participant in summary.participants"

client/src/components/learningMentor/MyMentors.vue

@@ -9,13 +9,21 @@ const courseSession = useCurrentCourseSession();
 const showInvitationModal = ref(false);
 const inviteeEmail = ref("");
 
-const { execute: refreshMentors, data: mentors } = useCSRFFetch(
-  `/api/mentor/${courseSession.value.id}/mentors`
-).json();
+const {
+  execute: refreshMentors,
+  data: mentors,
+  isFetching: isFetchingMentors,
+} = useCSRFFetch(`/api/mentor/${courseSession.value.id}/mentors`).json();
 
-const { execute: refreshInvitations, data: invitations } = useCSRFFetch(
-  `/api/mentor/${courseSession.value.id}/invitations`
-).json();
+const {
+  execute: refreshInvitations,
+  data: invitations,
+  isFetching: isFetchingInvitations,
+} = useCSRFFetch(`/api/mentor/${courseSession.value.id}/invitations`).json();
+
+const isLoading = computed(
+  () => isFetchingMentors.value || isFetchingInvitations.value
+);
 
 const hasMentors = computed(() => {
   return (
@@ -54,77 +62,73 @@ const inviteMentor = async () => {
 </script>
 
 <template>
-  <div class="bg-gray-200">
-    <div class="container-large">
-      <header class="mb-8 mt-12">
-        <h1 class="mb-8">{{ $t("a.Lernbegleitung") }}</h1>
-        <p>
-          {{
-            $t(
-              "a.Hier kannst du Personen einladen, damit sie deine Lernbegleitung werden. Zudem siehst du jederzeit eine Übersicht aller Personen, die du bereits als Lernbegleitung hinzugefügt hast."
-            )
-          }}
-        </p>
-      </header>
+  <div v-if="!isLoading" class="bg-gray-200">
+    <div class="flex flex-row items-center justify-between py-6">
+      <h2 class="heading-2">{{ $t("a.Meine Lernbegleitung") }}</h2>
+      <div>
+        <button
+          class="btn-secondary flex items-center"
+          @click="showInvitationModal = true"
+        >
+          <it-icon-add class="it-icon mr-2 h-6 w-6" />
+          {{ $t("a.Neue Lernbegleitung einladen") }}
+        </button>
+      </div>
+    </div>
+    <div class="bg-white px-4 py-2">
       <main>
-        <div class="bg-white p-6">
-          <div class="mb-8">
-            <button
-              class="btn-secondary flex items-center"
-              @click="showInvitationModal = true"
-            >
-              <it-icon-add class="it-icon mr-2 h-6 w-6" />
-              {{ $t("a.Neue Lernbegleitung einladen") }}
-            </button>
-          </div>
-          <div class="border-t">
-            <div
-              v-for="invitation in invitations"
-              :key="invitation.id"
-              class="flex flex-col justify-between gap-4 border-b py-4 md:flex-row md:gap-16"
-            >
-              <div class="flex flex-col justify-between md:flex-grow md:flex-row">
-                {{ invitation.email }}
-                <div class="flex items-center">
-                  <it-icon-info class="it-icon mr-2 h-6 w-6" />
-                  {{ $t("a.Die Einladung wurde noch nicht angenommen.") }}
-                </div>
-              </div>
-              <button class="underline" @click="removeInvitation(invitation.id)">
-                {{ $t("a.Entfernen") }}
-              </button>
-            </div>
-            <div
-              v-for="learningMentor in mentors"
-              :key="learningMentor.id"
-              class="flex flex-col justify-between gap-4 border-b py-4 md:flex-row md:gap-16"
-            >
+        <div>
+          <div
+            v-for="invitation in invitations"
+            :key="invitation.id"
+            class="flex flex-col justify-between gap-4 border-b py-2 md:flex-row md:gap-16"
+          >
+            <div class="flex flex-col md:flex-grow md:flex-row">
               <div class="flex items-center space-x-2">
                 <img
-                  :alt="learningMentor.mentor.last_name"
+                  :alt="invitation.email"
                   class="h-11 w-11 rounded-full"
-                  :src="learningMentor.mentor.avatar_url"
+                  src="/static/avatars/myvbv-default-avatar.png"
                 />
-                <div>
-                  <div class="text-bold">
-                    {{ learningMentor.mentor.first_name }}
-                    {{ learningMentor.mentor.last_name }}
-                  </div>
-                  {{ learningMentor.mentor.email }}
-                </div>
+                <span class="text-bold">{{ invitation.email }}</span>
+              </div>
+              <div class="flex items-center pl-8">
+                <it-icon-info class="it-icon mr-1 h-6 w-6" />
+                {{ $t("a.Die Einladung wurde noch nicht angenommen.") }}
               </div>
-              <button class="underline" @click="removeMentor(learningMentor.id)">
-                {{ $t("a.Entfernen") }}
-              </button>
             </div>
+            <button class="underline" @click="removeInvitation(invitation.id)">
+              {{ $t("a.Entfernen") }}
+            </button>
           </div>
-          <div v-if="!hasMentors" class="mt-8 flex items-center">
-            <it-icon-info class="it-icon mr-2 h-6 w-6" />
-            {{
-              $t("a.Aktuell hast du noch keine Person als Lernbegleitung eingeladen.")
-            }}
+          <div
+            v-for="learningMentor in mentors"
+            :key="learningMentor.id"
+            class="flex flex-col justify-between gap-4 border-b py-2 last:border-b-0 md:flex-row md:gap-16"
+          >
+            <div class="flex items-center space-x-2">
+              <img
+                :alt="learningMentor.mentor.last_name"
+                class="h-11 w-11 rounded-full"
+                :src="learningMentor.mentor.avatar_url"
+              />
+              <div>
+                <div class="text-bold">
+                  {{ learningMentor.mentor.first_name }}
+                  {{ learningMentor.mentor.last_name }}
+                </div>
+                {{ learningMentor.mentor.email }}
+              </div>
+            </div>
+            <button class="underline" @click="removeMentor(learningMentor.id)">
+              {{ $t("a.Entfernen") }}
+            </button>
           </div>
         </div>
+        <div v-if="!hasMentors" class="mt-8 flex items-center">
+          <it-icon-info class="it-icon mr-2 h-6 w-6" />
+          {{ $t("a.Aktuell hast du noch keine Person als Lernbegleitung eingeladen.") }}
+        </div>
       </main>
     </div>
     <ItModal v-model="showInvitationModal">

client/src/pages/learningMentor/mentor/MentorParticipantsPage.vue

@@ -2,21 +2,36 @@
 import { useCurrentCourseSession } from "@/composables";
 import MyMentors from "@/components/learningMentor/MyMentors.vue";
 import MyMentees from "@/components/learningMentor/MyMentees.vue";
+import { computed } from "vue";
 
 const courseSession = useCurrentCourseSession();
-const isMyMentorsVisible = courseSession.value.actions.includes(
-  "learning-mentor::edit-mentors"
+
+const isMyMentorsVisible = computed(() =>
+  courseSession.value.actions.includes("learning-mentor::edit-mentors")
 );
-const isMyMenteesVisible = courseSession.value.actions.includes(
-  "learning-mentor::guide-members"
+
+const isMyMenteesVisible = computed(() =>
+  courseSession.value.actions.includes("learning-mentor::guide-members")
 );
 </script>
 
 <template>
-  <div v-if="isMyMentorsVisible">
-    <MyMentors />
-  </div>
-  <div v-if="isMyMenteesVisible">
-    <MyMentees />
+  <div class="container-large space-y-20">
+    <template v-if="isMyMenteesVisible || isMyMentorsVisible">
+      <div v-if="isMyMentorsVisible">
+        <MyMentors />
+      </div>
+      <div v-if="isMyMenteesVisible">
+        <MyMentees />
+      </div>
+    </template>
+    <!-- edge case for pure mentor (= no course session user) and all mentees are removed -->
+    <div v-else>
+      <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("a.Aktuell begleitest du niemanden als Lernbegleitung.") }}
+      </div>
+    </div>
   </div>
 </template>