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

Fix team managment (#121)

Browse source 
Fix member/admin button overflowing

Fix changing team member admin status

Fix adding team members

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/121
This commit is contained in:
konrad 2020-04-27 10:59:49 +00:00
parent a5c0b035e7
commit 623879381b
3 changed files with 130 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<template> <template>
<div class="loader-container" v-bind:class="{ 'is-loading': teamService.loading}"> <div class="loader-container" v-bind:class="{ 'is-loading': teamService.loading}">
<div class="card" v-if="userIsAdmin"> <div class="card is-fullwidth" v-if="userIsAdmin">
<header class="card-header"> <header class="card-header">
<p class="card-header-title"> <p class="card-header-title">
Edit Team Edit Team
@ -8,11 +8,19 @@
</header> </header>
<div class="card-content"> <div class="card-content">
<div class="content"> <div class="content">
<form @submit.prevent="submit()"> <form @submit.prevent="submit()">
<div class="field"> <div class="field">
<label class="label" for="teamtext">Team Name</label> <label class="label" for="teamtext">Team Name</label>
<div class="control"> <div class="control">
<input v-focus :class="{ 'disabled': teamMemberService.loading}" :disabled="teamMemberService.loading" class="input" type="text" id="teamtext" placeholder="The team text is here..." v-model="team.name"> <input
v-focus
:class="{ 'disabled': teamMemberService.loading}"
:disabled="teamMemberService.loading"
class="input"
type="text"
id="teamtext"
placeholder="The team text is here..."
v-model="team.name"/>
</div> </div>
</div> </div>
<p class="help is-danger" v-if="showError && team.name.length <= 5"> <p class="help is-danger" v-if="showError && team.name.length <= 5">
@ -21,19 +29,27 @@
<div class="field"> <div class="field">
<label class="label" for="teamdescription">Description</label> <label class="label" for="teamdescription">Description</label>
<div class="control"> <div class="control">
<textarea :class="{ 'disabled': teamService.loading}" :disabled="teamService.loading" class="textarea" placeholder="The teams description goes here..." id="teamdescription" v-model="team.description"></textarea> <textarea
:class="{ 'disabled': teamService.loading}"
:disabled="teamService.loading"
class="textarea"
placeholder="The teams description goes here..."
id="teamdescription"
v-model="team.description"></textarea>
</div> </div>
</div> </div>
</form> </form>
<div class="columns bigbuttons"> <div class="columns bigbuttons">
<div class="column"> <div class="column">
<button @click="submit()" class="button is-success is-fullwidth" :class="{ 'is-loading': teamService.loading}"> <button @click="submit()" class="button is-success is-fullwidth"
:class="{ 'is-loading': teamService.loading}">
Save Save
</button> </button>
</div> </div>
<div class="column is-1"> <div class="column is-1">
<button @click="showDeleteModal = true" class="button is-danger is-fullwidth" :class="{ 'is-loading': teamService.loading}"> <button @click="showDeleteModal = true" class="button is-danger is-fullwidth"
:class="{ 'is-loading': teamService.loading}">
<span class="icon is-small"> <span class="icon is-small">
<icon icon="trash-alt"/> <icon icon="trash-alt"/>
</span> </span>
@ -43,7 +59,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="card"> <div class="card is-fullwidth">
<header class="card-header"> <header class="card-header">
<p class="card-header-title"> <p class="card-header-title">
@ -53,11 +69,28 @@
<div class="card-content content team-members"> <div class="card-content content team-members">
<form @submit.prevent="addUser()" class="add-member-form" v-if="userIsAdmin"> <form @submit.prevent="addUser()" class="add-member-form" v-if="userIsAdmin">
<div class="field is-grouped"> <div class="field is-grouped">
<p class="control has-icons-left is-expanded" v-bind:class="{ 'is-loading': teamMemberService.loading}"> <p
<input class="input" v-bind:class="{ 'disabled': teamMemberService.loading}" v-model.number="member.id" type="text" placeholder="Add a new user..."> class="control has-icons-left is-expanded"
<span class="icon is-small is-left"> :class="{ 'is-loading': teamMemberService.loading}">
<icon icon="user"/> <multiselect
</span> v-model="newMember"
:options="foundUsers"
:multiple="false"
:searchable="true"
:loading="userService.loading"
:internal-search="true"
@search-change="findUser"
placeholder="Type to search"
label="username"
track-by="id">
<template slot="clear" slot-scope="props">
<div
class="multiselect__clear" v-if="newMember.id !== 0"
@mousedown.prevent.stop="clearAll(props.search)">
</div>
</template>
<span slot="noResult">Oops! No user found. Consider changing the search query.</span>
</multiselect>
</p> </p>
<p class="control"> <p class="control">
<button type="submit" class="button is-success"> <button type="submit" class="button is-success">
@ -71,44 +104,46 @@
</form> </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">
<td>{{m.username}}</td> <td>{{m.username}}</td>
<td> <td>
<template v-if="m.id === user.infos.id"> <template v-if="m.id === user.infos.id">
<b class="is-success">You</b> <b class="is-success">You</b>
</template> </template>
</td> </td>
<td class="type"> <td class="type">
<template v-if="m.admin"> <template v-if="m.admin">
<span class="icon is-small"> <span class="icon is-small">
<icon icon="lock"/> <icon icon="lock"/>
</span> </span>
Admin Admin
</template> </template>
<template v-else> <template v-else>
<span class="icon is-small"> <span class="icon is-small">
<icon icon="user"/> <icon icon="user"/>
</span> </span>
Member
</template>
</td>
<td class="actions" v-if="userIsAdmin">
<button @click="toggleUserType(m)" class="button buttonright is-primary"
v-if="m.id !== user.infos.id">
Make
<template v-if="!m.admin">
Admin
</template>
<template v-else>
Member Member
</template> </template>
</td> </button>
<td class="actions" v-if="userIsAdmin"> <button @click="() => {member = m; showUserDeleteModal = true}" class="button is-danger"
<button @click="toggleUserType(m)" class="button buttonright is-primary" v-if="m.id !== user.infos.id"> v-if="m.id !== user.infos.id">
Make
<template v-if="!m.admin">
Admin
</template>
<template v-else>
Member
</template>
</button>
<button @click="member = m; 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>
</button> </button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -118,7 +153,7 @@
<modal <modal
v-if="showDeleteModal" v-if="showDeleteModal"
@close="showDeleteModal = false" @close="showDeleteModal = false"
v-on:submit="deleteTeam()"> @submit="deleteTeam()">
<span slot="header">Delete the team</span> <span slot="header">Delete the team</span>
<p slot="text">Are you sure you want to delete this team and all of its members?<br/> <p slot="text">Are you sure you want to delete this team and all of its members?<br/>
All team members will loose access to lists and namespaces shared with this team.<br/> All team members will loose access to lists and namespaces shared with this team.<br/>
@ -128,7 +163,7 @@
<modal <modal
v-if="showUserDeleteModal" v-if="showUserDeleteModal"
@close="showUserDeleteModal = false" @close="showUserDeleteModal = false"
v-on:submit="deleteUser()"> @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/>
They will loose access to all lists and namespaces this team has access to.<br/> They will loose access to all lists and namespaces this team has access to.<br/>
@ -140,19 +175,23 @@
<script> <script>
import auth from '../../auth' import auth from '../../auth'
import router from '../../router' import router from '../../router'
import multiselect from 'vue-multiselect'
import TeamService from '../../services/team' import TeamService from '../../services/team'
import TeamModel from '../../models/team' import TeamModel from '../../models/team'
import TeamMemberService from '../../services/teamMember' import TeamMemberService from '../../services/teamMember'
import TeamMemberModel from '../../models/teamMember' import TeamMemberModel from '../../models/teamMember'
import UserModel from '../../models/user'
import UserService from '../../services/user'
export default { export default {
name: "EditTeam", name: 'EditTeam',
data() { data() {
return { return {
teamService: TeamService, teamService: TeamService,
teamMemberService: TeamMemberService, teamMemberService: TeamMemberService,
team: TeamModel, team: TeamModel,
teamId: this.$route.params.id,
member: TeamMemberModel, member: TeamMemberModel,
showDeleteModal: false, showDeleteModal: false,
@ -160,9 +199,16 @@
user: auth.user, user: auth.user,
userIsAdmin: false, userIsAdmin: false,
newMember: UserModel,
foundUsers: [],
userService: UserService,
showError: false, showError: false,
} }
}, },
components: {
multiselect,
},
beforeMount() { beforeMount() {
// Check if the user is already logged in, if so, redirect him to the homepage // Check if the user is already logged in, if so, redirect him to the homepage
if (!auth.user.authenticated) { if (!auth.user.authenticated) {
@ -172,6 +218,7 @@
created() { created() {
this.teamService = new TeamService() this.teamService = new TeamService()
this.teamMemberService = new TeamMemberService() this.teamMemberService = new TeamMemberService()
this.userService = new UserService()
this.loadTeam() this.loadTeam()
}, },
watch: { watch: {
@ -180,14 +227,14 @@
}, },
methods: { methods: {
loadTeam() { loadTeam() {
this.member = new TeamMemberModel({teamId: this.$route.params.id}) // this.member = new TeamMemberModel({teamId: this.teamId})
this.team = new TeamModel({id: this.$route.params.id}) this.team = new TeamModel({id: this.teamId})
this.teamService.get(this.team) this.teamService.get(this.team)
.then(response => { .then(response => {
this.$set(this, 'team', response) this.$set(this, 'team', response)
let members = response.members let members = response.members
for (const m in members) { for (const m in members) {
members[m].teamId = this.$route.params.id members[m].teamId = this.teamId
if (members[m].id === this.user.infos.id && members[m].admin) { if (members[m].id === this.user.infos.id && members[m].admin) {
this.userIsAdmin = true this.userIsAdmin = true
} }
@ -237,7 +284,11 @@
}) })
}, },
addUser() { addUser() {
this.teamMemberService.create(this.member) const newMember = new TeamMemberModel({
teamId: this.teamId,
username: this.newMember.username,
})
this.teamMemberService.create(newMember)
.then(() => { .then(() => {
this.loadTeam() this.loadTeam()
this.success({message: 'The team member was successfully added.'}, this) this.success({message: 'The team member was successfully added.'}, this)
@ -247,43 +298,48 @@
}) })
}, },
toggleUserType(member) { toggleUserType(member) {
this.member = member member.admin = !member.admin
this.member.admin = !member.admin this.teamMemberService.delete(member)
this.deleteUser() .then(() => this.teamMemberService.create(member))
this.addUser() .then(() => {
} this.loadTeam()
this.success({message: 'The team member was successfully made ' + (member.admin ? 'admin': 'member') + '.'}, this)
})
.catch(e => {
this.error(e, this)
})
},
findUser(query) {
if (query === '') {
this.$set(this, 'foundUsers', [])
return
}
this.userService.getAll({}, {s: query})
.then(response => {
this.$set(this, 'foundUsers', response)
})
.catch(e => {
this.error(e, this)
})
},
clearAll() {
this.$set(this, 'foundUsers', [])
},
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.card{ .card {
margin-bottom: 1rem; margin-bottom: 1rem;
.add-member-form { .add-member-form {
margin: 1rem; margin: 1rem;
} }
.table{
border-top: 1px solid darken(#fff, 15%);
border-radius: 4px;
overflow: hidden;
td{
vertical-align: middle;
}
td.type, td.actions{
width: 200px;
}
td.actions{
text-align: right;
}
}
} }
.team-members{ .team-members {
padding: 0; padding: 0;
} }
</style> </style>

2
src/services/teamMember.js
View file

@ -6,7 +6,7 @@ export default class TeamMemberService extends AbstractService {
constructor() { constructor() {
super({ super({
create: '/teams/{teamId}/members', create: '/teams/{teamId}/members',
delete: '/teams/{teamId}/members/{id}', // "id" is the user id because we're intheriting from a normal user delete: '/teams/{teamId}/members/{username}',
}); });
} }

2
src/styles/components/list.scss
View file

@ -11,6 +11,8 @@
.table{ .table{
border-top: 1px solid darken(#fff, 15%); border-top: 1px solid darken(#fff, 15%);
border-radius: 4px;
overflow: hidden;
td{ td{
vertical-align: middle; vertical-align: middle;