From d66382b581b3433d618b5c7912419f2460dcecad Mon Sep 17 00:00:00 2001
From: konrad <konrad@kola-entertainments.de>
Date: Sun, 3 Mar 2019 12:50:06 +0000
Subject: [PATCH] Improved team search and team managing (#18)

---
 src/App.vue                                 |   5 +-
 src/components/lists/EditList.vue           |  15 +-
 src/components/namespaces/EditNamespace.vue |  15 +-
 src/components/sharing/team.vue             | 221 ----------
 src/components/sharing/user.vue             | 291 -------------
 src/components/sharing/userTeam.vue         | 342 ++++++++++++++++
 src/models/rights.json                      |   5 +
 src/styles/_multiselect.scss                | 433 ++++++++++++++++++++
 src/styles/_variables.scss                  |   9 +-
 src/styles/theme.scss                       |   4 +
 src/vikunja.scss                            |   4 +-
 todo.md                                     |  11 +-
 12 files changed, 819 insertions(+), 536 deletions(-)
 delete mode 100644 src/components/sharing/team.vue
 delete mode 100644 src/components/sharing/user.vue
 create mode 100644 src/components/sharing/userTeam.vue
 create mode 100644 src/models/rights.json
 create mode 100644 src/styles/_multiselect.scss

diff --git a/src/App.vue b/src/App.vue
index b1c57d46c..3a538efc7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -128,6 +128,7 @@
 			return {
 				user: auth.user,
 				namespaces: [],
+				namespaceService: NamespaceService,
 				mobileMenuActive: false,
 				fullpage: false,
 				currentDate: new Date(),
@@ -149,6 +150,7 @@
 		},
 		created() {
 			if (this.user.authenticated) {
+				this.namespaceService = new NamespaceService()
 				this.loadNamespaces()
 			}
 		},
@@ -164,8 +166,7 @@
 				return 'https://www.gravatar.com/avatar/' + this.user.infos.avatar + '?s=50'
 			},
 			loadNamespaces() {
-				let namespaceService = new NamespaceService()
-				namespaceService.getAll()
+				this.namespaceService.getAll()
 					.then(r => {
 						this.$set(this, 'namespaces', r)
 					})
diff --git a/src/components/lists/EditList.vue b/src/components/lists/EditList.vue
index 8eff4d91a..8d63b8a55 100644
--- a/src/components/lists/EditList.vue
+++ b/src/components/lists/EditList.vue
@@ -41,8 +41,8 @@
 			</div>
 		</div>
 
-		<component :is="manageUsersComponent" :id="list.id" type="list" :userIsAdmin="userIsAdmin"></component>
-		<component :is="manageTeamsComponent" :id="list.id" type="list" :userIsAdmin="userIsAdmin"></component>
+		<component :is="manageUsersComponent" :id="list.id" type="list" shareType="user" :userIsAdmin="userIsAdmin"></component>
+		<component :is="manageTeamsComponent" :id="list.id" type="list" shareType="team" :userIsAdmin="userIsAdmin"></component>
 
 		<modal
 				v-if="showDeleteModal"
@@ -59,8 +59,8 @@
 	import auth from '../../auth'
 	import router from '../../router'
 	import message from '../../message'
-	import manageusers from '../sharing/user'
-	import manageteams from '../sharing/team'
+	import manageSharing from '../sharing/userTeam'
+
 	import ListModel from '../../models/list'
 	import ListService from '../../services/list'
 
@@ -80,8 +80,7 @@
 			}
 		},
 		components: {
-			manageusers,
-			manageteams,
+			manageSharing,
 		},
 		beforeMount() {
 			// Check if the user is already logged in, if so, redirect him to the homepage
@@ -107,8 +106,8 @@
 							this.userIsAdmin = true
 						}
 						// This will trigger the dynamic loading of components once we actually have all the data to pass to them
