branch feature/pollen-riot-js updated (9e2028e -> 3a579a0)
This is an automated email from the git hooks/post-receive script. New change to branch feature/pollen-riot-js in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git from 9e2028e i18n sur la page de création du sondage new 5905e4b Mise en place des choix de type date new 3a579a0 amélioration rendu choix de date The 2 revisions listed above as "new" are entirely new to this repository and will be described in separate emails. The revisions listed as "adds" were already present in the repository and have only been added to this reference. Detailed log of new commits: commit 3a579a09b1310f16ba4223e905dfe5e1b4ec1278 Author: Tony CHEMIT <dev@tchemit.fr> Date: Wed Feb 1 16:21:23 2017 +0100 amélioration rendu choix de date commit 5905e4bee9a29bfc5282fb898b4c1d1e9cd36b88 Author: Tony CHEMIT <dev@tchemit.fr> Date: Wed Feb 1 14:39:02 2017 +0100 Mise en place des choix de type date Summary of changes: .../pollen/services/service/ChoiceService.java | 49 ++-- .../i18n/pollen-services_en_GB.properties | 1 + .../i18n/pollen-services_fr_FR.properties | 1 + .../src/main/web/js/{ChoiceText.js => Choice.js} | 8 +- pollen-ui-riot-js/src/main/web/js/PollForm.js | 49 ++-- .../src/main/web/tag/poll/CreatePoll.tag | 4 +- .../{PollChoiceText.tag => PollChoiceDate.tag} | 91 ++++++- .../src/main/web/tag/poll/PollChoices.tag | 272 +++++++++++++++++++-- .../src/main/web/tag/poll/PollChoicesDate.tag | 51 ---- .../src/main/web/tag/poll/PollChoicesImage.tag | 51 ---- .../src/main/web/tag/poll/PollChoicesText.tag | 271 -------------------- .../src/main/web/tag/poll/PollVotes.tag | 24 +- 12 files changed, 413 insertions(+), 459 deletions(-) rename pollen-ui-riot-js/src/main/web/js/{ChoiceText.js => Choice.js} (87%) copy pollen-ui-riot-js/src/main/web/tag/poll/{PollChoiceText.tag => PollChoiceDate.tag} (63%) delete mode 100644 pollen-ui-riot-js/src/main/web/tag/poll/PollChoicesDate.tag delete mode 100644 pollen-ui-riot-js/src/main/web/tag/poll/PollChoicesImage.tag delete mode 100644 pollen-ui-riot-js/src/main/web/tag/poll/PollChoicesText.tag -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
This is an automated email from the git hooks/post-receive script. New commit to branch feature/pollen-riot-js in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit 5905e4bee9a29bfc5282fb898b4c1d1e9cd36b88 Author: Tony CHEMIT <dev@tchemit.fr> Date: Wed Feb 1 14:39:02 2017 +0100 Mise en place des choix de type date --- .../pollen/services/service/ChoiceService.java | 49 ++-- .../i18n/pollen-services_en_GB.properties | 1 + .../i18n/pollen-services_fr_FR.properties | 1 + .../src/main/web/js/{ChoiceText.js => Choice.js} | 8 +- pollen-ui-riot-js/src/main/web/js/PollForm.js | 49 ++-- .../src/main/web/tag/poll/CreatePoll.tag | 4 +- .../src/main/web/tag/poll/PollChoiceDate.tag | 176 +++++++++++++ .../src/main/web/tag/poll/PollChoices.tag | 266 ++++++++++++++++++-- .../src/main/web/tag/poll/PollChoicesDate.tag | 51 ---- .../src/main/web/tag/poll/PollChoicesImage.tag | 51 ---- .../src/main/web/tag/poll/PollChoicesText.tag | 271 --------------------- 11 files changed, 483 insertions(+), 444 deletions(-) diff --git a/pollen-services/src/main/java/org/chorem/pollen/services/service/ChoiceService.java b/pollen-services/src/main/java/org/chorem/pollen/services/service/ChoiceService.java index 7871b96..424f59a 100644 --- a/pollen-services/src/main/java/org/chorem/pollen/services/service/ChoiceService.java +++ b/pollen-services/src/main/java/org/chorem/pollen/services/service/ChoiceService.java @@ -33,6 +33,8 @@ import org.chorem.pollen.services.bean.ChoiceBean; import org.chorem.pollen.services.bean.PollenEntityRef; import org.chorem.pollen.services.service.security.PermissionVerb; +import java.text.ParseException; +import java.text.SimpleDateFormat; import java.util.Date; import java.util.List; import java.util.Set; @@ -48,6 +50,10 @@ import static org.nuiton.i18n.I18n.l; */ public class ChoiceService extends PollenServiceSupport { + + private static final SimpleDateFormat DAY_FORMAT = new SimpleDateFormat("YYYY-MM-dd"); + private static final SimpleDateFormat DAY_TIME_FORMAT = new SimpleDateFormat("YYYY-MM-dd'T'HH:mm"); + protected final Function<ChoiceBean, ChoiceBean> choiceBeanFunction = input -> { if (isNotPermitted(PermissionVerb.editChoice, input.getEntityId())) { input.setPermission(null); @@ -86,29 +92,6 @@ public class ChoiceService extends PollenServiceSupport { } - public ChoiceBean getNewChoice() { - - ChoiceBean choiceBean = new ChoiceBean(); - - // -- default values -- // - - choiceBean.setChoiceType(getPollenServiceConfig().getDefaultChoiceType()); - -// // -- creator -- // -// -// PollenUser connectedUser = getConnectedUser(); -// -// if (connectedUser != null) { -// -// creator.setChoiceValue(connectedUser.getChoiceValue()); -// creator.setEmail(connectedUser.getEmail()); -// } -// -// ChoiceBean choiceBean = toBean(ChoiceBean.class, choiceBean, choiceBeanFunction); - return choiceBean; - - } - public PollenEntityRef<Choice> addChoice(String pollId, ChoiceBean choice) throws InvalidFormException { checkNotNull(pollId); @@ -319,12 +302,24 @@ public class ChoiceService extends PollenServiceSupport { break; case DATE: - Date choiceDate; + Date choiceDate = null; if (choice.getChoiceValue() != null) { - choiceDate = new Date(Long.parseLong(choice.getChoiceValue())); + try { + choiceDate = DAY_FORMAT.parse(choice.getChoiceValue()); + + } catch (ParseException e) { + try { + choiceDate = DAY_TIME_FORMAT.parse(choice.getChoiceValue()); + } catch (ParseException e1) { + e1.printStackTrace(); + check(errors, "choiceValue", false, l(getLocale(), "pollen.error.choice.choiceDateInvalid", choice.getChoiceValue())); + } + } + if (choiceDate != null) { + boolean dateAdded = choiceNames.add(String.valueOf(choiceDate.getTime())); + check(errors, "choiceValue", dateAdded, l(getLocale(), "pollen.error.choice.choiceDateExist")); + } - boolean dateAdded = choiceNames.add(String.valueOf(choiceDate.getTime())); - check(errors, "choiceValue", dateAdded, l(getLocale(), "pollen.error.choice.choiceDateExist")); } else { check(errors, "choiceValue", false, l(getLocale(), "pollen.error.choice.choiceDateEmpty")); } diff --git a/pollen-services/src/main/resources/i18n/pollen-services_en_GB.properties b/pollen-services/src/main/resources/i18n/pollen-services_en_GB.properties index 406d376..8494c57 100644 --- a/pollen-services/src/main/resources/i18n/pollen-services_en_GB.properties +++ b/pollen-services/src/main/resources/i18n/pollen-services_en_GB.properties @@ -30,6 +30,7 @@ pollen.configurqtion.uiUrlPollVoteEdit=Url to edit a vote on a poll pollen.configurqtion.uiUrlUserValidate=Url de validate user account pollen.error.choice.choiceDateEmpty=choice date can not be empty pollen.error.choice.choiceDateExist=choice date already used in this list +pollen.error.choice.choiceDateInvalid=Date format %s is not valid pollen.error.choice.choiceNameEmpty=choice name can not be empty pollen.error.choice.choiceNameExist=choice name already used in this list pollen.error.choice.choiceTypeEmpty=choiceType can not be null diff --git a/pollen-services/src/main/resources/i18n/pollen-services_fr_FR.properties b/pollen-services/src/main/resources/i18n/pollen-services_fr_FR.properties index 3d49724..fe873fa 100644 --- a/pollen-services/src/main/resources/i18n/pollen-services_fr_FR.properties +++ b/pollen-services/src/main/resources/i18n/pollen-services_fr_FR.properties @@ -30,6 +30,7 @@ pollen.configurqtion.uiUrlPollVoteEdit=Url d'édition de vote sur un sondage pollen.configurqtion.uiUrlUserValidate=Url de validation d'un compte utilisateur pollen.error.choice.choiceDateEmpty=La date ne peut pas être vide pollen.error.choice.choiceDateExist=La date exist déjà utilisé sur ce sondage +pollen.error.choice.choiceDateInvalid=Le format de la date %s n'est pas valide pollen.error.choice.choiceNameEmpty=Le nom du choix ne peut pas être vide pollen.error.choice.choiceNameExist=Le nom du choix est déjà utilisé sur ce sondage pollen.error.choice.choiceTypeEmpty=Le type du choix doit être défini diff --git a/pollen-ui-riot-js/src/main/web/js/ChoiceText.js b/pollen-ui-riot-js/src/main/web/js/Choice.js similarity index 87% rename from pollen-ui-riot-js/src/main/web/js/ChoiceText.js rename to pollen-ui-riot-js/src/main/web/js/Choice.js index c7c7645..b8a26b2 100644 --- a/pollen-ui-riot-js/src/main/web/js/ChoiceText.js +++ b/pollen-ui-riot-js/src/main/web/js/Choice.js @@ -18,14 +18,14 @@ * along with this program. If not, see <http://www.gnu.org/licenses/>. * #L% */ -class ChoiceText { +class Choice { - constructor(name, description, id) { + constructor(type, name, description, id) { this.choiceValue = name; this.description = description; - this.choiceType = 'TEXT'; + this.choiceType = type; this.id = id; } } -module.exports = ChoiceText; +module.exports = Choice; diff --git a/pollen-ui-riot-js/src/main/web/js/PollForm.js b/pollen-ui-riot-js/src/main/web/js/PollForm.js index 8e70674..3b0b8e5 100644 --- a/pollen-ui-riot-js/src/main/web/js/PollForm.js +++ b/pollen-ui-riot-js/src/main/web/js/PollForm.js @@ -19,7 +19,7 @@ * #L% */ let singleton = require("./Singleton"); -let ChoiceText = require('./ChoiceText'); +let Choice = require('./Choice'); let route = require("riot-route"); class PollForm { @@ -58,25 +58,32 @@ class PollForm { } this.model.voteCountingType = "1"; this.model.participant = []; - this.choices = [ - new ChoiceText("Mozart", "Requiem is so powerfull"), - new ChoiceText("Schubert", "Truit is so nice"), - new ChoiceText("Malher", "So deep, so dark...")]; + + switch (this.choiceType) { + case 'text': + this.model.choiceType = 'TEXT'; + this.choices = [ + new Choice(this.model.choiceType, "Mozart", "Requiem is so powerfull"), + new Choice(this.model.choiceType, "Schubert", "Truit is so nice"), + new Choice(this.model.choiceType, "Malher", "So deep, so dark...") + ]; + break; + case 'date': + this.model.choiceType = 'DATE'; + this.choices = [ + new Choice(this.model.choiceType, "2017-01-31", "Requiem is so powerfull"), + new Choice(this.model.choiceType, "2017-02-01", "Truit is so nice"), + new Choice(this.model.choiceType, "2017-02-02", "So deep, so dark...") + ]; + break; + case 'image': + this.model.choiceType = 'RESOURCE'; + break; + } }); } create() { - switch (this.choiceType) { - case 'text': - this.model.choiceType = 'TEXT'; - break; - case 'date': - this.model.choiceType = 'DATE'; - break; - case 'image': - this.model.choiceType = 'RESOURCE'; - break; - } console.info("form before create"); console.info(this.form); return this.service.create(this.model, this.choices).then((result) => { @@ -94,7 +101,7 @@ class PollForm { previousStep() { - console.info("prevousStep:: " + this.step); + console.info("previousStep:: " + this.step); this.setStep(this.step - 1); } @@ -124,7 +131,7 @@ class PollForm { this.FormHelper.fillForm(form, this.model); } - fromTextChoices(form) { + fromDomToChoices(form) { let choices = []; let map = {}; @@ -148,8 +155,8 @@ class PollForm { let text = map['choice' + i]; let description = map['description' + i]; let id = map['id' + i]; - if (this.type!='add' || !id) { - choices.push(new ChoiceText(text, description, id)); + if (this.type != 'add' || !id) { + choices.push(new Choice(this.model.choiceType, text, description, id)); } } console.info("FromTextChoices"); @@ -180,7 +187,7 @@ class PollForm { let text = map['choice' + index]; let description = map['description' + index]; let id = map['id' + index]; - return new ChoiceText(text, description, id); + return new Choice(this.model.choiceType, text, description, id); } setStep(step) { diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/CreatePoll.tag b/pollen-ui-riot-js/src/main/web/tag/poll/CreatePoll.tag index 975f6b6..af39329 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/CreatePoll.tag +++ b/pollen-ui-riot-js/src/main/web/tag/poll/CreatePoll.tag @@ -113,7 +113,7 @@ require("./PollCreated.tag"); <i class="fa fa-circle-o fa-stack-2x"></i> <strong class="fa-stack-1x">5</strong> </span> - {__.summary} + {__.header_summary} </div> </div> <div> @@ -129,7 +129,7 @@ require("./PollCreated.tag"); this.form.choiceType = opts.choiceType; this.steps = { 0: 'polldescription', - 1: 'pollchoices' + this.form.choiceType, + 1: 'pollchoices', 2: 'pollsettings', 3: 'pollvoters', 4: 'pollcreated' diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/PollChoiceDate.tag b/pollen-ui-riot-js/src/main/web/tag/poll/PollChoiceDate.tag new file mode 100644 index 0000000..ddfa367 --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/poll/PollChoiceDate.tag @@ -0,0 +1,176 @@ +/*- +* #%L +* Pollen :: UI (Riot Js) +* %% +* Copyright (C) 2009 - 2017 CodeLutin +* %% +* This program is free software: you can redistribute it and/or modify +* it under the terms of the GNU Affero General Public License as published by +* the Free Software Foundation, either version 3 of the License, or +* (at your option) any later version. +* +* This program is distributed in the hope that it will be useful, +* but WITHOUT ANY WARRANTY; without even the implied warranty of +* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +* GNU General Public License for more details. +* +* You should have received a copy of the GNU Affero General Public License +* along with this program. If not, see <http://www.gnu.org/licenses/>. +* #L% +*/ +<PollChoiceDate> + + <div class="choice-body"> + + <div class="choice-actions"> + <div show="{mode =='edit' && !editing}" id="{choice.id}"> + <a onclick="{deleteChoice}"><i class="fa fa-trash danger fa-15x"/></a> + <a onclick="{onEditChoice}"><i class="fa fa-pencil-square-o fa-15x"/></a> + </div> + <div show="{editing}"> + <a onclick="{cancelEditChoice}" class="danger"> + <i class="fa fa-remove fa-15x"/> + </a> + <button class="icon" type="submit" onclick="{prepareSave}"> + <i class="fa fa-check fa-15x"/> + </button> + </div> + </div> + <div ref="edit_choice" id="edit_choice_{number}" class="choice-container"> + <div class="choice-container-child"> + <label class="choice-wide" for="choice{number}">{__.label} {number + 1}</label> + <label class="choice-wider" if="{number == 0}">{__.description}</label> + <label class="choice-wider" if="{number > 0}"/> + </div> + <div class="choice-container-child"> + <input type="hidden" name="id{number}" value="{choice.id}"> + <div class="choice-inputs"> + <input type="date" ref="choice" name="choice{number}" value="{choice.choiceValue}" + disabled="{edit && !editing && choice.choiceValue?'disabled':''}" + class="choice-wide {edit && !editing && choice.choiceValue?'choice-disabled':''}"> + <input type="text" ref="description" name="description{number}" value="{choice.description}" + disabled="{edit && !editing && choice.choiceValue?'disabled':''}" + class="choice-wider {edit && !editing && choice.choiceValue?'choice-disabled':''}"> + </div> + </div> + </div> + </div> + + <script> + this.installBundle(opts.session, "poll_choices"); + this.number = parseInt(opts.number); + this.mode = opts.mode; + this.edit = opts.mode == 'add' || opts.mode == 'edit'; + this.choice = opts.choice; + this.on('mount', () => { + if (this.number == 0 || this.edit) { + this.refs.choice.required = "required"; + } + if (this.edit) { + this.refs.edit_choice.classList.add('choice-view'); + } + }); + + this.prepareSave = () => { + this.$choice = { + choiceValue: this.refs.choice.value, + description: this.refs.description.value + }; + }; + this.onEditChoice = () => { + this.editing = true; + let ref = this.refs['edit_choice']; + ref.classList.add("choice-edit"); + ref.classList.remove("choice-view"); + this.trigger('editChoice', this.number); + Object.assign(this.$choice = {}, this.choice); + console.info(this.$choice); + }; + + this.cancelEditChoice = () => { + if (this.editing) { + let ref = this.refs['edit_choice']; + ref.classList.remove("choice-edit"); + ref.classList.add("choice-view"); + Object.assign(this.choice, this.$choice); + console.info(this.choice); + this.refs.choice.value = this.choice.choiceValue; + this.refs.description.value = this.choice.description; + + } + this.editing = false; + this.trigger('cancelEditChoice', this.number); + }; + + this.deleteChoice = () => { + if (confirm('Delete choice?')) { + this.trigger('deleteChoice', this.number); + } + }; + + </script> + + <style> + + .icon { + border-style: none; + background-color: white; + cursor: pointer; + color: #13a2ff; + } + + .danger { + color: red; + } + + .choice-wide { + width: 440px; + } + + .choice-wider { + width: 640px; + } + + .choice-actions { + padding-right: 5px; + } + + .choice-body { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + } + + .choice-container { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + } + + .choice-container-child { + display: flex; + } + + .choice-inputs { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + } + + .choice-disabled { + cursor: not-allowed; + } + + .choice-edit { + border: 2px solid #13a2ff; + } + + .choice-view { + border: 2px solid white; + } + + </style> +</PollChoiceDate> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/PollChoices.tag b/pollen-ui-riot-js/src/main/web/tag/poll/PollChoices.tag index 51144a2..0d66ab0 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/PollChoices.tag +++ b/pollen-ui-riot-js/src/main/web/tag/poll/PollChoices.tag @@ -1,11 +1,27 @@ -require("./PollChoicesText.tag"); -require("./PollChoicesImage.tag"); -require("./PollChoicesDate.tag"); +require('./PollChoiceText.tag'); +require('./PollChoiceDate.tag'); <PollChoices> - <div ref="choicecontent"/> + <div if="{choicePeriod}" class="legend"> + {__.choicePeriod} {choicePeriod} + </div> + + <form ref="formDom" onsubmit="{action}"> + <div ref="choicesContainer"/> + <br/> + <div if="{(form.mode == 'add' || form.mode == 'edit') && !editing}" class="choices-actions"> + <a class="button mainColorBackground" onclick="{addOneChoice}"> <i class="fa fa-plus"/>{__.moreChoice}</a> + </div> + <div if="{form.mode == 'create'}" class="choices-actions"> + <a class="button" onclick="{addMoreChoices}"> <i class="fa fa-plus"/>{__.moreChoices}</a> + </div> + <div if="{form.mode == 'create'}" class="choices-actions"> + <a class="button" onclick="{previousStep}">{__.previous}</a> + <input type="submit" class="button mainColorBackground" value="{__.next}"> + </div> + </form> <script> if (opts.form) { - this.form = form; + this.form = opts.form; } else { this.form = require('../../js/PollForm'); this.form.model = opts.poll; @@ -27,7 +43,7 @@ require("./PollChoicesDate.tag"); } } - console.info("form mode: "+this.form.mode); + console.info("form mode: " + this.form.mode); this.form.choices = []; } if (opts.choiceType) { @@ -38,6 +54,28 @@ require("./PollChoicesDate.tag"); console.info(this.choiceType); console.info(this.form); + this.session = opts.session; + this.choiceTags = {}; + let moment = require('moment'); + this.i18nCallback = (locale) => { + moment.locale(locale); + this.choicePeriod = ''; + if (this.form.model.beginChoiceDate) { + this.choicePeriod += moment(this.form.model.beginChoiceDate).format('LLL'); + } + if (this.form.model.endChoiceDate) { + this.choicePeriod += ' - ' + moment(this.form.model.endChoiceDate).format('LLL'); + } + if (this.choicePeriod != '') { + this.choicePeriod = '( ' + this.choicePeriod + ' )'; + } + this.update({choicePeriod: this.choicePeriod}); + }; + + this.installBundle(opts.session, "poll_choices", this.i18nCallback); + this.i18nCallback(); + let choiceService = require('../../js/ChoiceService'); + this.on('mount', () => { if (opts.poll) { @@ -48,21 +86,215 @@ require("./PollChoicesDate.tag"); console.info("Choices::"); console.info(this.form.choices); - riot.mount(this.refs.choicecontent, 'pollchoices' + this.form.choiceType, { - form: this.form, - session: opts.session, - parentTag: this - }); - + this.finalizeInit(); }); } else { - riot.mount(this.refs.choicecontent, 'pollchoices' + this.form.choiceType, { - form: this.form, - session: opts.session, - parentTag: this - }); + + this.finalizeInit(); + } }); + this.finalizeInit = () => { + this.formDom = this.refs.formDom; + this.choicesCount = this.form.choices.length - 1; + if (this.form.mode == 'create') { + + // must fill to obtain a 5-multiple + + if (this.choicesCount == -1) { + this.choicesCount = 5; + } + + while (this.choicesCount % 5 != 0) { + this.choicesCount++; + } + this.choicesCount--; + + } + + console.info("init with " + this.form.choices.length + " choices"); + console.info(this.form.choices); + console.info("choicesCount:: " + this.choicesCount); + + for (let i = 0; i <= this.choicesCount; i++) { + this.addChoice(i); + } + this.update(); + + }; + + this.addOneChoice = (e) => { + this.addChoice(); + let choiceTag = this.choiceTags[this.choicesCount]; + choiceTag.onEditChoice(); + choiceTag.update(); + }; + + this.addChoice = (choiceNumber) => { + if (!choiceNumber && choiceNumber != 0) { + this.choicesCount++; + choiceNumber = this.choicesCount; + } + + let choiceDom = document.createElement("div"); + choiceDom.id = 'choice_' + choiceNumber; + this.refs.choicesContainer.appendChild(choiceDom); + + let tag = riot.mount(choiceDom, 'pollchoice' + this.form.choiceType, { + number: choiceNumber, + choice: this.form.choices[choiceNumber] || {choiceValue: '', description: ''}, + mode: this.form.mode, + session: this.session + })[0]; + this.choiceTags[choiceNumber] = tag; + + tag.on('editChoice', choiceNumber => { + if (this.editChoiceNumber || this.editChoiceNumber == 0) { + console.info("remove old edit choice id " + this.editChoiceNumber); + let choiceTag = this.choiceTags[this.editChoiceNumber]; + choiceTag.cancelEditChoice(); + choiceTag.update(); + } + this.editChoiceNumber = choiceNumber; + this.editing = true; + this.update({editing: this.editing}); + }); + + tag.on('cancelEditChoice', choiceNumber => { + + if (!this.choiceTags[this.editChoiceNumber].choice.id) { + + // remove choice + delete this.choiceTags[this.editChoiceNumber]; + this.choicesCount--; + let dom = document.getElementById('choice_' + choiceNumber); + dom.parentNode.removeChild(dom); + } + this.editChoiceNumber = null; + this.editing = false; + this.update({editing: this.editing}); + }); + + tag.on('deleteChoice', choiceNumber => { + + let ref = this.choiceTags[choiceNumber]; + let choiceId = ref.choice.id; + choiceService.deleteChoice(this.form.model.id, choiceId, this.form.model.permission).then(result => { + + console.info('after delete choice ' + choiceNumber + " / " + this.choicesCount); + + delete this.choiceTags[choiceNumber]; + + this.form.choices.splice(choiceNumber, 1); + + let dom = document.getElementById('choice_' + choiceNumber); + dom.parentNode.removeChild(dom); + + while (choiceNumber < this.choicesCount) { + console.info("update choices for number: " + choiceNumber); + console.info(this.choiceTags); + let c = this.choiceTags[choiceNumber] = this.choiceTags[choiceNumber + 1]; + c.number--; + c.update({number: c.number}); + delete this.choiceTags[choiceNumber + 1]; + choiceNumber++; + } + + this.trigger('count', this.choicesCount); + this.choicesCount--; + }); + + }); + }; + + this.addMoreChoices = () => { + for (let i = 0; i < 5; i++) { + this.addChoice(); + } + }; + + this.previousStep = (e) => { + this.form.fromDomToChoices(this.formDom); + this.form.previousStep(); + }; + + this.action = (e) => { + e.preventDefault(); + e.stopPropagation(); + if (this.form.mode == 'create') { + + this.form.fromDomToChoices(this.formDom); + this.form.nextStep(); + + } else { + let choice = this.form.getTextChoice(this.formDom, this.editChoiceNumber); + + if (choice.id) { + + // update + choiceService.updateChoice(this.form.model.id, choice, this.form.model.permission).then(result => { + + console.info('after update choice'); + console.info(result); + + let ref = this.choiceTags[this.editChoiceNumber]; + ref.choice.description = choice.description; + ref.choice.choiceValue = choice.choiceValue; + + ref.cancelEditChoice(); + ref.update(); + + }); + + } else { + + // add + choiceService.addChoice(this.form.model.id, choice, this.form.model.permission).then(result => { + + console.info('after add choice'); + console.info(result); + choice.id = result.id; + + let ref = this.choiceTags[this.editChoiceNumber]; + ref.choice.id = result.id; + ref.choice.description = choice.description; + ref.choice.choiceValue = choice.choiceValue; + + this.form.choices.push(choice); + + ref.cancelEditChoice(); + ref.update(); + + this.choicesCount++; + this.trigger('count', this.choicesCount); + }); + + } + + } + }; + </script> + + <style> + form { + margin-left: 20px; + } + + a.button > i { + margin-right: 10px; + } + + .choices-actions { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + } + + .choices-actions > a, .choices-actions > input { + margin: 5px; + } + </style> </PollChoices> \ No newline at end of file diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/PollChoicesDate.tag b/pollen-ui-riot-js/src/main/web/tag/poll/PollChoicesDate.tag deleted file mode 100644 index 779f147..0000000 --- a/pollen-ui-riot-js/src/main/web/tag/poll/PollChoicesDate.tag +++ /dev/null @@ -1,51 +0,0 @@ -/*- - * #%L - * Pollen :: UI (Riot Js) - * %% - * Copyright (C) 2009 - 2017 CodeLutin - * %% - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - * #L% - */ -<PollChoicesDate> - <div> - Choix du sondage (type date) - </div> - <div class="actions"> - <a class="button" onclick="{previousStep}">Précédent</a> - <a class="button" onclick="{nextStep}">Suivant</a> - </div> - - <script> - this.form = opts.form; - this.previousStep = (e) => { - this.form.previousStep(); - }; - this.nextStep = (e) => { - this.form.nextStep(); - }; - </script> - <style> - .actions { - margin: 50px 10px 10px; - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: center; - } - .actions > a { - margin: 5px; - } - </style> -</PollChoicesDate> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/PollChoicesImage.tag b/pollen-ui-riot-js/src/main/web/tag/poll/PollChoicesImage.tag deleted file mode 100644 index 2c214b4..0000000 --- a/pollen-ui-riot-js/src/main/web/tag/poll/PollChoicesImage.tag +++ /dev/null @@ -1,51 +0,0 @@ -/*- - * #%L - * Pollen :: UI (Riot Js) - * %% - * Copyright (C) 2009 - 2017 CodeLutin - * %% - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - * #L% - */ -<PollChoicesImage> - <div> - Choix du sondage (type image) - </div> - <div class="actions"> - <a class="button" onclick="{previousStep}">Précédent</a> - <a class="button" onclick="{nextStep}">Suivant</a> - </div> - - <script> - this.form = opts.form; - this.previousStep = (e) => { - this.form.previousStep(); - }; - this.nextStep = (e) => { - this.form.nextStep(); - }; - </script> - <style> - .actions { - margin: 50px 10px 10px; - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: center; - } - .actions > a { - margin: 5px; - } - </style> -</PollChoicesImage> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/PollChoicesText.tag b/pollen-ui-riot-js/src/main/web/tag/poll/PollChoicesText.tag deleted file mode 100644 index 2abc866..0000000 --- a/pollen-ui-riot-js/src/main/web/tag/poll/PollChoicesText.tag +++ /dev/null @@ -1,271 +0,0 @@ -/*- -* #%L -* Pollen :: UI (Riot Js) -* %% -* Copyright (C) 2009 - 2017 CodeLutin -* %% -* This program is free software: you can redistribute it and/or modify -* it under the terms of the GNU Affero General Public License as published by -* the Free Software Foundation, either version 3 of the License, or -* (at your option) any later version. -* -* This program is distributed in the hope that it will be useful, -* but WITHOUT ANY WARRANTY; without even the implied warranty of -* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -* GNU General Public License for more details. -* -* You should have received a copy of the GNU Affero General Public License -* along with this program. If not, see <http://www.gnu.org/licenses/>. -* #L% -*/ -require('./PollChoiceText.tag'); -<PollChoicesText> - <div if="{choicePeriod}" class="legend"> - {__.choicePeriod} {choicePeriod} - </div> - - <form ref="formDom" onsubmit="{action}"> - <div ref="choicesContainer"/> - <br/> - <div if="{(form.mode == 'add' || form.mode == 'edit') && !editing}" class="choices-actions"> - <a class="button mainColorBackground" onclick="{addOneChoice}"> <i class="fa fa-plus"/>{__.moreChoice}</a> - </div> - <div if="{form.mode == 'create'}" class="choices-actions"> - <a class="button" onclick="{addMoreChoices}"> <i class="fa fa-plus"/>{__.moreChoices}</a> - </div> - <div if="{form.mode == 'create'}" class="choices-actions"> - <a class="button" onclick="{previousStep}">{__.previous}</a> - <input type="submit" class="button mainColorBackground" value="{__.next}"> - </div> - </form> - - <script> - this.form = opts.form; - console.info(this.form.model); - this.session = opts.session; - this.parentTag = opts.parentTag; - this.choiceTags = {}; - let moment = require('moment'); - this.i18nCallback = (locale) => { - moment.locale(locale); - this.choicePeriod = ''; - if (this.form.model.beginChoiceDate) { - this.choicePeriod += moment(this.form.model.beginChoiceDate).format('LLL'); - } - if (this.form.model.endChoiceDate) { - this.choicePeriod += ' - ' + moment(this.form.model.endChoiceDate).format('LLL'); - } - if (this.choicePeriod != '') { - this.choicePeriod = '( ' + this.choicePeriod + ' )'; - } - this.update({choicePeriod: this.choicePeriod}); - }; - - this.installBundle(opts.session, "poll_choices", this.i18nCallback); - this.i18nCallback(); - let choiceService = require('../../js/ChoiceService'); - - this.on('mount', () => { - this.formDom = this.refs.formDom; - this.choicesCount = this.form.choices.length - 1; - if (this.form.mode == 'create') { - - // must fill to obtain a 5-multiple - - if (this.choicesCount == -1) { - this.choicesCount = 5; - } - - while (this.choicesCount % 5 != 0) { - this.choicesCount++; - } - this.choicesCount--; - - } - - console.info("init with " + this.form.choices.length + " choices"); - console.info(this.form.choices); - console.info("choicesCount:: " + this.choicesCount); - - for (let i = 0; i <= this.choicesCount; i++) { - this.addChoice(i); - } - this.update(); - - }); - - this.addOneChoice = (e) => { - this.addChoice(); - let choiceTag = this.choiceTags[this.choicesCount]; - choiceTag.onEditChoice(); - choiceTag.update(); - }; - - this.addChoice = (choiceNumber) => { - if (!choiceNumber && choiceNumber != 0) { - this.choicesCount++; - choiceNumber = this.choicesCount; - } - - let choiceDom = document.createElement("div"); - choiceDom.id = 'choice_' + choiceNumber; - this.refs.choicesContainer.appendChild(choiceDom); - - let tag = riot.mount(choiceDom, 'pollchoicetext', { - number: choiceNumber, - choice: this.form.choices[choiceNumber] || {choiceValue: '', description: ''}, - mode: this.form.mode, - session: this.session - })[0]; - this.choiceTags[choiceNumber] = tag; - - tag.on('editChoice', choiceNumber => { - if (this.editChoiceNumber || this.editChoiceNumber == 0) { - console.info("remove old edit choice id " + this.editChoiceNumber); - let choiceTag = this.choiceTags[this.editChoiceNumber]; - choiceTag.cancelEditChoice(); - choiceTag.update(); - } - this.editChoiceNumber = choiceNumber; - this.editing = true; - this.update({editing:this.editing}); - }); - - tag.on('cancelEditChoice', choiceNumber => { - - if (!this.choiceTags[this.editChoiceNumber].choice.id) { - - // remove choice - delete this.choiceTags[this.editChoiceNumber]; - this.choicesCount--; - let dom = document.getElementById('choice_' + choiceNumber); - dom.parentNode.removeChild(dom); - } - this.editChoiceNumber = null; - this.editing = false; - this.update({editing:this.editing}); - }); - - tag.on('deleteChoice', choiceNumber => { - - let ref = this.choiceTags[choiceNumber]; - let choiceId = ref.choice.id; - choiceService.deleteChoice(this.form.model.id, choiceId, this.form.model.permission).then(result => { - - console.info('after delete choice ' + choiceNumber + " / " + this.choicesCount); - - delete this.choiceTags[choiceNumber]; - - this.form.choices.splice(choiceNumber, 1); - - let dom = document.getElementById('choice_' + choiceNumber); - dom.parentNode.removeChild(dom); - - while (choiceNumber < this.choicesCount) { - console.info("update choices for number: " + choiceNumber); - console.info(this.choiceTags); - let c = this.choiceTags[choiceNumber] = this.choiceTags[choiceNumber + 1]; - c.number--; - c.update({number: c.number}); - delete this.choiceTags[choiceNumber + 1]; - choiceNumber++; - } - - this.parentTag.trigger('count', this.choicesCount); - this.choicesCount--; - }); - - }); - }; - - this.addMoreChoices = () => { - for (let i = 0; i < 5; i++) { - this.addChoice(); - } - }; - - this.previousStep = (e) => { - this.form.fromTextChoices(this.formDom); - this.form.previousStep(); - }; - - this.action = (e) => { - e.preventDefault(); - e.stopPropagation(); - if (this.form.mode == 'create') { - - this.form.fromTextChoices(this.formDom); - this.form.nextStep(); - - } else { - let choice = this.form.getTextChoice(this.formDom, this.editChoiceNumber); - - if (choice.id) { - - // update - choiceService.updateChoice(this.form.model.id, choice, this.form.model.permission).then(result => { - - console.info('after update choice'); - console.info(result); - - let ref = this.choiceTags[this.editChoiceNumber]; - ref.choice.description = choice.description; - ref.choice.choiceValue = choice.choiceValue; - - ref.cancelEditChoice(); - ref.update(); - - }); - - } else { - - // add - choiceService.addChoice(this.form.model.id, choice, this.form.model.permission).then(result => { - - console.info('after add choice'); - console.info(result); - choice.id = result.id; - - let ref = this.choiceTags[this.editChoiceNumber]; - ref.choice.id = result.id; - ref.choice.description = choice.description; - ref.choice.choiceValue = choice.choiceValue; - - this.form.choices.push(choice) - - ref.cancelEditChoice(); - ref.update(); - - this.choicesCount++; - this.parentTag.trigger('count', this.choicesCount); - }); - - } - - } - }; - - </script> - <style> - - form { - margin-left: 20px; - } - - a.button > i { - margin-right: 10px; - } - - .choices-actions { - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: center; - } - - .choices-actions > a, .choices-actions > input { - margin: 5px; - } - - </style> -</PollChoicesText> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
This is an automated email from the git hooks/post-receive script. New commit to branch feature/pollen-riot-js in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit 3a579a09b1310f16ba4223e905dfe5e1b4ec1278 Author: Tony CHEMIT <dev@tchemit.fr> Date: Wed Feb 1 16:21:23 2017 +0100 amélioration rendu choix de date --- pollen-ui-riot-js/src/main/web/js/PollForm.js | 4 +- .../src/main/web/tag/poll/PollChoiceDate.tag | 87 ++++++++++++++++++++-- .../src/main/web/tag/poll/PollChoices.tag | 8 +- .../src/main/web/tag/poll/PollVotes.tag | 24 ++++-- 4 files changed, 107 insertions(+), 16 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/js/PollForm.js b/pollen-ui-riot-js/src/main/web/js/PollForm.js index 3b0b8e5..6644259 100644 --- a/pollen-ui-riot-js/src/main/web/js/PollForm.js +++ b/pollen-ui-riot-js/src/main/web/js/PollForm.js @@ -71,8 +71,8 @@ class PollForm { case 'date': this.model.choiceType = 'DATE'; this.choices = [ - new Choice(this.model.choiceType, "2017-01-31", "Requiem is so powerfull"), - new Choice(this.model.choiceType, "2017-02-01", "Truit is so nice"), + new Choice(this.model.choiceType, "2017-01-31T13:45", "Requiem is so powerfull"), + new Choice(this.model.choiceType, "2017-02-01T03:45", "Truit is so nice"), new Choice(this.model.choiceType, "2017-02-02", "So deep, so dark...") ]; break; diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/PollChoiceDate.tag b/pollen-ui-riot-js/src/main/web/tag/poll/PollChoiceDate.tag index ddfa367..69e5137 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/PollChoiceDate.tag +++ b/pollen-ui-riot-js/src/main/web/tag/poll/PollChoiceDate.tag @@ -45,9 +45,20 @@ <div class="choice-container-child"> <input type="hidden" name="id{number}" value="{choice.id}"> <div class="choice-inputs"> - <input type="date" ref="choice" name="choice{number}" value="{choice.choiceValue}" - disabled="{edit && !editing && choice.choiceValue?'disabled':''}" - class="choice-wide {edit && !editing && choice.choiceValue?'choice-disabled':''}"> + <div class="choice-wide choice-date"> + <input type="hidden" ref="choice" name="choice{number}" id="choice{number}" + value="{choice.choiceValue}"> + <input type="date" ref="date" name="date{number}" id="date{number}" + value="{choice.date}" + disabled="{edit && !editing && choice.choiceValue?'disabled':''}" + class="choice-wide {edit && !editing && choice.choiceValue?'choice-disabled':''}"> + <i class="fa fa-clock-o fa-15x"/> + <input type="checkbox" ref="timed" checked="{timed?'checked':''}" onclick="{toggleTimed}" + disabled="{edit && !editing && choice.choiceValue?'disabled':''}"> + <input type="time" ref="time" name="time{number}" id="time{number}" value="{choice.time}" + disabled="{edit && !editing && choice.time || !timed?'disabled':''}" + required="{timed?'required':''}"> + </div> <input type="text" ref="description" name="description{number}" value="{choice.description}" disabled="{edit && !editing && choice.choiceValue?'disabled':''}" class="choice-wider {edit && !editing && choice.choiceValue?'choice-disabled':''}"> @@ -62,6 +73,30 @@ this.mode = opts.mode; this.edit = opts.mode == 'add' || opts.mode == 'edit'; this.choice = opts.choice; + + opts.emitter.on('prepareSave', () => { + let choiceValue = this.refs.date.value; + if (choiceValue && this.timed && this.refs.time.value) { + choiceValue += 'T' + this.refs.time.value; + } + this.refs.choice.value = choiceValue; + }); + + let choiceValue = this.choice.choiceValue; + if (choiceValue) { + let index = choiceValue.indexOf('T'); + if (index == -1) { + this.choice.date = choiceValue; + this.timed = false; + } else { + this.choice.date = choiceValue.substring(0, index); + this.choice.time = choiceValue.substring(index + 1); + this.timed = true; + } + console.info('init choice: (' + this.timed + ')'); + console.info(this.choice); + } + this.on('mount', () => { if (this.number == 0 || this.edit) { this.refs.choice.required = "required"; @@ -71,9 +106,21 @@ } }); + this.toggleTimed = () => { + this.timed = !this.timed; + }; + this.prepareSave = () => { + let date = this.refs.choice.value; + let time = this.refs.time.value; + let choiceValue = date; + if (this.timed) { + choiceValue += 'T' + time; + } this.$choice = { - choiceValue: this.refs.choice.value, + date: date, + time: time, + choiceValue: choiceValue, description: this.refs.description.value }; }; @@ -94,7 +141,9 @@ ref.classList.add("choice-view"); Object.assign(this.choice, this.$choice); console.info(this.choice); - this.refs.choice.value = this.choice.choiceValue; + this.refs.choice.value = this.choice.date; + this.refs.time.value = this.choice.time; + this.timed = !!this.choice.time; this.refs.description.value = this.choice.description; } @@ -112,6 +161,10 @@ <style> + .fa-15x { + font-size: 1.5em; + } + .icon { border-style: none; background-color: white; @@ -156,8 +209,15 @@ .choice-inputs { display: flex; flex-direction: row; - justify-content: flex-start; - align-items: center; + } + + .choice-date { + display: flex; + flex-direction: row; + } + + .choice-date > i { + padding-top: 5px; } .choice-disabled { @@ -172,5 +232,18 @@ border: 2px solid white; } + input[type=date] { + width: 165px; + /*margin-right: 10px;*/ + } + + input[type=time] { + width: 130px; + } + + input[type=checkbox] { + width: 20px; + } + </style> </PollChoiceDate> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/PollChoices.tag b/pollen-ui-riot-js/src/main/web/tag/poll/PollChoices.tag index 0d66ab0..5980894 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/PollChoices.tag +++ b/pollen-ui-riot-js/src/main/web/tag/poll/PollChoices.tag @@ -27,7 +27,7 @@ require('./PollChoiceDate.tag'); this.form.model = opts.poll; this.form.choiceType = (opts.poll.choiceType || 'text').toLowerCase(); this.form.mode = 'view'; - if (opts.poll.choiceAddAllowed && opts.poll.status == 'ADDING_CHOICES') { + if (opts.poll.choiceAddAllowed && opts.poll.status === 'ADDING_CHOICES') { // can add choices @@ -145,7 +145,8 @@ require('./PollChoiceDate.tag'); number: choiceNumber, choice: this.form.choices[choiceNumber] || {choiceValue: '', description: ''}, mode: this.form.mode, - session: this.session + session: this.session, + emitter:this })[0]; this.choiceTags[choiceNumber] = tag; @@ -222,6 +223,9 @@ require('./PollChoiceDate.tag'); this.action = (e) => { e.preventDefault(); e.stopPropagation(); + + this.trigger('prepareSave'); + if (this.form.mode == 'create') { this.form.fromDomToChoices(this.formDom); diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/PollVotes.tag b/pollen-ui-riot-js/src/main/web/tag/poll/PollVotes.tag index 2684fc3..40c754e 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/PollVotes.tag +++ b/pollen-ui-riot-js/src/main/web/tag/poll/PollVotes.tag @@ -14,7 +14,9 @@ <tr> <th></th> <th each="{choice in choices}"> - {choice.choiceValue} + <div class="{choice.choiceType==='DATE'?'choiceDate':''}"> + {choice.choiceValueStr} + </div> </th> </tr> </thead> @@ -89,7 +91,6 @@ this.voteId = null; this.loaded = false; - this.i18nCallback = (locale) => { moment.locale(locale); this.votePeriod = ''; @@ -103,6 +104,17 @@ this.votePeriod = '( ' + this.votePeriod + ' )'; } this.update({votePeriod: this.votePeriod}); + this.choices.forEach(c => { + if (c.choiceType==='DATE') { + if (c.choiceValue.indexOf('T')>-1) { + c.choiceValueStr = moment(c.choiceValue).format('LLL'); + }else { + c.choiceValueStr = moment(c.choiceValue).format('LL'); + } + } else { + c.choiceValueStr =c.choiceValue; + } + }); }; let session = require("../../js/Session"); @@ -115,11 +127,8 @@ this.permission = opts.permission; this.poll = opts.poll; - - this.i18nCallback(); this.voting = this.poll.status === 'VOTING' || this.poll.status === 'CLOSED'; - this.votes = []; this.choices = []; @@ -296,12 +305,17 @@ console.info("get choices"); console.info(result); this.choices = result; + + this.i18nCallback(); this.refresh(); }); </script> <style> + .choiceDate { + width: 240px; + } .fa-15x { font-size: 1.5em; } -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
participants (1)
-
chorem.org scm