[Pollen-commits] 01/01: Adaptation de l'écran des listes de sondages

16 Mar 2017

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 63db587d41fc3de6e62244ec32911d601552a221
Author: Sylvain Bavencoff <bavencoff@codelutin.com>
Date:   Thu Mar 16 15:39:38 2017 +0100

    Adaptation de l'écran des listes de sondages
---
 pollen-ui-riot-js/src/main/web/i18n.json           |  60 +++--
 pollen-ui-riot-js/src/main/web/js/UIHelper.js      |  11 +
 .../src/main/web/tag/Pagination.tag.html           | 235 +++++++++++---------
 pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html |   3 +-
 .../src/main/web/tag/poll/PollCard.tag.html        |  92 ++++++++
 .../src/main/web/tag/poll/Polls.tag.html           | 245 ++++++---------------
 6 files changed, 337 insertions(+), 309 deletions(-)

diff --git a/pollen-ui-riot-js/src/main/web/i18n.json b/pollen-ui-riot-js/src/main/web/i18n.json
index 8baaf7e..9347ed1 100644
--- a/pollen-ui-riot-js/src/main/web/i18n.json
+++ b/pollen-ui-riot-js/src/main/web/i18n.json
@@ -1,6 +1,6 @@
 {
   "fr": {
-    "pagination_page": "Page",
+    "pagination_all": "Tous",
     "pagination_resultsPerPage": "Résultats par page",
     "poll_closePoll": "Clôturer le sondage",
     "poll_reopenPoll": "Réouvrir le sondage",
@@ -38,13 +38,27 @@
     "polls_participatedPolls": "Mes participations",
     "polls_polls": "Tous les sondages",
     "polls_name": "Nom",
+    "polls_sort": "Trier par",
     "polls_createDate": "Date de création",
-    "polls_choiceDates": "Ajout de choix",
-    "polls_voteDate": "Vote",
-    "polls_status": "Statut",
-    "polls_CLOSED": "Fermé",
-    "polls_ADDING_CHOICES": "Ajout de choix en cours",
-    "polls_VOTING": "Vote en cours",
+    "polls_noPoll": "Aucun sondage",
+    "pollCard_CLOSED": "Fermé",
+    "pollCard_ADDING_CHOICES": "Ajout de choix",
+    "pollCard_VOTING": "Ouvert",
+    "pollCard_CREATED": "Créé",
+    "pollCard_createdBy": "Créé par",
+    "pollCard_createdIn": "le",
+    "pollCard_beginChoiceFrom": "ajout de choix à partir du",
+    "pollCard_votingFrom": "ouverture à partir du",
+    "pollCard_votingFromTo": "jusqu'au",
+    "pollCard_beginChoiceTo": "ajout de choix jusqu'au",
+    "pollCard_noChoice": "aucun choix",
+    "pollCard_choice": "choix",
+    "pollCard_choices": "choix",
+    "pollCard_votingTo": "ouvert jusqu'au",
+    "pollCard_noVote": "aucun vote",
+    "pollCard_vote": "vote",
+    "pollCard_votes": "votes",
+    "pollCard_closedFrom": "Fermé depuis le",
     "signup_title": "Créer un compte",
     "signup_email": "Email",
     "signup_email_placeholder": "Entrez votre adresse email",
@@ -235,7 +249,7 @@
     "date-picker_today": "Aujourd'hui"
   },
   "en": {
-    "pagination_page": "Page",
+    "pagination_all": "All",
     "pagination_resultsPerPage": "Results per page",
     "poll_choices": "Choices",
     "poll_votes": "Votes",
@@ -269,19 +283,31 @@
     "poll_votes_addChoice": "Add choice",
     "poll_votes_delete": "Delete vote?",
     "poll_votes_voteNotOpen": "Votes are not open.",
-    "polls_title": "My polls",
-    "polls_name": "Name",
-    "polls_createDate": "Created date",
-    "polls_choiceDates": "Add choices",
-    "polls_voteDates": "Vote",
-    "polls_status": "Status",
     "polls_createdPolls": "My polls",
     "polls_invitedPolls": "My invitations",
     "polls_participatedPolls": "My participations",
     "polls_polls": "All polls",
-    "polls_CLOSED": "Closed",
-    "polls_ADDING_CHOICES": "Adding choices",
-    "polls_VOTING": "Voting",
+    "polls_name": "Name",
+    "polls_sort": "Sort by",
+    "polls_noPoll": "No poll",
+    "pollCard_CLOSED": "Closed",
+    "pollCard_ADDING_CHOICES": "Adding choices",
+    "pollCard_VOTING": "Voting",
+    "pollCard_CREATED": "Created",
+    "pollCard_createdBy": "Create by",
+    "pollCard_createdIn": "in",
+    "pollCard_beginChoiceFrom": "add choice from",
+    "pollCard_votingFrom": "voting from",
+    "pollCard_votingFromTo": "to",
+    "pollCard_beginChoiceTo": "add choice to",
+    "pollCard_noChoice": "no choice",
+    "pollCard_choice": "choice",
+    "pollCard_choices": "choices",
+    "pollCard_votingTo": "voting to",
+    "pollCard_noVote": "no vote",
+    "pollCard_vote": "vote",
+    "pollCard_votes": "votes",
+    "pollCard_closedFrom": "Closing from",
     "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/UIHelper.js b/pollen-ui-riot-js/src/main/web/js/UIHelper.js
index f3808aa..743cd31 100644
--- a/pollen-ui-riot-js/src/main/web/js/UIHelper.js
+++ b/pollen-ui-riot-js/src/main/web/js/UIHelper.js
@@ -1,3 +1,6 @@
+let session = require("./Session.js");
+let moment = require("moment");
+
 module.exports = {
     getWindowDimensions() {
         var w = window,
@@ -34,5 +37,13 @@ module.exports = {
             // Popup is off the bottom of the page
             m.style.marginTop = (w.height - (pos.top + pos.height) - 20) + "px";
         }
+    },
+
+    formatDate(date, format) {
+        moment.locale(session.locale);
+        if (date) {
+            return moment(date).format(format || "LLLL");
+        }
+        return "";
     }
 };
diff --git a/pollen-ui-riot-js/src/main/web/tag/Pagination.tag.html b/pollen-ui-riot-js/src/main/web/tag/Pagination.tag.html
index 33c9d01..5265704 100644
--- a/pollen-ui-riot-js/src/main/web/tag/Pagination.tag.html
+++ b/pollen-ui-riot-js/src/main/web/tag/Pagination.tag.html
@@ -2,163 +2,178 @@
 
     <div class="pagination-controls">
         <div class="pagination-config">
-            {__.resultsPerPage}
-            <select ref="pageSize" onchange="{onChangePageSize}">
-                <option each="{a in sizes}" value="{a}">{a}</option>
-
-            </select>
+            <div class="o-form-element page-size">
+                <label class="c-label">
+                    {__.resultsPerPage}
+                </label>
+                <select class="c-field u-small"
+                        ref="pageSize"
+                        value={opts.pagination.pageSize}
+                        onchange={onChangePageSize}>
+                    <option each="{size in sizes}" value={size.value}>{size.label}</option>
+                </select>
+            </div>
         </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-angle-left fa-15x"></i>
-            </button>
-            <div class="pagination-right">
-                {__.page} {pageNumber + 1} / {lastPageNumber}
+        <div class="c-pagination">
+            <div class="c-pagination__controls c-pagination__controls--backward">
+                <button disabled={opts.pagination.pageNumber === 0}
+                        onclick="{onFirstPage}"
+                        class="c-pagination__control">
+                    «
+                </button>
+                <button class="c-pagination__control"
+                        disabled={opts.pagination.pageNumber === 0}
+                        onclick="{onPreviousPage}">
+                    ‹
+                </button>
             </div>
-            <button class="{(pageNumber + 1) < lastPageNumber ? '' : 'disabled'}" onclick="{onNextPage}">
-                <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 class="c-pagination__controls">
+                <div class="c-pagination__ellipsis">
+                     {hasEllipsisPrevious ? '…' : ' '}
+                 </div>
+                <button each={page in pagesToShow}
+                        onclick="{onSetPage(page)}"
+                        class="c-pagination__page {c-pagination__page--current: parent.opts.pagination.pageNumber === page}">
+                    {page + 1 }
+                </button>
+                <div class="c-pagination__ellipsis">
+                    {hasEllipsisNext ? '…' : ' '}
+                </div>
+          </div>
+          <div class="c-pagination__controls c-pagination__controls--forward">
+              <button disabled={opts.pagination.pageNumber >= opts.pagination.lastPage}
+                      onclick="{onNextPage}"
+                      class="c-pagination__control">
+                  ›
+              </button>
+              <button disabled={opts.pagination.pageNumber >= opts.pagination.lastPage}
+                      onclick="{onLastPage}"
+                      class="c-pagination__control">
+                  »
+              </button>
+          </div>
         </div>
+
+
     </div>
 
     <script type="es6">
-
+        this.nbMaxPagesToShow = 5;
         let session = require("../js/Session");
         this.installBundle(session, "pagination");
 
+        this.pagesToShow = [0];
+        this.hasEllipsisPrevious = false;
+        this.hasEllipsisNext = false;
+
+        if (!this.opts.pagination) {
+            this.opts.pagination = {};
+        }
+        this.opts.pagination.pageNumber |= 0;
+        this.opts.pagination.pageSize |= 5;
+        this.opts.pagination.lastPage |= 0;
+
+        this.sizes = [
+            {value: 1, label: "1"},
+            {value: 5, label: "5"},
+            {value: 10, label: "10"},
+            {value: 20, label: "20"},
+            {value: 50, label: "50"},
+            {value: 100, label: "100"},
+            {value: -1, label: this.__.all}
+        ];
+
+        this.updatePagesToShow = () => {
+            let nbPageToShow = Math.min(this.nbMaxPagesToShow, this.opts.pagination.lastPage + 1);
+            let offsetPage = this.opts.pagination.pageNumber - Math.floor(nbPageToShow / 2);
+            offsetPage = Math.max(0, Math.min(offsetPage, this.opts.pagination.lastPage - nbPageToShow + 1));
+            this.hasEllipsisPrevious = offsetPage > 0;
+            this.hasEllipsisNext = offsetPage + nbPageToShow <= this.opts.pagination.lastPage;
+            this.pagesToShow = Array
+                .from(Array(nbPageToShow).keys())
+                .map(index => offsetPage + index);
+        };
+
+        this.on("update", () => {
+            this.updatePagesToShow();
+        });
+
         this.on("mount", () => {
-            this.refs.pageSize.value = this.pageSize;
-            this.refresh();
+            this.refs.pageSize.value = this.opts.pagination.pageSize;
         });
 
-        this.sizes = [1, 5, 10, 15, 25, 50, 100, 250, 500];
-        this.pageNumber = 0;
-        this.lastPageNumber = 0;
-        this.pageSize = 5;
-        this.callback = this.opts.callback;
-        this.sortName = this.opts.sortName;
-        this.sortValue = this.opts.sortValue;
-
-        this.onContextChange = function(newContext) {
-            this.paginationContext = newContext;
-
-            let count = this.paginationContext.count;
-            let size = this.paginationContext.pageSize;
-            this.lastPageNumber = Math.ceil(count / size);
-            this.pageNumber = this.paginationContext.currentPage;
-            this.pageSize = this.paginationContext.pageSize;
-            this.sortName = this.paginationContext.order;
-            this.sortValue = !this.paginationContext.desc;
-        };
+        this.updatePagesToShow();
 
-        this.onSortChange = function(sortName, sortValue) {
-            this.pageNumber = 0;
-            this.sortName = sortName;
-            this.sortValue = 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);
-                this.pageSize = e.target.value;
-            }
-            this.refresh();
+            this.opts.pagination.pageSize = e.target.value;
+            this.opts.pagination.pageNumber = 0;
+            this.opts.onchange(this.opts.pagination);
         };
 
         this.onFirstPage = function() {
-            if (this.pageNumber > 0) {
-                this.pageNumber = 0;
-                this.refresh();
+            if (this.opts.pagination.pageNumber > 0) {
+                this.opts.pagination.pageNumber = 0;
+                this.opts.onchange(this.opts.pagination);
             }
         };
 
         this.onLastPage = function() {
-            if (this.pageNumber + 1 < this.lastPageNumber) {
-                this.pageNumber = this.lastPageNumber - 1;
-                this.refresh();
+            if (this.opts.pagination.pageNumber < this.opts.pagination.lastPage) {
+                this.opts.pagination.pageNumber = this.opts.pagination.lastPage;
+                this.opts.onchange(this.opts.pagination);
             }
         };
 
         this.onPreviousPage = function() {
-            if (this.pageNumber > 0) {
-                this.pageNumber--;
-                this.refresh();
+            if (this.opts.pagination.pageNumber > 0) {
+                this.opts.pagination.pageNumber--;
+                this.opts.onchange(this.opts.pagination);
             }
         };
 
         this.onNextPage = function() {
-            if (this.pageNumber + 1 < this.lastPageNumber) {
-                this.pageNumber++;
-                this.refresh();
+            if (this.opts.pagination.pageNumber < this.opts.pagination.lastPage) {
+                this.opts.pagination.pageNumber++;
+                this.opts.onchange(this.opts.pagination);
             }
         };
 
-        this.refresh = function() {
-            let pagination = {
-                pageNumber: this.pageNumber,
-                pageSize: this.pageSize,
-                order: this.sortName,
-                desc: this.sortValue
-            };
-            // console.info("Request: ");
-            // console.info(pagination);
-            this.callback(pagination).then((result) => {
-                // console.info("update pagination");
-                // console.info(result.pagination);
-                this.onContextChange(result.pagination);
-                this.update();
-            });
+        this.onSetPage = (page) => () => {
+            this.opts.pagination.pageNumber = page;
+            this.opts.onchange(this.opts.pagination);
         };
 
     </script>
     <style>
-
-        .fa-15x {
-            font-size: 1.5em;
-        }
-
-        button {
-            border-style: none;
-            background-color: white;
-            cursor: pointer;
-            padding-left: 10px;
-            padding-right: 10px;
+        .o-form-element.page-size {
+            display: flex;
         }
-
-        .disabled {
-            color: gray;
-            cursor: not-allowed;
+        .o-form-element.page-size .c-label:first-child {
+            width: 150px;
+            text-align: right;
+            float: left;
+            padding: 0.25em 5px 0.25em 0;
         }
 
-        .pagination-right {
-            padding-left: 5px;
-            padding-right: 5px;
+        .o-form-element.page-size .c-field {
+            width: 60px;
         }
 
         .pagination-controls {
-            padding-top: 10px;
             display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            align-content: center;
+            flex-wrap: wrap;
         }
 
-        .pagination-pager {
+        .pagination-controls .c-pagination {
+            width: auto;
             flex-grow: 1;
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: flex-end;
+        }
+
+        .c-pagination__ellipsis {
+            min-width: 32px;
+            padding: 0;
+            display: inline-block;
         }
 
     </style>
diff --git a/pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html b/pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html
index ec3dee8..66f56ae 100644
--- a/pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html
+++ b/pollen-ui-riot-js/src/main/web/tag/SignIn.tag.html
@@ -88,8 +88,9 @@ require("./popup/NewPassword.tag.html");
 
     <style>
 
-        .container {
+        .signin {
             width: 250px;
+            margin: 0 auto;
         }
 
         .c-heading {
diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/PollCard.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/PollCard.tag.html
new file mode 100644
index 0000000..d9fec89
--- /dev/null
+++ b/pollen-ui-riot-js/src/main/web/tag/poll/PollCard.tag.html
@@ -0,0 +1,92 @@
+<PollCard>
+    <div class="poll-card {opts.poll.status}">
+        <div class="poll-header">
+            <a class="poll-title" href="#poll/{opts.poll.id}/vote/{opts.poll.permission}">
+                {opts.poll.title}
+            </a>
+            <div class="poll-status">
+                {__[opts.poll.status]}
+            </div>
+        </div>
+
+        <p>{opts.poll.description}</p>
+        <div class="poll-creation">
+            {__.createdBy} {opts.poll.creatorName} {__.createdIn} {formatDate(opts.poll.createDate)}
+        </div>
+        <div class="beginChoiceDate"
+             if={opts.poll.status === "CREATED" && opts.poll.choiceAddAllowed}>
+              {__.beginChoiceFrom} {formatDate(opts.poll.beginChoiceDate)}
+        </div>
+        <div class="poll-created"
+             if={opts.poll.status === "CREATED"}>
+            {__.votingFrom} {formatDate(opts.poll.beginDate)}
+            <span if={opts.poll.endDate}> {__votingFromTo} {formatDate(opts.poll.endDate)}</span>
+        </div>
+
+        <div class="poll-adding-choices"
+             if={opts.poll.status === "ADDING_CHOICES"}>
+            {__.beginChoiceTo} {formatDate(opts.poll.endChoiceDate)} (
+            <span if={opts.poll.choiceCount === 0}>{__.noChoice}</span>
+            <span if={opts.poll.choiceCount === 1}>1 {__.choice}</span>
+            <span if={opts.poll.choiceCount > 1}>{opts.poll.choiceCount} {__.choices}</span>
+            )
+        </div>
+
+        <div class="poll-voting"
+             if={opts.poll.status === "VOTING"}>
+             <span if={opts.poll.voteCount === 0}>{__.noVote}</span>
+             <span if={opts.poll.voteCount === 1}>1 {__.vote}</span>
+             <span if={opts.poll.voteCount > 1}>{opts.poll.voteCount} {__.votes}</span>
+             <span if={opts.poll.endDate}> {__.votingTo} {formatDate(opts.poll.endDate)}</span>
+        </div>
+
+        <div class="poll-voting"
+             if={opts.poll.status === "CLOSED"}>
+             <span if={opts.poll.voteCount === 0}>{__.noVote}</span>
+             <span if={opts.poll.voteCount === 1}>1 {__.vote}</span>
+             <span if={opts.poll.voteCount > 1}>{opts.poll.voteCount} {__.votes}</span>
+             <span if={opts.poll.endDate}> {__.closedFrom} {formatDate(opts.poll.endDate)}</span>
+        </div>
+    </div>
+
+    <script type="es6">
+        let session = require("../../js/Session");
+        this.installBundle(session, "pollCard");
+    </script>
+
+    <style>
+        .poll-card {
+            margin: 5px auto;
+            border-radius: 4px;
+            box-shadow: 0 0 1px hsla(0,0%,7%,.6);
+            padding: 0.5em;
+        }
+
+        .poll-card.CREATED {
+            background-color: grey;
+        }
+
+        .poll-card.ADDING_CHOICES {
+            background-color: orange;
+        }
+
+        .poll-card.VOTING {
+            background-color: #13a2ff;
+            color: white
+        }
+
+        .poll-card.CLOSED {
+            background-color: #53bd41;
+        }
+
+        .poll-title {
+            color: inherit;
+        }
+
+        .poll-header {
+            display: flex;
+            justify-content: space-between;
+        }
+
+    </style>
+</PollCard>
diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag.html
index dfdf507..9fdeae4 100644
--- a/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag.html
+++ b/pollen-ui-riot-js/src/main/web/tag/poll/Polls.tag.html
@@ -1,213 +1,96 @@
 require("../Pagination.tag.html");
+require("./PollCard.tag.html");
 <Polls>
-    <div class="body-container">
-
-        <div class="container">
-
-            <div class="legend">{__[method]}</div>
-            <table>
-                <thead>
-                <tr>
-                    <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>
-                        <div>
-                            {__.choiceDates}
+    <div class="container" >
+        <div show="{loaded}">
+            <h1 class="c-heading">{__[opts.method]}</h1>
+
+            <div show={polls.length > 0} >
+                <div class="o-form-element sort">
+                    <label class="c-label" for="sort">{__.sort}</label>
+                    <div class="c-input-group">
+                        <div class="o-field">
+                            <select class="c-field"
+                                    onchange={selectSort}>
+                                <option value="title">{__.name}</option>
+                                <option value="topiaCreateDate">{__.createDate}</option>
+                            </select>
                         </div>
-                    </th>
-                    <th>
-                        <div>
-                            {__.voteDates}
-                        </div>
-                    </th>
-                    <th>
-                        <div>{__.status}</div>
-                    </th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr each="{poll in polls}">
-                    <td>
-                        <a href="#poll/{poll.id}">{poll.title}</a>
-                    </td>
-                    <td>{poll.createDateStr}</td>
-                    <td>{poll.choiceDates}</td>
-                    <td>{poll.voteDates}</td>
-                    <td>{poll.statusStr}</td>
-                </tr>
-                </tbody>
-                <tfoot>
-                <tr>
-                    <th colspan="7">
-                        <div>
-                            <Pagination ref="pagination" sortName="{sortName}" sortValue="false" callback="{callback}"/>
-                        </div>
-                    </th>
-                </tr>
-                </tfoot>
-            </table>
+                        <button class="c-button c-button--brand"
+                                onclick={toggleSort}>
+                            <i class="fa {pagination.desc ? 'fa-sort-amount-desc' : 'fa-sort-amount-asc'}"></i>
+                        </button>
+                    </div>
+                </div>
+
+                <Pagination pagination={pagination} onchange="{refresh}"/>
+
+                <PollCard each={poll in polls} poll={poll}/>
+
+                <Pagination pagination={pagination} onchange="{refresh}"/>
+            </div>
+            <div show={polls.length === 0} class="c-alert c-alert--info">
+                {__.noPoll}
+            </div>
         </div>
-
     </div>
 
     <script type="es6">
+        this.loaded = false;
         let session = require("../../js/Session");
-        this.installBundle(session, "polls", locale => {
-            this.moment.locale(locale);
-            this.refreshPolls();
-        });
-
-        this.moment = require("moment");
-        this.moment.locale(this.opts.session.locale);
+        this.installBundle(session, "polls");
 
-        this.sortName = "title";
-        this.sortValue = false; // means asc
-        this.method = this.opts.method;
-        this.polls = null;
+        this.pagination = {
+            order: "title",
+            desc: false, // means asc
+            pageSize: 5,
+            pageNumber: 0
+        };
+        this.polls = [];
 
         let pollService = require("../../js/PollService");
 
-        this.callback = (pagination) => {
-            // console.info("Request data with pagination::");
-            if (!pagination.order) {
-                pagination.order = this.sortName;
-                pagination.desc = this.sortValue;
-            }
-            // console.info(pagination);
-            return pollService[this.method](pagination).then((result) => {
+        this.refresh = () => {
+            return pollService[this.opts.method](this.pagination).then((result) => {
                 this.polls = result.elements;
-                // console.info("Polls::");
-                // console.info(this.polls);
-                this.refreshPolls();
+                Object.assign(this.pagination, result.pagination);
+                this.loaded = true;
                 this.update();
                 return result;
             });
         };
 
-        this.refreshPolls = () => {
-            this.polls.forEach(p => {
-                p.createDateStr = this.moment(p.createDate).format("llll");
-                p.choiceDates = p.beginChoiceDate ? this.moment(p.beginChoiceDate).format("llll") : "";
-                if (p.endChoiceDate) {
-                    p.choiceDates += " -> " + this.moment(p.endChoiceDate).format("llll");
-                }
-                p.voteDates = p.beginDate ? this.moment(p.beginDate).format("llll") : "";
-                if (p.endDate) {
-                    p.voteDates += " -> " + this.moment(p.endDate).format("llll");
-                }
-                p.statusStr = this.__[p.status];
-            });
+        this.refresh();
+
+        this.toggleSort = () => {
+            this.pagination.desc = !this.pagination.desc;
+            this.refresh();
         };
-        this.on("mount", () => {
-            this.pagination = this.tags.pagination;
-            this.sortOwner = this.refs.sortName;
-            this.refs.sortName.setAttribute("sortName", "title");
-            this.refs.sortCreateDate.setAttribute("sortName", "topiaCreateDate");
-        });
-
-        this.toggleSort = (e) => {
-            // console.info(this.refs.sortName);
-            if (this.sortOwner === e.target) {
-                this.sortOwner.classList.toggle("fa-sort-amount-asc");
-                this.sortOwner.classList.toggle("fa-sort-amount-desc");
-                this.sortValue = !this.sortValue;
-            } else {
-
-                this.sortOwner.classList.add("fa-sort");
-                this.sortOwner.classList.add("disabled");
-                this.sortOwner.classList.remove("fa-sort-amount-desc");
-                this.sortOwner.classList.remove("fa-sort-amount-asc");
-
-                this.sortOwner = e.target;
-
-                this.sortOwner.classList.remove("disabled");
-                this.sortOwner.classList.remove("fa-sort");
-                this.sortOwner.classList.remove("fa-sort-amount-desc");
-                this.sortOwner.classList.add("fa-sort-amount-asc");
-                this.sortValue = true;
-            }
-
-            this.pagination.onSortChange(this.sortOwner.getAttribute("sortName"), this.sortValue);
+
+        this.selectSort = (e) => {
+            this.pagination.order = e.target.value;
+            this.refresh();
         };
 
     </script>
     <style>
 
-        pagination {
-            width: 100%;
-        }
-
-        .disabled {
-            color: gray;
-        }
-
-        .wide {
-            width: 400px;
+        .c-heading {
+            text-align: center;
         }
 
-        .body-container {
-            max-width: 90%;
+        .o-form-element.sort .c-label:first-child {
+            width: 70px;
+            display: inline-block;
+            text-align: right;
+            float: left;
+            padding-top: 0.5em;
+            padding-right: 5px;
         }
 
-        .container {
-            display: flex;
-            justify-content: space-around;
-            align-items: center;
-            flex-direction: column;
-            background: white;
-            border: solid 2px #c8ccca;
-            border-radius: 10px;
-            padding: 15px 0;
-            width: 100%;
+        .o-form-element.sort .c-input-group {
+            width: 200px;
         }
 
-        table {
-            padding-top: 10px;
-        }
-
-        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: 210px;
-        }
-
-        td:nth-child(3) {
-            width: 430px;
-        }
-
-        td:nth-child(4) {
-            width: 430px;
-        }
-
-        .legend {
-            width: 100%;
-            height: 30px;
-            border-bottom: 1px solid #b2c7d3;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding-bottom: 10px;
-            font-size: 20px;
-        }
     </style>
 </Polls>

-- 
To stop receiving notification emails like this one, please contact
chorem.org SCM administrator <admin+scm@chorem.org>.

    

[Pollen-commits] 01/01: Adaptation de l'écran des listes de sondages

chorem.org scm