branch develop updated (c774ee9c -> 2a3ec7cb)
This is an automated email from the git hooks/post-receive script. New change to branch develop in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git from c774ee9c logs trop verbeux new 2a3ec7cb correction chargement des commentaire (ref #100) The 1 revisions listed above as "new" are entirely new to this repository and will be described in separate emails. The revisions listed as "adds" were already present in the repository and have only been added to this reference. Detailed log of new commits: commit 2a3ec7cb0aacf0f65376730d031093abc8931ce8 Author: Sylvain Bavencoff <bavencoff@codelutin.com> Date: Fri Aug 4 12:26:50 2017 +0200 correction chargement des commentaire (ref #100) Summary of changes: .../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(-) -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
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>.
participants (1)
-
chorem.org scm