Add validation for candidates

* add validateable behaviour to `invite-candidate-input`
coduno · Oct 21, 2015 · cbcbdd3 · cbcbdd3
1 parent 967c807
commit cbcbdd3
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 47 deletions.
diff --git a/app/elements/candidates/invite-candidate-input.html b/app/elements/candidates/invite-candidate-input.html
@@ -1,68 +1,82 @@
 <link rel="import" href="/bower_components/paper-input/all-imports.html">
+<link rel="import" href="/bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel="import" href="/bower_components/paper-menu/paper-menu.html">
+<link rel="import" href="/bower_components/paper-item/paper-item.html">
 
 <dom-module id="invite-candidate-input">
 	<style>
 		:host {
 			display: block;
 		}
-
-		#inputContainer {
-			display: table;
-		}
-
-		#inputContainer paper-input {
-			display: table-cell;
+		#address {
 			width: 300px;
 		}
 
-		#inputContainer select {
-			display: table-cell;
-			position: relative;
-			bottom: -27px;
-			margin-left: 20px;
+		#challenges {
+			width: 200px;
+			margin-left: 15px;
 		}
-
-		#inputContainer p {
-			display: table-cell;
+		option {
+			width: 200px;
+		}
+		paper-menu {
+			background-color: white;
+		}
+		#challenge {
+			max-width: 200px;
+			overflow: hidden;
 			position: relative;
-			bottom: -29px;
-			padding-left: 10px;
-			padding-right: 10px;
+			bottom: -25px;
+			margin-left: 15px;
 		}
-
-		#inputContainer iron-icon {
-			display: table-cell;
+		iron-icon {
 			position: relative;
-			bottom: -15px;
-			margin-left: 25px;
+			bottom: -5px;
+			margin-left: 15px;
 			cursor: pointer;
 		}
 	</style>
 	<template>
-		<div id="inputContainer">
-			<paper-input id="address" label="Address" value="{{candidate.Address}}"></paper-input>
+		<div class="horizontal layout">
+			<paper-input
+				class="self-center"
+				id="address"
+				label="Name <email>"
+				value="{{candidate.Address}}"
+				pattern=".*<[a-z0-9!#$%&\'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&\'*+\/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?>"
+				error-message="Incorrect format"
+				required></paper-input>
 			<template is="dom-if" if="{{isSingleChallenge}}">
-				<p>{{challenges.0.Name}}</p>
+				<p id="challenge">{{challenges.0.Name}}</p>
 			</template>
 			<template is="dom-if" if="{{!isSingleChallenge}}">
-				<select id="challenges" on-change="_setChallenge">
-					<option selected disabled>Please select a challenge</option>
-					<template is="dom-repeat" items="{{challenges}}">
-						<option value="{{item.Key}}">{{item.Name}}</option>
-					</template>
-				</select>
+				<paper-dropdown-menu  class="self-center" id="challenges" label="Challenge" selected-item="{{selectedChallenge}}" required>
+					<paper-menu class="dropdown-content">
+						<template is="dom-repeat" items="{{challenges}}">
+							<option value="{{item.Key}}">{{item.Name}}</option><br>
+						</template>
+					</paper-menu>
+				</paper-dropdown-menu>
 			</template>
-			<iron-icon icon="remove" on-click="_removeItem"></iron-icon>
+			<iron-icon class="self-center" icon="remove" on-click="_removeItem"></iron-icon>
 		</div>
-		<br>
 	</template>
 	<script>
 		Polymer({
 			is: 'invite-candidate-input',
+			behaviors: [
+				Polymer.IronFormElementBehavior,
+				Polymer.IronValidatableBehavior
+			],
 			properties: {
 				challenges: {
 					type: Array
 				},
+				selectedChallenge: {
+					type: Object,
+					notify: true,
+					observer: '_selectedChallengeChanged'
+				},
 				candidate: {
 					type: Object,
 					reflectToAttribute: true,
@@ -73,11 +87,16 @@
 					computed: '_isSingleChallenge(challenges)'
 				}
 			},
+			validate: function(){
+				return this.$.address.validate() && this.$$('#challenges').validate();
+			},
 			_isSingleChallenge: function(challenges){
 				return challenges.length === 1;
 			},
-			_setChallenge: function () {
-				this.candidate.Challenge = this.$$('#challenges').options[this.$$('#challenges').selectedIndex].value;
+			_selectedChallengeChanged: function () {
+				if (!!this.selectedChallenge){
+					this.candidate.Challenge = this.selectedChallenge.value;
+				}
 			},
 			_removeItem: function () {
 				this.fire('candidate-removed', this.candidate);

diff --git a/app/elements/candidates/invite-candidates.html b/app/elements/candidates/invite-candidates.html
@@ -14,6 +14,7 @@
 		}
 
 		#addCandidate {
+			margin-top: 10px;
 			cursor: pointer;
 		}
 
@@ -33,15 +34,15 @@ <h2>Invite candidates</h2>
 
 			<form is="iron-form" id="form">
 				<template is="dom-repeat" items="{{candidates}}">
-					<invite-candidate-input challenges="{{challenges}}" candidate="{{item}}"></invite-candidate-input>
+					<invite-candidate-input name="inviteCandidateInput" challenges="{{challenges}}" candidate="{{item}}" required></invite-candidate-input>
 				</template>
 				<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" dialog-confirm>Invite
+					<paper-button class="primary" raised on-click="inviteCandidates">Invite
 					</paper-button>
 				</div>
 			</form>
@@ -72,17 +73,16 @@ <h2>Invite candidates</h2>
 				this.$.dialog.toggle();
 			},
 			inviteCandidates: function () {
+				if (!this.$.form.validate()){
+					return;
+				}
 				for (var i = 0; i < this.candidates.length; i++) {
-					var candidate = this.candidates[i];
-					if (candidate.Address === '' || candidate.Challenge === undefined) {
-						return;
-					}
-					var toInvite = {
-						'Address': candidate.Address,
-						'Challenge': candidate.Challenge
-					};
-					this.$.userService.invite(toInvite);
+					this.$.userService.invite({
+						'Address': this.candidates[i].Address,
+						'Challenge': this.candidates[i].Challenge
+					});
 				}
+				this.$.dialog.close();
 			},
 			_addCandidate: function () {
 				if (this.challenges.length === 1) {