From 219494a14890fab753a4f7771f86dbb336901c3b Mon Sep 17 00:00:00 2001
From: Paul Bochis <paul.bochis@gmail.com>
Date: Tue, 3 May 2016 16:47:29 +0300
Subject: [PATCH] rework challenge invite

---
 .../user/user-search-provider.html            | 60 ++++++++++++++++
 .../invite/invite-candidate-input.html        | 48 ++++++++-----
 .../candidate/invite/invite-candidates.html   | 72 ++++++++-----------
 .../company/challenge/challenge-detail.html   | 42 +++++++----
 .../company/challenge/challenge-list.html     |  4 +-
 app/elements/routing.html                     | 18 +++++
 .../providers/general-provider-behavior.js    |  1 -
 bower.json                                    |  3 +-
 8 files changed, 170 insertions(+), 78 deletions(-)
 create mode 100644 app/elements/common/data-providers/user/user-search-provider.html

diff --git a/app/elements/common/data-providers/user/user-search-provider.html b/app/elements/common/data-providers/user/user-search-provider.html
new file mode 100644
index 00000000..116150f4
--- /dev/null
+++ b/app/elements/common/data-providers/user/user-search-provider.html
@@ -0,0 +1,60 @@
+<link rel="import" href="/bower_components/iron-ajax/iron-ajax.html">
+
+<dom-module id="user-search-provider">
+	<style>
+		:host {
+			display: none;
+		}
+	</style>
+	<template>
+		<iron-ajax
+			id="request"
+			auto
+			method="GET"
+			url="{{url}}"
+			handle-as="json"
+			last-response="{{data}}"
+			with-credentials="true">
+		</iron-ajax>
+	</template>
+	<script type="application/javascript" src="/scripts/behaviors/providers/general-provider-behavior.js"></script>
+	<script type="application/javascript" src="/scripts/behaviors/providers/user-provider-behavior.js"></script>
+	<script>
+		Polymer({
+			is: 'user-search-provider',
+			properties: {
+				searchString: {
+					type: String,
+					notify: true,
+					observer: '_searchPropertyChanged'
+				}
+			},
+			behaviors: [
+				Behaviors.Providers.General,
+				Behaviors.Providers.User
+			],
+			observers: [
+				'_dataLoaded(data)'
+			],
+			_searchPropertyChanged: function(){
+				if (!!this.searchString && this.searchString.length > 2){
+					this.url = this.baseUrl + '/users/search?searchValue=' + this.searchString;
+				}
+			},
+			_dataLoaded: function(data){
+				for (var i = 0; i < data.length; i++){
+					data[i].label = this._getUserLabel(data[i]);
+				}
+			},
+			_getUserLabel: function(user){
+				if (!user){
+					return '';
+				}
+				var label = this._getFullName(user);
+				label = label === '' ? user.username : label + ' - ' + user.username;
+				label = label + ' - ' + user.email;
+				return label;
+			}
+		});
+	</script>
+</dom-module>
diff --git a/app/elements/company/candidate/invite/invite-candidate-input.html b/app/elements/company/candidate/invite/invite-candidate-input.html
index afb54e84..d0d04d5a 100644
--- a/app/elements/company/candidate/invite/invite-candidate-input.html
+++ b/app/elements/company/candidate/invite/invite-candidate-input.html
@@ -4,13 +4,16 @@
 <link rel="import" href="/bower_components/paper-item/paper-item.html">
 <link rel="import" href="/bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 
+<link rel="import" href="/bower_components/vaadin-combo-box/vaadin-combo-box.html">
+<link rel="import" href="/elements/common/data-providers/user/user-search-provider.html">
+
 <dom-module id="invite-candidate-input">
 	<style  include="iron-flex">
 		:host {
 			display: block;
 		}
 		#address {
-			width: 325px;
+			width: 100%;
 			@apply(--layout-self-center);
 		}
 
@@ -26,16 +29,20 @@
 		}
 	</style>
 	<template>
+		<user-search-provider search-string="[[inputValue]]" data="{{users}}"></user-search-provider>
 		<div id="row">
-			<paper-input
+			<vaadin-combo-box
 				id="address"
