requested changes + linter

SELab-2 · May 6, 2024 · 18b6e2e · 18b6e2e
1 parent 371ff82
commit 18b6e2e
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 57 deletions.
diff --git a/frontend/src/components/project/ProjectInfo.vue b/frontend/src/components/project/ProjectInfo.vue
@@ -9,12 +9,7 @@
                 <v-chip label color="primary" class="ma-2" prepend-icon="mdi-school">
                     {{ subject.name }}
                 </v-chip>
-                <v-chip
-                    label
-                    color="primary"
-                    class="ma-2"
-                    prepend-icon="mdi-account-group"
-                >
+                <v-chip label color="primary" class="ma-2" prepend-icon="mdi-account-group">
                     {{ $t("project.capacity_group") + project.capacity }}
                 </v-chip>
                 <v-chip

diff --git a/frontend/src/components/project/ProjectSideBar.vue b/frontend/src/components/project/ProjectSideBar.vue
@@ -0,0 +1,60 @@
+<template>
+    <router-link :to="`/subjects/${project!.subject_id}`">
+        <v-btn class="group-button" prepend-icon="mdi-arrow-left">
+            {{ $t("default.to") + subject!.name }}
+        </v-btn>
+    </router-link>
+    <router-link v-if="group && !isSoloProject && !isTeacher" :to="`/groups/${group!.id}`">
+        <v-btn class="group-button" prepend-icon="mdi-account-group">
+            {{ $t("project.group", { number: group!.id }) }}
+        </v-btn>
+    </router-link>
+    <router-link v-else-if="!isSoloProject && !isTeacher" :to="`/projects/${project!.id}/groups`">
+        <v-btn class="group-button" prepend-icon="mdi-account-group">
+            {{ $t("project.group_button") }}
+        </v-btn>
+    </router-link>
+    <NeedHelpButton v-if="!isTeacher" class="group-button" :email="subject!.email"></NeedHelpButton>
+    <router-link v-if="isTeacher" :to="`/projects/${project!.id}/edit`">
+        <v-btn class="group-button" prepend-icon="mdi-pencil">
+            {{ $t("project.edit") }}
+        </v-btn>
+    </router-link>
+</template>
+
+<script setup lang="ts">
+import Project from "@/models/Project";
+import Group from "@/models/Group";
+import Subject from "@/models/Subject";
+import NeedHelpButton from "@/components/buttons/NeedHelpButton.vue";
+import { computed, toRefs } from "vue";
+import User from "@/models/User";
+import { useUserQuery } from "@/queries/User";
+
+const props = defineProps<{
+    project: Project;
+    group: Group | null;
+    subject: Subject;
+    instructors: User | null;
+}>();
+
+const { project, group, subject, instructors } = toRefs(props);
+
+const { data: user } = useUserQuery(null);
+
+const isTeacher = computed(() => {
+    if (!user.value || !instructors.value) {
+        return false;
+    }
+    return instructors.value.some((instructor) => instructor.uid === user.value.uid);
+});
+
+const isSoloProject = computed(() => project.value.capacity === 1);
+</script>
+
+<style scoped>
+.group-button {
+    margin-bottom: 5px;
+    min-width: auto;
+}
+</style>
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
@@ -7,6 +7,7 @@ export default {
             loading_page: "Loading...",
         },
         no: "no",
+        to: "to ",
     },
     login: {
         about: "The official submission application of Ghent University",
@@ -49,7 +50,6 @@ export default {
         group: "Group {number}",
         assignment: "Assignment:",
         myProject: "My projects:",
-        return_course: "Back to subject",
         capacity_group: "Capacity: ",
         edit: "Edit project",
         submissions_list: "All submissions",

diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
@@ -7,6 +7,7 @@ export default {
             loading_page: "Aan het laden...",
         },
         no: "geen",
+        to: "naar ",
     },
     login: {
         about: "De officiële indienapplicatie van de Universiteit Gent",
@@ -49,7 +50,6 @@ export default {
         group: "Groep {number}",
         assignment: "Opdracht:",
         myProject: "Mijn projecten:",
-        return_course: "Terug naar vak",
         capacity_group: "Capaciteit: ",
         edit: "Bewerk project",
         submissions_list: "Alle indieningen",

diff --git a/frontend/src/views/ProjectView.vue b/frontend/src/views/ProjectView.vue
@@ -13,37 +13,12 @@
                     />
                 </v-col>
                 <v-col cols="2" class="button-container">
-                    <router-link :to="`/subjects/${project!.subject_id}`">
-                        <v-btn class="group-button" prepend-icon="mdi-arrow-left">
-                            {{ $t("project.return_course") }}
-                        </v-btn>
-                    </router-link>
-                    <router-link
-                        v-if="group && !isSoloProject && !isTeacher"
-                        :to="`/groups/${group!.id}`"
-                    >
-                        <v-btn class="group-button" prepend-icon="mdi-account-group">
-                            {{ $t("project.group", { number: group!.id }) }}
-                        </v-btn>
-                    </router-link>
-                    <router-link
-                        v-else-if="!isSoloProject && !isTeacher"
-                        :to="`/projects/${projectId}/groups`"
-                    >
-                        <v-btn class="group-button" prepend-icon="mdi-account-group">
-                            {{ $t("project.group_button") }}
-                        </v-btn>
-                    </router-link>
-                    <NeedHelpButton
-                        v-if="!isTeacher"
-                        class="group-button"
-                        :email="subject!.email"
-                    ></NeedHelpButton>
-                    <router-link v-if="isTeacher" :to="`/projects/${projectId}/edit`">
-                        <v-btn class="group-button" prepend-icon="mdi-pencil">
-                            {{ $t("project.edit") }}
-                        </v-btn>
-                    </router-link>
+                    <ProjectSideBar
+                        :project="project!"
+                        :group="group!"
+                        :subject="subject!"
+                        :instructors="instructors!"
+                    />
                 </v-col>
             </v-row>
         </div>
@@ -54,10 +29,9 @@
 import ProjectInfo from "@/components/project/ProjectInfo.vue";
 import { useProjectQuery } from "@/queries/Project";
 import { computed, toRefs } from "vue";
-import NeedHelpButton from "@/components/buttons/NeedHelpButton.vue";
 import { useUserGroupQuery } from "@/queries/Group";
 import { useSubjectInstructorsQuery, useSubjectQuery } from "@/queries/Subject";
-import { useUserQuery } from "@/queries/User";
+import ProjectSideBar from "@/components/project/ProjectSideBar.vue";
 
 const props = defineProps<{
     projectId: number;
@@ -89,15 +63,6 @@ const {
     isError: isInstructorsError,
 } = useSubjectInstructorsQuery(computed(() => project.value?.subject_id));
 
-const { data: user } = useUserQuery(null);
-
-const isTeacher = computed(() => {
-    if (!user.value || !instructors.value) {
-        return false;
-    }
-    return instructors.value.some((instructor) => instructor.uid === user.value.uid);
-});
-
 const isDataLoading = computed(
     () =>
         isProjectLoading.value ||
@@ -113,17 +78,10 @@ const isDataError = computed(
         isInstructorsError.value ||
         isSubjectError.value
 );
-
-const isSoloProject = computed(() => project.value.capacity === 1);
 </script>
 
 <style scoped>
 .button-container {
     margin-top: 20px;
 }
-
-.group-button {
-    margin-bottom: 5px;
-    min-width: auto;
-}
 </style>