grouppagina en submissions testen + styling (#224)

* styling * styling * styling * styling * submissionslist test * meer testen * format * merge conflicts * lint + format * fix test after dev merge * Update frontend/src/i18n/locales/nl.ts Co-authored-by: Bram Reyniers <[email protected]> * fix test --------- Co-authored-by: Bram Reyniers <[email protected]>
SELab-2 · May 20, 2024 · f64161c · f64161c
1 parent 4f66dbf
commit f64161c
Show file tree

Hide file tree

Showing 12 changed files with 522 additions and 138 deletions.
diff --git a/frontend/src/components/buttons/BackButton.vue b/frontend/src/components/buttons/BackButton.vue
@@ -0,0 +1,26 @@
+<template>
+    <router-link :to="destination">
+        <v-btn class="group-button" prepend-icon="mdi-arrow-left">
+            {{ $t(title) }}
+        </v-btn>
+    </router-link>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+    destination: String;
+    title: String;
+}>();
+
+const destination = props.destination;
+const title = props.title;
+</script>
+
+<style scoped>
+.v-btn {
+    margin-bottom: 5px;
+    min-width: 150px;
+    background-color: rgb(var(--v-theme-primary));
+    color: rgb(var(--v-theme-navtext));
+}
+</style>
diff --git a/frontend/src/components/project/ProjectInfo.vue b/frontend/src/components/project/ProjectInfo.vue
@@ -34,12 +34,7 @@
                 </v-btn>
             </v-card-actions>
         </v-card>
-        <SubmitInfo
-            class="submitInfo"
-            v-if="group && !isTeacher"
-            :project="project"
-            :group="group"
-        />
+        <SubmitInfo class="submitInfo" v-if="group" :project="project" :group="group" />
     </v-container>
 </template>
 

diff --git a/frontend/src/components/submission/SubmissionCard.vue b/frontend/src/components/submission/SubmissionCard.vue
@@ -1,74 +1,86 @@
 <template>