-						this.manageTeamsComponent = 'manageteams'
-						this.manageUsersComponent = 'manageusers'
+						this.manageTeamsComponent = 'manageSharing'
+						this.manageUsersComponent = 'manageSharing'
 					})
 					.catch(e => {
 						message.error(e, this)
diff --git a/src/components/namespaces/EditNamespace.vue b/src/components/namespaces/EditNamespace.vue
index 5f0bd1b51..481a92e83 100644
--- a/src/components/namespaces/EditNamespace.vue
+++ b/src/components/namespaces/EditNamespace.vue
@@ -41,8 +41,8 @@
 			</div>
 		</div>
 
-		<component :is="manageUsersComponent" :id="namespace.id" type="namespace" :userIsAdmin="userIsAdmin"></component>
-		<component :is="manageTeamsComponent" :id="namespace.id" type="namespace" :userIsAdmin="userIsAdmin"></component>
+		<component :is="manageUsersComponent" :id="namespace.id" type="namespace" shareType="user" :userIsAdmin="userIsAdmin"></component>
+		<component :is="manageTeamsComponent" :id="namespace.id" type="namespace" shareType="team" :userIsAdmin="userIsAdmin"></component>
 
 		<modal
 				v-if="showDeleteModal"
@@ -59,8 +59,8 @@
 	import auth from '../../auth'
 	import router from '../../router'
 	import message from '../../message'
-	import manageusers from '../sharing/user'
-	import manageteams from '../sharing/team'
+	import manageSharing from '../sharing/userTeam'
+
 	import NamespaceService from '../../services/namespace'
 	import NamespaceModel from '../../models/namespace'
 	
@@ -79,8 +79,7 @@
 			}
 		},
 		components: {
-			manageusers,
-			manageteams,
+			manageSharing,
 		},
 		beforeMount() {
 			// Check if the user is already logged in, if so, redirect him to the homepage
@@ -108,8 +107,8 @@
 							this.userIsAdmin = true
 						}
 						// This will trigger the dynamic loading of components once we actually have all the data to pass to them