-				label="person@example.com"
-				value="{{candidate.email}}"
-				type="email"
-				error-message="Address should match the example above"
-				required>
-			</paper-input>
-			<iron-icon icon="remove" on-click="_removeItem"></iron-icon>
+				value="{{email}}"
+				item-label-path="label"
+				item-value-path="email"
+				on-input-value-changed="_inputValueChanged"
+				allow-custom-value
+				items="[[users]]">
+			</vaadin-combo-box>
+			<template is="dom-if" if="{{removable}}">
+				<iron-icon icon="remove" on-click="_removeItem"></iron-icon>
+			</template>
 		</div>
 	</template>
 	<script>
@@ -46,18 +53,27 @@
 				Polymer.IronValidatableBehavior
 			],
 			properties: {
-				candidate: {
-					type: Object,
-					reflectToAttribute: true,
+				email: {
+					notify: true
+				},
+				inputValue: {
+					notify: true
+				},
+				removable: {
+					type: Boolean,
 					notify: true
 				}
+
 			},
-			validate: function(){
-				return this.$.address.validate();
+			_inputValueChanged: function(e){
+				this.inputValue = e.detail;
+				this.email = e.detail;
+				if (!!this.inputValue && this.inputValue.length < 3){
+					this.users = [];
+				}
 			},
 			_removeItem: function () {
-				this.fire('candidate-removed', this.candidate);
-				this.remove();
+				this.fire('candidate-removed', this.email);
 			}
 		});
 	</script>
diff --git a/app/elements/company/candidate/invite/invite-candidates.html b/app/elements/company/candidate/invite/invite-candidates.html
index 46e35b6c..63c841f6 100644
--- a/app/elements/company/candidate/invite/invite-candidates.html
+++ b/app/elements/company/candidate/invite/invite-candidates.html
@@ -2,81 +2,67 @@
 <link rel="import" href="/elements/common/services/user-service.html">
 
 <link rel="import" href="/bower_components/paper-button/paper-button.html">
-<link rel="import" href="/bower_components/paper-dialog/paper-dialog.html">
+<link rel="import" href="/bower_components/paper-material/paper-material.html">
 <link rel="import" href="/bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
 <link rel="import" href="/bower_components/iron-form/iron-form.html">
 <link rel="import" href="/bower_components/paper-toast/paper-toast.html">
+<link rel="import" href="/bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 
 <dom-module id="invite-candidates">
-	<style>
-		.buttonGroup {
+	<style include="iron-flex">
+		.button-group {
+			@apply(--layout-horizontal-reverse);
 			margin: 16px;
-			float: right;
 		}
 
 		#addCandidate {
 			margin-top: 10px;
 			cursor: pointer;
 		}
-
-		#dialog {
-			position: fixed;
-			top: 10%;
-		}
-		paper-dialog-scrollable {
-			height: 100%;
-		}
 	</style>
 	<template>
 		<user-service id="userService"></user-service>
 
-		<paper-dialog id="dialog" modal style="background: white;">
-			<h2>Invite candidates</h2>
-
-			<p>The address format must be: Name (first and last name or a combination) &lt;email address&gt;</p>
-			<paper-dialog-scrollable>
-				<form is="iron-form" id="form">
-					<template is="dom-repeat" items="{{candidates}}">
-						<invite-candidate-input name="inviteCandidateInput" candidate="{{item}}" required></invite-candidate-input>
-					</template>
-
-				</form>
-			</paper-dialog-scrollable>
+		<p>Start typing the candidates email address</p>
+		<form is="iron-form" id="form">
+			<template is="dom-repeat" items="{{candidates}}">
+				<invite-candidate-input name="inviteCandidateInput" email="{{item}}" required removable="{{multi}}"></invite-candidate-input>
+			</template>
+		</form>
+		<template is="dom-if" if="{{multi}}">
 			<div id="addCandidate" on-click="_addCandidate">