-    <v-card variant="outlined">
-        <v-card-title>
-            {{ $t("submission.status") }}
-            <p v-if="new Date(submission.date) <= deadline" :class="Status[submission.status]">
-                {{ Status[submission.status] }}
-            </p>
-            <p v-else class="Deadline">{{ $t("submission.after_deadline") }}</p>
-        </v-card-title>
-        <v-card-subtitle>
-            {{ $t("submission.datetime") }} {{ $d(submission.date, "long") }}
-        </v-card-subtitle>
-        <v-card-item>
-            <v-card-title>
-                {{ $t("submission.remarks") }}
-            </v-card-title>
-            <v-card-text v-if="submission.remarks">
-                {{ submission.remarks }}
-            </v-card-text>
-            <v-card-subtitle v-else>
-                {{ $t("submission.remarks_empty") }}
-            </v-card-subtitle>
-        </v-card-item>
-        <v-card-item v-if="submission.stderr || submission.stdout || submission.testresults.length">
-            <v-card-title>{{ $t("submission.docker_test") }}</v-card-title>
-            <v-card-text>
-                <p v-if="submission.stdout">Stdout: {{ submission.stdout }}</p>
-                <p v-if="submission.stderr">Sterr: {{ submission.stderr }}</p>
-                <ul>
-                    <li v-for="result in submission.testresults" :key="result">
-                        <p v-if="result.succeeded" class="text-green">{{ result.value }}</p>
-                        <p v-else class="text-red">{{ result.value }}</p>
-                    </li>
-                </ul>
-            </v-card-text>
-        </v-card-item>
-        <v-card-item>
-            <v-card-title>
-                {{ $t("submission.files") }}
-            </v-card-title>
-            <v-card-subtitle>
-                {{ $t("submission.download_info") }}
-            </v-card-subtitle>
-            <v-container>
-                <v-alert
-                    v-if="isError"
-                    title="Error"
-                    color="error"
-                    :text="error!.message"
-                ></v-alert>
-                <v-skeleton-loader v-else :loading="isLoading" type="card">
-                    <v-col>
-                        <v-chip
-                            class="ma-2"
-                            v-for="(item, index) in files"
-                            label
-                            color="blue"
-                            :key="item.filesortedname"
-                            @click="() => downloadFile(index)"
-                        >
-                            {{ item.filename }}
-                        </v-chip>
-                    </v-col>
-                </v-skeleton-loader>
-            </v-container>
-            <v-card-actions>
-                <v-btn @click="downloadAll">
-                    {{ $t("submission.download_all_files") }}
-                </v-btn>
-            </v-card-actions>
-        </v-card-item>
+    <v-divider />
+    <v-card variant="flat">
+        <v-row>
+            <v-col>
+                <v-card-title>
+                    {{ $t("submission.status") }}
+                    <p
+                        v-if="new Date(submission.date) <= deadline"
+                        :class="Status[submission.status]"
+                    >
+                        {{ Status[submission.status] }}
+                    </p>
+                    <p v-else class="Deadline">{{ $t("submission.after_deadline") }}</p>
+                </v-card-title>
+                <v-card-subtitle>
+                    {{ $t("submission.datetime") }} {{ $d(submission.date, "long") }}
+                </v-card-subtitle>
+                <v-card-item>
+                    <v-card-title>
+                        {{ $t("submission.remarks") }}
+                    </v-card-title>
+                    <v-card-text v-if="submission.remarks">
+                        {{ submission.remarks }}
+                    </v-card-text>
+                    <v-card-subtitle v-else>
+                        {{ $t("submission.remarks_empty") }}
+                    </v-card-subtitle>
+                </v-card-item>
+                <v-card-item
+                    v-if="submission.stderr || submission.stdout || submission.testresults.length"
+                >
+                    <v-card-title>{{ $t("submission.docker_test") }}</v-card-title>
+                    <v-card-text>
+                        <p v-if="submission.stdout">Stdout: {{ submission.stdout }}</p>
+                        <p v-if="submission.stderr">Sterr: {{ submission.stderr }}</p>
+                        <ul>
+                            <li v-for="result in submission.testresults" :key="result">
+                                <p v-if="result.succeeded" class="text-green">{{ result.value }}</p>
+                                <p v-else class="text-red">{{ result.value }}</p>
+                            </li>
+                        </ul>
+                    </v-card-text>
+                </v-card-item>
+            </v-col>
+            <v-col>
+                <v-card-item>
+                    <v-card-title>
+                        {{ $t("submission.files") }}
+                    </v-card-title>
+                    <v-card-subtitle>
+                        {{ $t("submission.download_info") }}
+                    </v-card-subtitle>
+                    <v-container>
+                        <v-alert
+                            v-if="isError"
+                            title="Error"
+                            color="error"
+                            :text="error!.message"
+                        ></v-alert>
+                        <v-skeleton-loader v-else :loading="isLoading" type="card">
+                            <v-col>
+                                <v-chip
+                                    class="ma-2"
+                                    v-for="(item, index) in files"
+                                    label
+                                    color="blue"
+                                    :key="item.filesortedname"
+                                    @click="() => downloadFile(index)"
+                                >
+                                    {{ item.filename }}
+                                </v-chip>
+                            </v-col>
+                        </v-skeleton-loader>
+                    </v-container>
+                    <v-card-actions>
+                        <v-btn @click="downloadAll">
+                            {{ $t("submission.download_all_files") }}
+                        </v-btn>
+                    </v-card-actions>
+                </v-card-item>
+            </v-col>
+        </v-row>
     </v-card>
 </template>
 
