From 5f2de114a9d3b1c59750ef39f38e5a80cd259415 Mon Sep 17 00:00:00 2001
From: Marieke <marieke.sinnaeve@ugent.be>
Date: Wed, 17 Apr 2024 23:35:05 +0200
Subject: [PATCH 1/7] adminpanel tabel met mock data

---
 frontend/src/i18n/locales/en.ts  |  3 ++
 frontend/src/i18n/locales/nl.ts  |  3 ++
 frontend/src/views/AdminView.vue | 50 +++++++++++++++++++++++++++++++-
 3 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index b26dbe76..455c8388 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -43,4 +43,7 @@ export default {
         courses: "My courses",
         announcements: "Announcements",
     },
+    admin: {
+        users: "Users",
+    },
 };
diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
index ad7aa9b7..6315c590 100644
--- a/frontend/src/i18n/locales/nl.ts
+++ b/frontend/src/i18n/locales/nl.ts
@@ -43,4 +43,7 @@ export default {
         courses: "Mijn vakken",
         announcements: "Meldingen",
     },
+    admin: {
+        users: "Gebruikers",
+    },
 };
diff --git a/frontend/src/views/AdminView.vue b/frontend/src/views/AdminView.vue
index 141a911f..1415aa2a 100644
--- a/frontend/src/views/AdminView.vue
+++ b/frontend/src/views/AdminView.vue
@@ -1,3 +1,51 @@
 <template>
-    <h1>Admin Panel</h1>
+    <div class="adminpanel">
+        <v-card :title="$t('admin.users')" flat class="bg-white">
+            <v-card-title>
+                <v-text-field
+                    append-icon="mdi-magnify"
+                    v-model="search"
+                    label="Search"
+                    single-line
+                    hide-details
+                ></v-text-field>
+            </v-card-title>
+            <v-data-table :headers="headers" :items="data" :search="search" class="table">
+                <template v-slot:[`item.isTeacher`]="{ item }">
+                    <v-checkbox v-model="item.isTeacher"></v-checkbox>
+                </template>
+                <template v-slot:[`item.isAdmin`]="{ item }">
+                    <v-checkbox v-model="item.isAdmin"></v-checkbox>
+                </template>
+            </v-data-table>
+        </v-card>
+    </div>
 </template>
+<script setup lang="ts">
+import { ref } from "vue";
+
+const search = ref("");
+const headers = [
+    { key: "name", title: "Name", align: "start", sortable: false },
+    { key: "email", title: "Email", sortable: false },
+    { key: "isTeacher", title: "isTeacher", sortable: false },
+    { key: "isAdmin", title: "isAdmin", sortable: false },
+];
+
+const data = ref([
+    { id: 0, name: "Albert", email: "albert@Ugent.be", isTeacher: false, isAdmin: false },
+    { id: 1, name: "Bert", email: "bert@ugent.be", isTeacher: true, isAdmin: false },
+    { id: 2, name: "Cedric", email: "cedrik@ugent.be", isTeacher: false, isAdmin: true },
+]);
+</script>
+<style scoped>
+.adminpanel {
+    margin: 15px;
+}
+
+.table {
+    color: black !important;
+    background-color: white;
+    width: 95%;
+}
+</style>

From d36ff05d9445d94e46ab477f2589c9ea8a607a17 Mon Sep 17 00:00:00 2001
From: Bram Reyniers <reyniersbram@gmail.com>
Date: Fri, 19 Apr 2024 10:29:18 +0200
Subject: [PATCH 2/7] finalize ui

---
 frontend/src/views/AdminView.vue | 60 +++++++++++++++++++++++++-------
 1 file changed, 48 insertions(+), 12 deletions(-)

diff --git a/frontend/src/views/AdminView.vue b/frontend/src/views/AdminView.vue
index 1415aa2a..ba2c32e3 100644
--- a/frontend/src/views/AdminView.vue
+++ b/frontend/src/views/AdminView.vue
@@ -3,39 +3,75 @@
         <v-card :title="$t('admin.users')" flat class="bg-white">
             <v-card-title>
                 <v-text-field
