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 90b6e077dd4a79ea29b1824f6d1376e8c15fbf72 Author: Sylvain Bavencoff <bavencoff@codelutin.com> Date: Fri Mar 17 11:44:25 2017 +0100 réutilisation de l'écran de création de sondage pour l'edition + tooltips --- pollen-ui-riot-js/src/main/web/css/main.css | 25 +++ pollen-ui-riot-js/src/main/web/i18n.json | 38 ++-- pollen-ui-riot-js/src/main/web/js/PollForm.js | 126 ++++--------- pollen-ui-riot-js/src/main/web/tag/Home.tag.html | 4 +- pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html | 9 +- .../src/main/web/tag/PollenHeader.tag.html | 4 +- .../src/main/web/tag/poll/Choice.tag.html | 19 +- .../src/main/web/tag/poll/Choices.tag.html | 14 +- .../src/main/web/tag/poll/CreatePoll.tag.html | 161 ----------------- .../src/main/web/tag/poll/Description.tag.html | 3 +- .../src/main/web/tag/poll/EditPoll.tag.html | 198 +++++++++++++++++++++ .../src/main/web/tag/poll/Settings.tag.html | 25 ++- .../src/main/web/tag/poll/Voters.tag.html | 3 +- .../src/main/web/tag/poll/editPoll.tag.html | 127 ------------- 14 files changed, 333 insertions(+), 423 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/css/main.css b/pollen-ui-riot-js/src/main/web/css/main.css index 964c982..ada0e26 100644 --- a/pollen-ui-riot-js/src/main/web/css/main.css +++ b/pollen-ui-riot-js/src/main/web/css/main.css @@ -98,4 +98,29 @@ a { form .actions { padding: 5px 0; + display: flex; + justify-content: space-between; +} + +form .actions .c-button { + margin: 2px; + +} + +form .actions .actions-left { + display: flex; + justify-content: flex-start; + flex-wrap: wrap-reverse; +} + +form .actions .actions-right { + display: flex; + justify-content: flex-end; + flex-wrap: wrap; +} + +a.c-button, +input.c-button, +button.c-button { + display: inline-block; } diff --git a/pollen-ui-riot-js/src/main/web/i18n.json b/pollen-ui-riot-js/src/main/web/i18n.json index 9347ed1..2a7e0b8 100644 --- a/pollen-ui-riot-js/src/main/web/i18n.json +++ b/pollen-ui-riot-js/src/main/web/i18n.json @@ -180,7 +180,7 @@ "poll_settings_choicesConfiguration": "Configuration des choix", "poll_settings_votersConfiguration": "Configuration des participants", "poll_settings_voters": "Renseigner la liste des participants", - "poll_settings_addChoices": "Est-ce que les participants peuvent ajouter des choix ?", + "poll_settings_addChoices": "Ajout de choix par les participants", "poll_settings_limitChoices": "Limiter le nombre de choix par vote", "poll_settings_votesConfiguration": "Configuration des votes", "poll_settings_voteCountingType": "Type de scrutin pour effecter le dépouillement du sondage", @@ -190,12 +190,12 @@ "poll_settings_anonymousVote": "Rendre les votes anonymes", "poll_settings_commentsConfiguration": "Configuration des commentaires", "poll_settings_resultsConfiguration": "Configuration des résultats", - "poll_settings_votePeriod": "Quand les participants peuvent-ils voter ?", + "poll_settings_votePeriod": "Période ouverture des votes", "poll_settings_help": "Aide", - "poll_settings_beginDate": "Début de vote", - "poll_settings_endDate": "Fin de vote", - "poll_settings_beginChoiceDate": "Début d'ajout de choix", - "poll_settings_endChoiceDate": "Fin d'ajout de choix", + "poll_settings_beginDate": "Ouverture du", + "poll_settings_endDate": "au", + "poll_settings_beginChoiceDate": "Ajout de choix du", + "poll_settings_endChoiceDate": "au", "poll_settings_maxChoiceNumber": "Nombre maximum de choix", "poll_settings_nav_pollTitle": "Titre", "poll_settings_nav_pollDescription": "Description", @@ -246,7 +246,12 @@ "users_DISABLED": "Désactivé", "users_BANNED": "Banni", "choice_description_placeholder": "Vous pouvez saisir une description", - "date-picker_today": "Aujourd'hui" + "date-picker_today": "Aujourd'hui", + "choice_text": "Renseigner un text", + "choice_ressource": "Utiliser une image", + "choice_date": "Renseigner une date", + "choice_time": "Ajouter une heure à la date", + "choice_description": "Ajouter un descriptif du choix" }, "en": { "pagination_all": "All", @@ -425,7 +430,7 @@ "poll_settings_resultsConfiguration": "Results configuration", "poll_settings_continuousResult": "Use continuous results", "poll_settings_choicesConfiguration": "Choices configuration", - "poll_settings_addChoices": "Can user add choices?", + "poll_settings_addChoices": "add choices by users", "poll_settings_limitChoices": "Limit number of choices to use on a vote", "poll_settings_votesConfiguration": "Votes configuration", "poll_settings_voteCountingType": "Vote counting type used to compute poll's results.", @@ -434,12 +439,12 @@ "poll_settings_voteCountingType_condorcet": "Condorcet", "poll_settings_anonymousVote": "Anonymize votes", "poll_settings_commentsConfiguration": "Comments configuration", - "poll_settings_votePeriod": "When users can vote?", + "poll_settings_votePeriod": "Voting period", "poll_settings_help": "Help", - "poll_settings_beginDate": "Begin date", - "poll_settings_endDate": "End date", - "poll_settings_beginChoiceDate": "Begin choice date", - "poll_settings_endChoiceDate": "End choice date", + "poll_settings_beginDate": "Voting from", + "poll_settings_endDate": "to", + "poll_settings_beginChoiceDate": "Add choices from", + "poll_settings_endChoiceDate": "to", "poll_settings_maxChoiceNumber": "Maximum number of choices", "poll_settings_freePoll": "Everybody can vote (Public poll)", "poll_settings_restrictedPoll": "Only invited people can vote (Private poll)", @@ -487,6 +492,11 @@ "users_DISABLED": "Account disabled", "users_BANNED": "Account banned", "choice_description_placeholder": "You can enter a description", - "date-picker_today": "Today" + "date-picker_today": "Today", + "choice_text": "Set a text", + "choice_ressource": "Use image", + "choice_date": "Set a date", + "choice_time": "add hours to date", + "choice_description": "add description" } } 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 a643854..1bfb328 100644 --- a/pollen-ui-riot-js/src/main/web/js/PollForm.js +++ b/pollen-ui-riot-js/src/main/web/js/PollForm.js @@ -41,7 +41,7 @@ class PollForm { this.step = -1; this.isInit = false; this.choiceType = null; - this.mode = null; + this.creation = false; this.showOptions = false; this.model = {}; this.choices = []; @@ -70,6 +70,7 @@ class PollForm { this.hasVotes = this.model.voteCount > 0; this.creation = false; this.choicesToRemove = []; + this.step = 0; return Promise.resolve(this); }); } @@ -89,53 +90,26 @@ class PollForm { console.info("empty poll"); console.info(this.model); - this.model.title = "Mon premier sondage"; - this.model.description = "Premier sondage!"; - this.model.creatorName = "Dick Laurent"; - this.model.creatorEmail = "user@pollen.org"; - this.mode = "create"; if (user) { this.model.creatorName = user.name; this.model.creatorEmail = user.email; } this.model.voteCountingType = 0; this.model.participant = []; + this.choices = [new Choice("TEXT")]; - switch (this.choiceType) { - case "DATE": - this.model.choiceType = "DATE"; - this.choices = [ - 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; - - case "IMAGE": - this.model.choiceType = "RESOURCE"; - break; - - default: // "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; - } this.isInit = true; this.step = 0; }); } - create(success) { + create() { console.info("form before create"); console.info(this.form); // if the choice is of type resource, then upload the file and set its id as choice value let fileUploadPromises = []; - this.choices.forEach((choice, index) => { + this.choices.forEach((choice) => { if (choice.choiceType === "RESOURCE") { let promise = new Promise((resolve, reject) => { resourceService.create(choice.choiceValue).then((result) => { @@ -146,49 +120,46 @@ class PollForm { fileUploadPromises.push(promise); } }); - Promise.all(fileUploadPromises).then(() => { - pollService.create(this.model, this.choices).then((result) => { + return Promise.all(fileUploadPromises).then(() => { + return pollService.create(this.model, this.choices).then((result) => { console.info("Poll created"); console.info(result); this.model.id = result.id; this.model.permission = result.permission; - }) - .then(success) - .catch((error) => { + return Promise.resolve(); + }, + (error) => { console.error("Could not create poll"); console.error(error); - Promise.reject(error); + return Promise.reject(error); }); }); } _saveChoices() { - if (!this.hasVotes) { - let choicesPromises = this.choices.map(choice=> { - let promise; - if (choice.choiceType === "RESOURCE" && choice.choiceValue.type) { - promise = resourceService.create(choice.choiceValue) - .then((result) => { - choice.choiceValue = result.id; - return Promise.resolve(choice); - }); - } else { - promise = Promise.resolve(choice); - } - promise.then((choice2) => { - if (choice.id) { - return choiceService.updateChoice(this.model.id, choice2, this.model.permission); - } - return choiceService.addChoice(this.model.id, choice2, this.model.permission); + let choicesPromises = this.choices.map(choice=> { + let promise; + if (choice.choiceType === "RESOURCE" && choice.choiceValue.type) { + promise = resourceService.create(choice.choiceValue) + .then((result) => { + choice.choiceValue = result.id; + return Promise.resolve(choice); }); - return promise; - }); - this.choicesToRemove.forEach(choice => { - choicesPromises.push(choiceService.deleteChoice(this.model.id, choice.id, this.model.permission)); + } else { + promise = Promise.resolve(choice); + } + promise.then((choice2) => { + if (choice.id) { + return choiceService.updateChoice(this.model.id, choice2, this.model.permission); + } + return choiceService.addChoice(this.model.id, choice2, this.model.permission); }); - return Promise.all(choicesPromises); - } - return Promise.resolve(); + return promise; + }); + this.choicesToRemove.forEach(choice => { + choicesPromises.push(choiceService.deleteChoice(this.model.id, choice.id, this.model.permission)); + }); + return Promise.all(choicesPromises); } @@ -200,8 +171,6 @@ class PollForm { } previousStep() { - console.info("previousStep:: " + this.step); - console.log (this.choices); this.setStep(this.step - 1); } @@ -209,37 +178,6 @@ class PollForm { this.setStep(this.step + 1); } - fromDom(form) { - let map = this.FormHelper.formToMap(form); - let voters = form.participants.value; - map.participants = voters ? voters.split("/s") : []; - Object.assign(this.model, map); - console.info("dom to model"); - console.info(map); - console.info(this.model); - } - - toDom(form) { - let map = this.FormHelper.formToMap(form); - Object.assign(this.model, map); - console.info("model to dom"); - console.info(map); - console.info(this.model); - } - - fillForm(form) { - console.info("fill form from model"); - console.info(this.model); - this.FormHelper.fillForm(form, this.model); - if (this.model.participants && this.model.participants.length) { - let participants = ""; - this.model.participants.forEach(p=> { - participants += " " + p; - }); - form.participants.value = participants.trim(); - } - } - addNewChoice() { let choice = new Choice(this.model.choiceType); this.choices.push(choice); diff --git a/pollen-ui-riot-js/src/main/web/tag/Home.tag.html b/pollen-ui-riot-js/src/main/web/tag/Home.tag.html index a6ca849..4630d39 100644 --- a/pollen-ui-riot-js/src/main/web/tag/Home.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/Home.tag.html @@ -40,7 +40,7 @@ this.createOther = () => { session.getUser().then(user => { form.init("TEXT", user).then(() => { - route("/poll/new/text/0"); + route("/poll/new/text"); }); }); @@ -48,7 +48,7 @@ this.createDate = () => { session.getUser().then(user => { form.init("DATE", user).then(() => { - route("/poll/new/date/0"); + route("/poll/new/date"); }); }); }; diff --git a/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html b/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html index c822483..6c864b6 100644 --- a/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/Pollen.tag.html @@ -24,8 +24,7 @@ require("./SignIn.tag.html"); require("./SignUp.tag.html"); require("./SignCheck.tag.html"); require("./Home.tag.html"); -require("./poll/CreatePoll.tag.html"); -require("./poll/editPoll.tag.html"); +require("./poll/EditPoll.tag.html"); require("./poll/Poll.tag.html"); require("./poll/Polls.tag.html"); require("./Users.tag.html"); @@ -136,6 +135,9 @@ require("./Users.tag.html"); route("/poll/*/settings/*", (pollId, permission) => { riot.mount(this.refs.content, "poll", {pollId: pollId, tabName: "settings", permission: permission}); }); + route("/poll/new/*", (choiceType) => { + riot.mount(this.refs.content, "editpoll", {choiceType: choiceType.toUpperCase()}); + }); route("/poll/*/edit/*", (pollId, permission) => { riot.mount(this.refs.content, "editpoll", {pollId: pollId, permission: permission}); }); @@ -154,9 +156,6 @@ require("./Users.tag.html"); riot.mount(this.refs.content, "userfavoritelists"); }); - route("/poll/new/*/*", (choiceType, step) => { - riot.mount(this.refs.content, "createpoll", {choiceType: choiceType.toUpperCase(), step: step}); - }); route(() => { riot.mount(this.refs.content, "home"); }); diff --git a/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html b/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html index 52fce4b..94e840a 100644 --- a/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/PollenHeader.tag.html @@ -23,8 +23,8 @@ require("./HeaderI18n.tag.html"); <div class="create dropdown"> <a class="header-link"><i class="fa fa-bars"/></a> <div class="dropdown-content"> - <a href="#poll/new/text/0"><i class="fa fa-list-ol"/> {__.createOtherPoll}</a> - <a href="#poll/new/date/0"><i class="fa fa-calendar"/> {__.createDatePoll}</a> + <a href="#poll/new/text"><i class="fa fa-list-ol"/> {__.createOtherPoll}</a> + <a href="#poll/new/date"><i class="fa fa-calendar"/> {__.createDatePoll}</a> <virtual if="{admin}"> <span role="separator" class="divider"></span> <a href="#user">{__.users}</a> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Choice.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Choice.tag.html index 772d458..401f59e 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Choice.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Choice.tag.html @@ -6,7 +6,8 @@ require("../components/time-picker.tag.html"); class="c-button" alt="texte" disabled={opts.disabled} - onclick="{setTextType}"> + onclick="{setTextType}" + title="{__.text}"> <i class="fa fa-pencil" aria-hidden="true"></i> </button> <input type="text" @@ -20,7 +21,8 @@ require("../components/time-picker.tag.html"); alt="resource" show={!opts.disabled} disabled={opts.disabled} - onclick="{setImageType}"> + onclick="{setImageType}" + title="{__.ressource}"> <i class="fa fa-image" aria-hidden="true"></i> </button> <span if="{originalFile}" @@ -40,7 +42,8 @@ require("../components/time-picker.tag.html"); class="c-button" alt="date" disabled={opts.disabled} - onclick="{setDateType}"> + onclick="{setDateType}" + title="{__.date}"> <i class="fa fa-calendar" aria-hidden="true"></i> </button> <date-picker ref="choiceDate" @@ -51,7 +54,8 @@ require("../components/time-picker.tag.html"); class="c-button {!choice.choiceType.startsWith('DATE') ? 'hidden' : ''}" alt="heure" disabled={opts.disabled} - onclick="{toggleTime}"> + onclick="{toggleTime}" + title="{__.time}"> <i class="fa fa-clock-o " aria-hidden="true"></i> </button> <time-picker ref="choiceTime" @@ -61,14 +65,14 @@ require("../components/time-picker.tag.html"); <button type="button" class="c-button" alt="description" - onclick="{toggleDescription}"> + onclick="{toggleDescription}" + title="{__.description}"> ... </button> </div> - <div if="{showDescription}"> + <div show="{showDescription}"> <textarea ref="description" placeholder="{__.description_placeholder}" - disabled={opts.disabled} value="{choice.description}"/> </div> @@ -151,6 +155,7 @@ require("../components/time-picker.tag.html"); choiceValue = this.refs.choiceText.value; } this.choice.choiceValue = choiceValue; + this.choice.description = this.refs.description.value; }; this.clear = () => { diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Choices.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Choices.tag.html index 3dea998..ab015e7 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Choices.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Choices.tag.html @@ -32,7 +32,7 @@ require("./Choice.tag.html"); <script type="es6"> this.form = this.opts.form; - this.session = this.opts.session; + this.session = require("../../js/Session"); this.choiceType = this.form.choiceType || "TEXT"; this.installBundle(this.session, "poll_choices", this.opts.emitter); @@ -49,9 +49,15 @@ require("./Choice.tag.html"); }; this.submit = () => { - this.refs.choice.forEach(choiceTag => { - choiceTag.submit(); - }); + if (this.refs.choice) { + if (Array.isArray(this.refs.choice)) { + this.refs.choice.forEach(choiceTag => { + choiceTag.submit(); + }); + } else { + this.refs.choice.submit(); + } + } }; </script> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/CreatePoll.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/CreatePoll.tag.html deleted file mode 100644 index 26f4e86..0000000 --- a/pollen-ui-riot-js/src/main/web/tag/poll/CreatePoll.tag.html +++ /dev/null @@ -1,161 +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("./Description.tag.html"); -require("./Choices.tag.html"); -require("./Settings.tag.html"); -require("./Voters.tag.html"); -require("./Created.tag.html"); - -<CreatePoll> - <div class="steps"> - <div each={step, index in form.steps} - class={step : true, selected : form.step === index}> - <a if="{form.step > index}" onclick="{goto(index)}"> - {getStepLabel(step)} - </a> - <span if="{form.step <= index}"> - {getStepLabel(step)} - </span> - </div> - </div> - - <div class="container"> - <form ref="poll" onsubmit="{nextStep}" class="form"> - <Description if={form.step === 0} form={form} session={session}/> - <Choices if={form.step === 1} form={form} session={session}/> - <Settings if={form.step === 2} form={form} session={session}/> - <Voters if={form.step === 3} form={form} session={session}/> - <div class="actions"> - <a class="c-button c-button--ghost-info pull-left" - href="#/home"> - <i class="fa fa-undo" aria-hidden="true"></i> - {__.cancel} - </a> - <button type="button" if={form.step > 0} - class="c-button c-button--ghost-info pull-left" - onclick={previousStep}> - <i class="fa fa-chevron-left" aria-hidden="true"></i> - {__.previous} - </button> - <button type="submit" - class="c-button c-button--info pull-right"> - <i if={form.step === form.steps.length - 1} - class="fa fa-plus" aria-hidden="true"></i> - {form.step === form.steps.length - 1 ? __.save : __.next} - <i if={form.step < form.steps.length - 1} - class="fa fa-chevron-right " aria-hidden="true"></i> - </button> - </div> - </form> - </div> - - <script type="es6"> - - // console.info("Create poll"); - this.form = require("../../js/PollForm"); - this.session = require("../../js/Session"); - this.form.choiceType = this.opts.choiceType; - this.installBundle(this.session, "poll"); - - this.getStepLabel = step => this.__["step_" + step]; - - this.goto = index => () => this.form.setStep(index); - - if (!this.form.isInit) { - this.session.getUser().then(user => { - this.form.init(this.opts.choiceType, user).then( - () => { - this.update(); - } - ); - }); - } else if (this.opts.step) { - this.form.step = parseInt(this.opts.step, 10); - } - - this.nextStep = (e) => { - e.preventDefault(); - e.stopPropagation(); - if (this.form.step === 0) { - this.tags.description.submit(); - } else if (this.form.step === 1) { - this.tags.choices.submit(); - } else if (this.form.step === 2) { - this.tags.settings.submit(); - } else if (this.form.step === 3) { - this.tags.voters.submit(); - } - if (this.form.step !== this.form.steps.length - 1) { - this.form.nextStep(); - } else { - this.form.create(() => { - let route = require("riot-route"); - route("poll/" + this.form.model.id + "/vote/" + this.form.model.permission); - }); - } - }; - - this.previousStep = () => this.form.previousStep(); - - </script> - <style> - - - .steps { - border-bottom: 1px solid #b2c7d3; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - margin: 0 auto; - } - - .step { - margin-left: 12px; - margin-right: 12px; - } - - .step a { - color : black; - } - - .step.selected { - color: #13a2ff; - border-bottom: 2px solid; - } - - @media (max-width: 640px) { - .step { - display: none; - } - - .step.selected { - display: block; - width: 100%; - text-align: center; - color : black; - border-bottom: none; - } - } - - </style> - -</CreatePoll> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Description.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Description.tag.html index 740d411..e08025a 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Description.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Description.tag.html @@ -50,7 +50,8 @@ </div> <script type="es6"> - this.installBundle(this.opts.session, "poll_description", this.opts.emitter); + this.session = require("../../js/Session"); + this.installBundle(this.session, "poll_description", this.opts.emitter); this.form = this.opts.form; this.submit = () => { this.form.model.title = this.refs.title.value; 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 new file mode 100644 index 0000000..4169dc4 --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/poll/EditPoll.tag.html @@ -0,0 +1,198 @@ +/*- +* #%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("./Description.tag.html"); +require("./Choices.tag.html"); +require("./Settings.tag.html"); +require("./Voters.tag.html"); +require("./Created.tag.html"); + +<EditPoll> + <form show={loaded} ref="poll" onsubmit="{submitStep}" class="form"> + <div class="steps"> + <div each={step, index in form.steps} + class={step : true, selected : form.step === index}> + <button type="submit" if="{form.step > index || !form.creation}" onclick="{goto(index)}"> + {getStepLabel(step)} + </button> + <span if="{form.step <= index && form.creation}"> + {getStepLabel(step)} + </span> + </div> + </div> + + <div class="container"> + + <Description if={form.step === 0} form={form}/> + <Choices if={form.step === 1} form={form}/> + <Settings if={form.step === 2} form={form}/> + <Voters if={form.step === 3} form={form}/> + <div class="actions"> + <div class="actions-left"> + <a class="c-button c-button--ghost-info" + href={form.creation ? "#/home" : ("#/poll/" + form.model.id + "/vote/" + form.model.permission)}> + <i class="fa fa-undo" aria-hidden="true"></i> + {__.cancel} + </a> + <button type="button" if={form.step > 0} + class="c-button c-button--ghost-info" + onclick={previousStep}> + <i class="fa fa-chevron-left" aria-hidden="true"></i> + {__.previous} + </button> + </div> + <div class="actions-right"> + <button if={form.step < form.steps.length - 1} + type="submit" + class="c-button c-button--info" + onclick={nextStep}> + {__.next} + <i class="fa fa-chevron-right " aria-hidden="true"></i> + </button> + + <button type="submit" + if={!form.creation || form.step === form.steps.length - 1} + class="c-button c-button--info" + onclick={savePoll}> + <i class="fa fa-{form.creation ? 'plus' : 'check'}" aria-hidden="true"></i> + {__.save} + </button> + </div> + </div> + </div> + </form> + + <script type="es6"> + this.loaded = false; + this.session = require("../../js/Session"); + this.installBundle(this.session, "poll"); + this.form = require("../../js/PollForm"); + + if (this.opts.pollId) { + this.form.loadPoll(this.opts.pollId, this.opts.permission).then(() => { + this.loaded = true; + this.update(); + }); + } else { + this.session.getUser().then(user => { + this.form.init(this.opts.choiceType, user).then(() => { + this.loaded = true; + this.update(); + }); + }); + } + + this.getStepLabel = step => this.__["step_" + step]; + + this.goto = index => () => { + this.callAfterSubmit = () => this.form.setStep(index); + }; + + this.submitStep = (e) => { + e.preventDefault(); + e.stopPropagation(); + if (this.form.step === 0) { + this.tags.description.submit(); + } else if (this.form.step === 1) { + this.tags.choices.submit(); + } else if (this.form.step === 2) { + this.tags.settings.submit(); + } else if (this.form.step === 3) { + this.tags.voters.submit(); + } + if (this.callAfterSubmit) { + this.callAfterSubmit(); + } + }; + + this.nextStep = () => { + this.callAfterSubmit = () => this.form.nextStep(); + }; + + this.savePoll = () => { + this.callAfterSubmit = () => { + let promiseSave; + if (this.form.creation) { + promiseSave = this.form.create(); + } else { + promiseSave = this.form.save(); + } + promiseSave.then(() => { + let route = require("riot-route"); + route("poll/" + this.form.model.id + "/vote/" + this.form.model.permission); + }); + }; + }; + + this.previousStep = () => { + if (this.form.creation) { + this.form.previousStep(); + } else { + this.callAfterSubmit = () => this.form.previousStep(); + } + }; + + </script> + <style> + + + .steps { + border-bottom: 1px solid #b2c7d3; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin: 0 auto; + } + + .step { + margin-left: 12px; + margin-right: 12px; + } + + .step button { + border: none; + font-size: 1em; + background: transparent; + color : black; + } + + .step.selected { + color: #13a2ff; + border-bottom: 2px solid; + } + + @media (max-width: 640px) { + .step { + display: none; + } + + .step.selected { + display: block; + width: 100%; + text-align: center; + color : black; + border-bottom: none; + } + } + + </style> + +</EditPoll> 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 63081dc..648331a 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 @@ -169,7 +169,7 @@ </div> </label> </div> - <div show="{form.model.votePeriod}"> + <div show="{form.model.votePeriod}" class="config-period"> <div class="o-form-element"> <label class="c-label" for="beginDate"> {__.beginDate} @@ -283,14 +283,14 @@ </div> <script type="es6"> - this.session = this.opts.session; + this.session = require("../../js/Session"); this.mode = "create"; this.form = this.opts.form; this.showOptions = this.form.showOptions; this.$private = this.form.model.pollType !== "FREE"; - this.installBundle(this.opts.session, "poll_settings"); + this.installBundle(this.session, "poll_settings"); this.showHelp = false; let moment = require("moment"); @@ -362,13 +362,28 @@ </script> <style> + .config-period { + display: flex; + } + + .config-period .o-form-element { + flex-grow: 1; + } + + .config-period .o-form-element:first-child { + margin-right: 3px; + } + + .form-section { + display: flex; + flex-wrap: wrap; + } + .form-section .section-title { - float: left; width : 25%; padding: 1em 0; } .form-section .section-content { - float: left; width : 75%; } diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Voters.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Voters.tag.html index 5c38372..e55e159 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Voters.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Voters.tag.html @@ -58,7 +58,8 @@ </div> <script type="es6"> - this.installBundle(this.opts.session, "poll_voters"); + this.session = require("../../js/Session"); + this.installBundle(this.session, "poll_voters"); this.form = this.opts.form; this.votePrivate = this.form.model.pollType !== "FREE"; this.participants = ""; 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 deleted file mode 100644 index a41e1a6..0000000 --- a/pollen-ui-riot-js/src/main/web/tag/poll/editPoll.tag.html +++ /dev/null @@ -1,127 +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("./Description.tag.html"); -require("./Choices.tag.html"); -require("./Settings.tag.html"); -require("./Voters.tag.html"); -require("./Created.tag.html"); - -<EditPoll> - <div class="container" show={loaded}> - - <div class="c-alert c-alert--info" - show={form.hasVotes}> - {__.voteStart} - </div> - - <form ref="poll" onsubmit="{savePoll}" class="form"> - <h2>{__.step_general}</h2> - <Description form={form} session={session}/> - <h2>{__.step_choices}</h2> - <Choices form={form} session={session}/> - <h2>{__.step_options}</h2> - <Settings form={form} session={session}/> - <h2>{__.step_voters}</h2> - <Voters form={form} session={session}/> - <div class="actions"> - <a class="c-button c-button--ghost-info pull-left" - href="#/poll/{form.model.id}/vote/{form.model.permission}"> - <i class="fa fa-undo" aria-hidden="true"></i> - {__.cancel} - </a> - <button type="submit" - class="c-button c-button--info pull-right"> - <i class="fa fa-check" aria-hidden="true"></i> - {__.save} - </button> - </div> - </form> - </div> - - <script type="es6"> - this.loaded = false; - this.form = require("../../js/PollForm"); - this.session = require("../../js/Session"); - this.form.choiceType = this.opts.choiceType; - this.installBundle(this.session, "poll"); - - this.form.loadPoll(this.opts.pollId, this.opts.permission).then(() => { - this.loaded = true; - this.update(); - }); - - this.savePoll = (e) => { - e.preventDefault(); - e.stopPropagation(); - this.tags.description.submit(); - this.tags.choices.submit(); - this.tags.settings.submit(); - this.tags.voters.submit(); - this.form.save().then(() => { - let route = require("riot-route"); - route("poll/" + this.form.model.id + "/vote/" + this.form.model.permission); - }); - }; - - </script> - <style> - - - .steps { - border-bottom: 1px solid #b2c7d3; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - margin: 0 auto; - } - - .step { - margin-left: 12px; - margin-right: 12px; - } - - .step a { - color : black; - } - - .step.selected { - color: #13a2ff; - border-bottom: 2px solid; - } - - @media (max-width: 640px) { - .step { - display: none; - } - - .step.selected { - display: block; - width: 100%; - text-align: center; - color : black; - border-bottom: none; - } - } - - </style> - -</EditPoll> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.