This is an automated email from the git hooks/post-receive script. New commit to branch develop in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit 7898850c9790be0d5b99c4ee2085233c20fd91ad Author: Kevin Morin <morin@codelutin.com> Date: Thu Apr 13 17:49:24 2017 +0200 refs #15 prise en compte de la limite de choix par vote + gestion des erreurs sur le vote --- pollen-ui-riot-js/src/main/web/i18n.json | 2 + .../src/main/web/tag/poll/Votes.tag.html | 83 +++++++++++++++------- 2 files changed, 61 insertions(+), 24 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/i18n.json b/pollen-ui-riot-js/src/main/web/i18n.json index dfcb593..946913f 100644 --- a/pollen-ui-riot-js/src/main/web/i18n.json +++ b/pollen-ui-riot-js/src/main/web/i18n.json @@ -64,6 +64,7 @@ "poll_votes_deleteVote": "Supprimer le vote ?", "poll_votes_authorPlaceHolder": "Renseignez votre nom", "poll_votes_toVote": "Voter", + "poll_votes_tooManyChoicesSelected": "Vous avez sélectionné trop de choix. Maximum :", "poll_votes_addChoice": "Ajouter un choix", "poll_votes_choices": "Choix", "poll_votes_delete": "Supprimer le vote ?", @@ -416,6 +417,7 @@ "poll_votes_deleteVote": "Delete vote?", "poll_votes_authorPlaceHolder": "Fill your name", "poll_votes_toVote": "Vote", + "poll_votes_tooManyChoicesSelected": "You selected too many choices. Maximum:", "poll_votes_addChoice": "Add choice", "poll_votes_choices": "Choices", "poll_votes_delete": "Delete vote?", diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html index e47b697..daf7f48 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html @@ -14,7 +14,7 @@ require("./Podium.tag.html"); <div class="o-field o-field--icon-left o-field--icon-right" if={poll.canVote} > <i class="fa fa-fw fa-user c-icon"></i> - <input class="c-field {c-field--error: !voteId && error['voter.name']}" + <input class="c-field {c-field--error: !voteId && error && error['voter.name']}" type="text" ref="voterName" name="voterName" @@ -23,10 +23,6 @@ require("./Podium.tag.html"); placeholder={__.authorPlaceHolder} value={userName}> </div> - <div class="c-hint--static c-hint--error" - if={!voteId && error['voter.name']}> - {error['voter.name']} - </div> <div if={!poll.canVote} class="choices-label"> {__.choices} @@ -41,13 +37,15 @@ require("./Podium.tag.html"); <input if={poll.voteCountingTypeValue.renderType==='checkbox'} class="check" type="checkbox" + onchange="{onVoteChanged}" ref="{choice.id}_voteValue" disabled={voteId}> <input if={poll.voteCountingTypeValue.renderType==='text'} - class="text c-field" + class="text c-field {c-field--error: !voteId && error && error['vote.voteValue#' + choice.id]}" type="number" - required={!voteId} - min="1" + min="{poll.voteCountingTypeValue.minimumValue}" + max="{poll.voteCountingTypeValue.maximumValue}" + onchange="{onVoteChanged}" ref="{choice.id}_voteValue" disabled={voteId}> </div> @@ -57,10 +55,19 @@ require("./Podium.tag.html"); class="c-button c-button--brand pull-right" type="submit" name="newVote" - disabled={voteId}> + disabled={voteId || tooManyChoicesSelected}> {__.toVote} </button> </div> + <div class="c-hint--static c-hint--error" if="{!voteId && tooManyChoicesSelected}"> + {__.tooManyChoicesSelected} {poll.maxChoiceNumber} + </div> + <div class="c-hint--static c-hint--error" if="{!voteId && error}"> + <div each={fields in error}> + {fields} + </div> + </div> + </form> <div class="window"> <div class="frame"> @@ -95,7 +102,7 @@ require("./Podium.tag.html"); <form if={showVotes} each={vote in poll.votes} class="vote" onsubmit="{updateVote(vote)}"> <div class="voter"> <span class="voter-name" - if={vote.id !== voteId}> + if="{vote.id !== voteId}"> <i class="fa fa-user"/> {vote.voterName} </span> @@ -105,32 +112,29 @@ require("./Podium.tag.html"); <input ref="vote_{vote.id}_voter" name="vote_{vote.id}_voter" type="text" - class="c-field {c-field--error: error['voter.name']}" + class="c-field {c-field--error: error && error['voter.name']}" value="{vote.voterName}" required={vote.id === voteId} disabled={vote.id !== voteId} placeholder="{__.authorPlaceHolder}"> </div> - <div class="c-hint--static c-hint--error" - if={vote.id === voteId && error['voter.name']}> - {error['voter.name']} - </div> </div> <div each={choice in poll.choices} class="vote-choice" > <input if={poll.voteCountingTypeValue.renderType==='checkbox' && (poll.getVoteChoice(vote, choice) || voteId === vote.id)} ref="vote_{vote.id}_{choice.id}" name="vote_{vote.id}_{choice.id}" - class="check" + class="check {c-field--error: vote.id === voteId && error && error['vote.voteValue#' + choice.id]}" type="checkbox" checked={poll.getVoteValue(vote, choice) == 1} disabled={voteId !== vote.id}> <input if={poll.voteCountingTypeValue.renderType === 'text' && (poll.getVoteChoice(vote, choice) || voteId === vote.id)} ref="vote_{vote.id}_{choice.id}" - class="text c-field" + class="text c-field {c-field--error: vote.id === voteId && error && error['vote.voteValue#' + choice.id]}" name="vote_{vote.id}_{choice.id}" type="number" + min="{poll.voteCountingTypeValue.minimumValue}" + max="{poll.voteCountingTypeValue.maximumValue}" required={vote.id === voteId} - min="1" disabled={voteId !== vote.id} value={poll.getVoteValue(vote, choice)}> </div> @@ -162,6 +166,14 @@ require("./Podium.tag.html"); </button> </span> </div> + <div class="c-hint--static c-hint--error" if="{vote.id === voteId && tooManyChoicesSelected}"> + {__.tooManyChoicesSelected} {poll.maxChoiceNumber} + </div> + <div class="c-hint--static c-hint--error" if="{vote.id === voteId && error}"> + <div each={fields in error}> + {fields} + </div> + </div> </form> </div> </div> @@ -198,6 +210,7 @@ require("./Podium.tag.html"); this.installBundle(session, "poll_votes"); let user = session.getUser(); this.userName = user && user.name; + this.tooManyChoicesSelected = false; this.poll = require("../../js/Poll.js"); this.poll.loadVotes(); @@ -207,6 +220,7 @@ require("./Podium.tag.html"); this.loaded = poll.choices !== undefined; this.poll = poll; this.choiceToAdd = this.poll.initChoice(this.choiceToAdd); + this.onVoteChanged(); this.update(); }; @@ -214,33 +228,51 @@ require("./Podium.tag.html"); this.showVotes = false; this.voteId = null; - this.error = {}; + this.error = null; this.cancelEditVote = vote => () => { this.voteId = null; vote.choice.forEach(c => { - if (this.poll.voteCountingTypeValuerenderType === "text") { + if (this.poll.voteCountingTypeValue.renderType === "text") { this.refs["vote_" + vote.id + "_" + c.choiceId].value = c.voteValue; } else { this.refs["vote_" + vote.id + "_" + c.choiceId].checked = c.voteValue === 1 ? "checked" : ""; } }); - this.error = {}; + this.error = null; }; this.onEditVote = (vote) => () => { this.voteId = vote.id; - this.error = {}; + this.error = null; }; this.getChoiceVoteValue = ref => { let input = this.refs[ref]; + if (!input) { + return 0; + } if (this.poll.voteCountingTypeValue.renderType === "text") { return input.value; } return input.checked ? 1 : 0; }; + this.onVoteChanged = () => { + if (this.loaded && this.poll.maxChoiceNumber) { + var selectedChoiceNb = 0; + this.poll.choices.forEach(c => { + var choiceValue = this.getChoiceVoteValue(c.id + "_voteValue"); + if (choiceValue && choiceValue !== '0') { + selectedChoiceNb++; + } + }); + this.tooManyChoicesSelected = selectedChoiceNb > this.poll.maxChoiceNumber; + } else { + this.tooManyChoicesSelected = false; + } + }; + this.addVote = (e) => { e.preventDefault(); e.stopPropagation(); @@ -269,7 +301,8 @@ require("./Podium.tag.html"); } }); } - this.error = {}; + this.selectedChoiceNb = 0; + this.error = null; if (this.poll.resultIsVisible) { this.poll.loadResults().then(() => { this.update(); @@ -302,7 +335,8 @@ require("./Podium.tag.html"); }); this.poll.updateVote(updateVote).then(() => { this.voteId = null; - this.error = {}; + this.selectedChoiceNb = 0; + this.error = null; if (this.poll.resultIsVisible) { this.poll.loadResults().then(() => { this.update(); @@ -324,6 +358,7 @@ require("./Podium.tag.html"); if (response) { this.poll.deleteVote(vote) .then(() => { + this.selectedChoiceNb = 0; this.update(); }); } -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.