fix(fe): toast for add student error

Author: LionRise

Frontend/changelog.md

@@ -55,7 +55,7 @@
     "supervisor": {
       "manageStudents": "Studenten Verwalten",
       "noRequests": "Es gibt keine offenen Anfragen...",
-      "slotsFilled": "Belegte Slots"
+      "slotsFilled": "Freie Slots"
     }
   },
   "dataProtection": {
@@ -102,6 +102,7 @@
     "delete": "Löschen",
     "download": "Herunterladen",
     "edit": "Bearbeiten",
+    "error": "Fehler",
     "english": "🇬🇧 English",
     "french": "🇫🇷 Français",
     "german": "🇩🇪 Deutsch",
@@ -120,6 +121,7 @@
     "showLess": "Weniger anzeigen",
     "spanish": "🇪🇸 Español",
     "student": "Studierende",
+    "success": "Erfolgreich ausgeführt",
     "supervise": "Betreuen",
     "supervisionRequest": "Betreuungsanfrage",
     "supervisor": "Betreuende",

Frontend/i18n/locales/de-DE.json

@@ -55,7 +55,7 @@
     "supervisor": {
       "manageStudents": "Manage Students",
       "noRequests": "There are no open requests...",
-      "slotsFilled": "Slots filled"
+      "slotsFilled": "Free slots"
     }
   },
   "dataProtection": {
@@ -102,6 +102,7 @@
     "delete": "delete",
     "download": "download",
     "edit": "Edit",
+    "error": "Error",
     "english": "🇬🇧 English",
     "french": "🇫🇷 Français",
     "german": "🇩🇪 Deutsch",
@@ -120,6 +121,7 @@
     "showLess": "Show less",
     "spanish": "🇪🇸 Español",
     "student": "Student",
+    "success": "Success",
     "supervise": "Supervise",
     "supervisionRequest": "Supervision request",
     "supervisor": "Supervisor",

Frontend/i18n/locales/en-GB.json

@@ -16,13 +16,21 @@ const { getUserByEmail } = useUserApi();
 const current_user = ref<UserData | null>(null);
 const supervisor_data = ref<SupervisorData | null>(null);
 
+const { t } = useI18n();
+
 const {
   data: requests,
   pending,
   error,
   refresh,
 } = useSupervisionRequests("ACCEPTED");
 
+const toastData = ref({
+  visible: false,
+  type: "success",
+  message: "",
+});
+
 const students = computed(() =>
   (requests.value ?? []).map((request) => ({
     id: request.student.user_id,
@@ -82,14 +90,33 @@ async function addStudent(email: string) {
   );
 
   if (!existingStudent) {
-    await $fetch("/api/supervision-requests", {
-      method: "POST",
-      body: {
-        // This "id" usage is correct based on the current backend, even if you ide says its not
-        supervisor_id: supervisor_data.value.id,
-        student_email: email,
-      },
-    });
+    try {
+      await $fetch("/api/supervision-requests", {
+        method: "POST",
+        body: {
+          // This "id" usage is correct based on the current backend, even if you ide says its not
+          supervisor_id: supervisor_data.value.id,
+          student_email: email,
+        },
+      });
+      toastData.value = {
+        visible: true,
+        type: "success",
+        message: t("generic.success"), // or any other suitable success message
+      };
+    } catch (err) {
+      const errorMessage =
+        (err as { data?: { message?: string }; message?: string })?.data
+          ?.message ||
+        (err as { message?: string })?.message ||
+        t("generic.error");
+
+      toastData.value = {
+        visible: true,
+        type: "error",
+        message: errorMessage,
+      };
+    }
   }
   await refresh();
 }
@@ -106,7 +133,7 @@ definePageMeta({
       v-if="pending || error"
       class="w-full h-fit min-h-64 p-4 border border-base-300 rounded-3xl flex flex-col justify-center items-center"
     >
-      <div v-if="pending">Loading…</div>
+      <div v-if="pending">{{ t("generic.loading") }}</div>
       <div v-else-if="error" class="text-red-600">{{ error.message }}</div>
     </div>
     <!-- your IDE says that total_spots doesnt exists. Its lying. The interfaces are fucked up, we gotta fix that later-->
@@ -117,6 +144,14 @@ definePageMeta({
       @add-student="addStudent"
       @remove-student="removeStudent"
     />
+    <Toast
+      v-if="toastData.visible"
+      :duration="3000"
+      :message="toastData.message"
+      :type="toastData.type"
+      @close="toastData.visible = false"
+      @button-click="toastData.visible = false"
+    />
   </div>
 </template>
 

Frontend/pages/supervisor/currently-supervising.vue

@@ -7,8 +7,8 @@ import { useSupervisionRequests } from "~/composables/useSupervisionRequests";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import EmptyPagePlaceholder from "~/components/Placeholder/EmptyPagePlaceholder.vue";
 
-const authStore = useAuthStore()
-const { user } = storeToRefs(authStore)
+const authStore = useAuthStore();
+const { user } = storeToRefs(authStore);
 const { getUserByEmail } = useUserApi();
 const { getSupervisorByUserId } = useSupervisorApi();
 const userStore = useUserStore();
@@ -33,15 +33,15 @@ const visibleRequests = computed(
 );
 
 watch(
-    () => user.value?.primaryEmailAddress?.emailAddress,
-    async (email) => {
-      if (!email) return;
+  () => user.value?.primaryEmailAddress?.emailAddress,
+  async (email) => {
+    if (!email) return;
 
-      if (!userStore.user) {
-        const fetched = (await getUserByEmail(email)) as UserData;
-        userStore.setUser(fetched);
-      }
-      current_user.value = userStore.user;
+    if (!userStore.user) {
+      const fetched = (await getUserByEmail(email)) as UserData;
+      userStore.setUser(fetched);
+    }
+    current_user.value = userStore.user;
 
       if (current_user.value?.id) {
         const data = (await getSupervisorByUserId(
@@ -73,14 +73,14 @@ definePageMeta({
 <template>
   <div class="flex flex-col w-full gap-8 p-8">
     <ActionCard
-        :button-text="t('dashboard.supervisor.manageStudents')"
-        card-type="primary"
-        class="w-full text-center"
-        @action-button-clicked="navigate('/supervisor/currently-supervising')"
+      :button-text="t('dashboard.supervisor.manageStudents')"
+      card-type="primary"
+      class="w-full text-center"
+      @action-button-clicked="navigate('/supervisor/currently-supervising')"
     >
       <div class="py-8 px-16 w-full">
         <h2 class="text-xl">
-          <FontAwesomeIcon icon="user-group"/>
+          <FontAwesomeIcon icon="user-group" />
           {{
             // this works, even though the IDE tells you it doesnt. The frontend interface types are not consitent with the backend types. Dont ask why.
             (supervisor_data?.total_spots ?? 0) - (supervisor_data?.available_spots ?? 0)
@@ -93,31 +93,37 @@ definePageMeta({
     </ActionCard>
 
     <ActionCard
-        :button-text="t('generic.showAll')"
-        :disabled="visibleCount >= (pendingRequests?.length ?? 0)"
-        :header-text="t('generic.requests')"
-        card-type="ghost"
-        @action-button-clicked="navigateTo('/supervisor/matching')"
+      :button-text="t('generic.showAll')"
+      :disabled="visibleCount >= (pendingRequests?.length ?? 0)"
+      :header-text="t('generic.requests')"
+      card-type="ghost"
+      @action-button-clicked="navigateTo('/supervisor/matching')"
     >
       <EmptyPagePlaceholder
-          :render-condition="visibleRequests"
-          :text="t('dashboard.supervisor.noRequests')"
+        :render-condition="visibleRequests"
+        :text="t('dashboard.supervisor.noRequests')"
       />
       <NuxtLink
-          v-for="request in visibleRequests"
-          :key="request.id"
-          :to="`/profiles/${request.student.user_id}`"
+        v-for="request in visibleRequests"
+        :key="request.id"
+        :to="`/profiles/${request.student.user_id}`"
       >
         <MiniCard
-            :bottom-text="formatTimeString(request.updated_at, undefined)"
-            :first-name="request.student.user.first_name"
-            :image="request.student.user.profile_image || getPlaceholderImage(request.student.user.first_name, request.student.user.last_name) || ''"
-            :last-name="request.student.user.last_name"
-            :preview-text="request.student.thesis_description"
-            top-icon="message"
+          :bottom-text="formatTimeString(request.updated_at, undefined)"
+          :first-name="request.student.user.first_name"
+          :image="
+            request.student.user.profile_image ||
+            getPlaceholderImage(
+              request.student.user.first_name,
+              request.student.user.last_name
+            ) ||
+            ''
+          "
+          :last-name="request.student.user.last_name"
+          :preview-text="request.student.thesis_description"
+          top-icon="message"
         />
       </NuxtLink>
-
     </ActionCard>
   </div>
 </template>