-                    append-icon="mdi-magnify"
+                    prepend-inner-icon="mdi-magnify"
                     v-model="search"
                     label="Search"
                     single-line
                     hide-details
                 ></v-text-field>
             </v-card-title>
-            <v-data-table :headers="headers" :items="data" :search="search" class="table">
+            <v-data-table-virtual
+                :headers="headers"
+                :items="data"
+                :search="search"
+                v-model:sortBy="sortBy"
+                item-value="uid"
+                :loading="isLoading"
+                density="compact"
+                class="table"
+            >
+                <template v-slot:loading>
+                    <v-skeleton-loader type="table-row@15" class="table"></v-skeleton-loader>
+                </template>
                 <template v-slot:[`item.isTeacher`]="{ item }">
-                    <v-checkbox v-model="item.isTeacher"></v-checkbox>
+                    <v-checkbox-btn
+                        v-model="item.isTeacher"
+                        :readonly="item.uid === currentUser?.uid"
+                    ></v-checkbox-btn>
                 </template>
                 <template v-slot:[`item.isAdmin`]="{ item }">
-                    <v-checkbox v-model="item.isAdmin"></v-checkbox>
+                    <v-checkbox-btn
+                        v-model="item.isAdmin"
+                        :readonly="item.uid === currentUser?.uid"
+                    ></v-checkbox-btn>
                 </template>
-            </v-data-table>
+            </v-data-table-virtual>
         </v-card>
     </div>
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
+import { useUserQuery } from "@/queries/User";
+
+const { data: currentUser, isLoading } = useUserQuery(null);
 
 const search = ref("");
+const sortBy = ref([{key: "name", order: "asc"}]);
+
 const headers = [
-    { key: "name", title: "Name", align: "start", sortable: false },
-    { key: "email", title: "Email", sortable: false },
-    { key: "isTeacher", title: "isTeacher", sortable: false },
-    { key: "isAdmin", title: "isAdmin", sortable: false },
+    { title: "Name", key: "name", align: "start", sortable: true },
+    { title: "UGent ID", key: "uid", align: "start", sortable: false },
+    { title: "Email", key: "email", align: "start", sortable: false },
+    {
+        title: "Is Teacher",
+        key: "isTeacher",
+        sortable: true,
+        filterable: false,
+        filter: () => true, // disable filter
+    },
+    {
+        title: "Is Admin",
+        key: "isAdmin",
+        sortable: true,
+        filterable: false,
+        filter: () => true, // disable filter
+    },
 ];
 
 const data = ref([
-    { id: 0, name: "Albert", email: "albert@Ugent.be", isTeacher: false, isAdmin: false },
-    { id: 1, name: "Bert", email: "bert@ugent.be", isTeacher: true, isAdmin: false },
-    { id: 2, name: "Cedric", email: "cedrik@ugent.be", isTeacher: false, isAdmin: true },
+    { uid: "brreynie", name: "Bert", email: "bert@ugent.be", isTeacher: false, isAdmin: true },
+    { uid: "albe", name: "Albert", email: "albert@Ugent.be", isTeacher: false, isAdmin: false },
+    { uid: "cedr", name: "Cedric", email: "cedrik@ugent.be", isTeacher: false, isAdmin: true },
 ]);
 </script>
 <style scoped>

From 8b06d2a59d5c3cc8f88482a788dad45f8c986079 Mon Sep 17 00:00:00 2001
From: Bram Reyniers <reyniersbram@gmail.com>
Date: Fri, 19 Apr 2024 10:43:48 +0200
Subject: [PATCH 3/7] i18n

