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>
<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">
<p class="card-header-title">
Edit Team
@ -8,11 +8,19 @@
</header>
<div class="card-content">
<div class="content">
<form @submit.prevent="submit()">
<form @submit.prevent="submit()">
<div class="field">
<label class="label" for="teamtext">Team Name</label>
<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>
<p class="help is-danger" v-if="showError && team.name.length <= 5">
@ -21,19 +29,27 @@
<div class="field">
<label class="label" for="teamdescription">Description</label>
<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>
</form>
<div class="columns bigbuttons">
<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
</button>
</div>
<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">
<icon icon="trash-alt"/>
</span>
@ -43,7 +59,7 @@
</div>
</div>
</div>
<div class="card">
<div class="card is-fullwidth">
<header class="card-header">
<p class="card-header-title">
@ -53,11 +69,28 @@
<div class="card-content content team-members">
<form @submit.prevent="addUser()" class="add-member-form" v-if="userIsAdmin">
<div class="field is-grouped">
<p class="control has-icons-left is-expanded" v-bind:class="{ 'is-loading': teamMemberService.loading}">
<input class="input" v-bind:class="{ 'disabled': teamMemberService.loading}" v-model.number="member.id" type="text" placeholder="Add a new user...">
<span class="icon is-small is-left">
<icon icon="user"/>
</span>
<p
class="control has-icons-left is-expanded"
:class="{ 'is-loading': teamMemberService.loading}">
<multiselect
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 class="control">
<button type="submit" class="button is-success">
@ -71,44 +104,46 @@
</form>
<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>
<template v-if="m.id === user.infos.id">
<b class="is-success">You</b>
</template>
</td>
<td class="type">
<template v-if="m.admin">
<tr v-for="m in team.members" :key="m.id">
<td>{{m.username}}</td>
<td>
<template v-if="m.id === user.infos.id">
<b class="is-success">You</b>
</template>
</td>
<td class="type">
<template v-if="m.admin">
<span class="icon is-small">
<icon icon="lock"/>
</span>
Admin
</template>
<template v-else>
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)" 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>
</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
</template>
</button>
<button @click="member = m; showUserDeleteModal = true" class="button is-danger" v-if="m.id !== user.infos.id">
</button>
<button @click="() => {member = m; showUserDeleteModal = true}" class="button is-danger"
v-if="m.id !== user.infos.id">
<span class="icon is-small">
<icon icon="trash-alt"/>
</span>
</button>
</td>
</tr>
</button>
</td>
</tr>
</tbody>
</table>
</div>
@ -118,7 +153,7 @@
<modal
v-if="showDeleteModal"
@close="showDeleteModal = false"
v-on:submit="deleteTeam()">
@submit="deleteTeam()">
<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/>
All team members will loose access to lists and namespaces shared with this team.<br/>
@ -128,7 +163,7 @@
<modal
v-if="showUserDeleteModal"
@close="showUserDeleteModal = false"
v-on:submit="deleteUser()">
@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/>
They will loose access to all lists and namespaces this team has access to.<br/>
@ -140,19 +175,23 @@
<script>
import auth from '../../auth'
import router from '../../router'
import multiselect from 'vue-multiselect'
import TeamService from '../../services/team'
import TeamModel from '../../models/team'
import TeamMemberService from '../../services/teamMember'
import TeamMemberModel from '../../models/teamMember'
import UserModel from '../../models/user'
import UserService from '../../services/user'
export default {
name: "EditTeam",
name: 'EditTeam',
data() {
return {
teamService: TeamService,
teamMemberService: TeamMemberService,
team: TeamModel,
teamId: this.$route.params.id,
member: TeamMemberModel,
showDeleteModal: false,
@ -160,9 +199,16 @@
user: auth.user,
userIsAdmin: false,
newMember: UserModel,
foundUsers: [],
userService: UserService,
showError: false,
}
},
components: {
multiselect,
},
beforeMount() {
// Check if the user is already logged in, if so, redirect him to the homepage
if (!auth.user.authenticated) {
@ -172,6 +218,7 @@
created() {
this.teamService = new TeamService()
this.teamMemberService = new TeamMemberService()
this.userService = new UserService()
this.loadTeam()
},
watch: {
@ -180,14 +227,14 @@
},
methods: {
loadTeam() {
this.member = new TeamMemberModel({teamId: this.$route.params.id})
this.team = new TeamModel({id: this.$route.params.id})
// this.member = new TeamMemberModel({teamId: this.teamId})
this.team = new TeamModel({id: this.teamId})
this.teamService.get(this.team)
.then(response => {
this.$set(this, 'team', response)
let members = response.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) {
this.userIsAdmin = true
}
@ -237,7 +284,11 @@
})
},
addUser() {
this.teamMemberService.create(this.member)
const newMember = new TeamMemberModel({
teamId: this.teamId,
username: this.newMember.username,
})
this.teamMemberService.create(newMember)
.then(() => {
this.loadTeam()
this.success({message: 'The team member was successfully added.'}, this)
@ -247,43 +298,48 @@
})
},
toggleUserType(member) {
this.member = member
this.member.admin = !member.admin
this.deleteUser()
this.addUser()
}
member.admin = !member.admin
this.teamMemberService.delete(member)
.then(() => this.teamMemberService.create(member))
.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>
<style lang="scss" scoped>
.card{
.card {
margin-bottom: 1rem;
.add-member-form {
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;
}
</style>

2
src/services/teamMember.js
View file

@ -6,7 +6,7 @@ export default class TeamMemberService extends AbstractService {
constructor() {
super({
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{
border-top: 1px solid darken(#fff, 15%);
border-radius: 4px;
overflow: hidden;
td{
vertical-align: middle;