Commit 5a647c97e367c48cfacad7fa2ead49f4076cfd49
1 parent
628d8b3b
Exists in
master
and in
26 other branches
Improve the period's message in discussions
Showing
6 changed files
with
127 additions
and
24 deletions
Show diff stats
src/plugins/comment_paragraph/hotspot/article-content/article-content.component.spec.ts
| @@ -24,13 +24,87 @@ describe("Components", () => { | @@ -24,13 +24,87 @@ describe("Components", () => { | ||
| 24 | }); | 24 | }); |
| 25 | 25 | ||
| 26 | it("return false in isDiscussion when other type was specified", () => { | 26 | it("return false in isDiscussion when other type was specified", () => { |
| 27 | - helper.changeProperties({article: {type: "TextArticle"}}); | 27 | + helper.changeProperties({ article: { type: "TextArticle" } }); |
| 28 | expect(helper.component.isDiscussion()).toBeFalsy(); | 28 | expect(helper.component.isDiscussion()).toBeFalsy(); |
| 29 | }); | 29 | }); |
| 30 | 30 | ||
| 31 | it("return true in isDiscussion when discussion type was specified", () => { | 31 | it("return true in isDiscussion when discussion type was specified", () => { |
| 32 | - helper.changeProperties({article: {type: "CommentParagraphPlugin::Discussion"}}); | 32 | + helper.changeProperties({ article: { type: "CommentParagraphPlugin::Discussion" } }); |
| 33 | expect(helper.component.isDiscussion()).toBeTruthy(); | 33 | expect(helper.component.isDiscussion()).toBeTruthy(); |
| 34 | }); | 34 | }); |
| 35 | + | ||
| 36 | + it("return true in notOpened when start date is after today", () => { | ||
| 37 | + let date = new Date(); | ||
| 38 | + date.setDate(date.getDate() + 1); | ||
| 39 | + helper.changeProperties({ article: { start_date: date.toISOString() } }); | ||
| 40 | + expect(helper.component.notOpened()).toBeTruthy(); | ||
| 41 | + expect(helper.component.available()).toBeFalsy(); | ||
| 42 | + expect(helper.component.closed()).toBeFalsy(); | ||
| 43 | + }); | ||
| 44 | + | ||
| 45 | + it("return false in notOpened when start date is before today", () => { | ||
| 46 | + let date = new Date(); | ||
| 47 | + date.setDate(date.getDate() - 1); | ||
| 48 | + helper.changeProperties({ article: { start_date: date.toISOString() } }); | ||
| 49 | + expect(helper.component.notOpened()).toBeFalsy(); | ||
| 50 | + }); | ||
| 51 | + | ||
| 52 | + it("return false in notOpened when start date is null", () => { | ||
| 53 | + helper.changeProperties({ article: { start_date: null } }); | ||
| 54 | + expect(helper.component.notOpened()).toBeFalsy(); | ||
| 55 | + }); | ||
| 56 | + | ||
| 57 | + it("return true in closed when end date is before today", () => { | ||
| 58 | + let date = new Date(); | ||
| 59 | + date.setDate(date.getDate() - 1); | ||
| 60 | + helper.changeProperties({ article: { end_date: date.toISOString() } }); | ||
| 61 | + expect(helper.component.closed()).toBeTruthy(); | ||
| 62 | + expect(helper.component.available()).toBeFalsy(); | ||
| 63 | + expect(helper.component.notOpened()).toBeFalsy(); | ||
| 64 | + }); | ||
| 65 | + | ||
| 66 | + it("return false in closed when start date is after today", () => { | ||
| 67 | + let date = new Date(); | ||
| 68 | + date.setDate(date.getDate() + 1); | ||
| 69 | + helper.changeProperties({ article: { end_date: date.toISOString() } }); | ||
| 70 | + expect(helper.component.closed()).toBeFalsy(); | ||
| 71 | + }); | ||
| 72 | + | ||
| 73 | + it("return false in closed when end date is null", () => { | ||
| 74 | + helper.changeProperties({ article: { start_date: null } }); | ||
| 75 | + expect(helper.component.closed()).toBeFalsy(); | ||
| 76 | + }); | ||
| 77 | + | ||
| 78 | + it("return true in available when start date is before today and end date is after", () => { | ||
| 79 | + let date = new Date(); | ||
| 80 | + date.setDate(date.getDate() - 1); | ||
| 81 | + let startDate = date.toISOString(); | ||
| 82 | + date.setDate(date.getDate() + 3); | ||
| 83 | + let endDate = date.toISOString(); | ||
| 84 | + helper.changeProperties({ article: { start_date: startDate, end_date: endDate } }); | ||
| 85 | + expect(helper.component.available()).toBeTruthy(); | ||
| 86 | + expect(helper.component.closed()).toBeFalsy(); | ||
| 87 | + expect(helper.component.notOpened()).toBeFalsy(); | ||
| 88 | + }); | ||
| 89 | + | ||
| 90 | + it("return true in available when start date is before today and end date is null", () => { | ||
| 91 | + let date = new Date(); | ||
| 92 | + date.setDate(date.getDate() - 1); | ||
| 93 | + let startDate = date.toISOString(); | ||
| 94 | + helper.changeProperties({ article: { start_date: startDate, end_date: null } }); | ||
| 95 | + expect(helper.component.available()).toBeTruthy(); | ||
| 96 | + expect(helper.component.closed()).toBeFalsy(); | ||
| 97 | + expect(helper.component.notOpened()).toBeFalsy(); | ||
| 98 | + }); | ||
| 99 | + | ||
| 100 | + it("return true in available when start date is null and end date is after today", () => { | ||
| 101 | + let date = new Date(); | ||
| 102 | + date.setDate(date.getDate() + 3); | ||
| 103 | + let endDate = date.toISOString(); | ||
| 104 | + helper.changeProperties({ article: { start_date: null, end_date: endDate } }); | ||
| 105 | + expect(helper.component.available()).toBeTruthy(); | ||
| 106 | + expect(helper.component.closed()).toBeFalsy(); | ||
| 107 | + expect(helper.component.notOpened()).toBeFalsy(); | ||
| 108 | + }); | ||
| 35 | }); | 109 | }); |
| 36 | }); | 110 | }); |
src/plugins/comment_paragraph/hotspot/article-content/article-content.component.ts
| @@ -13,4 +13,20 @@ export class CommentParagraphArticleContentHotspotComponent { | @@ -13,4 +13,20 @@ export class CommentParagraphArticleContentHotspotComponent { | ||
| 13 | isDiscussion() { | 13 | isDiscussion() { |
| 14 | return this.article.type === "CommentParagraphPlugin::Discussion"; | 14 | return this.article.type === "CommentParagraphPlugin::Discussion"; |
| 15 | } | 15 | } |
| 16 | + | ||
| 17 | + notOpened() { | ||
| 18 | + let now = new Date(); | ||
| 19 | + return !!this.article.start_date && new Date(this.article.start_date) > now; | ||
| 20 | + } | ||
| 21 | + | ||
| 22 | + available() { | ||
| 23 | + let now = new Date(); | ||
| 24 | + return (!this.article.start_date || new Date(this.article.start_date) <= now) && | ||
| 25 | + (!this.article.end_date || new Date(this.article.end_date) >= now); | ||
| 26 | + } | ||
| 27 | + | ||
| 28 | + closed() { | ||
| 29 | + let now = new Date(); | ||
| 30 | + return !!this.article.end_date && new Date(this.article.end_date) < now; | ||
| 31 | + } | ||
| 16 | } | 32 | } |
src/plugins/comment_paragraph/hotspot/article-content/article-content.html
| 1 | <div class="discussion-header" ng-if="ctrl.isDiscussion()"> | 1 | <div class="discussion-header" ng-if="ctrl.isDiscussion()"> |
| 2 | - <span class="description">{{"comment-paragraph-plugin.discussion.header" | translate}}</span> | ||
| 3 | - <span class="start-date date" ng-if="ctrl.article.start_date"> | ||
| 4 | - <span class="description">{{"comment-paragraph-plugin.discussion.editor.start_date.label" | translate}}</span> | ||
| 5 | - <span class="value">{{ctrl.article.start_date | amDateFormat:'DD/MM/YYYY'}}</span> | ||
| 6 | - </span> | ||
| 7 | - <span class="end-date date" ng-if="ctrl.article.end_date"> | ||
| 8 | - <span class="description">{{"comment-paragraph-plugin.discussion.editor.end_date.label" | translate}}</span> | ||
| 9 | - <span class="value">{{ctrl.article.end_date | amDateFormat:'DD/MM/YYYY'}}</span> | ||
| 10 | - </span> | 2 | + <div class="icon"> |
| 3 | + <i class="fa fa-calendar fa-fw fa-lg"></i> | ||
| 4 | + </div> | ||
| 5 | + <div class="period"> | ||
| 6 | + <div ng-if="ctrl.notOpened()" class="description"> | ||
| 7 | + {{"comment-paragraph-plugin.discussion.notOpened.header" | translate:{date: (ctrl.article.start_date | dateFormat | amTimeAgo)} }} | ||
| 8 | + </div> | ||
| 9 | + <div ng-if="ctrl.available()" class="description"> | ||
| 10 | + <div ng-if="ctrl.article.end_date"> | ||
| 11 | + {{"comment-paragraph-plugin.discussion.available.header" | translate:{date: (ctrl.article.end_date | dateFormat | amTimeAgo)} }} | ||
| 12 | + </div> | ||
| 13 | + <div ng-if="!ctrl.article.end_date" class="description"> | ||
| 14 | + {{"comment-paragraph-plugin.discussion.available.without-end.header" | translate}} | ||
| 15 | + </div> | ||
| 16 | + </div> | ||
| 17 | + <div ng-if="ctrl.closed()" class="description"> | ||
| 18 | + {{"comment-paragraph-plugin.discussion.closed.header" | translate:{date: (ctrl.article.end_date | dateFormat | amTimeAgo)} }} | ||
| 19 | + </div> | ||
| 20 | + </div> | ||
| 11 | </div> | 21 | </div> |
src/plugins/comment_paragraph/hotspot/article-content/article-content.scss
| 1 | .discussion-header { | 1 | .discussion-header { |
| 2 | @extend .pull-right; | 2 | @extend .pull-right; |
| 3 | margin-bottom: 20px; | 3 | margin-bottom: 20px; |
| 4 | - .date { | ||
| 5 | - text-transform: lowercase; | ||
| 6 | - font-size: 16px; | 4 | + .period { |
| 5 | + @extend .pull-right; | ||
| 7 | .description { | 6 | .description { |
| 8 | font-weight: bold; | 7 | font-weight: bold; |
| 9 | - color: #BFBFBF; | ||
| 10 | - } | ||
| 11 | - .value { | ||
| 12 | - font-size: 15px; | ||
| 13 | - color: #969696; | 8 | + color: #A2A2A2; |
| 14 | } | 9 | } |
| 15 | } | 10 | } |
| 16 | - .description { | ||
| 17 | - font-weight: bold; | ||
| 18 | - color: #BFBFBF; | 11 | + .icon { |
| 12 | + @extend .pull-right; | ||
| 13 | + margin-left: 8px; | ||
| 19 | } | 14 | } |
| 20 | } | 15 | } |
src/plugins/comment_paragraph/languages/en.json
| @@ -2,5 +2,9 @@ | @@ -2,5 +2,9 @@ | ||
| 2 | "comment-paragraph-plugin.title": "Paragraph Comments", | 2 | "comment-paragraph-plugin.title": "Paragraph Comments", |
| 3 | "comment-paragraph-plugin.discussion.editor.start_date.label": "From", | 3 | "comment-paragraph-plugin.discussion.editor.start_date.label": "From", |
| 4 | "comment-paragraph-plugin.discussion.editor.end_date.label": "To", | 4 | "comment-paragraph-plugin.discussion.editor.end_date.label": "To", |
| 5 | - "comment-paragraph-plugin.discussion.header": "Open for comments" | 5 | + "comment-paragraph-plugin.discussion.header": "Open for comments", |
| 6 | + "comment-paragraph-plugin.discussion.notOpened.header": "Discussion will start {{date}}", | ||
| 7 | + "comment-paragraph-plugin.discussion.available.header": "Discussion will end {{date}}", | ||
| 8 | + "comment-paragraph-plugin.discussion.available.without-end.header": "Discussion opened", | ||
| 9 | + "comment-paragraph-plugin.discussion.closed.header": "Discussion finished {{date}}" | ||
| 6 | } | 10 | } |
src/plugins/comment_paragraph/languages/pt.json
| @@ -2,5 +2,9 @@ | @@ -2,5 +2,9 @@ | ||
| 2 | "comment-paragraph-plugin.title": "Comentários por Parágrafo", | 2 | "comment-paragraph-plugin.title": "Comentários por Parágrafo", |
| 3 | "comment-paragraph-plugin.discussion.editor.start_date.label": "De", | 3 | "comment-paragraph-plugin.discussion.editor.start_date.label": "De", |
| 4 | "comment-paragraph-plugin.discussion.editor.end_date.label": "Até", | 4 | "comment-paragraph-plugin.discussion.editor.end_date.label": "Até", |
| 5 | - "comment-paragraph-plugin.discussion.header": "Aberto para comentários" | 5 | + "comment-paragraph-plugin.discussion.header": "Aberto para comentários", |
| 6 | + "comment-paragraph-plugin.discussion.notOpened.header": "Discussão iniciará {{date}}", | ||
| 7 | + "comment-paragraph-plugin.discussion.available.header": "Discussão terminará {{date}}", | ||
| 8 | + "comment-paragraph-plugin.discussion.available.without-end.header": "Discussão aberta", | ||
| 9 | + "comment-paragraph-plugin.discussion.closed.header": "Discussão finalizada {{date}}" | ||
| 6 | } | 10 | } |