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>.