feat: assignment pagina is klaar voor studenten en leerkrachten

frontend/src/i18n/locale/fr.json

@@ -47,7 +47,7 @@
     "learning-path": "Parcours d'apprentissage",
     "choose-lp": "Choisissez un parcours d'apprentissage",
     "choose-classes": "Choisissez des classes",
-    "create-groups": "Crée des groupes",
+    "create-groups": "Créer des groupes",
     "title": "Titre",
     "pick-class": "Choisissez une classe",
     "choose-students": "Sélectionnez des élèves",

frontend/src/utils/tempData.ts

@@ -55,4 +55,19 @@ teacher01.classes = [class01];
 teacher02.classes = [class02];
 teacher03.classes = [class03];
 
+type Assignment = {
+    id: string;
+    title: string;
+    description: string;
+};
+
+export const assignments: Assignment[] = Array.from({ length: 4 }, (_, i) => ({
+    id: `assignment${i}`,
+    title: `Assignment ${i}`,
+    description:
+        "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. " +
+        "Aenean commodo ligula eget dolor. Aenean massa. " +
+        "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."
+}));
+
 export const classes: Array<Class> = [class01, class02, class03];

frontend/src/views/classes/UserAssignments.vue

@@ -1,7 +1,87 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+    import { ref, computed, onMounted } from 'vue';
+    import { useI18n } from 'vue-i18n';
+    import { useRouter } from 'vue-router';
+    import auth from "@/services/auth/auth-service.ts";
+    import {assignments} from "@/utils/tempData.ts";
+
+    const { t } = useI18n();
+    const router = useRouter();
+
+    const role = auth.authState.activeRole;
+
+    const allAssignments = ref(assignments);
+    const isTeacher = computed(() => role === 'teacher');
+
+    const loadAssignments = async () => {
+        //TODO: replace with controller function
+        // fetch all student's or teacher's assignments
+    };
+
+    onMounted(loadAssignments);
+
+    const goToCreateAssignment = () => {
+        router.push('/assignment/create');
+    };
+
+    const goToEditAssignment = (id: number) => {
+        router.push(`/assignment/edit/${id}`);
+    };
+
+    const goToAssignmentDetails = (id: number) => {
+        router.push(`/assignment/${id}`);
+    };
+</script>
 
 <template>
-    <main></main>
+    <div class="assignments-container">
+        <h1>{{ t('assignments') }}</h1>
+
+        <v-btn v-if="isTeacher" color="primary" class="mb-4" @click="goToCreateAssignment">
+            {{ t('new-assignment') }}
+        </v-btn>
+
+        <v-container>
+            <v-row>
+                <v-col v-for="assignment in allAssignments" :key="assignment.id" cols="12">
+                    <v-card class="assignment-card" variant="outlined">
+                        <v-card-title>{{ assignment.title }}</v-card-title>
+                        <v-divider></v-divider>
+                        <v-card-text>{{ assignment.description }}</v-card-text>
+
+                        <v-card-actions>
+                            <v-btn color="primary" @click="goToAssignmentDetails(assignment.id)">
+                                {{ t('view-assignment') }}
+                            </v-btn>
+                            <v-btn v-if="isTeacher" color="secondary" @click="goToEditAssignment(assignment.id)">
+                                {{ t('edit') }}
+                            </v-btn>
+                        </v-card-actions>
+                    </v-card>
+                </v-col>
+            </v-row>
+        </v-container>
+
+    </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.assignments-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+}
+
+.assignment-card {
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+h1 {
+    text-align: left;
+    width: 100%;
+}
+</style>