Patch subject

frontend/src/components/subject/createSubjectView/body/CreateSubjectBody.vue → frontend/src/components/subject/modify/body/ModifySubjectBody.vue

@@ -17,9 +17,9 @@
 </template>
 
 <script setup lang="ts">
-import SubjectInstructorsCard from "@/components/subject/createSubjectView/body/SubjectInstructorsCard.vue";
+import SubjectInstructorsCard from "@/components/subject/modify/body/SubjectInstructorsCard.vue";
 import type User from "@/models/User";
-import UserSearchCard from "@/components/subject/createSubjectView/body/UserSearchCard.vue";
+import UserSearchCard from "@/components/subject/modify/body/UserSearchCard.vue";
 
 defineProps<{
     currentUser: User;

frontend/src/components/subject/createSubjectView/body/UserSearchCard.vue → frontend/src/components/subject/modify/body/UserSearchCard.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-import UserSearchList from "@/components/subject/createSubjectView/body/UserSearchList.vue";
+import UserSearchList from "@/components/subject/modify/body/UserSearchList.vue";
 import type User from "@/models/User";
 
 defineProps<{

frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue → frontend/src/components/subject/modify/header/ModifySubjectHeaderCard.vue

@@ -1,7 +1,7 @@
 <template>
     <v-card variant="text" class="title-card" width="100%" height="45vh">
         <v-card-title class="title">
-            {{ $t("create_subject.new_subject") }}
+            {{ title }}
         </v-card-title>
 
         <v-card-text>
@@ -37,7 +37,6 @@
                         :label="$t('create_subject.assign_self')"
                         v-model="checkbox"
                         color="primary"
-                        class="checkbox"
                     ></v-checkbox>
                 </v-col>
             </v-row>
@@ -61,13 +60,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs, watch } from "vue";
 import useAcademicYear from "@/composables/useAcademicYear";
+import { computed, ref, toRefs, watch } from "vue";
 import { useI18n } from "vue-i18n";
 
 const { t } = useI18n();
 
 const props = defineProps<{
+    title: string;
+    subjectName: string;
+    academicYear: number;
+    subjectMail: string;
     currentUserAsInstructor: boolean;
     isSubjectNameError: boolean;
     isSubjectMailError: boolean;
@@ -81,11 +84,19 @@ watch(currentUserAsInstructor, (newValue) => {
     checkbox.value = newValue;
 });
 
-const subjectName = ref("");
-const subjectMail = ref("");
-const activeAcademicYear = ref<number>(useAcademicYear());
-
-const academicYearItems = [activeAcademicYear.value, activeAcademicYear.value + 1];
+const subjectName = ref(props.subjectName);
+const activeAcademicYear = ref<number>(props.academicYear);
+const subjectMail = ref(props.subjectMail);
+const currentAcademicYear = useAcademicYear();
+
+const academicYearItems = computed(() => {
+    const years = [currentAcademicYear];
+    if (activeAcademicYear.value !== currentAcademicYear) {
+        years.push(activeAcademicYear.value);
+    }
+    years.push(activeAcademicYear.value + 1);
+    return years;
+});
 const rules = {
     required: (value: string) => !!value || t("create_subject.field_required"),
     length: (value: string) => value.length > 2 || t("create_subject.field_length"),

frontend/src/components/subject/createSubjectView/header/CreateSubjectHeaderContainer.vue → frontend/src/components/subject/modify/header/ModifySubjectHeaderContainer.vue

@@ -1,10 +1,14 @@
 <template>
     <v-row>
         <v-col cols="4">
-            <CreateSubjectHeaderImage :imagePath="imagePath"></CreateSubjectHeaderImage>
+            <ModifySubjectHeaderImage :imagePath="imagePath"></ModifySubjectHeaderImage>
         </v-col>
         <v-col cols="8">
-            <CreateSubjectHeaderCard
+            <ModifySubjectHeaderCard
+                :title="title"
+                :subject-name="subjectName"
+                :academic-year="academicYear"
+                :subject-mail="subjectMail"
                 :current-user-as-instructor="currentUserAsInstructor"
                 :is-subject-name-error="isSubjectNameError"
                 :is-subject-mail-error="isSubjectMailError"
@@ -15,17 +19,21 @@
                     $emit('update:current-user-as-instructor', $event)
                 "
             >
-            </CreateSubjectHeaderCard>
+            </ModifySubjectHeaderCard>
         </v-col>
     </v-row>
 </template>
 
 <script setup lang="ts">
-import CreateSubjectHeaderCard from "@/components/subject/createSubjectView/header/CreateSubjectHeaderCard.vue";
-import CreateSubjectHeaderImage from "@/components/subject/createSubjectView/header/CreateSubjectHeaderImage.vue";
+import ModifySubjectHeaderCard from "@/components/subject/modify/header/ModifySubjectHeaderCard.vue";
+import ModifySubjectHeaderImage from "@/components/subject/modify/header/ModifySubjectHeaderImage.vue";
 
 defineProps<{
+    title: string;
     imagePath: string;
+    subjectName: string;
+    academicYear: number;
+    subjectMail: string;
     currentUserAsInstructor: boolean;
     isSubjectNameError: boolean;
     isSubjectMailError: boolean;

frontend/src/components/subject/subjectview/body/SubjectBody.vue → frontend/src/components/subject/subject/body/SubjectBody.vue

@@ -23,8 +23,8 @@
 </template>
 
 <script setup lang="ts">
-import SubjectProjectsPage from "@/components/subject/subjectview/body/projects/SubjectProjectsPage.vue";
-import SubjectGroupsPage from "@/components/subject/subjectview/body/groups/SubjectGroupsPage.vue";
+import SubjectProjectsPage from "@/components/subject/subject/body/projects/SubjectProjectsPage.vue";
+import SubjectGroupsPage from "@/components/subject/subject/body/groups/SubjectGroupsPage.vue";
 
 import { ref } from "vue";
 import type Project from "@/models/Project";

frontend/src/components/subject/subjectview/body/projects/SubjectProjectsPage.vue → frontend/src/components/subject/subject/body/projects/SubjectProjectsPage.vue

@@ -32,11 +32,11 @@
 </template>
 
 <script setup lang="ts">
-import SubjectProjectsList from "@/components/subject/subjectview/body/projects/list/SubjectProjectsList.vue";
+import SubjectProjectsList from "@/components/subject/subject/body/projects/list/SubjectProjectsList.vue";
 import type Project from "@/models/Project";
 import { FilterOptions } from "@/models/Project";
 import { computed, ref, toRefs } from "vue";
-import SubjectProjectPage from "@/components/subject/subjectview/body/projects/SubjectProjectPage.vue";
+import SubjectProjectPage from "@/components/subject/subject/body/projects/SubjectProjectPage.vue";
 
 const props = defineProps<{
     projects: Project[];

frontend/src/components/subject/subjectview/body/projects/list/SubjectProjectsList.vue → frontend/src/components/subject/subject/body/projects/list/SubjectProjectsList.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-import SubjectTab from "@/components/subject/subjectview/body/projects/list/SubjectTab.vue";
+import SubjectTab from "@/components/subject/subject/body/projects/list/SubjectTab.vue";
 import type Project from "@/models/Project";
 import { FilterOptions } from "@/models/Project";
 import { ref, watch } from "vue";

frontend/src/components/subject/subjectview/header/SubjectHeaderCard.vue → frontend/src/components/subject/subject/header/SubjectHeaderCard.vue

@@ -36,7 +36,10 @@
                 </v-card-text>
             </v-col>
             <v-col v-if="isAdmin || (isInstructor && isTeacher)" cols="1">
-                <router-link to="" class="link">
+                <router-link
+                    :to="{ name: 'edit-subject', params: { subjectId: subjectId } }"
+                    class="link"
+                >
                     <v-icon size="large">mdi-square-edit-outline</v-icon>
                 </router-link>
             </v-col>
@@ -50,6 +53,7 @@ import useIsAdmin from "@/composables/useIsAdmin";
 import useIsTeacher from "@/composables/useIsTeacher";
 
 defineProps<{
+    subjectId: number;
     title: string;
     academicYear: number;
     instructors: User[];

frontend/src/components/subject/subjectview/header/SubjectHeaderContainer.vue → frontend/src/components/subject/subject/header/SubjectHeaderContainer.vue

@@ -5,6 +5,7 @@
         </v-col>
         <v-col cols="8">
             <SubjectHeaderCard
+                :subject-id="subjectId"
                 :title="title"
                 :academic-year="academicYear"
                 :instructors="instructors"
@@ -16,13 +17,14 @@
 </template>
 
 <script setup lang="ts">
-import SubjectHeaderCard from "@/components/subject/subjectview/header/SubjectHeaderCard.vue";
+import SubjectHeaderCard from "@/components/subject/subject/header/SubjectHeaderCard.vue";
 import type User from "@/models/User";
-import SubjectHeaderImage from "@/components/subject/subjectview/header/SubjectHeaderImage.vue";
+import SubjectHeaderImage from "@/components/subject/subject/header/SubjectHeaderImage.vue";
 import { SubjectRole } from "@/models/Subject";
 import { computed, toRefs } from "vue";
 
 const props = defineProps<{
+    subjectId: number;
     title: string;
     academicYear: number;
     instructors: User[];

frontend/src/components/subject/subjectsview/header/SubjectsHeaderContainer.vue → frontend/src/components/subject/subjects/header/SubjectsHeaderContainer.vue

@@ -17,8 +17,8 @@
 </template>
 
 <script setup lang="ts">
-import SubjectsHeaderCard from "@/components/subject/subjectsview/header/SubjectsHeaderCard.vue";
-import SubjectsHeaderImage from "@/components/subject/subjectsview/header/SubjectsHeaderImage.vue";
+import SubjectsHeaderCard from "@/components/subject/subjects/header/SubjectsHeaderCard.vue";
+import SubjectsHeaderImage from "@/components/subject/subjects/header/SubjectsHeaderImage.vue";
 import type { SubjectDetails, SubjectFilter } from "@/models/Subject";
 
 defineProps<{

frontend/src/i18n/locales/en.ts

@@ -179,6 +179,11 @@ export default {
         email_invalid: "Provided email is invalid",
     },
 
+    patch_subject: {
+        cancel_dialog: "Cancel editing subject?",
+        edit_subject: "Edit subject",
+    },
+
     group: {
         not_found: "Group not found",
         not_found2: "No groups found",

frontend/src/i18n/locales/nl.ts

@@ -183,6 +183,11 @@ export default {
         email_invalid: "Ingevoerde email is ongeldig",
     },
 
+    patch_subject: {
+        cancel_dialog: "Wijzigingen annuleren?",
+        edit_subject: "Wijzig vak",
+    },
+
     group: {
         not_found: "Groep niet gevonden",
         not_found2: "Geen groepen teruggevonden",

frontend/src/models/Subject.ts

@@ -27,7 +27,7 @@ export interface SubjectDetails {
     role: SubjectRole;
 }
 
-export default interface SubjectForm {
+export interface SubjectForm {
     name: string;
     email: string;
     academic_year: number;

frontend/src/queries/Subject.ts

@@ -12,13 +12,15 @@ import {
     getSubjectUuid,
     createSubject,
     createSubjectInstructor,
+    updateSubject,
+    deleteSubjectInstructor,
 } from "@/services/subject";
 import { getSubjectProjects } from "@/services/project";
 import type User from "@/models/User";
 import type Subject from "@/models/Subject";
 import type { UserSubjectList } from "@/models/Subject";
 import type Project from "@/models/Project";
-import type SubjectForm from "@/models/Subject";
+import type { SubjectForm } from "@/models/Subject";
 
 function SUBJECT_QUERY_KEY(subjectId: number | string): (string | number)[] {
     return ["subject", subjectId];
@@ -172,6 +174,31 @@ export function useCreateSubjectMutation(): UseMutationReturnType<
     });
 }
 
+export function useUpdateSubjectMutation(): UseMutationReturnType<
+    void,
+    Error,
+    { subjectId: number; subject: SubjectForm },
+    Subject
+> {
+    const queryClient = useQueryClient();
+    return useMutation({
+        mutationFn: ({ subjectId, subject }) => updateSubject(subjectId, subject),
+        onMutate: ({ subjectId, subject }) => {
+            const previousSubject = queryClient.getQueryData<Subject>(SUBJECT_QUERY_KEY(subjectId));
+            queryClient.cancelQueries({ queryKey: SUBJECT_QUERY_KEY(subjectId) });
+            queryClient.setQueryData(SUBJECT_QUERY_KEY(subjectId), subject);
+            return previousSubject;
+        },
+        onSuccess: (_, { subjectId }) => {
+            queryClient.invalidateQueries({ queryKey: SUBJECT_QUERY_KEY(subjectId) });
+        },
+        onError: (_, { subjectId }, previousSubject) => {
+            queryClient.setQueryData(SUBJECT_QUERY_KEY(subjectId), previousSubject);
+            alert("Could not update subject. Please try again.");
+        },
+    });
+}
+
 /**
  * Mutation composable for creating subject instructor
  */
@@ -209,3 +236,36 @@ export function useCreateSubjectInstructorMutation(): UseMutationReturnType<
         },
     });
 }
+
+export function useDeleteSubjectInstructorMutation(): UseMutationReturnType<
+    void,
+    Error,
+    { user: User; subjectId: number },
+    { previousUsers: User[] }
+> {
+    const queryClient = useQueryClient();
+    return useMutation({
+        mutationFn: ({ user, subjectId }) => deleteSubjectInstructor(subjectId, user.uid),
+        onMutate: ({ user, subjectId }) => {
+            const previousUsers = queryClient.getQueryData<User[]>(
+                SUBJECT_INSTRUCTORS_QUERY_KEY(subjectId)
+            );
+            queryClient.cancelQueries({ queryKey: SUBJECT_INSTRUCTORS_QUERY_KEY(subjectId) });
+            const newUsers = previousUsers ? previousUsers.filter((u) => u.uid !== user.uid) : [];
+            queryClient.setQueryData(SUBJECT_INSTRUCTORS_QUERY_KEY(subjectId), newUsers);
+            return { previousUsers: previousUsers || [] };
+        },
+        onSuccess: (_, { subjectId }) => {
+            queryClient.invalidateQueries({
+                queryKey: SUBJECT_INSTRUCTORS_QUERY_KEY(subjectId),
+            });
+        },
+        onError: (_, { subjectId }, ctx) => {
+            queryClient.setQueryData<User[]>(
+                SUBJECT_INSTRUCTORS_QUERY_KEY(subjectId),
+                () => ctx!.previousUsers!
+            );
+            alert("Could not delete subject instructor. Please try again.");
+        },
+    });
+}

frontend/src/router/index.ts

@@ -84,7 +84,13 @@ const router = createRouter({
         {
             path: "/subjects/create",
             name: "create-subject",
-            component: () => import("../views/subject/CreateSubjectView.vue"),
+            component: () => import("../views/subject/modify/CreateSubjectView.vue"),
+        },
+        {
+            path: "/subjects/:subjectId(\\d+)/edit",
+            name: "edit-subject",
+            component: () => import("../views/subject/modify/PatchSubjectView.vue"),
+            props: (route) => ({ subjectId: Number(route.params.subjectId) }),
         },
         {
             path: "/subjects/:subjectId(\\d+)",