Refactored team sharing to be able to search for teams

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)
 					})

src/components/sharing/team.vue

@@ -9,11 +9,23 @@
 		<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 class="control is-expanded" v-bind:class="{ 'is-loading': this.teamService.loading}">
+						<multiselect
+							v-model="team"
+							:options="foundTeams"
+							:multiple="false"
+							:searchable="true"
+							:loading="teamStuffService.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">
@@ -88,10 +100,15 @@
 <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'
 	
 	export default {
 		name: 'team',
@@ -102,8 +119,12 @@
 		},
 		data() {
 			return {
-				teamService: Object, // This team service is either a teamNamespaceService or a teamListService, depending on the type we are using
+				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: [],
 
 				currentUser: auth.user.infos,
 				typeString: '',
@@ -113,14 +134,20 @@
 				teamToDelete: 0,
 			}
 		},
+		components: {
+			multiselect
+		},
 		created() {
+			this.teamService = new TeamService()
+			this.team = new TeamModel()
+
 			if (this.type === 'list') {
 				this.typeString = `list`
-				this.teamService = new TeamListService()
+				this.teamStuffService = new TeamListService()
 				this.teamStuffModel = new TeamListModel({listID: this.id})
 			} else if (this.type === 'namespace') {
 				this.typeString = `namespace`
-				this.teamService = new TeamNamespaceService()
+				this.teamStuffService = new TeamNamespaceService()
 				this.teamStuffModel = new TeamNamespaceModel({namespaceID: this.id})
 			} else {
 				throw new Error('Unknown type: ' + this.type)
@@ -130,7 +157,7 @@
 		},
 		methods: {
 			loadTeams() {
-				this.teamService.getAll(this.teamStuffModel)
+				this.teamStuffService.getAll(this.teamStuffModel)
 					.then(r => {
 						this.$set(this, 'listTeams', r)
 					})
@@ -139,7 +166,7 @@
 					})
 			},
 			deleteTeam() {
-				this.teamService.delete(this.teamStuffModel)
+				this.teamStuffService.delete(this.teamStuffModel)
 					.then(() => {
 						this.showTeamDeleteModal = false;
 						message.success({message: 'The team was successfully deleted from the ' + this.typeString + '.'}, this)
@@ -159,7 +186,9 @@
 					this.teamStuffModel.right = 2
 				}
 
-				this.teamService.create(this.teamStuffModel)
+				this.teamStuffModel.teamID = this.team.id
+
+				this.teamStuffService.create(this.teamStuffModel)
 					.then(() => {
 						// FIXME: this should add the team to the list instead of loading it again
 						this.loadTeams()
@@ -176,7 +205,7 @@
 					this.teamStuffModel.right = 2
 				}
 
-				this.teamService.update(this.teamStuffModel)
+				this.teamStuffService.update(this.teamStuffModel)
 					.then(() => {
 						// FIXME: this should update the team in the list instead of loading it again
 						this.loadTeams()
@@ -185,7 +214,27 @@
 					.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>

src/components/sharing/user.vue

@@ -9,7 +9,7 @@
 		<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}">
+					<p class="control is-expanded" v-bind:class="{ 'is-loading': userService.loading}">
 						<multiselect
 								v-model="user"
 								:options="foundUsers"

todo.md

@@ -107,7 +107,7 @@
 * [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
+  * [x] Team sharing should be able to search for a team instead of its ID, like it's the case with users
   * [ ] Dropdown for rights
 
 ## Waiting for backend