feat(frontend): create progress thing and add search for admin (Scrum-313)

Frontend/components/ActionCard/ActionCard.vue

@@ -2,52 +2,53 @@
 import CustomButton from "../CustomButton/CustomButton.vue";
 
 const props = defineProps({
-    buttonText: {
-        type: String,
-        default: "Click Me",
-    },
-    cardType: {
-        type: String,
-        default: 'ghost',
-        validator: (value) => !value || ["ghost", "primary"].includes(value),
-    },
-    headerText: {
-        type: String,
-        default: ''
-    },
+  buttonText: {
+    type: String,
+    default: "Click Me",
+  },
+  cardType: {
+    type: String,
+    default: 'ghost',
+    validator: (value) => !value || ["ghost", "primary"].includes(value),
+  },
+  headerText: {
+    type: String,
+    default: ''
+  },
 });
 
 const emit = defineEmits(['actionButtonClicked']);
+
 function emitActionEvent() {
   emit('actionButtonClicked');
 }
 </script>
 
 <template>
-    <div>
-        <p v-if="props.headerText" class="mb-2 ml-4 text-lg font-bold">
-          {{ props.headerText }}
-        </p>
-        <div class="card shadow-xl border border-base-300">
-            <slot/>
-            <!-- Action button at the bottom -->
-            <div class="px-16 py-4 border-t border-base-300">
-                <CustomButton
-                    v-if="props.cardType === 'ghost'"
-                    :text="props.buttonText"
-                    block
-                    color="default"
-                    variant="ghost"
-                    @click="emitActionEvent"
-                />
-                <CustomButton
-                    v-else
-                    :text="props.buttonText"
-                    block
-                    color="primary"
-                    @click="emitActionEvent"
-                />
-            </div>
-        </div>
+  <div>
+    <p v-if="props.headerText" class="mb-2 ml-4 text-lg font-bold">
+      {{ props.headerText }}
+    </p>
+    <div class="card shadow-xl border border-base-300">
+      <slot/>
+      <!-- Action button at the bottom -->
+      <div class="px-8 py-4 border-t border-base-300">
+        <CustomButton
+            v-if="props.cardType === 'ghost'"
+            :text="props.buttonText"
+            block
+            color="default"
+            variant="ghost"
+            @click="emitActionEvent"
+        />
+        <CustomButton
+            v-else
+            :text="props.buttonText"
+            block
+            color="primary"
+            @click="emitActionEvent"
+        />
+      </div>
     </div>
+  </div>
 </template>

