From f42e3eb85767e13c7bb2cfe0ccb3b3640ea0b960 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sun, 1 Oct 2017 16:05:43 +0200
Subject: [PATCH] Frontend: Fix assigning/removing users
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 css/style.scss                  | 29 +++++++++++++++++++++++++++--
 js/controller/CardController.js | 21 ++++++++++-----------
 js/service/CardService.js       |  8 ++++++--
 templates/part.card.php         | 14 ++++++++++----
 4 files changed, 53 insertions(+), 19 deletions(-)

diff --git a/css/style.scss b/css/style.scss
index 17ff8ff5c..b45c67375 100644
--- a/css/style.scss
+++ b/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;
diff --git a/js/controller/CardController.js b/js/controller/CardController.js
index fc4741e2b..bf1e3fec4 100644
--- a/js/controller/CardController.js
+++ b/js/controller/CardController.js
@@ -139,21 +139,20 @@ app.controller('CardController', function ($scope, $rootScope, $routeParams, $lo
 		CardService.update(element);
 		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);
 	};
-});
+
+});
\ No newline at end of file
diff --git a/js/service/CardService.js b/js/service/CardService.js
index e86815021..4e6fc60e2 100644
--- a/js/service/CardService.js
+++ b/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);
diff --git a/templates/part.card.php b/templates/part.card.php
index 4265cf34e..d7b538b1e 100644
--- a/templates/part.card.php
+++ b/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>