-					<iron-icon icon="add"></iron-icon>
-					<span>Add another candidate</span>
-				</div>
-				<div class="buttonGroup">
-					<paper-button class="primary" dialog-dismiss>Cancel</paper-button>
-					<paper-button class="primary" raised on-click="inviteCandidates">Invite
-					</paper-button>
-				</div>
-
-		</paper-dialog>
-		<paper-toast id="toast" text="Candidates invited."></paper-toast>
+				<iron-icon icon="add"></iron-icon>
+				<span>Add another candidate</span>
+			</div>
+		</template>
+		<div class="button-group">
+			<paper-button id="inviteButton" class="primary" raised on-click="inviteCandidates">Invite</paper-button>
+		</div>
 	</template>
 	<script>
 		Polymer({
 			is: 'invite-candidates',
 			properties: {
-				challenge: {
-					type: Object,
+				challengeId: {
 					notify: true
 				},
 				candidates: {
 					type: Array,
 					notify: true,
 					value: []
+				},
+				multi: {
+					type: Boolean,
+					value: false
 				}
 			},
 			listeners: {
 				'candidate-removed': '_removeCandidate',
 				'user-invited': '_userInvited'
 			},
-			toggle: function () {
+			reset: function(){
 				this._clearCandidates();
 				this._addCandidate();
-				this.$.dialog.toggle();
 			},
 			inviteCandidates: function () {
 				if (!this.$.form.validate()){
@@ -84,14 +70,13 @@ <h2>Invite candidates</h2>
 				}
 				for (var i = 0; i < this.candidates.length; i++) {
 					this.$.userService.invite({
-						'email': this.candidates[i].email,
-						'challengeId': this.candidates[i].challengeId
+						'email': this.candidates[i],
+						'challengeId': this.challengeId
 					});
 				}
-				this.$.dialog.close();
 			},
 			_addCandidate: function () {
-				this.push('candidates', {'challengeId': this.challenge.id});
+				this.push('candidates', '');
 			},
 			_removeCandidate: function(event){
 				var index = this.candidates.indexOf(event.detail);
@@ -101,7 +86,6 @@ <h2>Invite candidates</h2>
 				this.candidates = [];
 			},
 			_userInvited: function(){
-				this.$.toast.show();
 				this.fire('invitation-sent');
 			}
 		});
diff --git a/app/elements/company/challenge/challenge-detail.html b/app/elements/company/challenge/challenge-detail.html
index b6838a56..e6659856 100644
--- a/app/elements/company/challenge/challenge-detail.html
+++ b/app/elements/company/challenge/challenge-detail.html
@@ -31,27 +31,21 @@
 		#wrapper {
 			@apply(--layout-vertical);
 		}
-		#inviteWrapper {
+		.layout-horizontal {
 			@apply(--layout-horizontal);
 		}
-		#challengeName {
+
+		.flex {
 			@apply(--layout-flex);
 		}
 	</style>
 	<template>
 		<challenge-service id="challengeService" challenge="{{challenge}}"></challenge-service>
 		<invitation-service id="invitationService" invitations="{{invitations}}"></invitation-service>
-		<invite-candidates id="inviteCandidates" challenge="{{challenge}}" on-invitation-sent="_onInvitationSent"></invite-candidates>
 
 		<div id="wrapper" class="grid mainContent">
 				<paper-material class="card" elevation="1">
-					<div id="inviteWrapper">
-						<h1 id="challengeName">{{challenge.name}}</h1>
-						<paper-button on-click="_inviteCandidates">
-							<iron-icon icon="mail"></iron-icon>
-							Invite candidates
-						</paper-button>
-					</div>
+					<h1>{{challenge.name}}</h1>
 					<description-list>
 						<description-list-item label="Canonical name" value="{{challenge.canonicalName}}"></description-list-item>
 						<description-list-item label="Start date" value="{{challenge.startDate}}" date></description-list-item>
@@ -60,7 +54,19 @@ <h1 id="challengeName">{{challenge.name}}</h1>
 				</paper-material>
 
 				<paper-material class="card">
-					<h3>Invited users</h3>
+					<div class="layout-horizontal">
+						<h3 class="flex">Invited users</h3>
+						<paper-button on-click="inviteCandidates">
+							<iron-icon icon="{{inviteIcon}}"></iron-icon>
+							Invite candidates
+						</paper-button>
+					</div>
+					<invite-candidates
+						id="inviteCandidates"
+						style="display: none"
+						challenge-id="{{challenge.id}}"
+						on-invitation-sent="_onInvitationSent">
+					</invite-candidates>
 					<table style="width:100%">
 						<tr>
 							<th>Username</th>
@@ -107,6 +113,7 @@ <h3>Invited users</h3>
 			},
 			_challengeIdChanged: function(){
 				this._refresh();
+				this.inviteIcon = 'add';
 			},
 			_refresh: function(){
 				this.$.challengeService.getById(this.challengeId);
@@ -117,10 +124,19 @@ <h3>Invited users</h3>
 					return util.formatDate(date);
 				}
 			},
