Fix team managment (#121)

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

src/components/teams/EditTeam.vue

@@ -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
@@ -12,7 +12,15 @@
 						<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}">
+						<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 class="control">
 							<button type="submit" class="button is-success">
@@ -93,7 +126,8 @@
 							</template>
 						</td>
 						<td class="actions" v-if="userIsAdmin">
-								<button @click="toggleUserType(m)" class="button buttonright is-primary" v-if="m.id !== user.infos.id">
+							<button @click="toggleUserType(m)" class="button buttonright is-primary"
+									v-if="m.id !== user.infos.id">
 								Make
 								<template v-if="!m.admin">
 									Admin
@@ -102,7 +136,8 @@
 									Member
 								</template>
 							</button>
-								<button @click="member = m; showUserDeleteModal = true" class="button is-danger" v-if="m.id !== user.infos.id">
+							<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>
@@ -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.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)
 					.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
+				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>
 
 <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{
+	.team-members {
-				width: 200px;
-			}
-
-			td.actions{
-				text-align: right;
-			}
-		}
-	}
-
-	.team-members{
 		padding: 0;
 	}
 </style>

src/services/teamMember.js

@@ -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}',
 		});
 	}
 

src/styles/components/list.scss

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