local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Added method to remove a user from a team

Browse source
This commit is contained in:
kolaente 2018-09-14 08:29:09 +02:00
parent 87787d299e
commit 9ffa1dd913
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
2 changed files with 109 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
src/components/teams/EditTeam.vue
View file

@ -47,8 +47,9 @@
Team Members
</p>
</header>
<div class="card-content content">
<table>
<div class="card-content content team-members">
<table class="table is-striped is-hoverable is-fullwidth">
<tbody>
<tr v-for="m in team.members" :key="m.id">
<td>{{m.username}}</td>
<td>
@ -56,12 +57,43 @@
<b class="is-success">You</b>
</template>
</td>
<td><template v-if="m.admin">Is Admin</template><template v-else>Normal Member</template></td>
<td class="type">
<template v-if="m.admin">
<span class="icon is-small">
<icon icon="lock"/>
</span>
Admin
</template>
<template v-else>
<span class="icon is-small">
<icon icon="user"/>
</span>
Member
</template>
</td>
<td class="actions" v-if="userIsAdmin">
<button @click="toggleUserType(m.id, m.admin)" class="button buttonright is-primary" v-if="m.id !== user.infos.id">
Make
<template v-if="!m.admin">
Admin
</template>
<template v-else>
Member
</template>
</button>
<button @click="userToDelete = m.id; showUserDeleteModal()" class="button is-danger" v-if="m.id !== user.infos.id">
<span class="icon is-small">
<icon icon="trash-alt"/>
</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Team delete modal -->
<modal
v-if="showDeleteModal"
@close="showDeleteModal = false"
@ -71,6 +103,16 @@
All team members will loose access to lists and namespaces shared with this team.<br/>
<b>This CANNOT BE UNDONE!</b></p>
</modal>
<!-- User delete modal -->
<modal
v-if="showUserDeleteModal"
@close="showUserDeleteModal = false"
v-on:submit="deleteUser(this.userToDelete)">
<span slot="header">Remove a user from the team</span>
<p slot="text">Are you sure you want to remove this user from the team?<br/>
He will loose access to all lists and namespaces this team has access to.<br/>
<b>This CANNOT BE UNDONE!</b></p>
</modal>
</div>
</template>
@ -88,8 +130,10 @@
error: '',
loading: false,
showDeleteModal: false,
showUserDeleteModal: false,
user: auth.user,
userIsAdmin: false,
userToDelete: 0,
}
},
beforeMount() {
@ -152,6 +196,33 @@
this.handleError(e)
})
},
deleteUser() {
HTTP.delete(`teams/` + this.$route.params.id + `/members/` + this.userToDelete, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(() => {
this.handleSuccess({message: 'The user was successfully deleted from the team.'})
this.loadTeam()
})
.catch(e => {
this.handleError(e)
})
},
addUser(userid, admin) {
if(admin === null) {
admin = false
}
HTTP.put(`teams/` + this.$route.params.id + `/members`, {admin: admin, user_id: userid}, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(() => {
this.handleSuccess({message: 'The team was successfully added.'})
})
.catch(e => {
this.handleError(e)
})
},
toggleUserType(userid, current) {
this.userToDelete = userid
this.deleteUser()
this.addUser(userid, !current)
},
handleError(e) {
this.loading = false
message.error(e, this)
@ -164,12 +235,34 @@
}
</script>
<style scoped>
<style lang="scss" scoped>
.bigbuttons{
margin-top: 0.5rem;
}
.card{
margin-bottom: 1rem;
.table{
td{
vertical-align: middle;
}
td.type, td.actions{
width: 200px;
}
td.actions{
text-align: right;
}
}
}
.buttonright {
margin-right: 0.5rem;
}
.team-members{
padding: 0;
}
</style>

4
src/main.js
View file

@ -26,6 +26,8 @@ import { faAngleRight } from '@fortawesome/free-solid-svg-icons'
import { faLayerGroup } from '@fortawesome/free-solid-svg-icons'
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons'
import { faUsers } from '@fortawesome/free-solid-svg-icons'
import { faUser } from '@fortawesome/free-solid-svg-icons'
import { faLock } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faSignOutAlt)
@ -37,6 +39,8 @@ library.add(faAngleRight)
library.add(faLayerGroup)
library.add(faTrashAlt)
library.add(faUsers)
library.add(faUser)
library.add(faLock)
Vue.component('icon', FontAwesomeIcon)