From b88d6e6e735702b4459e90de5b2e84673bee696e Mon Sep 17 00:00:00 2001
From: Thilo Wischmeyer <thwischm@gmail.com>
Date: Wed, 30 Jun 2021 15:47:20 +0200
Subject: [PATCH] Added role select to tutor page

---
 core/serializers/tutor.py                     |  4 +-
 frontend/src/api.ts                           |  4 ++
 .../src/components/tutor_list/RoleSelect.vue  | 48 +++++++++++++++++++
 .../src/components/tutor_list/TutorList.vue   | 12 ++++-
 frontend/src/models.ts                        |  6 +++
 5 files changed, 71 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/tutor_list/RoleSelect.vue

diff --git a/core/serializers/tutor.py b/core/serializers/tutor.py
index 958081a8..98a7b982 100644
--- a/core/serializers/tutor.py
+++ b/core/serializers/tutor.py
@@ -21,6 +21,7 @@ class CorrectorSerializer(DynamicFieldsModelSerializer):
         write_only=True,
         required=False
     )
+    role = serializers.CharField(read_only=True)
 
     def get_feedback_created(self, t):
         ''' It is required that this field was previously annotated '''
@@ -57,4 +58,5 @@ class CorrectorSerializer(DynamicFieldsModelSerializer):
                   'is_active',
                   'username',
                   'feedback_created',
-                  'feedback_validated')
+                  'feedback_validated',
+                  'role')
diff --git a/frontend/src/api.ts b/frontend/src/api.ts
index 2197ebe9..0d34730e 100644
--- a/frontend/src/api.ts
+++ b/frontend/src/api.ts
@@ -213,6 +213,10 @@ export async function changeActiveForUser (userPk: string, active: boolean): Pro
   return (await ax.patch(`/api/user/${userPk}/change_active/`, { 'is_active': active })).data
 }
 
+export async function changeUserRole (userPk: string, role: UserAccount.RoleEnum): Promise<UserAccount> {
+  return (await ax.patch(`/api/user/${userPk}/change_role/`, { role })).data
+}
+
 export async function fetchUsers (): Promise<UserAccount[]> {
   return (await ax.get('api/user/')).data
 }
diff --git a/frontend/src/components/tutor_list/RoleSelect.vue b/frontend/src/components/tutor_list/RoleSelect.vue
new file mode 100644
index 00000000..e5236334
--- /dev/null
+++ b/frontend/src/components/tutor_list/RoleSelect.vue
@@ -0,0 +1,48 @@
+<template>
+  <v-select
+    v-model="value"
+    :items="roleOptions"
+    filled
+    dense
+    hide-details
+    :loading="loading"
+    :disabled="isForSelf"
+    @change="updateRole"
+  />
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import Component from 'vue-class-component'
+import { Prop, Watch } from 'vue-property-decorator'
+import { Tutor, UserAccount } from '@/models'
+import { changeUserRole } from '@/api'
+import { Authentication } from '@/store/modules/authentication'
+
+@Component
+export default class RoleSelect extends Vue {
+  @Prop({ type: Object, required: true }) readonly tutor!: Tutor
+
+  roleOptions = [UserAccount.RoleEnum.Reviewer, UserAccount.RoleEnum.Tutor]
+  value = this.tutor.role
+  previousValue = this.value
+  loading = false
+
+  get isForSelf() {
+    return Authentication.state.user.pk === this.tutor.pk
+  }
+
+  async updateRole(newRole: UserAccount.RoleEnum) {
+    this.loading = true
+    try {
+      await changeUserRole(this.tutor.pk, newRole)
+      this.previousValue = newRole
+    } catch (error) {
+      this.value = this.previousValue
+    } finally {
+      this.loading = false
+    }
+  }
+}
+</script>
+
diff --git a/frontend/src/components/tutor_list/TutorList.vue b/frontend/src/components/tutor_list/TutorList.vue
index 1d1e5e9e..2a0fe221 100644
--- a/frontend/src/components/tutor_list/TutorList.vue
+++ b/frontend/src/components/tutor_list/TutorList.vue
@@ -62,6 +62,9 @@
           </v-tooltip>
         </v-btn>
       </template>
+      <template #item.role="{ item }">
+        <role-select :tutor="item" />
+      </template>
     </v-data-table>
   </v-card>
 </template>
@@ -73,9 +76,10 @@ import { changeActiveForUser } from '@/api'
 import { actions } from '@/store/actions'
 import { Authentication } from '@/store/modules/authentication'
 import { TutorOverview } from '@/store/modules/tutor-overview'
-import { Tutor } from '@/models'
+import { Tutor, UserAccount } from '@/models'
+import RoleSelect from './RoleSelect.vue'
 
-@Component
+@Component({ components: { RoleSelect } })
 export default class TutorList extends Vue {
   headers = [
     {
@@ -102,6 +106,10 @@ export default class TutorList extends Vue {
       text: 'Has Access',
       align: 'right',
       value: 'isActive'
+    },
+    {
+      text: 'Role',
+      value: 'role'
     }
   ]
 
diff --git a/frontend/src/models.ts b/frontend/src/models.ts
index de82f12d..5ef5dfd5 100644
--- a/frontend/src/models.ts
+++ b/frontend/src/models.ts
@@ -783,6 +783,12 @@ export interface Tutor {
      * @memberof Tutor
      */
     feedbackValidated?: string
+    /**
+     *
+     * @type {string}
+     * @memberof Tutor
+     */
+    role: UserAccount.RoleEnum
 }
 
 /**
-- 
GitLab