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 2a3ec7cb0aacf0f65376730d031093abc8931ce8 Author: Sylvain Bavencoff <bavencoff@codelutin.com> Date: Fri Aug 4 12:26:50 2017 +0200 correction chargement des commentaire (ref #100) --- .../org/chorem/pollen/rest/api/v1/CommentApi.java | 3 +- pollen-ui-riot-js/src/main/web/js/Poll.js | 43 ++-- .../src/main/web/tag/components/LazyLoad.tag.html | 29 ++- .../src/main/web/tag/poll/Comments.tag.html | 235 ++++++++++++--------- 4 files changed, 178 insertions(+), 132 deletions(-) diff --git a/pollen-rest-api/src/main/java/org/chorem/pollen/rest/api/v1/CommentApi.java b/pollen-rest-api/src/main/java/org/chorem/pollen/rest/api/v1/CommentApi.java index 3fe498bd..418026f1 100644 --- a/pollen-rest-api/src/main/java/org/chorem/pollen/rest/api/v1/CommentApi.java +++ b/pollen-rest-api/src/main/java/org/chorem/pollen/rest/api/v1/CommentApi.java @@ -33,6 +33,7 @@ import org.chorem.pollen.services.service.CommentService; import org.chorem.pollen.services.service.InvalidFormException; import org.chorem.pollen.services.service.ReportService; +import javax.ws.rs.BeanParam; import javax.ws.rs.Consumes; import javax.ws.rs.DELETE; import javax.ws.rs.GET; @@ -61,7 +62,7 @@ public class CommentApi { @GET public PaginationResultBean<CommentBean> getComments(@Context CommentService commentService, @PathParam("pollId") PollenEntityId<Poll> pollId, - PaginationParameterBean paginationParameter) { + @BeanParam PaginationParameterBean paginationParameter) { return commentService.getComments(pollId.getEntityId(), paginationParameter); diff --git a/pollen-ui-riot-js/src/main/web/js/Poll.js b/pollen-ui-riot-js/src/main/web/js/Poll.js index a562df62..a311f39c 100644 --- a/pollen-ui-riot-js/src/main/web/js/Poll.js +++ b/pollen-ui-riot-js/src/main/web/js/Poll.js @@ -107,7 +107,6 @@ class Poll { addChoice(choice) { if (this.id) { let promise; - console.log(choice) if (choice.choiceType === "RESOURCE" && choice.choiceValue) { promise = resourceService.create(choice.choiceValue, "CHOICE").then((result) => { choice.choiceValue = result.id; @@ -228,23 +227,12 @@ class Poll { return podium; } - loadComments() { + loadCommentAuthorName() { if (this._initPromise) { return this._initPromise.then(() => { - let paginationParameter = new Pagination(); - paginationParameter.pageSize = -1; - paginationParameter.order = "postDate"; - var promises = [ - commentService.getComments(this.id, paginationParameter, this.permission || this.votePermission), - commentService.getNewComment(this.id, this.permission || this.votePermission) - ]; - return Promise.all(promises).then((result) => { - this.comments = result[0].elements; - this.commentCount = result[0].elements.length; - this.authorName = result[1].authorName; - + return commentService.getNewComment(this.id, this.permission || this.votePermission).then((result) => { + this.authorName = result.authorName; pageTracker.trackComments(); - bus.trigger("poll", this); return Promise.resolve(this); }); @@ -253,6 +241,19 @@ class Poll { return Promise.reject("Init poll after load comments"); } + loadLazyComments(pagination) { + if (this._initPromise) { + return this._initPromise.then(() => { + return commentService.getComments(this.id, pagination, this.permission || this.votePermission).then((result) => { + this.commentCount = result.pagination.count; + bus.trigger("poll", this); + return result; + }); + }); + } + return Promise.reject("Init poll after load comments"); + } + close() { if (this.id) { return pollService.closePoll(this.id, this.permission).then(() => { @@ -320,9 +321,9 @@ class Poll { authorName: authorName, text: text }; - return commentService.createComment(this.id, form, this.permission || this.votePermission).then(() => { + return commentService.createComment(this.id, form, this.permission || this.votePermission).then((comment) => { pageTracker.trackAddComment(); - return this.loadComments(); + return comment; }); } return Promise.reject("Init poll after add comment"); @@ -330,18 +331,14 @@ class Poll { updateComment(comment) { if (this.id) { - return commentService.updateComment(this.id, comment, this.permission || comment.permission || "").then(() => { - return this.loadComments(); - }); + return commentService.updateComment(this.id, comment, this.permission || comment.permission || ""); } return Promise.reject("Init poll after update comment"); } deleteComment(comment) { if (this.id) { - return commentService.deleteComment(this.id, comment.id, this.permission || comment.permission || "").then(() => { - return this.loadComments(); - }); + return commentService.deleteComment(this.id, comment.id, this.permission || comment.permission || ""); } return Promise.reject("Init poll after delete comment"); } diff --git a/pollen-ui-riot-js/src/main/web/tag/components/LazyLoad.tag.html b/pollen-ui-riot-js/src/main/web/tag/components/LazyLoad.tag.html index 9ad839b4..a0259021 100644 --- a/pollen-ui-riot-js/src/main/web/tag/components/LazyLoad.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/components/LazyLoad.tag.html @@ -32,21 +32,32 @@ }; this.onscroll = e => { - // this.logger.info("scroll Y : " + e.currentTarget.scrollY + - // " - height : " + e.currentTarget.innerHeight + - // " - doc.height : " + e.target.body.children[0].clientHeight + - // " - loading.height : " + this.refs.loading.clientHeight); - if (e.currentTarget.scrollY + e.currentTarget.innerHeight > e.target.body.children[0].clientHeight - this.refs.loading.clientHeight) { - this.loadNext(); + if (this.opts.scrollTarget) { + // this.logger.info("scroll window : " + e.currentTarget.scrollTop + + // " - height window : " + e.currentTarget.clientHeight + + // " - top loading : " + this.refs.loading.offsetTop); + if (e.currentTarget.scrollTop + e.currentTarget.clientHeight > this.refs.loading.offsetTop) { + this.loadNext(); + } + } else { + // this.logger.info("scroll Y : " + e.currentTarget.scrollY + + // " - height : " + e.currentTarget.innerHeight + + // " - doc.height : " + e.target.body.children[0].clientHeight + + // " - loading.height : " + this.refs.loading.clientHeight); + if (e.currentTarget.scrollY + e.currentTarget.innerHeight > e.target.body.children[0].clientHeight - this.refs.loading.clientHeight) { + this.loadNext(); + } } }; - window.addEventListener("scroll", this.onscroll); + (this.opts.scrollTarget || window).addEventListener("scroll", this.onscroll); - this.reload(); + if (!this.opts.notLoadOnStart) { + this.reload(); + } this.on("unmount", () => { - window.removeEventListener("scroll", this.onscroll); + (this.opts.scrollTarget || window).removeEventListener("scroll", this.onscroll); }); </script> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Comments.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Comments.tag.html index 49032792..41404289 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Comments.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Comments.tag.html @@ -64,12 +64,12 @@ require("./Report.tag.html"); {__.noComment} </h4> - <div class="actions" show="{poll.comments && poll.comments.length > 0}"> + <div class="actions" show="{poll.commentCount > 0}"> <button type="button" class="c-button c-button--info" onclick="{toggleSort}" title={orderDesc ? __.sort_desc : __.sort_asc}> - <i class="fa fa-sort-amount-{desc : orderDesc, asc : !orderDesc}"/> + <i class="fa fa-sort-amount-{desc : pagination.desc, asc : !pagination.desc}"/> </button> <button type="button" class="c-button c-button--info" @@ -78,95 +78,106 @@ require("./Report.tag.html"); <i class="fa fa-arrow-down"/> </button> </div> - <div class="comments-list {inverse : orderDesc}"> - <div each="{comment, index in poll.comments}" class="separator-bottom"> - - <div show={commentEditing !== comment} class="comment"> - <div class="comment-user"> - <LetterAvatar name={comment.authorName} rounded="true"/> - <div class="user"> - {comment.authorName} - <Report target={comment}/> - <div class="comment-date"> - {formatDate(comment.postDate)} - </div> - </div> - <span class="c-input-group comment-actions" - if={comment.permission}> - <button type="button" - class="c-button c-button--error u-small" - onclick="{parent.deleteComment(comment)}" - title={parent.__.delete}> - <i class="fa fa-trash"/> - </button> - <button type="button" - class="c-button c-button--brand u-small" - onclick="{parent.startEditComment(comment)}" - title={parent.__.edit}> - <i class="fa fa-pencil-square-o"/> - </button> - </span> - </div> - <div class="comment-text"> - <div class="text"> - {comment.text} - </div> - </div> - </div> - <form if={commentEditing === comment} - class="comment-form"> - <HumanInput onsubmit="{updateComment}"/> - <div class="comment"> - <div class="comment-user"> - <div class="o-form-element"> - <div class="o-field o-field--icon-left"> - <i class="fa fa-fw fa-user c-icon"></i> - <input class="c-field" - type="text" - name="editAuthor" - ref="editAuthor" - required - value={commentEditing.authorName} - placeholder="{parent.__.authorPlaceholder}"> + <LazyLoad pagination={pagination} + onload={lazyLoad} + load-size="20" + scroll-target={refs.window} + not-load-on-start="true" + ref="lazyLoad" + class="elements"> + <yield to="element"> + <div class="separator-bottom"> + <div if={parent.parent.commentEditing !== element} class="comment"> + <div class="comment-user"> + <LetterAvatar name={element.authorName} rounded="true"/> + <div class="user"> + {element.authorName} + <Report target={element}/> + <div class="comment-date"> + {formatDate(element.postDate)} </div> </div> + <span class="c-input-group comment-actions" + if={element.permission}> + <button type="button" + class="c-button c-button--error u-small" + onclick="{parent.parent.deleteComment(element)}" + title={parent.parent.__.delete}> + <i class="fa fa-trash"/> + </button> + <button type="button" + class="c-button c-button--brand u-small" + onclick="{parent.parent.startEditComment(element)}" + title={parent.parent.__.edit}> + <i class="fa fa-pencil-square-o"/> + </button> + </span> </div> <div class="comment-text"> - <div class="o-form-element "> - <textarea class="c-field" - rows="5" - ref="editText" - name="editText" - required - value={commentEditing.text} - placeholder="{parent.__.textPlaceholder}"/> + <div class="text"> + {element.text} </div> </div> </div> - <div class="c-hint--static c-hint--error" - if="{error}"> - {error} - </div> - <div class="actions"> - <button class="c-button c-button--error" - type="button" - onclick="{cancelEditComment}" - title={parent.__.cancelEditComment}> - <i class="fa fa-remove"/> - {parent.__.cancelEditComment} - </button> - <button class="c-button c-button--success pull-right" - type="submit" - title={parent.__.updateComment}> - <i class="fa fa-check"/> - {parent.__.updateComment} - </button> - </div> - </form> - </div> - </div> - <div class="actions-right" show="{poll.comments && poll.comments.length > 0}"> + <form if={parent.parent.commentEditing === element} + class="comment-form"> + <HumanInput onsubmit="{parent.parent.updateComment}"/> + <div class="comment"> + <div class="comment-user"> + <div class="o-form-element"> + <div class="o-field o-field--icon-left"> + <i class="fa fa-fw fa-user c-icon"></i> + <input class="c-field" + type="text" + name="editAuthor" + ref="editAuthor" + required + value={parent.parent.commentEditing.authorName} + placeholder="{parent.parent.__.authorPlaceholder}"> + + </div> + </div> + </div> + <div class="comment-text"> + <div class="o-form-element "> + <textarea class="c-field" + rows="5" + ref="editText" + name="editText" + required + value={parent.parent.commentEditing.text} + placeholder="{parent.parent.__.textPlaceholder}"/> + </div> + </div> + </div> + <div class="c-hint--static c-hint--error" + if="{parent.error}"> + {parent.error} + </div> + <div class="actions"> + <button class="c-button c-button--error" + type="button" + onclick="{parent.parent.cancelEditComment}" + title={parent.parent.__.cancelEditComment}> + <i class="fa fa-remove"/> + {parent.parent.__.cancelEditComment} + </button> + <button class="c-button c-button--success pull-right" + type="submit" + title={parent.parent.__.updateComment}> + <i class="fa fa-check"/> + {parent.parent.__.updateComment} + </button> + </div> + </form> + </div> + </yield> + <yield to="loading"> + <i class="fa fa-spinner fa-pulse"></i> + </yield> + </LazyLoad> + <div class="actions-right" show="{poll.commentCount > 0}"> <button type="button" class="c-button c-button--info" onclick="{scrollTop}" @@ -194,16 +205,37 @@ require("./Report.tag.html"); this.poll = require("../../js/Poll.js"); + this.pagination = { + order: "postDate", + desc: true, + pageSize: -1, + pageNumber: 0 + }; + this.onPollChange = poll => { this.loaded = poll.comments !== undefined; this.poll = poll; this.update(); }; + this.refresh = () => { + this.refs.lazyLoad.reload(); + }; + + this.lazyLoad = pagination => { + return this.poll.loadLazyComments(pagination).then((result) => { + if (!this.loaded) { + this.loaded = true; + this.update(); + } + return result; + }); + }; + this.listen("poll", this.onPollChange); this.listen("user", () => { if (this.open) { - this.poll.loadComments(); + this.poll.loadCommentAuthorName(); this.update(); } }); @@ -212,47 +244,51 @@ require("./Report.tag.html"); this.openComments = () => { this.open = true; - this.poll.loadComments(); + this.poll.loadCommentAuthorName(); + this.refresh(); }; this.closeComments = () => { this.open = false; }; - this.orderDesc = true; - this.toggleSort = () => { - this.orderDesc = !this.orderDesc; + this.pagination.desc = !this.pagination.desc; + this.refresh(); }; this.addComment = (e) => { e.preventDefault(); e.stopPropagation(); - this.sendingComment = true; - this.update(); - this.poll.addComment(this.refs.author.value, this.refs.text.value) - .then(() => { + if (!this.sendingComment) { + this.sendingComment = true; + this.update(); + this.poll.addComment(this.refs.author.value, this.refs.text.value).then(() => { this.refs.text.value = ""; this.sendingComment = false; - this.update(); - }, (error) => { + this.refresh(); + }, () => { this.sendingComment = false; this.update(); }); + } }; this.commentEditing = null; this.startEditComment = (comment) => () => { this.commentEditing = comment; + this.update(); }; this.updateComment = e => { e.preventDefault(); e.stopPropagation(); - this.commentEditing.authorName = this.refs.editAuthor.value; - this.commentEditing.text = this.refs.editText.value; - this.poll.updateComment(this.commentEditing).then(() => { + this.commentEditing.authorName = this.refs.lazyLoad.refs.editAuthor.value; + this.commentEditing.text = this.refs.lazyLoad.refs.editText.value; + this.poll.updateComment(this.commentEditing).then(result => { + Object.assign(this.commentEditing, result); this.cancelEditComment(); + this.update(); }); }; @@ -263,8 +299,9 @@ require("./Report.tag.html"); this.deleteComment = (comment) => () => { this.confirm(this.__.deleteComment).then((confirm) => { if (confirm) { - this.poll.deleteComment(comment); - this.update(); + this.poll.deleteComment(comment).then(() => { + this.refresh(); + }); } }); }; -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.