Added methods to add members to a team
This commit is contained in:
parent
30fadc5849
commit
912e451038
1 changed files with 34 additions and 6 deletions
|
@ -48,6 +48,24 @@
|
||||||
</p>
|
</p>
|
||||||
</header>
|
</header>
|
||||||
<div class="card-content content team-members">
|
<div class="card-content content team-members">
|
||||||
|
<form @submit.prevent="addUser()" class="add-member-form">
|
||||||
|
<div class="field is-grouped">
|
||||||
|
<p class="control has-icons-left is-expanded" v-bind:class="{ 'is-loading': loading}">
|
||||||
|
<input class="input" v-bind:class="{ 'disabled': loading}" v-model.number="newUser.id" type="text" placeholder="Add a new user...">
|
||||||
|
<span class="icon is-small is-left">
|
||||||
|
<icon icon="user"/>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<button type="submit" class="button is-success">
|
||||||
|
<span class="icon is-small">
|
||||||
|
<icon icon="plus"/>
|
||||||
|
</span>
|
||||||
|
Add
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
<table class="table is-striped is-hoverable is-fullwidth">
|
<table class="table is-striped is-hoverable is-fullwidth">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr v-for="m in team.members" :key="m.id">
|
<tr v-for="m in team.members" :key="m.id">
|
||||||
|
@ -81,7 +99,7 @@
|
||||||
Member
|
Member
|
||||||
</template>
|
</template>
|
||||||
</button>
|
</button>
|
||||||
<button @click="userToDelete = m.id; showUserDeleteModal()" class="button is-danger" v-if="m.id !== user.infos.id">
|
<button @click="userToDelete = m.id; showUserDeleteModal = true" class="button is-danger" v-if="m.id !== user.infos.id">
|
||||||
<span class="icon is-small">
|
<span class="icon is-small">
|
||||||
<icon icon="trash-alt"/>
|
<icon icon="trash-alt"/>
|
||||||
</span>
|
</span>
|
||||||
|
@ -107,7 +125,7 @@
|
||||||
<modal
|
<modal
|
||||||
v-if="showUserDeleteModal"
|
v-if="showUserDeleteModal"
|
||||||
@close="showUserDeleteModal = false"
|
@close="showUserDeleteModal = false"
|
||||||
v-on:submit="deleteUser(this.userToDelete)">
|
v-on:submit="deleteUser()">
|
||||||
<span slot="header">Remove a user from the team</span>
|
<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/>
|
<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/>
|
He will loose access to all lists and namespaces this team has access to.<br/>
|
||||||
|
@ -134,6 +152,7 @@
|
||||||
user: auth.user,
|
user: auth.user,
|
||||||
userIsAdmin: false,
|
userIsAdmin: false,
|
||||||
userToDelete: 0,
|
userToDelete: 0,
|
||||||
|
newUser: {id:0},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeMount() {
|
beforeMount() {
|
||||||
|
@ -199,6 +218,7 @@
|
||||||
deleteUser() {
|
deleteUser() {
|
||||||
HTTP.delete(`teams/` + this.$route.params.id + `/members/` + this.userToDelete, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
HTTP.delete(`teams/` + this.$route.params.id + `/members/` + this.userToDelete, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
|
this.showUserDeleteModal = false;
|
||||||
this.handleSuccess({message: 'The user was successfully deleted from the team.'})
|
this.handleSuccess({message: 'The user was successfully deleted from the team.'})
|
||||||
this.loadTeam()
|
this.loadTeam()
|
||||||
})
|
})
|
||||||
|
@ -206,13 +226,14 @@
|
||||||
this.handleError(e)
|
this.handleError(e)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
addUser(userid, admin) {
|
addUser(admin) {
|
||||||
if(admin === null) {
|
if(admin === null) {
|
||||||
admin = false
|
admin = false
|
||||||
}
|
}
|
||||||
HTTP.put(`teams/` + this.$route.params.id + `/members`, {admin: admin, user_id: userid}, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
HTTP.put(`teams/` + this.$route.params.id + `/members`, {admin: admin, user_id: this.newUser.id}, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
this.handleSuccess({message: 'The team was successfully added.'})
|
this.loadTeam()
|
||||||
|
this.handleSuccess({message: 'The team member was successfully added.'})
|
||||||
})
|
})
|
||||||
.catch(e => {
|
.catch(e => {
|
||||||
this.handleError(e)
|
this.handleError(e)
|
||||||
|
@ -220,8 +241,9 @@
|
||||||
},
|
},
|
||||||
toggleUserType(userid, current) {
|
toggleUserType(userid, current) {
|
||||||
this.userToDelete = userid
|
this.userToDelete = userid
|
||||||
|
this.newUser.id = userid
|
||||||
this.deleteUser()
|
this.deleteUser()
|
||||||
this.addUser(userid, !current)
|
this.addUser(!current)
|
||||||
},
|
},
|
||||||
handleError(e) {
|
handleError(e) {
|
||||||
this.loading = false
|
this.loading = false
|
||||||
|
@ -243,7 +265,13 @@
|
||||||
.card{
|
.card{
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
|
|
||||||
|
.add-member-form {
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.table{
|
.table{
|
||||||
|
border-top: 1px solid darken(#fff, 15%);
|
||||||
|
|
||||||
td{
|
td{
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue