Added role select to tutor page

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')

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
 }

frontend/src/components/tutor_list/RoleSelect.vue

+<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>
+

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'
     }
   ]
 

frontend/src/models.ts

@@ -783,6 +783,12 @@ export interface Tutor {
      * @memberof Tutor
      */
     feedbackValidated?: string
+    /**
+     *
+     * @type {string}
+     * @memberof Tutor
+     */
+    role: UserAccount.RoleEnum
 }
 
 /**