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

Added methods to give a team access to a list

Browse source
This commit is contained in:
kolaente 2018-09-18 07:38:26 +02:00
parent f7399e3dff
commit af384a9f4b
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
2 changed files with 145 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

149
src/components/lists/EditList.vue
View file

@ -112,6 +112,81 @@
</div>
</div>
<div class="card">
<header class="card-header">
<p class="card-header-title">
Teams with access to this list
</p>
</header>
<div class="card-content content teams-list">
<form @submit.prevent="addTeam()" class="add-team-form" v-if="userIsAdmin">
<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="newTeam.team_id" type="text" placeholder="Add a new team...">
<span class="icon is-small is-left">
<icon icon="users"/>
</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">
<tbody>
<tr v-for="t in listTeams" :key="t.id">
<td>
<router-link :to="{name: 'editTeam', params: {id: t.id}}">
{{t.name}}
</router-link>
</td>
<td class="type">
<template v-if="t.right === 2">
<span class="icon is-small">
<icon icon="lock"/>
</span>
Admin
</template>
<template v-else-if="t.right === 1">
<span class="icon is-small">
<icon icon="pen"/>
</span>
Write
</template>
<template v-else>
<span class="icon is-small">
<icon icon="users"/>
</span>
Read-only
</template>
</td>
<td class="actions" v-if="userIsAdmin">
<button @click="toggleTeamType(t.id, (t.right === 2))" class="button buttonright is-primary">
Make
<template v-if="t.right === 2">
Member
</template>
<template v-else>
Admin
</template>
</button>
<button @click="teamToDelete = t.id; showTeamDeleteModal = true" class="button is-danger">
<span class="icon is-small">
<icon icon="trash-alt"/>
</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<modal
v-if="showDeleteModal"
@close="showDeleteModal = false"
@ -126,9 +201,18 @@
v-if="showUserDeleteModal"
@close="showUserDeleteModal = false"
v-on:submit="deleteUser()">
<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/>
<span slot="header">Remove a user from the list</span>
<p slot="text">Are you sure you want to remove this user from the list?<br/>
<b>This CANNOT BE UNDONE!</b></p>
</modal>
<!-- Team delete modal -->
<modal
v-if="showTeamDeleteModal"
@close="showTeamDeleteModal = false"
v-on:submit="deleteTeam()">
<span slot="header">Remove a team from the list</span>
<p slot="text">Are you sure you want to remove this team from the list?<br/>
<b>This CANNOT BE UNDONE!</b></p>
</modal>
</div>
@ -148,12 +232,19 @@
error: '',
loading: false,
showDeleteModal: false,
listUsers: [],
user: auth.user,
userIsAdmin: false,
listUsers: [],
newUser: {user_id: 0},
showUserDeleteModal: false,
userToDelete: 0,
listTeams: [],
teamIsAdmin: false,
newTeam: {team_id: 0},
showTeamDeleteModal: false,
teamToDelete: 0,
}
},
beforeMount() {
@ -180,6 +271,7 @@
this.userIsAdmin = true
}
this.loadUsers()
this.loadTeams()
this.loading = false
})
.catch(e => {
@ -263,6 +355,51 @@
this.deleteUser()
this.addUser(!current)
},
loadTeams() {
HTTP.get(`lists/` + this.$route.params.id + `/teams`, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(response => {
this.$set(this, 'listTeams', response.data)
this.loading = false
})
.catch(e => {
this.handleError(e)
})
},
deleteTeam() {
HTTP.delete(`lists/` + this.$route.params.id + `/teams/` + this.teamToDelete, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(() => {
this.showTeamDeleteModal = false;
this.handleSuccess({message: 'The team was successfully deleted from the list.'})
this.loadTeams()
})
.catch(e => {
this.handleError(e)
})
},
addTeam(admin) {
if(admin === null) {
admin = false
}
this.newTeam.right = 0
if (admin) {
this.newTeam.right = 2
}
HTTP.put(`lists/` + this.$route.params.id + `/teams`, this.newTeam, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
.then(() => {
this.loadTeams()
this.handleSuccess({message: 'The team was successfully added.'})
})
.catch(e => {
this.handleError(e)
})
},
toggleTeamType(teamid, current) {
this.teamToDelete = teamid
this.newTeam.team_id = teamid
this.deleteTeam()
this.addTeam(!current)
},
handleError(e) {
this.loading = false
message.error(e, this)
@ -283,7 +420,7 @@
.card{
margin-bottom: 1rem;
.add-user-form {
.add-user-form, .add-team-form {
margin: 1rem;
}
@ -304,7 +441,7 @@
}
}
.users-list{
.users-list, .teams-list{
padding: 0;
}
</style>

2
src/main.js
View file

@ -28,6 +28,7 @@ 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 { faPen } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faSignOutAlt)
@ -41,6 +42,7 @@ library.add(faTrashAlt)
library.add(faUsers)
library.add(faUser)
library.add(faLock)
library.add(faPen)
Vue.component('icon', FontAwesomeIcon)