-			_inviteCandidates: function(){
-				this.$.inviteCandidates.toggle();
+			inviteCandidates: function(){
+				if (!this.showInvitation){
+					this.inviteIcon = 'remove';
+					this.$.inviteCandidates.style.display = '';
+					this.$.inviteCandidates.reset();
+				}else{
+					this.inviteIcon = 'add';
+					this.$.inviteCandidates.style.display = 'none';
+				}
+				this.showInvitation = !this.showInvitation;
 			},
 			_onInvitationSent: function(){
+				this.$.inviteCandidates.reset();
 				this._refresh();
 			}
 		});
diff --git a/app/elements/company/challenge/challenge-list.html b/app/elements/company/challenge/challenge-list.html
index dad52486..4dfbe77c 100644
--- a/app/elements/company/challenge/challenge-list.html
+++ b/app/elements/company/challenge/challenge-list.html
@@ -47,7 +47,6 @@ <h4>Challenges for this template</h4>
 				New challenge
 			</paper-button>
 		</paper-material>
-		<invite-candidates id="inviteCandidatesModal"></invite-candidates>
 	</template>
 	<script>
 		Polymer({
@@ -62,8 +61,7 @@ <h4>Challenges for this template</h4>
 				page('/challenge/template/'+ this.challengeTemplate.id + '/create');
 			},
 			_inviteCandidates: function (e) {
-				this.$.inviteCandidatesModal.challenge = e.model.__data__.item;
-				this.$.inviteCandidatesModal.toggle();
+				page('/challenges/' + e.model.__data__.item.id + '?invite=true');
 			},
 			_formatDate: function(date){
 				if (!!date){
diff --git a/app/elements/routing.html b/app/elements/routing.html
index 80985005..0f285999 100644
--- a/app/elements/routing.html
+++ b/app/elements/routing.html
@@ -2,6 +2,20 @@
 <script>
 window.addEventListener('WebComponentsReady', function() {
 	// COMMON
+	function parseQueryString(queryString) {
+		var params = {}, queries, temp, i, l;
+
+		// Split into key/value pairs
+		queries = queryString.split('&amp;');
+
+		// Convert the array of strings into an object
+		for ( i = 0, l = queries.length; i < l; i++ ) {
+			temp = queries[i].split('=');
+			params[temp[0]] = temp[1];
+		}
+		return params;
+	}
+
 	page('/', function() {
 		if (app.user.activeOrganization) {
 			page('/challengetemplates');
@@ -90,6 +104,10 @@
 		Polymer.Base.importHref('/elements/company/challenge/challenge-detail.html', function(){
 			var page = document.createElement('challenge-detail');
 			page.challengeId = ctx.params.id;
+			var params = parseQueryString(ctx.querystring);
+			if (params.invite){
+				page.inviteCandidates();
+			}
 			app.swapContent(page);
 		});
 	});
diff --git a/app/scripts/behaviors/providers/general-provider-behavior.js b/app/scripts/behaviors/providers/general-provider-behavior.js
index c1b1e4d0..6a3f7453 100644
--- a/app/scripts/behaviors/providers/general-provider-behavior.js
+++ b/app/scripts/behaviors/providers/general-provider-behavior.js
@@ -8,7 +8,6 @@ Behaviors.Providers.General = {
 			value: util.baseUrl()
 		},
 		data: {
-			type: Object,
 			reflectToAttribute: true,
 			notify: true
 		}
diff --git a/bower.json b/bower.json
index 865fb841..94471c65 100644
--- a/bower.json
+++ b/bower.json
@@ -16,7 +16,8 @@
     "paper-time-picker": "~1.1.1",
     "web-component-tester": "Polymer/web-component-tester#^4.2.2",
     "gold-elements": "~1.0.1",
-    "vaadin-grid": "^1.0.0"
+    "vaadin-grid": "^1.0.0",
+    "vaadin-combo-box": "~1.1.0-beta1"
   },
   "devDependencies": {
     "web-component-tester": "*",