Skip to content

Commit

Permalink
Add validation for candidates
Browse files Browse the repository at this point in the history 
 * add validateable behaviour to `invite-candidate-input`
  • Loading branch information
@pbochis
pbochis committed Oct 20, 2015
1 parent bd146f2 commit 51e4f02
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 46 deletions.
104 changes: 69 additions & 35 deletions app/elements/candidates/invite-candidate-input.html
View file
Original file line number Diff line number Diff line change
@@ -1,68 +1,84 @@
<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;
}

#inputContainer p {
display: table-cell;
option {
width: 200px;
}
#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: -35px;
margin-left: 15px;
cursor: pointer;
}x`
.invalid{
--paper-dropdown-menu-icon: {
color: red;
};
}
</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="Address"
value="{{candidate.Address}}"
pattern="[a-zA-Z ]*<[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="Please input an address according to the format above"
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$="{{selectClass}}" id="challenges" label="Challenge" selected-item="{{selectedChallenge}}">
<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>
</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,
Expand All @@ -71,13 +87,31 @@
isSingleChallenge: {
type: Boolean,
computed: '_isSingleChallenge(challenges)'
},
selectClass: {
type: String,
value: 'self-center'
}
},
selectClass: function(){
return this.invalidSelect ? 'invalid self-center' : 'self-center';
},
validate: function(){
var valid = true;
//TODO: When https://github.com/PolymerElements/paper-dropdown-menu/pull/57 gets released, revisit this.
if (!this.isSingleChallenge && this.selectedChallenge === undefined){
this.set('selectClass', 'self-center invalid');
valid= false;
}
valid = this.$.address.validate() ? valid : false;
return valid;
},
_isSingleChallenge: function(challenges){
return challenges.length === 1;
},
_setChallenge: function () {
this.candidate.Challenge = this.$$('#challenges').options[this.$$('#challenges').selectedIndex].value;
_selectedChallengeChanged: function () {
this.candidate.Challenge = this.selectedChallenge.value;
this.set('selectClass', 'self-center');
},
_removeItem: function () {
this.fire('candidate-removed', this.candidate);
Expand Down
21 changes: 10 additions & 11 deletions app/elements/candidates/invite-candidates.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,15 +33,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>
Expand Down Expand Up @@ -72,17 +72,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) {
Expand Down

0 comments on commit 51e4f02

Please sign in to comment.