Frontend: Fix assigning/removing users

Signed-off-by: Julius Härtl <jus@bitgrid.net>

css/style.scss

@@ -644,6 +644,31 @@ input.input-inline {
 		text-align: right;
 	}
 
+	.card-details-assigned-users {
+		display: flex;
+
+		.assigned-user {
+			position: relative;
+
+			.avatardiv {
+				margin-right:5px;
+			}
+			.icon-delete {
+				display: none;
+				position: absolute;
+				top: 8px;
+				left: 8px;
+			}
+			&:hover .icon-delete {
+				display: inline-block;
+				cursor: pointer;
+			}
+			&:hover .avatardiv {
+				opacity: .7;
+			}
+		}
+	}
+
 	#card-description {
 		height: 100%;
 		display: flex;
@@ -982,11 +1007,11 @@ input.input-inline {
 	}
 }
 
-.select2-container-multi .select2-choices {
+.select2-container .select2-choices {
 	padding: 0 !important;
 }
 
-.select2-container-multi .select2-choices .select2-search-choice {
+.select2-container .select2-choices .select2-search-choice {
 	padding: 3px 0 !important;
 	border: 0 !important;
 	overflow: hidden;

js/controller/CardController.js

@@ -140,20 +140,19 @@ app.controller('CardController', function ($scope, $rootScope, $routeParams, $lo
 		StackService.updateCard(element);
 	};
 	
-	/**
-	 * Assigning users to cards
-	 */
-
 	/**
 	 * Show ui-select field when clicking the add button
 	 */
 	$scope.showAssignUser = function() {
 		$scope.status.showAssignUser = true;
 		$timeout(function() {
-			$("#assignUserSelect").find('a')[0].click();
+			$("#assignUserSelect").find('a').click();
 		});
 	};
 
+	/**
+	 * Hide ui-select when select list is closed
+	 */
 	$scope.assingUserOpenClose = function(isOpen) {
 		if (!isOpen) {
 			$scope.status.showAssignUser = false;
@@ -161,12 +160,12 @@ app.controller('CardController', function ($scope, $rootScope, $routeParams, $lo
 	};
 
 	$scope.addAssignedUser = function(item) {
+		CardService.assignUser(CardService.getCurrent(), item.uid);
 		$scope.status.showAssignUser = false;
-		$('assignUserSelect').hide();
-		console.log(a);
 	};
 
-	$scope.removeAssignedUser = function() {
-
+	$scope.removeAssignedUser = function(item) {
+		CardService.unassignUser(CardService.getCurrent(), item.participant.uid);
 	};
+
 });

js/service/CardService.js

@@ -98,7 +98,8 @@ app.factory('CardService', function(ApiService, $http, $q){
 	CardService.prototype.assignUser = function (card, user) {
 		var deferred = $q.defer();
 		var self = this;
-		$http.post(this.baseUrl + '/' + card.id + '/assign', {'user': user}).then(function (response) {
+		$http.post(this.baseUrl + '/' + card.id + '/assign', {'userId': user}).then(function (response) {
+			self.getCurrent().assignedUsers.push(response.data);
 			deferred.resolve(response.data);
 		}, function (error) {
 			deferred.reject('Error while update ' + self.endpoint);
@@ -110,7 +111,10 @@ app.factory('CardService', function(ApiService, $http, $q){
 	CardService.prototype.unassignUser = function (card, user) {
 		var deferred = $q.defer();
 		var self = this;
-		$http.delete(this.baseUrl + '/' + card.id + '/assign', {'user': user}).then(function (response) {
+		$http.delete(this.baseUrl + '/' + card.id + '/assign/' + user, {}).then(function (response) {
+			self.getCurrent().assignedUsers = self.getCurrent().assignedUsers.filter(function( obj ) {
+				return obj.participant.uid !== user;
+			});
 			deferred.resolve(response.data);
 		}, function (error) {
 			deferred.reject('Error while update ' + self.endpoint);

templates/part.card.php

@@ -53,17 +53,23 @@
 		<h4><?php p($l->t('Assign users')); ?></h4>
 		<button class="button icon-add" ng-click="showAssignUser()"></button>
 	</div>
-	<ui-select id="assignUserSelect" theme="select2" style="width:100%;"
+	<ui-select id="assignUserSelect" ng-model="status.assignedUser" ng-show="status.showAssignUser" uis-open-close="assingUserOpenClose(isOpen)"
+			   theme="select2" style="width:100%;"
 			   title="Choose a user to assign" placeholder="Choose a user to assign"
-			   on-select="addAssignedUser($item)" search-enabled="true" ng-show="status.showAssignUser" uis-open-close="assingUserOpenClose(isOpen)">
+			   on-select="addAssignedUser($item)">
 		<ui-select-match placeholder="<?php p($l->t('Assign this card to a user')); ?>">
 			<span><i class="icon icon-{{$item.type}}"></i> {{ $item.participant.displayname }}</span>
 		</ui-select-match>
-		<ui-select-choices refresh="searchUsers($select.search)" refresh-delay="0" repeat="user in boardservice.getCurrent().users">
+		<ui-select-choices repeat="user in boardservice.getCurrent().users| filter: $select.search track by user.uid">
 			<div class="avatardiv" avatar ng-attr-displayname="{{ user.uid }}" ng-if="boardservice.id"></div><span>{{ user.displayname }}</span>
 		</ui-select-choices>
 	</ui-select>
-	<div class="avatardiv" avatar ng-attr-displayname="{{ boardservice.getCurrent().owner.uid }}" ng-if="boardservice.id"></div>
+	<div class="section-content card-details-assigned-users">
+		<div class="assigned-user" ng-repeat="user in cardservice.getCurrent().assignedUsers">
+			<div class="avatardiv" avatar ng-attr-displayname="{{ user.participant.uid }}"></div>
+			<div class="icon icon-delete" ng-click="removeAssignedUser(user)"></div>
+		</div>
+	</div>
 
 	<div class="section-header">
 		<h4>