Merge remote-tracking branch 'origin/small-layout-fixes' into small-l…

…ayout-fixes

# Conflicts:
#	frontend/package-lock.json
#	frontend/src/components/projects/groups/GroupsManageTable.vue
#	frontend/src/components/submissions/AllSubmission.vue
#	frontend/src/views/submissions/SubmissionsView.vue

backend/api/fixtures/realistic/realistic.yaml

@@ -3,7 +3,7 @@
   pk: 0
   fields:
     name: Introduction to Computer Science
-    academic_startyear: 2024
+    academic_startyear: 2023
     excerpt: This course is an introduction to computer science.
     description: This course will teach you the basics of computer science by showing you the wonders of Golang.
     faculty: Wetenschappen
@@ -15,7 +15,7 @@
   pk: 1
   fields:
     name: The frog and its anatomy
-    academic_startyear: 2024
+    academic_startyear: 2023
     excerpt: This course is an introduction to biology.
     description: This course will teach you the basics of biology by showing you the wonders of the human body.
     faculty: Wetenschappen
@@ -29,12 +29,13 @@
   pk: 0
   fields:
     name: Learn Python
-    description: This project will teach you the basics of Python.
+    description: '<h1>Python Opdracht: Recursieve Functie</h1><p>In deze opdracht ga je een <strong>recursieve functie</strong> implementeren in Python. Recursie is een programmeertechniek waarbij een functie zichzelf aanroept. Dit kan nuttig zijn voor het oplossen van problemen die kunnen worden opgesplitst in kleinere, gelijkaardige problemen.</p><h2>Opdrachtbeschrijving</h2><p>Schrijf een Python-functie genaamd <code>recursieve_som</code> die de som berekent van alle positieve gehele getallen tot en met een gegeven nummer <code>n</code> inclusief. De functie moet recursief zijn en voldoet aan de volgende specificaties:</p><ul><li><strong>Input:</strong> Een enkel positief geheel getal <code>n</code>.</li><li><strong>Output:</strong> De som van alle positieve gehele getallen tot en met <code>n</code>.</li></ul><h2>Voorbeeld</h2><div class="example"><p>Als de invoer <code>n = 5</code> is, dan moet de uitvoer zijn:</p><code>recursieve_som(5)</code><br><strong>Uitvoer:</strong> 15<br><em>Verklaring:</em> 1 + 2 + 3 + 4 + 5 = 15</div><h2>Stappenplan</h2><ol><li>Controleer of <code>n</code> gelijk is aan 1. Zo ja, retourneer 1.</li><li>Zo nee, retourneer de som van <code>n</code> en de recursieve aanroep van <code>recursieve_som(n-1)</code>.</li></ol><h2>Code Sjabloon</h2><pre><code>def recursieve_som(n): if n == 1: return 1 else: return n + recursieve_som(n-1) # Voorbeeld aanroep resultaat = recursieve_som(5) print(resultaat)  # Uitvoer: 15 </code></pre><h2>Extra Uitdaging</h2><p>Pas de functie aan zodat deze een foutmelding geeft wanneer de invoer geen positief geheel getal is. Gebruik hiervoor de <code>raise</code>-instructie om een uitzondering te genereren.</p><div class="example"><p><strong>Voorbeeld:</strong></p><pre><code>def recursieve_som(n): if not isinstance(n, int) or n &lt;= 0: raise ValueError("Invoer moet een positief geheel getal zijn") if n == 1: return 1 else: return n + recursieve_som(n-1) </code></pre></div><h2>Indienen</h2><p>Zorg ervoor dat je je code indient via het platform onder het juiste project en in de juiste groep. Voeg ook een kort verslag toe waarin je de werking van je functie uitlegt en eventuele uitdagingen die je bent tegengekomen tijdens het programmeren.</p>
+'
     visible: true
     archived: false
     locked_groups: false
     start_date: 2023-12-12T00:00:00Z
-    deadline: 2025-01-01T00:00:00Z
+    deadline: 2024-5-26T00:00:00Z
     max_score: 100
     score_visible: false
     group_size: 3
