feat(frontend): knopen om assignment te verwijderen

frontend/src/views/assignments/SingleAssignment.vue

@@ -13,14 +13,17 @@
     const role = auth.authState.activeRole;
     const isTeacher = computed(() => role === 'teacher');
 
-    onMounted(async () => {
-        try {
+    const loadAssignment = async () => {
         // TODO: Replace with real data
         assignment.value = assignments[0];
-        } catch (error) {
-            console.error(error);
-        }
-    });
+    };
+
+    const deleteAssignment = () => {
+        console.log('Delete assignment:', assignmentId.value);
+    };
+
+    onMounted(loadAssignment);
+
 </script>
 
 <template>
@@ -45,6 +48,16 @@
                 >
                     <v-icon>mdi-pencil</v-icon>
                 </v-btn>
+
+                <v-btn
+                    v-if="isTeacher"
+                    icon
+                    variant="text"
+                    class="delete-btn"
+                    @click="deleteAssignment"
+                >
+                    <v-icon>mdi-delete</v-icon>
+                </v-btn>
             </div>
             <v-card-title class="text-h4">{{ assignment.title }}</v-card-title>
             <v-card-subtitle>
@@ -86,5 +99,11 @@
     font-size: 1.1rem;
 }
 
+.delete-btn {
+    position: absolute;
+    right: 1%;
+    color: red;
+}
+
 </style>
 

frontend/src/views/assignments/UserAssignments.vue

@@ -31,6 +31,9 @@
     const goToAssignmentDetails = (id: string) => {
         router.push(`/assignment/${id}`);
     };
+
+    const goToDeleteAssignment = (id: string) => {
+    };
 </script>
 
 <template>
@@ -56,6 +59,9 @@
                             <v-btn v-if="isTeacher" color="secondary" @click="goToEditAssignment(assignment.id)">
                                 {{ t('edit') }}
                             </v-btn>
+                            <v-btn v-if="isTeacher" color="secondary" @click="goToDeleteAssignment(assignment.id)">
+                                {{ t('delete') }}
+                            </v-btn>
                         </v-card-actions>
                     </v-card>
                 </v-col>