branch feature/multi-ui updated (d00af65c -> 23517dbf)
This is an automated email from the git hooks/post-receive script. New change to branch feature/multi-ui in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git from d00af65c Multi question poll : - Persistence de la description multi new 23517dbf Multi question poll : - Gestion des settings en solo et multi-question The 1 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 23517dbf3fce109b1a23af7842b1673fa1a2c355 Author: jcouteau <couteau@codelutin.com> Date: Tue Aug 20 17:57:32 2019 +0200 Multi question poll : - Gestion des settings en solo et multi-question RAF sur la creation : le summary final Summary of changes: pollen-ui-riot-js/src/main/web/js/PollForm.js | 43 ++- .../src/main/web/tag/poll/EditPoll.tag.html | 3 + .../src/main/web/tag/poll/EditQuestions.tag.html | 8 +- .../web/tag/poll/EditQuestionsSettings.tag.html | 321 +++++++++++++++++++++ .../src/main/web/tag/poll/Settings.tag.html | 54 ++-- 5 files changed, 374 insertions(+), 55 deletions(-) create mode 100644 pollen-ui-riot-js/src/main/web/tag/poll/EditQuestionsSettings.tag.html -- 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/multi-ui in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit 23517dbf3fce109b1a23af7842b1673fa1a2c355 Author: jcouteau <couteau@codelutin.com> Date: Tue Aug 20 17:57:32 2019 +0200 Multi question poll : - Gestion des settings en solo et multi-question RAF sur la creation : le summary final --- pollen-ui-riot-js/src/main/web/js/PollForm.js | 43 ++- .../src/main/web/tag/poll/EditPoll.tag.html | 3 + .../src/main/web/tag/poll/EditQuestions.tag.html | 8 +- .../web/tag/poll/EditQuestionsSettings.tag.html | 321 +++++++++++++++++++++ .../src/main/web/tag/poll/Settings.tag.html | 54 ++-- 5 files changed, 374 insertions(+), 55 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 48fa8e3e..73490eda 100644 --- a/pollen-ui-riot-js/src/main/web/js/PollForm.js +++ b/pollen-ui-riot-js/src/main/web/js/PollForm.js @@ -67,11 +67,11 @@ class PollForm { } getSteps(multi) { - let steps; + let steps = undefined; if (multi) { - steps = this.stepsMulti; + steps = Object.assign([],this.stepsMulti); } else { - steps = this.stepsNoMulti; + steps = Object.assign([],this.stepsNoMulti); } if (this.model.pollType === "RESTRICTED" && !steps.includes("voters")) { steps.push("voters"); @@ -97,7 +97,10 @@ class PollForm { this.showOptions = true; this.creation = !!clone; - //TODO check if everything is still on the model + if (this.model.questions.length > 1) { + this.multi = true; + } + if (clone) { this.model.id = undefined; this.model.voteCount = 0; @@ -110,6 +113,14 @@ class PollForm { this.model.status = undefined; this.hasVotes = false; + this.model.questions.forEach((question) => { + question.choices.forEach((choice) => { + choice.id = undefined; + choice.permission = undefined; + + }); + }); + } else { this.hasVotes = false; this.model.questions.forEach((question) => { @@ -120,22 +131,12 @@ class PollForm { this.model.alreadyParticipants = this.model.participants; } - if (clone) { - this.model.questions.forEach((question) => { - question.choices.forEach((choice) => { - choice.id = undefined; - choice.permission = undefined; - - }); - }); - } - voterListService.init(this).then(voterList => { this.mainVoterList = voterList; this.setCurrentVoterList(voterList); }); - this._updateSteps(); + this.getSteps(this.multi); this.step = 0; return Promise.resolve(this); @@ -167,7 +168,7 @@ class PollForm { }); this.isInit = true; - this._updateSteps(); + this.getSteps(this.multi); this.setStep(0); this.questionEdited = 0; }); @@ -305,19 +306,11 @@ class PollForm { setPollType(type) { if (this.types.indexOf(type) >= 0 && this.model.pollType !== type) { this.model.pollType = type; - this._updateSteps(); + this.getSteps(this.multi); bus.trigger("pollStepsChange", this.steps); } } - _updateSteps() { - let steps = ["general", "choices", "options"]; - if (this.model.pollType === "RESTRICTED") { - steps.push("voters"); - } - this.steps = steps; - } - setCurrentVoterList(list) { return voterListService.loadList(list).then(() => { this.currentVoterList = list; diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/EditPoll.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/EditPoll.tag.html index 23d602a1..d1cf814f 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/EditPoll.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/EditPoll.tag.html @@ -142,6 +142,9 @@ import "./CheckEmails.tag.html"; this.session = session; this.installBundle(this.session, "poll"); this.form = form; + //init multi + + //init steps let pollLoaded = () => { this.loaded = true; diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/EditQuestions.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/EditQuestions.tag.html index 22f3f88e..ab58d9dd 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/EditQuestions.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/EditQuestions.tag.html @@ -1,4 +1,5 @@ import "./Choices.tag.html"; +import "./EditQuestionsSettings.tag.html"; <EditQuestions> @@ -38,8 +39,9 @@ import "./Choices.tag.html"; <div class="editQuestion-part"> <Choices form={form} ref="choices"></Choices> </div> - - <!--TODO JC190814 - Ici faut mettre les options de la question--> + <div class="editQuestion-part"> + <EditQuestionsSettings form="{form}" ref="settings"></EditQuestionsSettings> + </div> <script type="es6"> import "./Choices.tag.html"; @@ -52,7 +54,6 @@ import "./Choices.tag.html"; this.installBundle(this.session, "poll_editQuestions", this.opts.emitter); this.newQuestion = () => { - //gérer le cas ou on navigue en avant et en arrière if (!this.form.hasVotes) { this.submit(); @@ -83,6 +84,7 @@ import "./Choices.tag.html"; this.submit = () => { this.refs.choices.submit(); + this.refs.settings.submit(); this.question.title = this.refs.title.value; this.question.description = this.refs.description.value; this.form.model.questions[this.form.questionEdited] = this.question; diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/EditQuestionsSettings.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/EditQuestionsSettings.tag.html new file mode 100644 index 00000000..a568a43f --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/poll/EditQuestionsSettings.tag.html @@ -0,0 +1,321 @@ +/*- +* #%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% +*/ +import "../components/date-time-picker.tag.html"; +import "../components/Checkbox.tag.html"; +import "../voteCountingType/MaxChoicesNumberConfig.tag.html"; +import "../voteCountingType/BordaConfig.tag.html"; +import "../voteCountingType/CumulativeConfig.tag.html"; +import "../voteCountingType/MajorityJudgmentConfig.tag.html"; + +<EditQuestionsSettings> + + <div class="form-section" show={form.creation}> + <h4><i class="fa fa-cogs" aria-hidden="true"></i> {_t.basic_usage}</h4> + <div class="o-form-element"> + <Checkbox label="{_t.use_basic_usage}" + disabled={form.model.closed} + checkboxchecked={!showOptions} + ontogglecheckbox={toggleShowOptions}/> + </div> + <div class="c-alert c-alert--info" if={!showOptions}> + {_t.basic_usage_detail} + <ul> + <li>{_t.basic_usage_detail_type}</li> + <li>{_t.basic_usage_detail_multi_choices}</li> + </ul> + </div> + </div> + <div class="settings-options {with-default: form.creation}" show={showOptions || !form.creation}> + + <div class="settings-options-row"> + <div class="form-section"> + <h4> + <i class="fa fa-cog" aria-hidden="true"></i> + {_t.nav_voteCountingType} + <i class="info-label fa fa-question-circle" aria-hidden="true" onclick="{toggleVoteCountingTypeHelp}"></i> + </h4> + <div class="o-form-element select-or-radio"> + <fieldset class="o-fieldset choice-radio" + disabled={form.hasVotes || form.model.closed}> + <legend class="o-fieldset__legend">{_t.voteCountingType}</legend> + <label each={type in form.voteCountingTypes} + class="c-field c-field--choice" + title="{type.shortHelper}"> + <input type="radio" + tabindex="1" + name="voteCountingTypeRadios" + ref="voteCountingType{type.id}" + checked="{type && type.id.toString() === question.voteCountingType}" + onchange={voteCountingTypeChanged}/> + <span>{type.name}</span> + </label> + </fieldset> + + <select class="c-field choice-select" + tabindex="1" + ref="voteCountingType" + value={question.voteCountingType} + disabled={form.hasVotes || form.model.closed} + onchange={voteCountingTypeChanged}> + <option each={type in form.voteCountingTypes} + value={type.id} + title="{type.shortHelper}"> + {type.name} + </option> + </select> + + <div class="help-selected"> + <i class="fa fa-info-circle" aria-hidden="true"></i> + <span ref="voteCountingTypeHelper"></span> + </div> + </div> + </div> + <div class="form-section"> + <h4><i class="fa fa-check-square" aria-hidden="true"></i> {_t.nav_choices}</h4> + <div class="o-form-element"> + <Checkbox label="{_t.addChoices}" + name="choiceAddAllowed" + id="choiceAddAllowed" + ref="addChoices" + disabled={form.hasVotes || form.model.closed} + checkboxchecked={question.choiceAddAllowed} + ontogglecheckbox={toggleChoiceAddAllowed}/> + </div> + <div show="{question.choiceAddAllowed}" class="config-period"> + <div class="o-form-element"> + <label class="c-label" for="beginChoiceDate"> + {_t.beginChoiceDate} + </label> + <date-time-picker ref="beginChoiceDate" + tabindex="1" + name="beginChoiceDate" + id="beginChoiceDate" + datetime={question.beginChoiceDate} + disabled={form.hasVotes || form.model.closed}/> + </div> + <div class="o-form-element"> + <label class="c-label" for="endChoiceDate"> + {_t.endChoiceDate} + </label> + <date-time-picker ref="endChoiceDate" + tabindex="1" + name="endChoiceDate" + id="endChoiceDate" + datetime={question.endChoiceDate} + disabled={form.hasVotes || form.model.closed}/> + </div> + </div> + <MaxChoicesNumberConfig if={question.voteCountingType == 1 || question.voteCountingType == 4} + ref="config" + config={question.voteCountingConfig} + count-choices={question.choices.length} + disabled={form.hasVotes || form.model.closed}/> + <BordaConfig if={question.voteCountingType == 5} + ref="config" + config={question.voteCountingConfig} + count-choices={question.choices.length} + disabled={form.hasVotes || form.model.closed}/> + <CumulativeConfig if={question.voteCountingType == 2} + ref="config" + config={question.voteCountingConfig} + disabled={form.hasVotes || form.model.closed}/> + <MajorityJudgmentConfig if={question.voteCountingType == 8} + ref="config" + config={question.voteCountingConfig} + disabled={form.hasVotes || form.model.closed}/> + </div> + </div> + </div> + + <script type="es6"> + + import session from "../../js/Session"; + + this.session = session; + this.form = this.opts.form; + this.question = this.form.model.questions[this.form.questionEdited]; + this.installBundle(this.session, "poll_settings", this.opts.emitter); + + if (!this.question.voteCountingType) { + this.question.voteCountingType = "1"; + } + + this.showOptions = this.form.showOptions; + this.showHelp = false; + this.voteCountingTypes = new Map(this.form.voteCountingTypes.map((t) => [t.id.toString(), t])); + + this.on("mount", () => { + this.refs["voteCountingType" + this.question.voteCountingType].checked = true; + this.refs.voteCountingType.value = this.question.voteCountingType; + this.updateVoteCountingTypeHelp(); + }); + + this.toggleVoteCountingTypeHelp = () => { + fetch("/help/voteCountingTypes-" + this.session.locale + ".html") + .then(response => { + return response.text(); + }) + .then(content => { + return this.info(this._t.nav_voteCountingType, content, null, "info"); + }).then(() => { + let video = document.getElementById("voteCountingTypesHelpVideo"); + if (video) { + video.pause(); + } + }); + }; + + this.updateVoteCountingTypeHelp = () => { + this.refs.voteCountingTypeHelper.innerHTML = this.voteCountingTypes.get(this.question.voteCountingType.toString()).helper; + this.update(); + }; + + this.updateHelpHover = (helper) => () => { + this.refs.voteCountingTypeHelpHover.innerHTML = helper; + }; + + this.clearHelpHover = () => { + this.refs.voteCountingTypeHelpHover.innerHTML = ""; + }; + + this.toggleChoiceAddAllowed = () => { + this.question.choiceAddAllowed = !this.question.choiceAddAllowed; + this.update(); + }; + + this.toggleShowOptions = () => { + this.showOptions = this.form.showOptions = !this.showOptions; + this.update(); + }; + + this.showVoteCountingTypeHelp = e => { + this.refs.voteCountingTypeHelp.innerHTML = e.target.getAttribute("help"); + }; + + this.voteCountingTypeChanged = e => { + if (e.item) { + this.question.voteCountingType = e.item.type.id.toString(); + } else { + this.question.voteCountingType = e.target.value; + } + this.updateVoteCountingTypeHelp(); + }; + + this.submit = () => { + + if (!this.showOptions && this.form.creation) { + this.form.setQuestionDefaultSettings(this.question); + } else { + if (!this.form.hasVotes) { + this.question.addChoices = this.refs.addChoices.checked; + this.question.beginChoiceDate = this.refs.addChoices.checked ? this.refs.beginChoiceDate.getValue() : undefined; + this.question.endChoiceDate = this.refs.addChoices.checked ? this.refs.endChoiceDate.getValue() : undefined; + + this.question.voteCountingConfig = this.refs.config ? this.refs.config.getConfig() : {}; + } + } + }; + + this.listen("locale", () => { + this.form.reloadVoteCountingTypes().then(() => { + this.voteCountingTypes = new Map(this.form.voteCountingTypes.map((t) => [t.id.toString(), t])); + this.updateVoteCountingTypeHelp(); + }); + }); + + </script> + <style> + + ul { + padding-left: 40px; + } + + h4 { + margin-bottom: 0.5em; + } + + .settings-options.with-default { + border-radius: 4px; + box-shadow: 0 0 1px hsla(0,0%,7%,.6); + padding: 0.1em 1.5em; + margin-bottom: 1em; + } + + .settings-options-row { + display: flex; + flex-direction: column; + } + + @media (min-width: 640px) { + .settings-options-row { + flex-direction: row; + } + + .settings-options-row .form-section { + flex-basis: 50%; + padding: 0 2em; + } + + .settings-options-row .form-section:first-child { + padding-left: 0; + } + + .settings-options-row .form-section:last-child { + padding-right: 0; + } + } + + .o-form-element { + margin: 0.5em 0; + padding: 0.5em 0; + } + + .o-form-element .c-input-group { + margin: 0.5em 0; + } + + .settings-options .form-section { + margin: 1.5em 0; + } + + .select-or-radio .choice-select { + display: none; + } + + .choice-radio label { + cursor: help; + } + + @media (max-width: 640px) { + .select-or-radio .choice-radio { + display: none; + } + + .select-or-radio .choice-select { + display: inline; + } + + } + + </style> +</EditQuestionsSettings> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Settings.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Settings.tag.html index 4f4079ef..db919574 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Settings.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Settings.tag.html @@ -131,7 +131,7 @@ import "../voteCountingType/MajorityJudgmentConfig.tag.html"; tabindex="1" name="voteCountingTypeRadios" ref="voteCountingType{type.id}" - checked="{type && type.id.toString() === form.model.voteCountingType}" + checked="{type && type.id.toString() === form.model.questions[0].voteCountingType}" onchange={voteCountingTypeChanged}/> <span>{type.name}</span> </label> @@ -140,7 +140,7 @@ import "../voteCountingType/MajorityJudgmentConfig.tag.html"; <select class="c-field choice-select" tabindex="1" ref="voteCountingType" - value={form.model.voteCountingType} + value={form.model.questions[0].voteCountingType} disabled={form.hasVotes || form.model.closed} onchange={voteCountingTypeChanged}> <option each={type in form.voteCountingTypes} @@ -164,10 +164,10 @@ import "../voteCountingType/MajorityJudgmentConfig.tag.html"; id="choiceAddAllowed" ref="addChoices" disabled={form.hasVotes || form.model.closed} - checkboxchecked={form.model.choiceAddAllowed} + checkboxchecked={form.model.questions[0].choiceAddAllowed} ontogglecheckbox={toggleChoiceAddAllowed}/> </div> - <div show="{form.model.choiceAddAllowed}" class="config-period"> + <div show="{form.model.questions[0].choiceAddAllowed}" class="config-period"> <div class="o-form-element"> <label class="c-label" for="beginChoiceDate"> {_t.beginChoiceDate} @@ -176,7 +176,7 @@ import "../voteCountingType/MajorityJudgmentConfig.tag.html"; tabindex="1" name="beginChoiceDate" id="beginChoiceDate" - datetime={form.model.beginChoiceDate} + datetime={form.model.questions[0].beginChoiceDate} disabled={form.hasVotes || form.model.closed}/> </div> <div class="o-form-element"> @@ -187,27 +187,27 @@ import "../voteCountingType/MajorityJudgmentConfig.tag.html"; tabindex="1" name="endChoiceDate" id="endChoiceDate" - datetime={form.model.endChoiceDate} + datetime={form.model.questions[0].endChoiceDate} disabled={form.hasVotes || form.model.closed}/> </div> </div> - <MaxChoicesNumberConfig if={form.model.voteCountingType == 1 || form.model.voteCountingType == 4} + <MaxChoicesNumberConfig if={form.model.questions[0].voteCountingType == 1 || form.model.questions[0].voteCountingType == 4} ref="config" - config={form.model.voteCountingConfig} - count-choices={form.questions[0].choices.length} + config={form.model.questions[0].voteCountingConfig} + count-choices={form.model.questions[0].choices.length} disabled={form.hasVotes || form.model.closed}/> - <BordaConfig if={form.model.voteCountingType == 5} + <BordaConfig if={form.model.questions[0].voteCountingType == 5} ref="config" - config={form.model.voteCountingConfig} - count-choices={form.questions[0].choices.length} + config={form.model.questions[0].voteCountingConfig} + count-choices={form.model.questions[0].choices.length} disabled={form.hasVotes || form.model.closed}/> - <CumulativeConfig if={form.model.voteCountingType == 2} + <CumulativeConfig if={form.model.questions[0].voteCountingType == 2} ref="config" - config={form.model.voteCountingConfig} + config={form.model.questions[0].voteCountingConfig} disabled={form.hasVotes || form.model.closed}/> - <MajorityJudgmentConfig if={form.model.voteCountingType == 8} + <MajorityJudgmentConfig if={form.model.questions[0].voteCountingType == 8} ref="config" - config={form.model.voteCountingConfig} + config={form.model.questions[0].voteCountingConfig} disabled={form.hasVotes || form.model.closed}/> </div> </div> @@ -381,8 +381,8 @@ import "../voteCountingType/MajorityJudgmentConfig.tag.html"; this.installBundle(this.session, this.i18nprefix); this.form = this.opts.form; - if (!this.form.model.voteCountingType) { - this.form.model.voteCountingType = "1"; + if (!this.form.model.questions[0].voteCountingType) { + this.form.model.questions[0].voteCountingType = "1"; } this.showOptions = this.form.showOptions; @@ -394,8 +394,8 @@ import "../voteCountingType/MajorityJudgmentConfig.tag.html"; this.limitEmail = this.form.model.emailAddressSuffixes && this.form.model.emailAddressSuffixes.length; this.on("mount", () => { - this.refs["voteCountingType" + this.form.model.voteCountingType].checked = true; - this.refs.voteCountingType.value = this.form.model.voteCountingType; + this.refs["voteCountingType" + this.form.model.questions[0].voteCountingType].checked = true; + this.refs.voteCountingType.value = this.form.model.questions[0].voteCountingType; this.updateVoteCountingTypeHelp(); this.refs["pollType_" + this.form.model.pollType].focus(); }); @@ -416,7 +416,7 @@ import "../voteCountingType/MajorityJudgmentConfig.tag.html"; }; this.updateVoteCountingTypeHelp = () => { - this.refs.voteCountingTypeHelper.innerHTML = this.voteCountingTypes.get(this.form.model.voteCountingType.toString()).helper; + this.refs.voteCountingTypeHelper.innerHTML = this.voteCountingTypes.get(this.form.model.questions[0].voteCountingType.toString()).helper; this.update(); }; @@ -470,9 +470,9 @@ import "../voteCountingType/MajorityJudgmentConfig.tag.html"; this.voteCountingTypeChanged = e => { if (e.item) { - this.form.model.voteCountingType = e.item.type.id.toString(); + this.form.model.questions[0].voteCountingType = e.item.type.id.toString(); } else { - this.form.model.voteCountingType = e.target.value; + this.form.model.questions[0].voteCountingType = e.target.value; } this.updateVoteCountingTypeHelp(); }; @@ -514,16 +514,16 @@ import "../voteCountingType/MajorityJudgmentConfig.tag.html"; this.form.setSettingsDefault(); } else { if (!this.form.hasVotes) { - this.form.model.addChoices = this.refs.addChoices.checked; - this.form.model.beginChoiceDate = this.refs.addChoices.checked ? this.refs.beginChoiceDate.getValue() : undefined; - this.form.model.endChoiceDate = this.refs.addChoices.checked ? this.refs.endChoiceDate.getValue() : undefined; + this.form.model.questions[0].addChoices = this.refs.addChoices.checked; + this.form.model.questions[0].beginChoiceDate = this.refs.addChoices.checked ? this.refs.beginChoiceDate.getValue() : undefined; + this.form.model.questions[0].endChoiceDate = this.refs.addChoices.checked ? this.refs.endChoiceDate.getValue() : undefined; this.form.model.beginDate = this.refs.votePeriod.checked ? this.refs.beginDate.getValue() : undefined; this.form.model.voteVisibility = this.refs.voteVisibility.value; this.form.model.anonymousVoteAllowed = this.refs.anonymousVote.checked; this.form.model.resultVisibility = this.refs.resultVisibility.value; this.form.model.commentVisibility = this.refs.commentVisibility.value; - this.form.model.voteCountingConfig = this.refs.config ? this.refs.config.getConfig() : {}; + this.form.model.questions[0].voteCountingConfig = this.refs.config ? this.refs.config.getConfig() : {}; } this.form.model.endDate = this.refs.votePeriod.checked ? this.refs.endDate.getValue() : undefined; -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
participants (1)
-
chorem.org scm