@@ -48,7 +49,7 @@
     archived: false
     locked_groups: false
     start_date: 2023-01-01T00:00:00Z
-    deadline: 2025-01-01T00:00:00Z
+    deadline: 2024-05-30T00:00:00Z
     max_score: 20
     score_visible: true
     group_size: 3

frontend/package.json

@@ -40,6 +40,7 @@
         "@types/node": "^20.11.30",
         "@typescript-eslint/eslint-plugin": "^6.21.0",
         "@vitejs/plugin-vue": "^5.0.4",
+        "prettier": "^3.2.5",
         "cypress": "^13.7.1",
         "cypress-vite": "^1.5.0",
         "eslint": "^8.57.0",

frontend/src/components/submissions/AllSubmission.vue

@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue';
 import { type Submission } from '@/types/submission/Submission.ts';
-import { type ExtraCheckResult } from '@/types/submission/ExtraCheckResult.ts';
-import { type StructureCheckResult } from '@/types/submission/StructureCheckResult.ts';
 import { useI18n } from 'vue-i18n';
 import router from '@/router/router.ts';
 import { useRoute } from 'vue-router';
 import { PrimeIcons } from 'primevue/api';
-import {Group} from "@/types/Group.ts";
+import { type Group } from '@/types/Group.ts';
+import { computed } from 'vue';
 
 const { params } = useRoute();
 const { t } = useI18n();
@@ -17,6 +15,9 @@ const props = defineProps<{
     group: Group | null;
 }>();
 
+/* The sorted submissions */
+const sortedSubmissions = computed(() => [...props.submissions].sort((a, b) => parseInt(b.id) - parseInt(a.id)));
+
 /**
  * Returns the description for the submission
  * @param submission
@@ -84,17 +85,24 @@ const navigateToSubmission = (submissionId: string): void => {
 </script>
 
 <template>
-    <template v-if="submissions.length > 0">
+    <template v-if="sortedSubmissions.length > 0">
         <div
-            v-for="submission in submissions"
+            v-for="submission in sortedSubmissions"
             :key="submission.id"
             class="px-3 py-2 surface-100 gap-2 flex submission justify-content-between align-items-center"
             @click="navigateToSubmission(submission.id)"
         >
             <div class="flex align-items-center gap-2">
                 <label class="font-semibold m-2 p-1">#{{ submission.submission_number }}</label>
-                <div class="border-circle p-2 w-2rem h-2rem surface-100">
-                    <i :class="getSubmissionIcon(submission)" class="text-lg"></i>
+                <div
+                    class="status border-circle p-2 w-2rem h-2rem flex align-items-center justify-content-center"
+                    :class="{
+                        ['passed']: submission.isPassed(),
+                        ['failed-extra']: !submission.isExtraCheckPassed(),
+                        ['failed-structure']: !submission.isStructureCheckPassed(),
+                    }"
+                >
+                    <i :class="getSubmissionIcon(submission)" class="text-lg text-xs"></i>
                 </div>
                 <p>{{ timeSince(submission.submission_time) }}</p>
             </div>
@@ -114,5 +122,20 @@ const navigateToSubmission = (submissionId: string): void => {
     &:hover {
         background-color: var(--surface-300) !important;
     }
+
+    .status {
+        &.passed {
+            background-color: var(--bg-primary);
+        }
+
+        &.failed-structure {
+            background-color: indianred;
+            color: white;
+        }
+
+        &.failed-extra {
+            background-color: var(--secondary-color);
+        }
+    }
 }
 </style>

frontend/src/views/submissions/SubmissionsView.vue

@@ -157,10 +157,7 @@ onMounted(async () => {
                 <!-- Overview of all given submissions -->
                 <div class="col-12 md:col-6">
                     <h2>{{ t('views.submissions.allSubmissions') }}</h2>
-                    <AllSubmission
-                        :group="group"
-                        :submissions="submissions"
-                    ></AllSubmission>
+                    <AllSubmission :group="group" :submissions="submissions"></AllSubmission>
                 </div>
             </div>
         </template>