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 84e3939012f203b64c7bf47158ff3364e1e04bc2 Author: Tony CHEMIT <dev@tchemit.fr> Date: Wed Jan 25 11:48:31 2017 +0100 i18n pagination + améliorations --- pollen-ui-riot-js/src/main/web/i18n.json | 130 ++++++++++++--------- pollen-ui-riot-js/src/main/web/js/PollService.js | 12 +- pollen-ui-riot-js/src/main/web/tag/Pagination.tag | 54 +++++++-- pollen-ui-riot-js/src/main/web/tag/poll/Poll.tag | 125 +++++++++++++++----- .../src/main/web/tag/poll/PollComments.tag | 2 +- .../src/main/web/tag/poll/PollVotes.tag | 2 +- pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag | 68 ++++++++--- 7 files changed, 277 insertions(+), 116 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/i18n.json b/pollen-ui-riot-js/src/main/web/i18n.json index b4f285b..5837dc6 100644 --- a/pollen-ui-riot-js/src/main/web/i18n.json +++ b/pollen-ui-riot-js/src/main/web/i18n.json @@ -1,33 +1,41 @@ { "fr": { - "poll_votes":"Votes", - "poll_results":"Résultats", - "poll_results_title":"Résultats", - "poll_results_noResult":"Les résultats ne sont pas encore disponibles.", - "poll_results_voter":"votant.", - "poll_results_voters":"votants.", - "poll_results_rank":"Rang :", - "poll_results_votesCount":"Nombre de votes :", - "poll_comments":"Commentaires", - "poll_comments_noComment":"Pas de commentaire.", - "poll_comments_title":"Commentaires", - "poll_comments_addComment":"Ajouter un commentaire", - "poll_comments_deleteComment":"Supprimer le commentaire ?", - "poll_votes_title":"Votes", - "poll_votes_deleteVote":"Supprimer le vote ?", - "poll_votes_authorPlaceHolder":"Renseigner votre nom", - "poll_votes_vote":"Voter", - "poll_votes_delete":"Supprimer le vote ?", - "comment_popup_create":"Ajouter un commentaire", - "comment_popup_edit":"Éditer un commentaire", - "comment_popup_action":"Enregistrer", - "comment_popup_authorPlaceholder":"Saisir votre nom", - "comment_popup_textPlaceholder":"Saisir le commentaire", - "polls_createdPolls":"Mes sondages", - "polls_polls":"Tous les sondages", - "polls_name":"Nom", - "polls_createDate":"Date de création", - "polls_status":"Statut", + "pagination_page": "Page", + "pagination_resultsPerPage": "Résultats par page", + "polls_CLOSED": "Fermé", + "polls_ADDING_CHOICES": "Ajout de choix en cours", + "polls_VOTING": "Vote en cours", + "poll_closePoll": "Clôturer le sondage", + "poll_reopenPoll": "Réouvrir le sondage", + "poll_deletePoll": "Supprimer le sondage", + "poll_votes": "Votes", + "poll_results": "Résultats", + "poll_results_title": "Résultats", + "poll_results_noResult": "Les résultats ne sont pas encore disponibles.", + "poll_results_voter": "votant.", + "poll_results_voters": "votants.", + "poll_results_rank": "Rang :", + "poll_results_votesCount": "Nombre de votes :", + "poll_comments": "Commentaires", + "poll_comments_noComment": "Pas de commentaire.", + "poll_comments_title": "Commentaires", + "poll_comments_addComment": "Ajouter un commentaire", + "poll_comments_deleteComment": "Supprimer le commentaire ?", + "poll_votes_title": "Votes", + "poll_votes_deleteVote": "Supprimer le vote ?", + "poll_votes_authorPlaceHolder": "Renseigner votre nom", + "poll_votes_vote": "Voter", + "poll_votes_delete": "Supprimer le vote ?", + "comment_popup_create": "Ajouter un commentaire", + "comment_popup_edit": "Éditer un commentaire", + "comment_popup_action": "Enregistrer", + "comment_popup_authorPlaceholder": "Saisir votre nom", + "comment_popup_textPlaceholder": "Saisir le commentaire", + "polls_createdPolls": "Mes sondages", + "polls_polls": "Tous les sondages", + "polls_name": "Nom", + "polls_createDate": "Date de création", + "polls_status": "Statut", "signup_title": "Créer un compte", "signup_email": "Email", "signup_email_placeholder": "Entrer l'email", @@ -162,35 +170,43 @@ "": "" }, "en": { - "poll_votes":"Votes", - "poll_results":"Results", - "poll_results_noResult":"Results are not yet available.", - "poll_results_title":"Results", - "poll_results_voter":"voter.", - "poll_results_voters":"voters.", - "poll_results_rank":"Rank:", - "poll_results_votesCount":"Votes count:", - "poll_comments":"Comments", - "poll_comments_noComment":"No comment.", - "poll_comments_title":"Comments", - "poll_comments_addComment":"Add a comment", - "poll_comments_deleteComment":"Delete comment?", - "poll_votes_title":"Votes", - "poll_votes_deleteVote":"Delete vote?", - "poll_votes_authorPlaceHolder":"Fill your name", - "poll_votes_vote":"Vote", - "poll_votes_delete":"Delete vote?", - "comment_popup_create":"Add a comment", - "comment_popup_edit":"Edit a comment", - "comment_popup_action":"Save", - "comment_popup_authorPlaceholder":"Fill your name", - "comment_popup_textPlaceholder":"Fill your comment", - "polls_title":"My polls", - "polls_name":"Name", - "polls_createDate":"Created date", - "polls_status":"Status", - "polls_createdPolls":"My polls", - "polls_polls":"All polls", + "pagination_page": "Page", + "pagination_resultsPerPage": "Results per page", + "polls_CLOSED": "Closed", + "polls_ADDING_CHOICES": "Adding choices", + "polls_VOTING": "Voting", + "poll_votes": "Votes", + "poll_closePoll": "Close poll", + "poll_reopenPoll": "Reopen poll", + "poll_deletePoll": "Delete poll", + "poll_results": "Results", + "poll_results_noResult": "Results are not yet available.", + "poll_results_title": "Results", + "poll_results_voter": "voter.", + "poll_results_voters": "voters.", + "poll_results_rank": "Rank:", + "poll_results_votesCount": "Votes count:", + "poll_comments": "Comments", + "poll_comments_noComment": "No comment.", + "poll_comments_title": "Comments", + "poll_comments_addComment": "Add a comment", + "poll_comments_deleteComment": "Delete comment?", + "poll_votes_title": "Votes", + "poll_votes_deleteVote": "Delete vote?", + "poll_votes_authorPlaceHolder": "Fill your name", + "poll_votes_vote": "Vote", + "poll_votes_delete": "Delete vote?", + "comment_popup_create": "Add a comment", + "comment_popup_edit": "Edit a comment", + "comment_popup_action": "Save", + "comment_popup_authorPlaceholder": "Fill your name", + "comment_popup_textPlaceholder": "Fill your comment", + "polls_title": "My polls", + "polls_name": "Name", + "polls_createDate": "Created date", + "polls_status": "Status", + "polls_createdPolls": "My polls", + "polls_polls": "All polls", "signup_title": "Create an account", "signup_email": "Email", "signup_email_placeholder": "Enter your email", diff --git a/pollen-ui-riot-js/src/main/web/js/PollService.js b/pollen-ui-riot-js/src/main/web/js/PollService.js index a343d8d..f2760b2 100644 --- a/pollen-ui-riot-js/src/main/web/js/PollService.js +++ b/pollen-ui-riot-js/src/main/web/js/PollService.js @@ -28,7 +28,7 @@ class PollService extends FetchService { } create(form, choices) { - return this.form("/v1/polls/create", {poll: form, choices:choices}); + return this.form("/v1/polls/create", {poll: form, choices: choices}); } createdPolls(pagination) { @@ -40,7 +40,15 @@ class PollService extends FetchService { } getPoll(pollId) { - return this.get("/v1/polls/"+pollId); + return this.get("/v1/polls/" + pollId); + } + + closePoll(pollId) { + return this.put("/v1/polls/" + pollId + '/close'); + } + + reopenPoll(pollId) { + return this.put("/v1/polls/" + pollId + '/reopen'); } } diff --git a/pollen-ui-riot-js/src/main/web/tag/Pagination.tag b/pollen-ui-riot-js/src/main/web/tag/Pagination.tag index 20bb06d..6e2ebb1 100644 --- a/pollen-ui-riot-js/src/main/web/tag/Pagination.tag +++ b/pollen-ui-riot-js/src/main/web/tag/Pagination.tag @@ -2,7 +2,7 @@ <div class="pagination-controls"> <div class="pagination-config"> - Résultats par page: + {__.resultsPerPage} <select ref="pageSize" onchange="{onChangePageSize}"> <option each="{a in sizes}" value="{a}">{a}</option> @@ -10,23 +10,31 @@ </div> <div class="pagination-pager"> + <button class="{pageNumber > 0 ? '' : 'disabled'}" onclick="{onFirstPage}"> + <i class="fa fa-angle-double-left fa-15x"></i> + </button> <button class="{pageNumber > 0 ? '' : 'disabled'}" onclick="{onPreviousPage}"> - <i class="fa fa-chevron-left"></i> + <i class="fa fa-angle-left fa-15x"></i> </button> <div class="pagination-right"> - Page {pageNumber + 1} sur {lastPageNumber} + {__.page} {pageNumber + 1} / {lastPageNumber} </div> <button class="{(pageNumber + 1) < lastPageNumber ? '' : 'disabled'}" onclick="{onNextPage}"> - <i class="fa fa-chevron-right"></i> + <i class="fa fa-angle-right fa-15x"></i> + </button> + <button class="{(pageNumber + 1) < lastPageNumber ? '' : 'disabled'}" onclick="{onLastPage}"> + <i class="fa fa-angle-double-right fa-15x"></i> </button> </div> </div> <script> + let session = require("../js/Session"); + this.installBundle(session, "pagination"); + this.on('mount', () => { this.refs.pageSize.value = this.pageSize; - console.info('pagination ---- on mount') this.refresh(); }); @@ -41,8 +49,6 @@ this.onContextChange = function (newContext) { this.paginationContext = newContext; - console.info("onContextChange"); - console.info(newContext); let count = this.paginationContext.count; let size = this.paginationContext.pageSize; this.lastPageNumber = Math.ceil(count / size); @@ -56,19 +62,33 @@ this.pageNumber = 0; this.sortName = sortName; this.sortValue = sortValue; - console.info("on sort change: "+sortName+" --> "+sortValue) + console.info("on sort change: " + sortName + " --> " + sortValue); this.refresh(); }; this.onChangePageSize = function (e) { this.pageNumber = 0; if (e) { - console.info("Page size change: " + e.target.value) + console.info("Page size change: " + e.target.value); this.pageSize = e.target.value; } this.refresh(); }; + this.onFirstPage = function () { + if (this.pageNumber > 0) { + this.pageNumber = 0; + this.refresh(); + } + }; + + this.onLastPage = function () { + if (this.pageNumber + 1 < this.lastPageNumber) { + this.pageNumber = this.lastPageNumber - 1; + this.refresh(); + } + }; + this.onPreviousPage = function () { if (this.pageNumber > 0) { this.pageNumber--; @@ -103,6 +123,18 @@ </script> <style> + .fa-15x { + font-size: 1.5em; + } + + button { + border-style: none; + background-color: white; + cursor: pointer; + padding-left: 10px; + padding-right: 10px; + } + .disabled { color: gray; cursor: not-allowed; @@ -118,13 +150,15 @@ display: flex; flex-direction: row; justify-content: space-between; + align-content: center; } .pagination-pager { + flex-grow: 1; display: flex; flex-direction: row; align-items: center; - justify-self: flex-end; + justify-content: flex-end; } </style> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Poll.tag b/pollen-ui-riot-js/src/main/web/tag/poll/Poll.tag index 964c088..ee5ff0c 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Poll.tag +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Poll.tag @@ -26,8 +26,15 @@ require('./PollResults.tag'); <i class="fa fa-bar-chart-o"></i><span>{__.results}</span> </a> </div> - <div if="{poll.permission}" class="actions"> - <i class="fa fa-bars fa-2x mainColor"/> + <div if="{poll.permission}" class="actions tab-not-selected"> + <div class="actions-dropdown"> + <i class="fa fa-bars fa-2x mainColor"/> + <div class="actions-dropdown-content"> + <a if="{!poll.isClosed}" onclick="{closePoll}"><i class="link fa fa-close fa-15x"/> {__.closePoll}</a> + <a if="{poll.isClosed}" onclick="{reopenPoll}"><i class="link fa fa-play fa-15x"/> {__.reopenPoll}</a> + <a onclick="{deletePoll}"><i class="link fa fa-trash fa-15x"/> {__.deletePoll}</a> + </div> + </div> </div> </div> <div ref="content" class="tab-content"/> @@ -44,41 +51,63 @@ require('./PollResults.tag'); let session = require("../../js/Session"); this.installBundle(session, "poll"); + let pollService = require('../../js/PollService'); this.on('mount', () => { - let pollService = require('../../js/PollService'); pollService.getPoll(this.pollId).then(result => { this.poll = result; - this.withResults = this.poll.continuousResult || this.poll.isClosed; this.commentsCount = this.poll.commentCount; this.votesCount = this.poll.voteCount; + this.poll.$canVote = this.poll.canVote; + console.info("Poll::"); console.info(this.poll); - this.update(); + this.refresh(); + }); + }); - let tags = riot.mount(this.refs.content, "poll" + this.selectedTab, { - pollId: this.pollId, - poll: this.poll, - session: session, - permission: this.permission + this.refresh = () => { + this.withResults = this.poll.continuousResult || this.poll.isClosed; + let tags = riot.mount(this.refs.content, "poll" + this.selectedTab, { + pollId: this.pollId, + poll: this.poll, + session: session, + permission: this.permission + }); + let countName = this.selectedTab == 'results' ? '' : (this.selectedTab + 'Count'); + if (countName) { + tags[0].on('count', count => { + this[countName] = count; + let args = {}; + args[countName] = count; + this.update(args); }); - let countName = this.selectedTab == 'results' ? '' : (this.selectedTab + 'Count'); - if (countName) { - tags[0].on('count', count => { - this[countName] = count; - let args = {}; - args[countName] = count; - this.update(args); - }); - } + } + this.update(); + }; + + this.closePoll = () => { + pollService.closePoll(this.pollId).then(() => { + this.poll.isClosed = true; + this.poll.canVote = false; + this.refresh(); }); - }); + }; + this.reopenPoll = () => { + pollService.reopenPoll(this.pollId).then(() => { + this.poll.isClosed = false; + this.poll.canVote = this.poll.$canVote; + this.refresh(); + }); + }; </script> <style> + .fa-15x { + font-size: 1.5em; + } .block { cursor: not-allowed; - color: gray; } .block > * { @@ -111,34 +140,76 @@ require('./PollResults.tag'); display: flex; justify-content: center; align-items: center; - padding-bottom: 10px; font-size: 20px; + margin-bottom: 20px; } .tab-header { width: 820px; display: flex; flex-direction: row; - padding-top: 20px; + /*padding-top: 20px;*/ align-items: center; } - .tab-header > div { - padding-right: 20px; - } - .tab-selected { color: #13a2ff; + border-right: 1px solid #ddd; + border-left: 1px solid #ddd; + border-top: 1px solid #ddd; + height: 42px; + padding: 12px 12px 12px; + font-weight: bold; + } + + .tab-not-selected { + border-bottom: 1px solid #ddd; + padding: 12px 12px 12px; + height: 42px; } .tab-not-selected > a { color: black; } + .actions { flex-grow: 1; display: flex; justify-content: flex-end; align-items: center; + cursor: pointer; + } + + .actions-dropdown { + position: relative; + display: inline-block; + } + + /* Dropdown Content (Hidden by Default) */ + .actions-dropdown-content { + display: none; + position: absolute; + background-color: #f9f9f9; + width: 220px; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); + } + + /* Links inside the dropdown */ + .actions-dropdown-content a { + padding: 12px 12px; + text-decoration: none; + display: block; + color: black; + } + + /* Change color of dropdown links on hover */ + .actions-dropdown-content a:hover { + background-color: #f1f1f1 + } + + /* Show the dropdown menu on hover */ + .actions-dropdown:hover .actions-dropdown-content { + display: block; } </style> </Poll> \ No newline at end of file diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/PollComments.tag b/pollen-ui-riot-js/src/main/web/tag/poll/PollComments.tag index 7e8862c..4a2d8fc 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/PollComments.tag +++ b/pollen-ui-riot-js/src/main/web/tag/poll/PollComments.tag @@ -194,7 +194,7 @@ require('./CommentPopup.tag'); } .comment-header { - width: 360px; + width: 380px; display: flex; flex-direction: row; justify-content: flex-end; 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 48572f1..5def112 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 @@ -44,7 +44,7 @@ disabled="{vote.id == voteId?'':'disabled'}" placeholder="{__.authorPlaceHolder}"> </div> - <div class="actions vote right" if="{vote.permission && (!voteId || voteId != vote.id)}" + <div class="actions vote right" if="{poll.canVote && vote.permission && (!voteId || voteId != vote.id)}" id="{vote.id}"> <a onclick="{parent.deleteVote}"><i class="fa fa-trash danger fa-15x"/></a> <a onclick="{parent.onEditVote}"><i class="fa fa-pencil-square-o fa-15x"/></a> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag b/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag index 1972d8f..fb243e0 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag @@ -8,11 +8,19 @@ require('../Pagination.tag'); <table> <thead> <tr> - <th class="wide" onclick="{toggleSort}">{__.name} <i ref="sortName" - class="fa fa-sort-amount-asc"></i></th> - <th onclick="{toggleSort}">{__.createDate} <i ref="sortCreateDate" - class="disabled fa fa-sort"></i></th> - <th onclick="{toggleSort}">{__.status}</th> + <th onclick="{toggleSort}"> + <div> + {__.name} <i ref="sortName" class="fa fa-sort-amount-asc"></i> + </div> + </th> + <th onclick="{toggleSort}"> + <div> + {__.createDate} <i ref="sortCreateDate" class="disabled fa fa-sort"></i> + </div> + </th> + <th onclick="{toggleSort}"> + <div>{__.status}</div> + </th> </tr> </thead> <tbody> @@ -21,7 +29,7 @@ require('../Pagination.tag'); <a href="#poll/{poll.id}/vote">{poll.title}</a> </td> <td>{poll.beginDateStr}</td> - <td>{poll.status}</td> + <td>{poll.statusStr}</td> </tr> </tbody> <tfoot> @@ -39,12 +47,22 @@ require('../Pagination.tag'); </div> <script> + let session = require("../../js/Session"); + this.installBundle(session, "polls", locale => { + this.moment.locale(locale); + this.refreshPolls(); + }); + + this.moment = require('moment'); + this.moment.locale(opts.session.locale); + this.sortName = 'title'; this.sortValue = false; // means asc this.method = opts.method; + this.polls = null; + let pollService = require('../../js/PollService'); - this.moment = require('moment'); - this.moment.locale(opts.session.locale); + this.callback = (pagination) => { console.info("Request data with pagination::"); if (!pagination.order) { @@ -54,23 +72,20 @@ require('../Pagination.tag'); console.info(pagination); return pollService[this.method](pagination).then((result) => { this.polls = result.elements; - this.polls.forEach(p=> { - p.beginDateStr = this.moment(p.beginDate).format('LL'); - }); + console.info('Polls::'); console.info(this.polls); + this.refreshPolls(); this.update(); return result; }); }; - this.polls = null; - let session = require("../../js/Session"); - this.installBundle(session, "polls", locale => { - this.moment.locale(locale); - this.polls.forEach(p=> { + this.refreshPolls = () => { + this.polls.forEach(p => { p.beginDateStr = this.moment(p.beginDate).format('LL'); + p.statusStr = this.__[p.status]; }); - }); + }; this.on('mount', () => { this.pagination = this.tags.pagination; this.sortOwner = this.refs.sortName; @@ -106,6 +121,9 @@ require('../Pagination.tag'); </script> <style> + pagination { + width: 100%; + } .disabled { color: gray; } @@ -130,10 +148,24 @@ require('../Pagination.tag'); padding-top: 10px; } - thead > tr > th { + th { text-align: left; } + th > div { + justify-content: flex-start; + display: flex; + flex-direction: row; + } + + td:first-child { + width: 400px; + } + + td:nth-child(2) { + width: 150px; + } + .legend { width: 100%; height: 30px; -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.