@@ -134,5 +146,7 @@ const downloadAll = () => {
 .v-card {
     border-color: rgb(var(--v-theme-text));
     background-color: rgb(var(--v-theme-background));
+    margin-top: 10px;
+    margin-bottom: 10px;
 }
 </style>
diff --git a/frontend/src/components/submission/SubmissionList.vue b/frontend/src/components/submission/SubmissionList.vue
@@ -1,24 +1,32 @@
 <template>
     <v-container>
-        <v-alert v-if="isError" title="Error" color="error" :text="error.message"></v-alert>
-        <v-skeleton-loader v-else :loading="isLoading || !projectSuccess" type="card">
-            <v-col class="mx-auto">
-                <h2>{{ $t("submission.submissions_title") }}</h2>
-                <div v-if="sorted.length == 0">
-                    <p>{{ $t("submission.no_submissions") }}</p>
-                    <v-btn :to="`/project/${project?.id}/submit`">
+        <div class="submissionsview">
+            <v-alert v-if="isError" title="Error" color="error" :text="error.message"></v-alert>
+            <v-skeleton-loader v-else :loading="isLoading || !projectSuccess" type="card">
+                <v-col>
+                    <h2>{{ $t("submission.submissions_title") }}</h2>
+                    <v-btn
+                        :to="`/project/${project?.id}/submit`"
+                        variant="flat"
+                        class="submitbutton"
+                    >
                         {{ $t("submit.new_submission") }}
                     </v-btn>
-                </div>
-                <SubmissionCard
-                    class="ma-3"
-                    v-for="submission in sorted"
-                    :key="submission"
-                    :submission="submission!"
-                    :deadline="project.deadline!"
-                />
-            </v-col>
-        </v-skeleton-loader>
+                    <div v-if="sorted.length == 0" class="nosubmissions">
+                        <v-divider class="divider"></v-divider>
+                        <p>{{ $t("submission.no_submissions") }}</p>
+                    </div>
+                    <SubmissionCard
+                        class="ma-3"
+                        v-for="submission in sorted"
+                        :key="submission"
+                        :submission="submission"
+                        :project="project!"
+                        :deadline="project.deadline"
+                    />
+                </v-col>
+            </v-skeleton-loader>
+        </div>
     </v-container>
 </template>
 
@@ -57,3 +65,19 @@ const refetch_timer = () => {
 };
 refetch_timer();
 </script>
+<style scoped>
+.nosubmissions {
+    margin-top: 15px;
+}
+
+.submitbutton {
+    margin-top: 25px;
+    margin-bottom: 15px;
+    background-color: rgb(var(--v-theme-secondary));
+    border-color: rgb(var(--v-theme-text));
+}
+
+.divider {
+    margin-bottom: 15px;
+}
+</style>
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
@@ -73,6 +73,7 @@ export default {
         unmet_reqs_warning: "Your submission did not satisfy all file requirements.",
         to_subject: "To subject",
         to_groups: "To groups",
+        to_project: "To Project",
     },
     navigation: {
         home: "Home",

diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
@@ -34,7 +34,7 @@ export default {
         no_submission_files: "Geen indieningen gevonden",
     },
     submission: {
-        status: "Indiening status: {status}",
+        status: "Status indiening:",
         datetime: "Indiening tijdstip:",
         remarks: "Opmerkingen",
         remarks_empty: "Geen opmerkingen voor deze indiening",
@@ -72,6 +72,7 @@ export default {
         unmet_reqs_warning: "Opgelet: je indiening voldoet niet aan alle bestandsvereisten.",
         to_subject: "Naar vak",
         to_groups: "Naar groepen",
+        to_project: "Naar project",
     },
     navigation: {
         home: "Hoofdscherm",

diff --git a/frontend/src/views/CreateProjectView.vue b/frontend/src/views/CreateProjectView.vue
@@ -170,7 +170,7 @@ async function submitForm() {
             });
         } else if (selectedGroupProject.value === "random") {
             const groups = divideStudentsIntoGroups(studentsData.value || [], capacity.value);
-            const groupsToCreate = groups.map((_) => ({
+            const groupsToCreate = groups.map(() => ({
                 project_id: createdProjectId,
                 score: 0,
             }));