Frontend/components/Progress/Progress.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+
+interface ProgressProps {
+  progress: number;
+  text: string;
+}
+
+const props = defineProps<ProgressProps>();
+
+</script>
+
+<template>
+  <div class="w-full h-fit flex flex-row p-6 gap-6 items-center border-b border-b-base-300">
+    <div>
+      <div
+          :style="'--value:'+props.progress+';'" aria-valuenow="70"
+          class="radial-progress bg-success text-success-content border-success border-4"
+          role="progressbar"
+      >
+        {{ props.progress }}%
+      </div>
+    </div>
+    <p class="text-body opacity-75">
+      {{ props.text }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

Frontend/components/SupervisorCard/SupervisorCard.vue

@@ -19,7 +19,8 @@ const props = defineProps({
   },
   image: {
     type: String,
-    required: true,
+    required: false,
+    default: '',
   },
   firstName: {
     type: String,
@@ -57,11 +58,11 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
-    dontShowStatistics: {
+  dontShowStatistics: {
     type: Boolean,
     default: false,
     required: false,
-    }
+  }
 });
 
 const limitedTags = computed(() =>
@@ -82,14 +83,6 @@ const cardSizeClasses = computed(() => ({
   'card-xl': props.fullWidth && props.size === 'xl',
 }));
 
-const imageSizeClasses = computed(() => ({
-  'size-8': props.size === 'xs',
-  'size-10': props.size === 'sm',
-  'size-12': props.size === 'md',
-  'size-14': props.size === 'lg',
-  'size-16': props.size === 'xl',
-}));
-
 // Regular tag size based on card size
 const regularTagSize = computed(() => {
   switch (props.size) {
@@ -152,14 +145,13 @@ const descriptionClasses = computed(() => ({
       :class="cardSizeClasses" class="card bg-base-100 shadow-lg border border-base-300">
     <div class="card-body">
       <h2 class="card-title font-bold">
-        <div class="mask mask-squircle">
-          <img
-              :alt="t('supervisorCard.profilePictureAlt',{firstName: props.firstName,lastName: props.lastName})"
-              :class="imageSizeClasses"
-              :src="props.image || getPlaceholderImage(props.firstName,props.lastName)"
-              class="rounded-box"
-          >
-        </div>
+        <Avatar
+            :alt="t('supervisorCard.profilePictureAlt',{firstName: props.firstName,lastName: props.lastName})"
+            :first-name="props.firstName"
+            :last-name="props.lastName"
+            :size="props.size"
+            :src="props.image"
+        />
         <p class="text-large capitalize">
           {{ props.firstName }} {{ props.lastName }}
         </p>

Frontend/i18n/locales/de-DE.json

@@ -19,6 +19,20 @@
   },
   "admin": {
     "availableSpots": "Verfügbare Plätze",
+    "deleteUser": {
+      "deleteButton": "Benutzer Löschen",
+      "deleting": "Lösche...",
+      "description": "Dies setzt das Benutzerkonto vollständig auf den nicht registrierten Zustand zurück, wobei die E-Mail-Adresse für eine erneute Registrierung erhalten bleibt.",
+      "generalError": "Ein Fehler ist beim Zurücksetzen des Benutzers aufgetreten",
+      "noUsersFound": "Keine Benutzer gefunden für",
+      "permissionError": "Berechtigung verweigert - Admin-Benutzer können nicht zurückgesetzt werden",
+      "searchInstruction": "Tippen Sie, um nach Benutzern zu suchen...",
+      "searchPlaceholder": "Benutzer nach Name, E-Mail oder Rolle suchen...",
+      "selectUserError": "Bitte wählen Sie einen Benutzer zum Löschen aus",
+      "selectedUser": "Ausgewählter Benutzer:",
+      "title": "Benutzer Löschen",
+      "userNotFoundError": "Benutzer nicht gefunden"
+    },
     "downloadDescription": "Laden Sie die bestätigten Betreuer-Studenten-Paare herunter",
     "downloadFileName": "lade confirmed_supervisions.csv herunter",
     "downloadTitle": "Bestätigte Betreuungen herunterladen",
@@ -30,21 +44,7 @@
     "uploadSupervisorsFileName": "wähle *.csv aus",
     "uploadTagsDescription": "Dies aktualisiert die Tags und die Ähnlichkeitswerte",
     "uploadTagsFileName": "wähle updated_tag_list.json aus",
-    "waitingStudents": "warten derzeit auf die Genehmigung der Betreuung",
-    "deleteUser": {
-      "title": "Benutzer Löschen",
-      "searchPlaceholder": "Benutzer nach Name, E-Mail oder Rolle suchen...",
-      "selectedUser": "Ausgewählter Benutzer:",
-      "noUsersFound": "Keine Benutzer gefunden für",
-      "searchInstruction": "Tippen Sie, um nach Benutzern zu suchen...",
-      "description": "Dies setzt das Benutzerkonto vollständig auf den nicht registrierten Zustand zurück, wobei die E-Mail-Adresse für eine erneute Registrierung erhalten bleibt.",
-      "deleteButton": "Benutzer Löschen",
-      "deleting": "Lösche...",
-      "selectUserError": "Bitte wählen Sie einen Benutzer zum Löschen aus",
-      "generalError": "Ein Fehler ist beim Zurücksetzen des Benutzers aufgetreten",
-      "permissionError": "Berechtigung verweigert - Admin-Benutzer können nicht zurückgesetzt werden",
-      "userNotFoundError": "Benutzer nicht gefunden"
-    }
+    "waitingStudents": "warten derzeit auf die Genehmigung der Betreuung"
   },
   "appHeader": {
     "addAdmin": "Admin Hinzufügen",
@@ -151,6 +151,10 @@
     "supervising": "Sie betreuen {firstName}"
   },
   "dashboard": {
+    "progress": {
+      "button": "Profil vervollständigen...",
+      "text": "Dein Profil ist fast vollständig! Füge die letzten dinge hinzu für die beste SuperWise erfahrung!"
+    },
     "student": {
       "downloadConfirmation": "Bestätigung herunterladen",
       "findSupervisor": "Finde jetzt deinen Betreuer!",
@@ -383,7 +387,8 @@
     },
     "noResults": "Keine Suchergebnisse...",
     "placeholderForStudents": "Betreuer suchen...",
-    "placeholderForSupervisors": "Studenten suchen..."
+    "placeholderForSupervisors": "Studenten suchen...",
+    "placeholderForAdmins": "Benutzer suchen..."
   },
   "searchBar": {
     "noResults": "Keine Ergebnisse gefunden"
@@ -477,4 +482,4 @@
     "withdrawRequestFailed": "Fehler beim Zurückziehen der Betreuungsanfrage",
     "withdrawnRequest": "Sie haben die Betreuungsanfrage zurückgezogen"
   }
-}
+}

Frontend/i18n/locales/en-GB.json

@@ -19,6 +19,20 @@
   },
   "admin": {
     "availableSpots": "Available spots",
+    "deleteUser": {
+      "deleteButton": "Delete User",
+      "deleting": "Deleting...",
+      "description": "This completely resets the user account to unregistered state while preserving email for re-registration.",
+      "generalError": "An error occurred while resetting the user",
+      "noUsersFound": "No users found matching",
+      "permissionError": "Permission denied - cannot reset admin users",
+      "searchInstruction": "Type to search for users...",
+      "searchPlaceholder": "Search users by name, email, or role...",
+      "selectUserError": "Please select a user to delete",
+      "selectedUser": "Selected User:",
+      "title": "Delete User",
+      "userNotFoundError": "User not found"
+    },
     "downloadDescription": "Download the confirmed Supervisor - Student pairs",
     "downloadFileName": "Download confirmed_supervisions.csv",
     "downloadTitle": "Download confirmed Supervisions",
@@ -30,21 +44,7 @@
     "uploadSupervisorsFileName": "select *.csv",
     "uploadTagsDescription": "This updates the tags and the similarity scores",
     "uploadTagsFileName": "select updated_tag_list.json",
-    "waitingStudents": "are currently waiting for supervision approval",
-     "deleteUser": {
-      "title": "Delete User",
-      "searchPlaceholder": "Search users by name, email, or role...",
-      "selectedUser": "Selected User:",
-      "noUsersFound": "No users found matching",
-      "searchInstruction": "Type to search for users...",
-      "description": "This completely resets the user account to unregistered state while preserving email for re-registration.",
-      "deleteButton": "Delete User",
-      "deleting": "Deleting...",
-      "selectUserError": "Please select a user to delete",
-      "generalError": "An error occurred while resetting the user",
-      "permissionError": "Permission denied - cannot reset admin users",
-      "userNotFoundError": "User not found"
-    }
+    "waitingStudents": "are currently waiting for supervision approval"
   },
   "appHeader": {
     "addAdmin": "Add Admin",
@@ -151,6 +151,10 @@
     "supervising": "You are supervising {firstName}"
   },
   "dashboard": {
+    "progress": {
+      "button": "Complete Profile...",
+      "text": "Your profile is almost complete! Add the last things for the best experience of SuperWise"
+    },
     "student": {
       "downloadConfirmation": "Download Confirmation",
       "findSupervisor": "Find your supervisor now!",
@@ -383,7 +387,8 @@
     },
     "noResults": "No search results...",
     "placeholderForStudents": "Search supervisor...",
-    "placeholderForSupervisors": "Search student..."
+    "placeholderForSupervisors": "Search student...",
+    "placeholderForAdmins": "Search users..."
   },
   "searchBar": {
     "noResults": "No results found"