Tutors can be activated/deactivated from tutor overview

frontend/src/components/tutor_list/TutorList.vue

@@ -11,13 +11,26 @@
         <td>{{props.item.username}}</td>
         <td class="text-xs-right">{{props.item.feedback_created}}</td>
         <td class="text-xs-right">{{props.item.feedback_validated}}</td>
+        <td class="text-xs-right">
+          <v-btn icon @click="changeActiveStatus(props.item)">
+            <v-tooltip top>
+              <template slot="activator">
+                <v-icon small v-if="!props.item.is_active">lock</v-icon>
+                <v-icon small v-else>lock_open</v-icon>
+              </template>
+              <span v-if="!props.item.is_active">Grant access</span>
+              <span v-else>Revoke access</span>
+            </v-tooltip>
+          </v-btn>
+        </td>
       </template>
     </v-data-table>
   </v-flex>
 </template>
 
 <script>
-import {mapState} from 'vuex'
+import {mapState, mapActions} from 'vuex'
+import {changeActiveForUser} from '@/api'
 
 export default {
   name: 'tutor-list',
@@ -39,6 +52,11 @@ export default {
           text: '# validated',
           align: 'right',
           value: 'feedback_validated'
+        },
+        {
+          text: 'Has Access',
+          align: 'right',
+          value: 'is_active'
         }
       ]
     }
@@ -47,6 +65,22 @@ export default {
     ...mapState([
       'tutors'
     ])
+  },
+  methods: {
+    ...mapActions([
+      'getTutors'
+    ]),
+    changeActiveStatus (tutor) {
+      changeActiveForUser(tutor.pk, !tutor.is_active).then(() => {
+        this.getTutors()
+      }).catch(() => {
+        this.$notify({
+          title: 'Error',
+          text: `Unable to change active status of ${tutor.username}`,
+          type: 'error'
+        })
+      })
+    }
   }
 }
 </script>