-						this.manageTeamsComponent = 'manageteams'
-						this.manageUsersComponent = 'manageusers'
+						this.manageTeamsComponent = 'manageSharing'
+						this.manageUsersComponent = 'manageSharing'
 					})
 					.catch(e => {
 						message.error(e, this)
diff --git a/src/components/sharing/team.vue b/src/components/sharing/team.vue
deleted file mode 100644
index 3d0d96935..000000000
--- a/src/components/sharing/team.vue
+++ /dev/null
@@ -1,221 +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 has-icons-left is-expanded" v-bind:class="{ 'is-loading': this.teamService.loading}">
-						<input class="input" v-bind:class="{ 'disabled': this.teamService.loading}" v-model.number="teamStuffModel.teamID" 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>
-
-		<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 TeamNamespaceService from '../../services/teamNamespace'
-	import TeamNamespaceModel from '../../models/teamNamespace'
-	import TeamListModel from '../../models/teamList'
-	import TeamListService from '../../services/teamList'
-	
-	export default {
-		name: 'team',
-		props: {
-			type: '',
-			id: 0,
-			userIsAdmin: false,
-		},
-		data() {
-			return {
-				teamService: Object, // This team service is either a teamNamespaceService or a teamListService, depending on the type we are using
-				teamStuffModel: Object,
-
-				currentUser: auth.user.infos,
-				typeString: '',
-				listTeams: [],
-				newTeam: {teamID: 0},
-				showTeamDeleteModal: false,
-				teamToDelete: 0,
-			}
-		},
-		created() {
-			if (this.type === 'list') {
-				this.typeString = `list`
-				this.teamService = new TeamListService()
-				this.teamStuffModel = new TeamListModel({listID: this.id})
-			} else if (this.type === 'namespace') {
-				this.typeString = `namespace`
-				this.teamService = new TeamNamespaceService()
-				this.teamStuffModel = new TeamNamespaceModel({namespaceID: this.id})
-			} else {
-				throw new Error('Unknown type: ' + this.type)
-			}
-
-			this.loadTeams()
-		},
-		methods: {
-			loadTeams() {
-				this.teamService.getAll(this.teamStuffModel)
-					.then(r => {
-						this.$set(this, 'listTeams', r)
-					})
-					.catch(e => {
-						message.error(e, this)
-					})
-			},
-			deleteTeam() {
-				this.teamService.delete(this.teamStuffModel)
-					.then(() => {
-						this.showTeamDeleteModal = false;
-						message.success({message: 'The team was successfully deleted from the ' + this.typeString + '.'}, this)
-						// FIXME: this should remove the team from the list instead of loading it again
-						this.loadTeams()
-					})
-					.catch(e => {
-						message.error(e, this)
-					})
-			},
-			addTeam(admin) {
-				if(admin === null) {
-					admin = false
-				}
-				this.teamStuffModel.right = 0
-				if (admin) {
-					this.teamStuffModel.right = 2
-				}
-
-				this.teamService.create(this.teamStuffModel)
-					.then(() => {
-						// FIXME: this should add the team to the list instead of loading it again
-						this.loadTeams()
-						message.success({message: 'The team was successfully added.'}, this)
-					})
-					.catch(e => {
-						message.error(e, this)
-					})
-			},
-			toggleTeamType(teamid, current) {
-				this.teamStuffModel.teamID = teamid
-				this.teamStuffModel.right = 0
-				if (!current) {
-					this.teamStuffModel.right = 2
-				}
-
-				this.teamService.update(this.teamStuffModel)
-					.then(() => {
-						// FIXME: this should update the team in the list instead of loading it again
-						this.loadTeams()
-						message.success({message: 'The team right was successfully updated.'}, this)
-					})
-					.catch(e => {
-						message.error(e, this)
-					})
-			}
-		},
-	}
-</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: 200px;
-			}
-
-			td.actions{
-				text-align: right;
-			}
-		}
-	}
-
-	.teams-list, .teams-namespace{
-		padding: 0 !important;
-	}
-</style>
\ No newline at end of file
diff --git a/src/components/sharing/user.vue b/src/components/sharing/user.vue
deleted file mode 100644
index 27ee3f015..000000000
--- a/src/components/sharing/user.vue
+++ /dev/null
@@ -1,291 +0,0 @@
-<template>
-	<div class="card">
-
-		<header class="card-header">
-			<p class="card-header-title">
-				Users with access to this {{type}}
-			</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': userStuffService.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" style="margin-top: 3px;">
-								<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 === 2">
-									<span class="icon is-small">
-										<icon icon="lock"/>
-									</span>
-							Admin
-						</template>
-						<template v-else-if="u.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="toggleUserType(u.id, (u.right === 2))" class="button buttonright is-primary" v-if="u.id !== currentUser.id">
-							Make
-							<template v-if="u.right === 2">
-								Member
-							</template>
-							<template v-else>
-								Admin
-							</template>
-						</button>
-						<button @click="user = u; showUserDeleteModal = true" class="button is-danger" v-if="u.id !== currentUser.id">
-									<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 UserService from '../../services/user'
-	import UserNamespaceModel from '../../models/userNamespace'
-	import UserListModel from '../../models/userList'
-	import UserListService from '../../services/userList'
-	import UserNamespaceService from '../../services/userNamespace'
-	import UserModel from '../../models/user'
-
-	export default {
-		name: 'user',
-		props: {
-			type: '',
-			id: 0,
-			userIsAdmin: false,
-		},
-		data() {
-			return {
-				userService: UserService, // To search for users
-				user: UserModel,
-				userStuff: Object, // This will be either UserNamespaceModel or UserListModel
-				userStuffService: Object, // This will be either UserListService or UserNamespaceService
-
-				currentUser: auth.user.infos,
-				typeString: '',
-				showUserDeleteModal: false,
-				users: [],
-				foundUsers: [],
-			}
-		},
-		components: {
-			multiselect
-		},
-		created() {
-			this.userService = new UserService()
-			this.user = new UserModel()
-
-			if (this.type === 'list') {
-				this.typeString = `list`
-				this.userStuffService = new UserListService()
-				this.userStuff = new UserListModel({listID: this.id})
-			} else if (this.type === 'namespace') {
-				this.typeString = `namespace`
-				this.userStuffService = new UserNamespaceService()
-				this.userStuff = new UserNamespaceModel({namespaceID: this.id})
-			} else {
-				throw new Error('Unknown type: ' + this.type)
-			}
-
-			this.loadUsers()
-		},
-		methods: {
-			loadUsers() {
-				this.userStuffService.getAll(this.userStuff)
-					.then(response => {
-						this.$set(this, 'users', response)
-					})
-					.catch(e => {
-						message.error(e, this)
-					})
-			},
-			deleteUser() {
-				// The api wants the user id as userID
-				let usr = this.user
-				this.userStuff.userID = usr.id
-
-				this.userStuffService.delete(this.userStuff)
-					.then(() => {
-						this.showUserDeleteModal = false;
-						message.success({message: 'The user was successfully deleted from the ' + this.typeString + '.'}, this)
-						this.loadUsers()
-					})
-					.catch(e => {
-						message.error(e, this)
-					})
-			},
-			addUser(admin = false) {
-				this.userStuff.right = 0
-				if (admin) {
-					this.userStuff.right = 2
-				}
-
-				// The api wants the user id as userID
-				this.userStuff.userID = this.user.id
-				this.$set(this, 'foundUsers', [])
-
-				this.userStuffService.create(this.userStuff)
-					.then(() => {
-						this.loadUsers()
-						message.success({message: 'The user was successfully added.'}, this)
-					})
-					.catch(e => {
-						message.error(e, this)
-					})
-			},
-			toggleUserType(userid, current) {
-				this.userStuff.userID = userid
-				this.userStuff.right = 0
-				if (!current) {
-					this.userStuff.right = 2
-				}
-
-				this.userStuffService.update(this.userStuff)
-					.then(() => {
-						this.loadUsers()
-						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">
-	.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: 200px;
-			}
-
-			td.actions{
-				text-align: right;
-			}
-		}
-	}
-
-	.users-list, .users-namespace{
-		padding: 0 !important;
-	}
-
-	ul.multiselect__content{
-		margin: 0 !important;
-	}
-
-	.multiselect{
-		background-color: white;
-		border: 1px solid #dbdbdb;
-		color: #363636;
-		-webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
-		box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
-
-		border-radius: 4px;
-		font-size: 1rem;
-		height: 2.25em;
-		line-height: 1.5;
-	}
-
-	.multiselect--active{
-		-webkit-box-shadow: inset 0 0.125em 0 rgba(10, 10, 10, 0.075), 0 0 0 0.125em rgba(91, 183, 219, 0.25);
-		box-shadow: inset 0 0.125em 0 rgba(10, 10, 10, 0.075), 0 0 0 0.125em rgba(91, 183, 219, 0.25);
-		border: 1px solid #5bb7db;
-	}
-</style>
\ No newline at end of file
diff --git a/src/components/sharing/userTeam.vue b/src/components/sharing/userTeam.vue
new file mode 100644
index 000000000..bc49b2d41
--- /dev/null
+++ b/src/components/sharing/userTeam.vue
@@ -0,0 +1,342 @@
+<template>
+	<div class="card">
+
+		<header class="card-header">
+			<p class="card-header-title">
+				{{shareType}}s with access to this {{typeString}}
+			</p>
+		</header>
+		<div class="card-content content sharables-list">
+			<form @submit.prevent="add()" class="add-form" v-if="userIsAdmin">
+				<div class="field is-grouped">
+					<p class="control is-expanded" v-bind:class="{ 'is-loading': searchService.loading}">
+						<multiselect
+								v-model="sharable"
+								:options="found"
+								:multiple="false"
+								:searchable="true"
+								:loading="searchService.loading"
+								:internal-search="true"
+								@search-change="find"
+								placeholder="Type to search"
+								:label="searchLabel"
+								track-by="id">
+							<template slot="clear" slot-scope="props">
+								<div class="multiselect__clear" v-if="sharable.id !== 0" @mousedown.prevent.stop="clearAll(props.search)"></div>
+							</template>
+							<span slot="noResult">Oops! No {{shareType}} 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="s in sharables" :key="s.id">
+					<template v-if="shareType === 'user'">
+						<td>{{s.username}}</td>
+						<td>
+							<template v-if="s.id === currentUser.id">
+								<b class="is-success">You</b>
+							</template>
+						</td>
+					</template>
+					<template v-if="shareType === 'team'">
+						<td>
+							<router-link :to="{name: 'editTeam', params: {id: s.id}}">
+								{{s.name}}
+							</router-link>
+						</td>
+					</template>
+					<td class="type">
+						<template v-if="s.right === rights.ADMIN">
+							<span class="icon is-small">
+								<icon icon="lock"/>
+							</span>
+							Admin
+						</template>
+						<template v-else-if="s.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="sharableID = s.id;toggleType()" v-model="selectedRight" class="button buttonright">
+								<option :value="rights.READ" :selected="s.right === rights.READ">Read only</option>
+								<option :value="rights.READ_WRITE" :selected="s.right === rights.READ_WRITE">Read & write</option>
+								<option :value="rights.ADMIN" :selected="s.right === rights.ADMIN">Admin</option>
+							</select>
+						</div>
+						<button @click="sharableID = s.id; showDeleteModal = 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="showDeleteModal"
+				@close="showDeleteModal = false"
+				@submit="deleteSharable()">
+			<span slot="header">Remove a {{shareType}} from the {{typeString}}</span>
+			<p slot="text">Are you sure you want to remove this {{shareType}} 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 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 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: 'userTeamShare',
+		props: {
+			type: '',
+			shareType: '',
+			id: 0,
+			userIsAdmin: false,
+		},
+		data() {
+			return {
+				stuffService: Object, // This user service is either a userNamespaceService or a userListService, depending on the type we are using
+				stuffModel: Object,
+				searchService: Object,
+				sharable: Object,
+				sharableID: 0, // This holds either user or team id for stuff like rights update or deleting
+				
+				found: [],
+				searchLabel: '',
+				rights: rights,
+				selectedRight: rights.READ,
+
+				currentUser: auth.user.infos,
+				typeString: '',
+				sharables: [], // This holds either teams or users who this namepace or list is shared with
+				showDeleteModal: false,
+			}
+		},
+		components: {
+			multiselect
+		},
+		created() {
+
+			if (this.shareType === 'user') {
+				this.searchService = new UserService()
+				this.sharable = new UserModel()
+				this.searchLabel = 'username'
+
+				if (this.type === 'list') {
+					this.typeString = `list`
+					this.stuffService = new UserListService()
+					this.stuffModel = new UserListModel({listID: this.id})
+				} else if (this.type === 'namespace') {
+					this.typeString = `namespace`
+					this.stuffService = new UserNamespaceService()
+					this.stuffModel = new UserNamespaceModel({namespaceID: this.id})
+				} else {
+					throw new Error('Unknown type: ' + this.type)
+				}
+			}
+			else if (this.shareType === 'team') {
+				this.searchService = new TeamService()
+				this.sharable = new TeamModel()
+				this.searchLabel = 'name'
+
+				if (this.type === 'list') {
+					this.typeString = `list`
+					this.stuffService = new TeamListService()
+					this.stuffModel = new TeamListModel({listID: this.id})
+				} else if (this.type === 'namespace') {
+					this.typeString = `namespace`
+					this.stuffService = new TeamNamespaceService()
+					this.stuffModel = new TeamNamespaceModel({namespaceID: this.id})
+				} else {
+					throw new Error('Unknown type: ' + this.type)
+				}
+			} else {
+				throw new Error('Unkown share type')
+			}
+
+			this.load()
+		},
+		methods: {
+			load() {
+				this.stuffService.getAll(this.stuffModel)
+					.then(r => {
+						this.$set(this, 'sharables', r)
+					})
+					.catch(e => {
+						message.error(e, this)
+					})
+			},
+			deleteSharable() {
+
+				if (this.shareType === 'user') {
+					this.stuffModel.userID = this.sharable.id
+				} else if (this.shareType === 'team') {
+					this.stuffModel.teamID = this.sharable.id
+				}
+				this.stuffService.delete(this.stuffModel)
+					.then(() => {
+						this.showDeleteModal = false
+						for (const i in this.sharables) {
+							if (
+								(this.sharables[i].id === this.stuffModel.userID && this.shareType === 'user') ||
+								(this.sharables[i].id === this.stuffModel.teamID && this.shareType === 'team')
+							) {
+								this.sharables.splice(i, 1)
+							}
+						}
+						message.success({message: 'The ' + this.shareType + ' was successfully deleted from the ' + this.typeString + '.'}, this)
+					})
+					.catch(e => {
+						message.error(e, this)
+					})
+			},
+			add(admin) {
+				if(admin === null) {
+					admin = false
+				}
+				this.stuffModel.right = rights.READ
+				if (admin) {
+					this.stuffModel.right = rights.ADMIN
+				}
+
+				if (this.shareType === 'user') {
+					this.stuffModel.userID = this.sharable.id
+				} else if (this.shareType === 'team') {
+					this.stuffModel.teamID = this.sharable.id
+				}
+
+				this.stuffService.create(this.stuffModel)
+					.then(() => {
+						message.success({message: 'The ' + this.shareType + ' was successfully added.'}, this)
+						this.load()
+					})
+					.catch(e => {
+						message.error(e, this)
+					})
+			},
+			toggleType() {
+				if (this.selectedRight !== rights.ADMIN &&
+					this.selectedRight !== rights.READ &&
+					this.selectedRight !== rights.READ_WRITE
+				) {
+					this.selectedRight = rights.READ
+				}
+				this.stuffModel.right = this.selectedRight
+
+
+				if (this.shareType === 'user') {
+					this.stuffModel.userID = this.sharableID
+				} else if (this.shareType === 'team') {
+					this.stuffModel.teamID = this.sharableID
+				}
+
+				this.stuffService.update(this.stuffModel)
+					.then(r => {
+						for (const i in this.sharables) {
+							if (
+								(this.sharables[i].id === this.stuffModel.userID && this.shareType === 'user') ||
+								(this.sharables[i].id === this.stuffModel.teamID && this.shareType === 'team')
+							) {
+								this.$set(this.sharables[i], 'right', r.right)
+							}
+						}
+						message.success({message: 'The ' + this.shareType + ' right was successfully updated.'}, this)
+					})
+					.catch(e => {
+						message.error(e, this)
+					})
+			},
+			find(query) {
+				if(query === '') {
+					this.$set(this, 'found', [])
+					return
+				}
+
+				this.searchService.getAll({}, {s: query})
+					.then(response => {
+						this.$set(this, 'found', response)
+					})
+					.catch(e => {
+						message.error(e, this)
+					})
+			},
+			clearAll () {
+				this.$set(this, 'found', [])
+			},
+			limitText (count) {
+				return `and ${count} others`
+			},
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.card{
+		margin-bottom: 1rem;
+
+		.add-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;
+			}
+		}
+	}
+
+	.sharables-list, .sharables-namespace{
+		padding: 0 !important;
+	}
+</style>
\ No newline at end of file
diff --git a/src/models/rights.json b/src/models/rights.json
new file mode 100644
index 000000000..61e6b145c
--- /dev/null
+++ b/src/models/rights.json
@@ -0,0 +1,5 @@
+{
+  "READ": 0,
+  "READ_WRITE": 1,
+  "ADMIN": 2
+}
\ No newline at end of file
diff --git a/src/styles/_multiselect.scss b/src/styles/_multiselect.scss
new file mode 100644
index 000000000..3b2e5112b
--- /dev/null
+++ b/src/styles/_multiselect.scss
@@ -0,0 +1,433 @@
+fieldset[disabled] .multiselect {
+  pointer-events: none;
+}
+
+.multiselect__spinner {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  width: 48px;
+  height: 35px;
+  background: $white;
+  display: block;
+
+  &:before, &:after {
+    position: absolute;
+    content: "";
+    top: 50%;
+    left: 50%;
+    margin: -8px 0 0 -8px;
+    width: 16px;
+    height: 16px;
+    border-radius: 100%;
+    border-color: $multiselect_primary transparent transparent;
+    border-style: solid;
+    border-width: 2px;
+    box-shadow: 0 0 0 1px transparent;
+  }
+  &:before {
+    animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62);
+    animation-iteration-count: infinite;
+  }
+  &:after {
+    animation: spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8);
+    animation-iteration-count: infinite;
+  }
+}
+
+.multiselect__loading-enter-active, .multiselect__loading-leave-active {
+  transition: opacity 0.4s ease-in-out;
+  opacity: 1;
+}
+
+.multiselect__loading-enter, .multiselect__loading-leave-active {
+  opacity: 0;
+}
+
+.multiselect, .multiselect__input, .multiselect__single {
+  font-family: inherit;
+  font-size: 16px;
+  touch-action: manipulation;
+}
+
+.multiselect {
+  box-sizing: content-box;
+  display: block;
+  position: relative;
+  width: 100%;
+  min-height: 40px;
+  text-align: left;
+  color: $text;
+  * {
+    box-sizing: border-box;
+  }
+  &:focus {
+    outline: none;
+  }
+}
+
+.multiselect--disabled {
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+.multiselect--active {
+  z-index: 50;
+  &:not(.multiselect--above) {
+    .multiselect__current, .multiselect__input, .multiselect__tags {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+  .multiselect__select {
+    transform: rotateZ(180deg);
+  }
+}
+
+.multiselect--above.multiselect--active {
+  .multiselect__current, .multiselect__input, .multiselect__tags {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}
+
+.multiselect__input, .multiselect__single {
+  position: relative;
+  display: inline-block;
+  min-height: 20px;
+  line-height: 20px;
+  border: none;
+  border-radius: 5px;
+  background: $white;
+  padding: 0 0 0 5px;
+  width: calc(100%);
+  transition: border 0.1s ease;
+  box-sizing: border-box;
+  margin-bottom: 8px;
+  vertical-align: top;
+}
+
+.multiselect__input::placeholder {
+  color: $multiselect-dark;
+}
+
+.multiselect__tag ~ {
+  .multiselect__input, .multiselect__single {
+    width: auto;
+  }
+}
+
+.multiselect__input:hover, .multiselect__single:hover {
+  border-color: darken($white, 10);
+}
+
+.multiselect__input:focus {
+  border-color: $primary;
+  outline: none;
+}
+
+.multiselect__single {
+  &:focus {
+    border-color: $primary;
+    outline: none;
+  }
+  padding-left: 5px;
+  margin-bottom: 8px;
+}
+
+.multiselect__tags-wrap {
+  display: inline;
+}
+
+.multiselect__tags {
+  min-height: 40px;
+  display: block;
+  padding: 8px 40px 0 8px;
+  border-radius: 5px;
+  border: 1px solid $multiselect-border;
+  background: $white;
+  font-size: 14px;
+}
+
+.multiselect__tag {
+  position: relative;
+  display: inline-block;
+  padding: 4px 26px 4px 10px;
+  border-radius: 5px;
+  margin-right: 10px;
+  color: $white;
+  line-height: 1;
+  background: $multiselect-highlight;
+  margin-bottom: 5px;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 100%;
+  text-overflow: ellipsis;
+}
+
+.multiselect__tag-icon {
+  cursor: pointer;
+  margin-left: 7px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  font-weight: 700;
+  font-style: initial;
+  width: 22px;
+  text-align: center;
+  line-height: 22px;
+  transition: all 0.2s ease;
+  border-radius: 5px;
+  &:after {
+    content: "×";
+    color: darken($multiselect-highlight, 20);
+    font-size: 14px;
+  }
+  &:focus, &:hover {
+    background: lighten($multiselect-highlight, 10);
+  }
+  &:focus:after, &:hover:after {
+    color: $white;
+  }
+}
+
+.multiselect__current {
+  line-height: 16px;
+  min-height: 40px;
+  box-sizing: border-box;
+  display: block;
+  overflow: hidden;
+  padding: 8px 30px 0 12px;
+  white-space: nowrap;
+  margin: 0;
+  text-decoration: none;
+  border-radius: 5px;
+  border: 1px solid $multiselect-border;
+  cursor: pointer;
+}
+
+.multiselect__select {
+  line-height: 16px;
+  display: block;
+  position: absolute;
+  box-sizing: border-box;
+  width: 40px;
+  height: 38px;
+  right: 1px;
+  top: 1px;
+  padding: 4px 8px;
+  margin: 0;
+  text-decoration: none;
+  text-align: center;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+  &:before {
+    position: relative;
+    right: 0;
+    top: 65%;
+    color: darken($multiselect-border, 30);
+    margin-top: 4px;
+    border-style: solid;
+    border-width: 5px 5px 0 5px;
+    border-color: darken($multiselect-border, 30) transparent transparent transparent;
+    content: "";
+  }
+}
+
+.multiselect__placeholder {
+  color: darken($white, 15);
+  display: inline-block;
+  margin-bottom: 10px;
+  padding-top: 2px;
+}
+
+.multiselect--active .multiselect__placeholder {
+  display: none;
+}
+
+.multiselect__content-wrapper {
+  position: absolute;
+  display: block;
+  background: $white;
+  width: 100%;
+  max-height: 240px;
+  overflow: auto;
+  border: 1px solid $multiselect-border;
+  border-top: none;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  z-index: 50;
+  -webkit-overflow-scrolling: touch;
+}
+
+.multiselect__content, .content ul.multiselect__content {
+  list-style: none;
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+  min-width: 100%;
+  vertical-align: top;
+}
+
+.multiselect--above .multiselect__content-wrapper {
+  bottom: 100%;
+  border-radius: 5px 5px 0 0;
+  border-bottom: none;
+  border-top: 1px solid $multiselect-border;
+}
+
+.multiselect__content::webkit-scrollbar {
+  display: none;
+}
+
+.multiselect__element {
+  display: block;
+}
+
+.multiselect__option {
+  display: block;
+  padding: 12px;
+  min-height: 40px;
+  line-height: 16px;
+  text-decoration: none;
+  text-transform: none;
+  vertical-align: middle;
+  position: relative;
+  cursor: pointer;
+  white-space: nowrap;
+  &:after {
+    top: 0;
+    right: 0;
+    position: absolute;
+    line-height: 40px;
+    padding-right: 12px;
+    padding-left: 20px;
+    font-size: 13px;
+  }
+}
+
+.multiselect__option--highlight {
+  background: $multiselect-highlight;
+  outline: none;
+  color: $white;
+  &:after {
+    content: attr(data-select);
+    background: $multiselect-highlight;
+    color: $white;
+  }
+}
+
+.multiselect__option--selected {
+  background: darken($white, 10);
+  color: $multiselect-dark;
+  font-weight: bold;
+  &:after {
+    content: attr(data-selected);
+    color: silver;
+  }
+  &.multiselect__option--highlight {
+    background: $multiselect-highlight-negative;
+    color: $white;
+    &:after {
+      background: $multiselect-highlight-negative;
+      content: attr(data-deselect);
+      color: $white;
+    }
+  }
+}
+
+.multiselect--disabled {
+  background: $multiselect-disabled;
+  pointer-events: none;
+  .multiselect__current, .multiselect__select {
+    background: $multiselect-disabled;
+    color: darken($multiselect-disabled, 40);
+  }
+}
+
+.multiselect__option--disabled {
+  background: $multiselect-disabled !important;
+  color: darken($multiselect-disabled, 40) !important;
+  cursor: text;
+  pointer-events: none;
+}
+
+.multiselect__option--group {
+  background: $multiselect-disabled;
+  color: $multiselect-dark;
+  &.multiselect__option--highlight {
+    background: $multiselect-dark;
+    color: $white;
+    &:after {
+      background: $multiselect-dark;
+    }
+  }
+}
+
+.multiselect__option--disabled.multiselect__option--highlight {
+  background: $multiselect-disabled;
+}
+
+.multiselect__option--group-selected.multiselect__option--highlight {
+  background: $multiselect-highlight-negative;
+  color: $white;
+  &:after {
+    background: $multiselect-highlight-negative;
+    content: attr(data-deselect);
+    color: $white;
+  }
+}
+
+.multiselect-enter-active, .multiselect-leave-active {
+  transition: all 0.15s ease;
+}
+
+.multiselect-enter, .multiselect-leave-active {
+  opacity: 0;
+}
+
+.multiselect__strong {
+  margin-bottom: 8px;
+  line-height: 20px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+*[dir="rtl"] {
+  .multiselect {
+    text-align: right;
+  }
+  .multiselect__select {
+    right: auto;
+    left: 1px;
+  }
+  .multiselect__tags {
+    padding: 8px 8px 0px 40px;
+  }
+  .multiselect__content {
+    text-align: right;
+  }
+  .multiselect__option:after {
+    right: auto;
+    left: 0;
+  }
+  .multiselect__clear {
+    right: auto;
+    left: 12px;
+  }
+  .multiselect__spinner {
+    right: auto;
+    left: 1px;
+  }
+}
+
+@keyframes spinning {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(2turn);
+  }
+}
\ No newline at end of file
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 7283455fc..94f090a4c 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -23,4 +23,11 @@ $vikunja-blue: #7F23FF;// #7F23FF; // #5974d9
 $vikunja-green: #4DB788;
 $navbar-padding: 1.5em;
 
-$transition: 150ms ease;
\ No newline at end of file
+$transition: 150ms ease;
+
+$multiselect-primary: $green;
+$multiselect-dark: #35495e;
+$multiselect-border: #e8e8e8;
+$multiselect-highlight: $green;
+$multiselect-highlight-negative: $red;
+$multiselect-disabled: darken(#fff, 40);
\ No newline at end of file
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 9b3d2c344..4a58d7edb 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -28,6 +28,10 @@
     box-shadow: 0.1em 0.1em 0.7em lighten($dark, 75) !important;
   }
 
+  &.icon-only{
+    padding-left: 16px;
+  }
+
   @each $name, $pair in $colors {
     $color: nth($pair, 1);
 
diff --git a/src/vikunja.scss b/src/vikunja.scss
index ace4940ba..a28753bcf 100644
--- a/src/vikunja.scss
+++ b/src/vikunja.scss
@@ -6,4 +6,6 @@
 @import 'styles/fullpage';
 
 @import 'styles/fancycheckbox';
-@import 'styles/tooltip';
\ No newline at end of file
+@import 'styles/tooltip';
+
+@import 'styles/multiselect';
\ No newline at end of file
diff --git a/todo.md b/todo.md
index a7448ce6c..4be6ca71d 100644
--- a/todo.md
+++ b/todo.md
@@ -105,10 +105,13 @@
 * [x] Move everything to models
   * [x] Make sure all loading properties are depending on its service
 * [x] Fix the first request afer login being made with an old token
-* [ ] Team sharing
-  * [ ] Refactor team sharing to not make a new request every time something was changed
-  * [ ] Team sharing should be able to search for a team instead of its ID, like it's the case with users
-  * [ ] Dropdown for rights
+* [x] Team sharing
+  * [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
+* [x] Same improvements also for user sharing
+* [x] Use rights const everywhere
+* [x] Styling of the search dropdown to match the rest of the theme
 
 ## Waiting for backend