fix(frontend) fix i18n usage, styles, image sources (#192)

Author: jb-cc

Frontend/components/CustomModal/CustomModal.vue

@@ -12,7 +12,7 @@
             v-if="props.imageSrc"
             :src="props.imageSrc"
             :alt="props.imageAlt"
-            class="h-24 mb-2"
+            class="h-24 mb-2 mask mask-squircle"
           >
           <p v-if="props.email" class="text-slate-500 text-sm">
             {{ props.email }}

Frontend/components/SupervisorStudentList/StudentCard.vue

@@ -31,7 +31,7 @@ const emit = defineEmits(["click"])
         :last-name="props.lastName"
         :src="props.imgSrc"
         alt="Profile Picture of {{ props.firstName }} {{ props.lastName }}"
-        shape="circle"
+        shape="rounded"
         size="sm"/>
 
     <div class="flex flex-col w-full">

Frontend/components/SupervisorStudentList/SupervisorStudentList.vue

@@ -213,17 +213,17 @@ watch(
             studentToRemove?.lastName
           : ''
       "
-      :image-src="undefined"
+      :image-src="studentToRemove?.src || getPlaceholderImage(studentToRemove?.firstName, studentToRemove?.lastName) || ''"
       :main-text="
-        t('settings.supervisorStudentList.removeStudent.mainText', {
+        t('supervisorStudentList.removeStudent.mainText', {
           firstName: studentToRemove?.firstName,
           lastName: studentToRemove?.lastName,
         })
       "
-      :confirm-text="t('settings.supervisorStudentList.removeStudent.confirmText')"
-      :checkbox-label="t('settings.supervisorStudentList.checkboxLabel')"
+      :confirm-text="t('supervisorStudentList.removeStudent.confirmText')"
+      :checkbox-label="t('supervisorStudentList.checkboxLabel')"
       setting-key="showRemoveStudentModal"
-      :title="t('settings.supervisorStudentList.removeStudent.title')"
+      :title="t('supervisorStudentList.removeStudent.title')"
       icon="trash"
       @confirm="confirmRemoveStudent"
     />
@@ -240,20 +240,20 @@ watch(
             modal_user.last_name
           : ''
       "
-      :image-src="modal_user?.profile_image || undefined"
+      :image-src="modal_user?.profile_image || getPlaceholderImage(modal_user?.first_name, modal_user?.last_name) || ''"
       :main-text="
-        t('settings.supervisorStudentList.addExistingStudent.mainText', {
+        t('supervisorStudentList.addExistingStudent.mainText', {
           firstName: modal_user?.first_name,
           lastName: modal_user?.last_name,
         })
       "
       :show-checkbox="true"
-      :checkbox-label="t('settings.supervisorStudentList.checkboxLabel')"
-      :confirm-text="t('settings.supervisorStudentList.addExistingStudent.confirmText')"
+      :checkbox-label="t('supervisorStudentList.checkboxLabel')"
+      :confirm-text="t('supervisorStudentList.addExistingStudent.confirmText')"
       icon="user-group"
       setting-key="showAddStudentModal"
-      :sub-text="t('settings.supervisorStudentList.addExistingStudent.subText')"
-      :title="t('settings.supervisorStudentList.addExistingStudent.title')"
+      :sub-text="t('supervisorStudentList.addExistingStudent.subText')"
+      :title="t('supervisorStudentList.addExistingStudent.title')"
       @confirm="addStudent"
     />
 
@@ -262,19 +262,19 @@ watch(
       ref="modalNotExistingStudentRef"
       :email="emailAddress"
       :main-text="
-        t('settings.supervisorStudentList.addNewStudent.mainText', {
+        t('supervisorStudentList.addNewStudent.mainText', {
           emailAddress: emailAddress,
         })
       "
       :show-checkbox="true"
-      :checkbox-label="t('settings.supervisorStudentList.checkboxLabel')"
+      :checkbox-label="t('supervisorStudentList.checkboxLabel')"
       confirm-text=""
       icon="user-group"
       image-alt="Logo"
       image-src="../images/Superwise_Logo.svg"
       setting-key="showAddStudentModal"
-      :sub-text="t('settings.supervisorStudentList.addExistingStudent.subText')"
-      :title="t('settings.supervisorStudentList.addNewStudent.title')"
+      :sub-text="t('supervisorStudentList.addExistingStudent.subText')"
+      :title="t('supervisorStudentList.addNewStudent.title')"
       @confirm="addStudent"
     />
   </div>

Frontend/i18n/locales/de-DE.json

@@ -292,27 +292,6 @@
       "rejectDescription": "Bestätigungs-Modal anzeigen, wenn eine Betreuungsanfrage abgelehnt wird",
       "rejectTitle": "Modal zur Ablehnung der Betreuungsanfrage"
     },
-    "supervisorStudentList": {
-      "checkboxLabel": "Nicht erneut anzeigen",
-      "addExistingStudent": {
-        "mainText": "Möchten Sie {firstName} {lastName} betreuen?",
-        "subText": "Er/Sie wird benachrichtigt, dass Sie ihn/sie betreuen!",
-        "confirmText": "Studierenden betreuen",
-        "title": "Studierenden betreuen"
-      },
-      "addNewStudent": {
-        "mainText": "Möchten Sie {emailAddress} betreuen? Er/Sie ist noch nicht auf SuperWise registriert, wird aber per E-Mail benachrichtigt.",
-        "subText": "Er/Sie wird benachrichtigt, dass Sie ihn/sie betreuen!",
-        "title": "Studierenden betreuen",
-        "confirmText": "Studierenden betreuen"
-      },
-      "removeStudent": {
-        "mainText": "Möchten Sie {firstName} {lastName} wirklich entfernen?",
-        "subText": "",
-        "confirmText": "Studierenden entfernen",
-        "title": "Studierenden entfernen"
-      }
-    },
     "theme": {
       "description": "App Design auswählen",
       "title": "Design"
@@ -338,6 +317,27 @@
     "profilePictureAlt": "Profilbild von {firstName} {lastName}",
     "similarityScore": "Übereinstimmungswert"
   },
+  "supervisorStudentList": {
+    "checkboxLabel": "Nicht erneut anzeigen",
+    "addExistingStudent": {
+      "mainText": "Möchten Sie {firstName} {lastName} betreuen?",
+      "subText": "Er/Sie wird benachrichtigt, dass Sie ihn/sie betreuen!",
+      "confirmText": "Studierenden betreuen",
+      "title": "Studierenden betreuen"
+    },
+    "addNewStudent": {
+      "mainText": "Möchten Sie {emailAddress} betreuen? Er/Sie ist noch nicht auf SuperWise registriert, wird aber per E-Mail benachrichtigt.",
+      "subText": "Er/Sie wird benachrichtigt, dass Sie ihn/sie betreuen!",
+      "title": "Studierenden betreuen",
+      "confirmText": "Studierenden betreuen"
+    },
+    "removeStudent": {
+      "mainText": "Möchten Sie {firstName} {lastName} wirklich entfernen?",
+      "subText": "",
+      "confirmText": "Studierenden entfernen",
+      "title": "Studierenden entfernen"
+    }
+  },
   "tagPriority": {
     "arrangeByPriority": "Tags nach Priorität ordnen",
     "unknownTag": "Unknown Tag '{tagNumber}'"

Frontend/pages/supervisor/dashboard.vue

@@ -83,8 +83,8 @@ definePageMeta({
           <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 - supervisor_data?.available_spots
-          }}/{{ supervisor_data?.total_spots }}
+            (supervisor_data?.total_spots ?? 0) - (supervisor_data?.available_spots ?? 0)
+            }}/{{ supervisor_data?.total_spots ?? 0 }}
         </h2>
         <p class="text-md">
           {{ t("dashboard.supervisor.slotsFilled") }}