Improved team search and team managing #18
|
|
@ -1,276 +0,0 @@
|
|||
<template>
|
||||
<div class="card">
|
||||
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
Teams with access to this {{typeString}}
|
||||
</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 is-expanded" v-bind:class="{ 'is-loading': teamService.loading}">
|
||||
<multiselect
|
||||
v-model="team"
|
||||
:options="foundTeams"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
:loading="teamService.loading"
|
||||
:internal-search="true"
|
||||
@search-change="findTeams"
|
||||
placeholder="Type to search a team"
|
||||
label="name"
|
||||
track-by="id">
|
||||
<template slot="clear" slot-scope="props">
|
||||
<div class="multiselect__clear" v-if="team.id !== 0" @mousedown.prevent.stop="clearAll(props.search)"></div>
|
||||
</template>
|
||||
<span slot="noResult">Oops! No teams found. Consider changing the search query.</span>
|
||||
</multiselect>
|
||||
</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 teams" :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 === rights.ADMIN">
|
||||
<span class="icon is-small">
|
||||
<icon icon="lock"/>
|
||||
</span>
|
||||
Admin
|
||||
</template>
|
||||
<template v-else-if="t.right === rights.READ_WRITE">
|
||||
<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">
|
||||
<div class="select">
|
||||
<select @change="teamStuffModel.teamID = t.id;toggleTeamType()" v-model="selectedRight" class="button buttonright">
|
||||
<option :value="rights.READ" :selected="t.right === rights.READ">Read only</option>
|
||||
<option :value="rights.READ_WRITE" :selected="t.right === rights.READ_WRITE">Read & write</option>
|
||||
<option :value="rights.ADMIN" :selected="t.right === rights.ADMIN">Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
<button @click="teamStuffModel.teamID = t.id; showTeamDeleteModal = true" class="button is-danger icon-only">
|
||||
<span class="icon is-small">
|
||||
<icon icon="trash-alt"/>
|
||||
</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<modal
|
||||
v-if="showTeamDeleteModal"
|
||||
@close="showTeamDeleteModal = false"
|
||||
v-on:submit="deleteTeam()">
|
||||
<span slot="header">Remove a team from the {{typeString}}</span>
|
||||
<p slot="text">Are you sure you want to remove this team from the {{typeString}}?<br/>
|
||||
<b>This CANNOT BE UNDONE!</b></p>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import auth from '../../auth'
|
||||
import message from '../../message'
|
||||
import multiselect from 'vue-multiselect'
|
||||
import 'vue-multiselect/dist/vue-multiselect.min.css'
|
||||
|
||||
import TeamNamespaceService from '../../services/teamNamespace'
|
||||
import TeamNamespaceModel from '../../models/teamNamespace'
|
||||
import TeamListModel from '../../models/teamList'
|
||||
import TeamListService from '../../services/teamList'
|
||||
import TeamService from '../../services/team'
|
||||
import TeamModel from '../../models/team'
|
||||
import rights from '../../models/rights'
|
||||
|
||||
export default {
|
||||
name: 'team',
|
||||
props: {
|
||||
type: '',
|
||||
id: 0,
|
||||
userIsAdmin: false,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
teamStuffService: Object, // This team service is either a teamNamespaceService or a teamListService, depending on the type we are using
|
||||
teamStuffModel: Object,
|
||||
teamService: TeamService,
|
||||
|
||||
team: TeamModel,
|
||||
foundTeams: [],
|
||||
rights: rights,
|
||||
selectedRight: rights.READ,
|
||||
|
||||
currentUser: auth.user.infos,
|
||||
typeString: '',
|
||||
teams: [],
|
||||
showTeamDeleteModal: false,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
multiselect
|
||||
},
|
||||
created() {
|
||||
this.teamService = new TeamService()
|
||||
this.team = new TeamModel()
|
||||
|
||||
if (this.type === 'list') {
|
||||
this.typeString = `list`
|
||||
this.teamStuffService = new TeamListService()
|
||||
this.teamStuffModel = new TeamListModel({listID: this.id})
|
||||
} else if (this.type === 'namespace') {
|
||||
this.typeString = `namespace`
|
||||
this.teamStuffService = new TeamNamespaceService()
|
||||
this.teamStuffModel = new TeamNamespaceModel({namespaceID: this.id})
|
||||
} else {
|
||||
throw new Error('Unknown type: ' + this.type)
|
||||
}
|
||||
|
||||
this.loadTeams()
|
||||
},
|
||||
methods: {
|
||||
loadTeams() {
|
||||
this.teamStuffService.getAll(this.teamStuffModel)
|
||||
.then(r => {
|
||||
this.$set(this, 'teams', r)
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
deleteTeam() {
|
||||
this.teamStuffService.delete(this.teamStuffModel)
|
||||
.then(() => {
|
||||
this.showTeamDeleteModal = false
|
||||
for (const i in this.teams) {
|
||||
if (this.teams[i].id === this.teamStuffModel.teamID) {
|
||||
this.teams.splice(i, 1)
|
||||
}
|
||||
}
|
||||
message.success({message: 'The team was successfully deleted from the ' + this.typeString + '.'}, this)
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
addTeam(admin) {
|
||||
if(admin === null) {
|
||||
admin = false
|
||||
}
|
||||
this.teamStuffModel.right = rights.READ
|
||||
if (admin) {
|
||||
this.teamStuffModel.right = rights.ADMIN
|
||||
}
|
||||
|
||||
this.teamStuffModel.teamID = this.team.id
|
||||
|
||||
this.teamStuffService.create(this.teamStuffModel)
|
||||
.then(() => {
|
||||
message.success({message: 'The team was successfully added.'}, this)
|
||||
this.loadTeams()
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
toggleTeamType() {
|
||||
if (this.selectedRight !== rights.ADMIN &&
|
||||
this.selectedRight !== rights.READ &&
|
||||
this.selectedRight !== rights.READ_WRITE
|
||||
) {
|
||||
this.selectedRight = rights.READ
|
||||
}
|
||||
this.teamStuffModel.right = this.selectedRight
|
||||
|
||||
this.teamStuffService.update(this.teamStuffModel)
|
||||
.then(r => {
|
||||
for (const i in this.teams) {
|
||||
if (this.teams[i].id === this.teamStuffModel.teamID) {
|
||||
this.$set(this.teams[i], 'right', r.right)
|
||||
}
|
||||
}
|
||||
message.success({message: 'The team right was successfully updated.'}, this)
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
findTeams(query) {
|
||||
if(query === '') {
|
||||
this.$set(this, 'foundTeams', [])
|
||||
return
|
||||
}
|
||||
|
||||
this.teamService.getAll({}, {s: query})
|
||||
.then(response => {
|
||||
this.$set(this, 'foundTeams', response)
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
clearAll () {
|
||||
this.$set(this, 'foundTeams', [])
|
||||
},
|
||||
limitText (count) {
|
||||
return `and ${count} others`
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card{
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.add-team-form {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.table{
|
||||
border-top: 1px solid darken(#fff, 15%);
|
||||
|
||||
td{
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
td.type, td.actions{
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
td.actions{
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.teams-list, .teams-namespace{
|
||||
padding: 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,277 +0,0 @@
|
|||
<template>
|
||||
<div class="card">
|
||||
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
Users with access to this {{typeString}}
|
||||
</p>
|
||||
</header>
|
||||
<div class="card-content content users-list">
|
||||
<form @submit.prevent="addUser()" class="add-user-form" v-if="userIsAdmin">
|
||||
<div class="field is-grouped">
|
||||
<p class="control is-expanded" v-bind:class="{ 'is-loading': userService.loading}">
|
||||
<multiselect
|
||||
v-model="user"
|
||||
:options="foundUsers"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
:loading="userService.loading"
|
||||
:internal-search="true"
|
||||
@search-change="findUsers"
|
||||
placeholder="Type to search a user"
|
||||
label="username"
|
||||
track-by="id">
|
||||
<template slot="clear" slot-scope="props">
|
||||
<div class="multiselect__clear" v-if="user.id !== 0" @mousedown.prevent.stop="clearAll(props.search)"></div>
|
||||
</template>
|
||||
<span slot="noResult">Oops! No users found. Consider changing the search query.</span>
|
||||
</multiselect>
|
||||
</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="u in users" :key="u.id">
|
||||
<td>{{u.username}}</td>
|
||||
<td>
|
||||
<template v-if="u.id === currentUser.id">
|
||||
<b class="is-success">You</b>
|
||||
</template>
|
||||
</td>
|
||||
<td class="type">
|
||||
<template v-if="u.right === rights.ADMIN">
|
||||
<span class="icon is-small">
|
||||
<icon icon="lock"/>
|
||||
</span>
|
||||
Admin
|
||||
</template>
|
||||
<template v-else-if="u.right === rights.READ_WRITE">
|
||||
<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">
|
||||
<div class="select">
|
||||
<select @change="userStuffModel.userID = u.id;toggleUserType()" v-model="selectedRight" class="button buttonright">
|
||||
<option :value="rights.READ" :selected="u.right === rights.READ">Read only</option>
|
||||
<option :value="rights.READ_WRITE" :selected="u.right === rights.READ_WRITE">Read & write</option>
|
||||
<option :value="rights.ADMIN" :selected="u.right === rights.ADMIN">Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
<button @click="userStuffModel.userID = u.id; showUserDeleteModal = true" class="button is-danger icon-only">
|
||||
<span class="icon is-small">
|
||||
<icon icon="trash-alt"/>
|
||||
</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<modal
|
||||
v-if="showUserDeleteModal"
|
||||
@close="showUserDeleteModal = false"
|
||||
v-on:submit="deleteUser()">
|
||||
<span slot="header">Remove a user from the {{typeString}}</span>
|
||||
<p slot="text">Are you sure you want to remove this user from the {{typeString}}?<br/>
|
||||
<b>This CANNOT BE UNDONE!</b></p>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import auth from '../../auth'
|
||||
import message from '../../message'
|
||||
import multiselect from 'vue-multiselect'
|
||||
import 'vue-multiselect/dist/vue-multiselect.min.css'
|
||||
|
||||
import UserNamespaceService from '../../services/userNamespace'
|
||||
import UserNamespaceModel from '../../models/userNamespace'
|
||||
import UserListModel from '../../models/userList'
|
||||
import UserListService from '../../services/userList'
|
||||
import UserService from '../../services/user'
|
||||
import UserModel from '../../models/user'
|
||||
import rights from '../../models/rights'
|
||||
|
||||
export default {
|
||||
name: 'user',
|
||||
props: {
|
||||
type: '',
|
||||
id: 0,
|
||||
userIsAdmin: false,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userStuffService: Object, // This user service is either a userNamespaceService or a userListService, depending on the type we are using
|
||||
userStuffModel: Object,
|
||||
userService: UserService,
|
||||
|
||||
user: UserModel,
|
||||
foundUsers: [],
|
||||
rights: rights,
|
||||
selectedRight: rights.READ,
|
||||
|
||||
currentUser: auth.user.infos,
|
||||
typeString: '',
|
||||
users: [],
|
||||
showUserDeleteModal: false,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
multiselect
|
||||
},
|
||||
created() {
|
||||
this.userService = new UserService()
|
||||
this.user = new UserModel()
|
||||
|
||||
if (this.type === 'list') {
|
||||
this.typeString = `list`
|
||||
this.userStuffService = new UserListService()
|
||||
this.userStuffModel = new UserListModel({listID: this.id})
|
||||
} else if (this.type === 'namespace') {
|
||||
this.typeString = `namespace`
|
||||
this.userStuffService = new UserNamespaceService()
|
||||
this.userStuffModel = new UserNamespaceModel({namespaceID: this.id})
|
||||
} else {
|
||||
throw new Error('Unknown type: ' + this.type)
|
||||
}
|
||||
|
||||
this.loadUsers()
|
||||
},
|
||||
methods: {
|
||||
loadUsers() {
|
||||
this.userStuffService.getAll(this.userStuffModel)
|
||||
.then(r => {
|
||||
this.$set(this, 'users', r)
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
deleteUser() {
|
||||
this.userStuffService.delete(this.userStuffModel)
|
||||
.then(() => {
|
||||
this.showUserDeleteModal = false
|
||||
for (const i in this.users) {
|
||||
if (this.users[i].id === this.userStuffModel.userID) {
|
||||
this.users.splice(i, 1)
|
||||
}
|
||||
}
|
||||
message.success({message: 'The user was successfully deleted from the ' + this.typeString + '.'}, this)
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
addUser(admin) {
|
||||
if(admin === null) {
|
||||
admin = false
|
||||
}
|
||||
this.userStuffModel.right = rights.READ
|
||||
if (admin) {
|
||||
this.userStuffModel.right = rights.ADMIN
|
||||
}
|
||||
|
||||
this.userStuffModel.userID = this.user.id
|
||||
|
||||
this.userStuffService.create(this.userStuffModel)
|
||||
.then(() => {
|
||||
message.success({message: 'The user was successfully added.'}, this)
|
||||
this.loadUsers()
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
toggleUserType() {
|
||||
if (this.selectedRight !== rights.ADMIN &&
|
||||
this.selectedRight !== rights.READ &&
|
||||
this.selectedRight !== rights.READ_WRITE
|
||||
) {
|
||||
this.selectedRight = rights.READ
|
||||
}
|
||||
this.userStuffModel.right = this.selectedRight
|
||||
|
||||
this.userStuffService.update(this.userStuffModel)
|
||||
.then(r => {
|
||||
for (const i in this.users) {
|
||||
if (this.users[i].id === this.userStuffModel.userID) {
|
||||
this.$set(this.users[i], 'right', r.right)
|
||||
}
|
||||
}
|
||||
message.success({message: 'The user right was successfully updated.'}, this)
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
findUsers(query) {
|
||||
if(query === '') {
|
||||
this.$set(this, 'foundUsers', [])
|
||||
return
|
||||
}
|
||||
|
||||
this.userService.getAll({}, {s: query})
|
||||
.then(response => {
|
||||
this.$set(this, 'foundUsers', response)
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(e, this)
|
||||
})
|
||||
},
|
||||
clearAll () {
|
||||
this.$set(this, 'foundUsers', [])
|
||||
},
|
||||
limitText (count) {
|
||||
return `and ${count} others`
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card{
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.add-user-form {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.table{
|
||||
border-top: 1px solid darken(#fff, 15%);
|
||||
|
||||
td{
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
td.type, td.actions{
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
td.actions{
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.users-list, .users-namespace{
|
||||
padding: 0 !important;
|
||||
}
|
||||
</style>
|
||||
4
todo.md
4
todo.md
|
|
@ -109,8 +109,8 @@
|
|||
* [x] Refactor team sharing to not make a new request every time something was changed
|
||||
* [x] Team sharing should be able to search for a team instead of its ID, like it's the case with users
|
||||
* [x] Dropdown for rights
|
||||
* [ ] Same improvements also for user sharing
|
||||
* [ ] Use rights const everywhere
|
||||
* [x] Same improvements also for user sharing
|
||||
* [x] Use rights const everywhere
|
||||
* [ ] Styling of the search dropdown to match the rest of the theme
|
||||
|
||||
## Waiting for backend
|
||||
|
|
|
|||
Reference in New Issue
Block a user