---
 frontend/src/i18n/locales/en.ts  |  7 ++++++
 frontend/src/i18n/locales/nl.ts  |  7 ++++++
 frontend/src/views/AdminView.vue | 42 +++++++++++++++++++++++---------
 3 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index ebfc3225..255d0402 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -54,6 +54,13 @@ export default {
     },
     admin: {
         users: "Users",
+        userTable: {
+            name: "Name",
+            uid: "UGent ID",
+            email: "Email",
+            isTeacher: "Is Teacher",
+            isAdmin: "Is Admin",
+        },
     },
     subject: {
         register: "Register to subject:",
diff --git a/frontend/src/i18n/locales/nl.ts b/frontend/src/i18n/locales/nl.ts
index d09c9bd3..3ea22ba4 100644
--- a/frontend/src/i18n/locales/nl.ts
+++ b/frontend/src/i18n/locales/nl.ts
@@ -54,6 +54,13 @@ export default {
     },
     admin: {
         users: "Gebruikers",
+        userTable: {
+            name: "Naam",
+            uid: "UGent ID",
+            email: "Email",
+            isTeacher: "Is Lesgever",
+            isAdmin: "Is Beheerder",
+        },
     },
     subject: {
         register: "Registreer bij vak:",
diff --git a/frontend/src/views/AdminView.vue b/frontend/src/views/AdminView.vue
index ba2c32e3..497b101b 100644
--- a/frontend/src/views/AdminView.vue
+++ b/frontend/src/views/AdminView.vue
@@ -26,13 +26,13 @@
                 <template v-slot:[`item.isTeacher`]="{ item }">
                     <v-checkbox-btn
                         v-model="item.isTeacher"
-                        :readonly="item.uid === currentUser?.uid"
+                        :disabled="item.uid === currentUser?.uid"
                     ></v-checkbox-btn>
                 </template>
                 <template v-slot:[`item.isAdmin`]="{ item }">
                     <v-checkbox-btn
                         v-model="item.isAdmin"
-                        :readonly="item.uid === currentUser?.uid"
+                        :disabled="item.uid === currentUser?.uid"
                     ></v-checkbox-btn>
                 </template>
             </v-data-table-virtual>
@@ -40,37 +40,55 @@
     </div>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
 import { useUserQuery } from "@/queries/User";
 
+const { t } = useI18n();
+
 const { data: currentUser, isLoading } = useUserQuery(null);
 
 const search = ref("");
-const sortBy = ref([{key: "name", order: "asc"}]);
+const sortBy = ref([{ key: "name", order: "asc" }]);
 
-const headers = [
-    { title: "Name", key: "name", align: "start", sortable: true },
-    { title: "UGent ID", key: "uid", align: "start", sortable: false },
-    { title: "Email", key: "email", align: "start", sortable: false },
+const headers = ref([
     {
-        title: "Is Teacher",
+        title: computed(() => t("admin.userTable.name")),
+        key: "name",
+        align: "start",
+        sortable: true,
+    },
+    {
+        title: computed(() => t("admin.userTable.uid")),
+        key: "uid",
+        align: "start",
+        sortable: false,
+    },
+    {
+        title: computed(() => t("admin.userTable.email")),
+        key: "email",
+        align: "start",
+        sortable: false,
+    },
+    {
+        title: computed(() => t("admin.userTable.isTeacher")),
         key: "isTeacher",
         sortable: true,
         filterable: false,
         filter: () => true, // disable filter
     },
     {
-        title: "Is Admin",
+        title: computed(() => t("admin.userTable.isAdmin")),
         key: "isAdmin",
         sortable: true,
         filterable: false,
         filter: () => true, // disable filter
     },
-];
+]);
 
 const data = ref([
     { uid: "brreynie", name: "Bert", email: "bert@ugent.be", isTeacher: false, isAdmin: true },
-    { uid: "albe", name: "Albert", email: "albert@Ugent.be", isTeacher: false, isAdmin: false },
+    { uid: "albe", name: "Albert", email: "albert@Ugent.be", isTeacher: true, isAdmin: false },
     { uid: "cedr", name: "Cedric", email: "cedrik@ugent.be", isTeacher: false, isAdmin: true },
 ]);
 </script>

From f5746e11c792beeb464f7f6ea4c11ace42432528 Mon Sep 17 00:00:00 2001
From: Bram Reyniers <reyniersbram@gmail.com>
Date: Fri, 19 Apr 2024 11:01:37 +0200
Subject: [PATCH 4/7] use live data

---
 frontend/src/queries/User.ts     | 13 ++++++++++++-
 frontend/src/services/user.ts    |  4 ++++
 frontend/src/views/AdminView.vue | 25 +++++++++++--------------
 3 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/frontend/src/queries/User.ts b/frontend/src/queries/User.ts
index 8aec9787..72f73631 100644
--- a/frontend/src/queries/User.ts
+++ b/frontend/src/queries/User.ts
@@ -6,7 +6,7 @@ import {
     type UseMutationReturnType,
 } from "@tanstack/vue-query";
 import type User from "@/models/User";
-import { getMySubjects, getUser, toggleAdmin } from "@/services/user";
+import { getMySubjects, getUser, getUsers, toggleAdmin } from "@/services/user";
 import { type Ref, computed } from "vue";
 import type { UserSubjectList } from "@/models/Subject";
 
@@ -14,6 +14,10 @@ function USER_QUERY_KEY(uid: string | null): string[] {
     return uid ? ["user", uid] : ["user"];
 }
 
+function USERS_QUERY_KEY(): string[] {
+    return ["users"];
+}
+
 export function useUserQuery(uid: Ref<string | undefined> | null): UseQueryReturnType<User, Error> {
     return useQuery<User, Error>({
         queryKey: computed(() => USER_QUERY_KEY(uid?.value!)),
@@ -22,6 +26,13 @@ export function useUserQuery(uid: Ref<string | undefined> | null): UseQueryRetur
     });
 }
 
+export function useUsersQuery(): UseQueryReturnType<User[], Error> {
+    return useQuery<User[], Error>({
+        queryKey: USERS_QUERY_KEY(),
+        queryFn: () => getUsers(),
+    });
+}
+
 // TODO: Now only toggles current user
 export function useToggleAdminMutation(): UseMutationReturnType<void, Error, User, void> {
     const queryClient = useQueryClient();
diff --git a/frontend/src/services/user.ts b/frontend/src/services/user.ts
index 205012b4..7054caba 100644
--- a/frontend/src/services/user.ts
+++ b/frontend/src/services/user.ts
@@ -6,6 +6,10 @@ export async function getUser(uid?: string): Promise<User> {
     return authorized_fetch(`/api/users/${uid || "me"}`, { method: "GET" });
 }
 
+export async function getUsers(): Promise<User[]> {
+    return authorized_fetch("/api/users", { method: "GET" });
+}
+
 export async function toggleAdmin() {
     return authorized_fetch<void>("/api/users/me", { method: "POST" });
 }
diff --git a/frontend/src/views/AdminView.vue b/frontend/src/views/AdminView.vue
index 497b101b..1a90b910 100644
--- a/frontend/src/views/AdminView.vue
+++ b/frontend/src/views/AdminView.vue
@@ -23,15 +23,15 @@
                 <template v-slot:loading>
                     <v-skeleton-loader type="table-row@15" class="table"></v-skeleton-loader>
                 </template>
-                <template v-slot:[`item.isTeacher`]="{ item }">
+                <template v-slot:[`item.is_teacher`]="{ item }">
                     <v-checkbox-btn
-                        v-model="item.isTeacher"
+                        v-model="item.is_teacher"
                         :disabled="item.uid === currentUser?.uid"
                     ></v-checkbox-btn>
                 </template>
-                <template v-slot:[`item.isAdmin`]="{ item }">
+                <template v-slot:[`item.is_admin`]="{ item }">
                     <v-checkbox-btn
-                        v-model="item.isAdmin"
+                        v-model="item.is_admin"
                         :disabled="item.uid === currentUser?.uid"
                     ></v-checkbox-btn>
                 </template>
@@ -42,11 +42,12 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
-import { useUserQuery } from "@/queries/User";
+import { useUserQuery, useUsersQuery } from "@/queries/User";
 
 const { t } = useI18n();
 
 const { data: currentUser, isLoading } = useUserQuery(null);
+const {data} = useUsersQuery();
 
 const search = ref("");
 const sortBy = ref([{ key: "name", order: "asc" }]);
@@ -54,7 +55,7 @@ const sortBy = ref([{ key: "name", order: "asc" }]);
 const headers = ref([
     {
         title: computed(() => t("admin.userTable.name")),
-        key: "name",
+        key: "given_name",
         align: "start",
         sortable: true,
     },
@@ -66,31 +67,27 @@ const headers = ref([
     },
     {
         title: computed(() => t("admin.userTable.email")),
-        key: "email",
+        key: "mail",
         align: "start",
         sortable: false,
     },
     {
         title: computed(() => t("admin.userTable.isTeacher")),
-        key: "isTeacher",
+        key: "is_teacher",
         sortable: true,
         filterable: false,
         filter: () => true, // disable filter
     },
     {
         title: computed(() => t("admin.userTable.isAdmin")),
-        key: "isAdmin",
+        key: "is_admin",
         sortable: true,
         filterable: false,
         filter: () => true, // disable filter
     },
 ]);
 
-const data = ref([
-    { uid: "brreynie", name: "Bert", email: "bert@ugent.be", isTeacher: false, isAdmin: true },
-    { uid: "albe", name: "Albert", email: "albert@Ugent.be", isTeacher: true, isAdmin: false },
-    { uid: "cedr", name: "Cedric", email: "cedrik@ugent.be", isTeacher: false, isAdmin: true },
-]);
+
 </script>
 <style scoped>
 .adminpanel {

From 0a68103b7f6a2f02068662757ca3404f99e224a6 Mon Sep 17 00:00:00 2001
From: Bram Reyniers <reyniersbram@gmail.com>
Date: Fri, 19 Apr 2024 12:10:45 +0200
Subject: [PATCH 5/7] toggle admin

---
 frontend/src/queries/User.ts     | 26 +++++++++++++++-----------
 frontend/src/services/user.ts    |  4 ++--
 frontend/src/views/AdminView.vue | 28 ++++++++++++++++++----------
 3 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/frontend/src/queries/User.ts b/frontend/src/queries/User.ts
index 72f73631..843de96d 100644
--- a/frontend/src/queries/User.ts
+++ b/frontend/src/queries/User.ts
@@ -33,23 +33,27 @@ export function useUsersQuery(): UseQueryReturnType<User[], Error> {
     });
 }
 
-// TODO: Now only toggles current user
-export function useToggleAdminMutation(): UseMutationReturnType<void, Error, User, void> {
+// TODO: Use USER_QUERY_KEY(uid) instead of USERS_QUERY_KEY() for invalidation
+export function useToggleAdminMutation(): UseMutationReturnType<User, Error, string, { previousUsers: User[] }> {
     const queryClient = useQueryClient();
     return useMutation({
-        mutationFn: toggleAdmin,
-        onMutate: async (user: User) => {
-            await queryClient.cancelQueries({ queryKey: USER_QUERY_KEY(null) });
-            queryClient.setQueryData<User>(USER_QUERY_KEY(null), () => {
-                return { ...user, is_admin: !user.is_admin };
+        mutationFn: async (uid) => await toggleAdmin(uid),
+        onMutate: async (uid: string) => {
+            const users = queryClient.getQueryData<User[]>(USERS_QUERY_KEY());
+            await queryClient.cancelQueries({ queryKey: USERS_QUERY_KEY() });
+            queryClient.setQueryData<User[]>(USERS_QUERY_KEY(), () => {
+                return users?.map((user: User) => {
+                    return { ...user, is_admin: user.uid === uid ? !user.is_admin : user.is_admin };
+                });
             });
+            return { previousUsers: users! };
         },
-        onSettled: () => {
-            queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY(null) });
+        onSettled: (_, __, uid, ctx) => {
+            queryClient.invalidateQueries({ queryKey: USERS_QUERY_KEY() });
         },
-        onError: (_, user) => {
+        onError: (_, uid, ctx) => {
             alert("Could not update user");
-            queryClient.setQueryData<User>(USER_QUERY_KEY(null), () => user!);
+            queryClient.setQueryData<User[]>(USERS_QUERY_KEY(), () => ctx!.previousUsers!);
         },
     });
 }
diff --git a/frontend/src/services/user.ts b/frontend/src/services/user.ts
index 7054caba..dd2e67d2 100644
--- a/frontend/src/services/user.ts
+++ b/frontend/src/services/user.ts
@@ -10,8 +10,8 @@ export async function getUsers(): Promise<User[]> {
     return authorized_fetch("/api/users", { method: "GET" });
 }
 
-export async function toggleAdmin() {
-    return authorized_fetch<void>("/api/users/me", { method: "POST" });
+export async function toggleAdmin(uid: string): Promise<User> {
+    return authorized_fetch<User>(`/api/users/${uid}/admin`, { method: "POST" });
 }
 
 // Fetches all subjects for logged in user
diff --git a/frontend/src/views/AdminView.vue b/frontend/src/views/AdminView.vue
index 1a90b910..9777552f 100644
--- a/frontend/src/views/AdminView.vue
+++ b/frontend/src/views/AdminView.vue
@@ -12,11 +12,11 @@
             </v-card-title>
             <v-data-table-virtual
                 :headers="headers"
-                :items="data"
+                :items="users"
                 :search="search"
                 v-model:sortBy="sortBy"
                 item-value="uid"
-                :loading="isLoading"
+                :loading="isUserLoading || isUsersLoading"
                 density="compact"
                 class="table"
             >
@@ -25,14 +25,16 @@
                 </template>
                 <template v-slot:[`item.is_teacher`]="{ item }">
                     <v-checkbox-btn
-                        v-model="item.is_teacher"
+                        :model-value="item.is_teacher"
                         :disabled="item.uid === currentUser?.uid"
+                        @update:model-value="onToggleTeacher"
                     ></v-checkbox-btn>
                 </template>
                 <template v-slot:[`item.is_admin`]="{ item }">
                     <v-checkbox-btn
-                        v-model="item.is_admin"
+                        :model-value="item.is_admin"
                         :disabled="item.uid === currentUser?.uid"
+                        @update:model-value="() => onToggleAdmin(item)"
                     ></v-checkbox-btn>
                 </template>
             </v-data-table-virtual>
@@ -42,15 +44,23 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
-import { useUserQuery, useUsersQuery } from "@/queries/User";
+import { useUserQuery, useUsersQuery, useToggleAdminMutation } from "@/queries/User";
+import type User from "@/models/User";
 
 const { t } = useI18n();
 
-const { data: currentUser, isLoading } = useUserQuery(null);
-const {data} = useUsersQuery();
+const { data: currentUser, isLoading: isUserLoading } = useUserQuery(null);
+const { data: users, isLoading: isUsersLoading } = useUsersQuery();
+const { mutateAsync: toggleAdmin } = useToggleAdminMutation();
 
 const search = ref("");
-const sortBy = ref([{ key: "name", order: "asc" }]);
+const sortBy = ref([{ key: "given_name", order: "asc" }]);
+
+async function onToggleAdmin(user: User) {
+    await toggleAdmin(user.uid);
+}
+
+async function onToggleTeacher() {}
 
 const headers = ref([
     {
@@ -86,8 +96,6 @@ const headers = ref([
         filter: () => true, // disable filter
     },
 ]);
-
-
 </script>
 <style scoped>
 .adminpanel {

From 633338e060eb7e1c5ad35d057572c59b93ff00ca Mon Sep 17 00:00:00 2001
From: Bram Reyniers <reyniersbram@gmail.com>
Date: Fri, 19 Apr 2024 13:10:16 +0200
Subject: [PATCH 6/7] toggle teacher

---
 frontend/src/queries/User.ts     | 42 ++++++++++++++++++++++++++++----
 frontend/src/services/user.ts    |  4 +++
 frontend/src/views/AdminView.vue | 14 ++++++++---
 3 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/frontend/src/queries/User.ts b/frontend/src/queries/User.ts
index 843de96d..79d5eebd 100644
--- a/frontend/src/queries/User.ts
+++ b/frontend/src/queries/User.ts
@@ -6,7 +6,7 @@ import {
     type UseMutationReturnType,
 } from "@tanstack/vue-query";
 import type User from "@/models/User";
-import { getMySubjects, getUser, getUsers, toggleAdmin } from "@/services/user";
+import { getMySubjects, getUser, getUsers, toggleAdmin, toggleTeacher } from "@/services/user";
 import { type Ref, computed } from "vue";
 import type { UserSubjectList } from "@/models/Subject";
 
@@ -34,16 +34,22 @@ export function useUsersQuery(): UseQueryReturnType<User[], Error> {
 }
 
 // TODO: Use USER_QUERY_KEY(uid) instead of USERS_QUERY_KEY() for invalidation
-export function useToggleAdminMutation(): UseMutationReturnType<User, Error, string, { previousUsers: User[] }> {
+function useToggleMutation(
+    toggleFn: (uid: string) => Promise<User>,
+    getField: (_: User) => boolean,
+    setField: (_: User, value: boolean) => void
+): UseMutationReturnType<User, Error, string, { previousUsers: User[] }> {
     const queryClient = useQueryClient();
     return useMutation({
-        mutationFn: async (uid) => await toggleAdmin(uid),
+        mutationFn: async (uid) => await toggleFn(uid),
         onMutate: async (uid: string) => {
             const users = queryClient.getQueryData<User[]>(USERS_QUERY_KEY());
             await queryClient.cancelQueries({ queryKey: USERS_QUERY_KEY() });
             queryClient.setQueryData<User[]>(USERS_QUERY_KEY(), () => {
                 return users?.map((user: User) => {
-                    return { ...user, is_admin: user.uid === uid ? !user.is_admin : user.is_admin };
+                    const mappedUser = { ...user };
+                    setField(mappedUser, user.uid === uid ? !getField(user) : getField(user));
+                    return mappedUser;
                 });
             });
             return { previousUsers: users! };
@@ -52,12 +58,38 @@ export function useToggleAdminMutation(): UseMutationReturnType<User, Error, str
             queryClient.invalidateQueries({ queryKey: USERS_QUERY_KEY() });
         },
         onError: (_, uid, ctx) => {
-            alert("Could not update user");
             queryClient.setQueryData<User[]>(USERS_QUERY_KEY(), () => ctx!.previousUsers!);
+            alert("Could not update user");
         },
     });
 }
 
+export function useToggleAdminMutation(): UseMutationReturnType<
+    User,
+    Error,
+    string,
+    { previousUsers: User[] }
+> {
+    return useToggleMutation(
+        toggleAdmin,
+        (user) => user.is_admin,
+        (user, value) => (user.is_admin = value)
+    );
+}
+
+export function useToggleTeacherMutation(): UseMutationReturnType<
+    User,
+    Error,
+    string,
+    { previousUsers: User[] }
+> {
+    return useToggleMutation(
+        toggleTeacher,
+        (user) => user.is_teacher,
+        (user, value) => (user.is_teacher = value)
+    );
+}
+
 // Hook for fetching subjects for a user
 export function useMySubjectsQuery(): UseQueryReturnType<UserSubjectList, Error> {
     return useQuery<UserSubjectList, Error>({
diff --git a/frontend/src/services/user.ts b/frontend/src/services/user.ts
index dd2e67d2..7cc262c2 100644
--- a/frontend/src/services/user.ts
+++ b/frontend/src/services/user.ts
@@ -14,6 +14,10 @@ export async function toggleAdmin(uid: string): Promise<User> {
     return authorized_fetch<User>(`/api/users/${uid}/admin`, { method: "POST" });
 }
 
+export async function toggleTeacher(uid: string): Promise<User> {
+    return authorized_fetch<User>(`/api/users/${uid}/teacher`, { method: "POST" });
+}
+
 // Fetches all subjects for logged in user
 export async function getMySubjects(): Promise<UserSubjectList> {
     return authorized_fetch("/api/users/me/subjects", { method: "GET" });
diff --git a/frontend/src/views/AdminView.vue b/frontend/src/views/AdminView.vue
index 9777552f..3c4a3b11 100644
--- a/frontend/src/views/AdminView.vue
+++ b/frontend/src/views/AdminView.vue
@@ -27,7 +27,7 @@
                     <v-checkbox-btn
                         :model-value="item.is_teacher"
                         :disabled="item.uid === currentUser?.uid"
-                        @update:model-value="onToggleTeacher"
+                        @update:model-value="() => onToggleTeacher(item)"
                     ></v-checkbox-btn>
                 </template>
                 <template v-slot:[`item.is_admin`]="{ item }">
@@ -44,7 +44,12 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
-import { useUserQuery, useUsersQuery, useToggleAdminMutation } from "@/queries/User";
+import {
+    useUserQuery,
+    useUsersQuery,
+    useToggleAdminMutation,
+    useToggleTeacherMutation,
+} from "@/queries/User";
 import type User from "@/models/User";
 
 const { t } = useI18n();
@@ -52,6 +57,7 @@ const { t } = useI18n();
 const { data: currentUser, isLoading: isUserLoading } = useUserQuery(null);
 const { data: users, isLoading: isUsersLoading } = useUsersQuery();
 const { mutateAsync: toggleAdmin } = useToggleAdminMutation();
+const { mutateAsync: toggleTeacher } = useToggleTeacherMutation();
 
 const search = ref("");
 const sortBy = ref([{ key: "given_name", order: "asc" }]);
@@ -60,7 +66,9 @@ async function onToggleAdmin(user: User) {
     await toggleAdmin(user.uid);
 }
 
-async function onToggleTeacher() {}
+async function onToggleTeacher(user: User) {
+    await toggleTeacher(user.uid);
+}
 
 const headers = ref([
     {

From 51dcbd23a1a1c1287956a3c51726d8eecccf74aa Mon Sep 17 00:00:00 2001
From: Bram Reyniers <reyniersbram@gmail.com>
Date: Fri, 19 Apr 2024 13:19:47 +0200
Subject: [PATCH 7/7] sort isTeacher and isAdmin with true first

---
 frontend/src/views/AdminView.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/frontend/src/views/AdminView.vue b/frontend/src/views/AdminView.vue
index 3c4a3b11..1ce92d1d 100644
--- a/frontend/src/views/AdminView.vue
+++ b/frontend/src/views/AdminView.vue
@@ -59,6 +59,13 @@ const { data: users, isLoading: isUsersLoading } = useUsersQuery();
 const { mutateAsync: toggleAdmin } = useToggleAdminMutation();
 const { mutateAsync: toggleTeacher } = useToggleTeacherMutation();
 
+/**
+ * Sorts boolean values in descending order.
+ */
+function sortBool(a: boolean, b: boolean): number {
+    return a === b ? 0 : a ? -1 : 1;
+}
+
 const search = ref("");
 const sortBy = ref([{ key: "given_name", order: "asc" }]);
 
@@ -95,6 +102,7 @@ const headers = ref([
         sortable: true,
         filterable: false,
         filter: () => true, // disable filter
+        sort: sortBool,
     },
     {
         title: computed(() => t("admin.userTable.isAdmin")),
@@ -102,6 +110,7 @@ const headers = ref([
         sortable: true,
         filterable: false,
         filter: () => true, // disable filter
+        sort: sortBool,
     },
 ]);
 </script>