diff --git a/frontend/src/components/tutor_list/TutorList.vue b/frontend/src/components/tutor_list/TutorList.vue index 9f7c0895a9dd89510dc1412c0f544aded873a9d6..9e0d2f67618afa6fd03e1171e4aa904cb81ba419 100644 --- a/frontend/src/components/tutor_list/TutorList.vue +++ b/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>