Commit 5140d6e51c8657f209e2fa604180d5196bcb1bfd
Exists in
master
and in
26 other branches
Merge branch 'discussion-period' into 'master'
Improve the period's message in discussions See merge request !18
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 | 24 | }); |
25 | 25 | |
26 | 26 | it("return false in isDiscussion when other type was specified", () => { |
27 | - helper.changeProperties({article: {type: "TextArticle"}}); | |
27 | + helper.changeProperties({ article: { type: "TextArticle" } }); | |
28 | 28 | expect(helper.component.isDiscussion()).toBeFalsy(); |
29 | 29 | }); |
30 | 30 | |
31 | 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 | 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 | 13 | isDiscussion() { |
14 | 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 | 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 not-opened"> | |
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 available"> | |
10 | + <div ng-if="ctrl.article.end_date" class="with-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="without-end-date"> | |
14 | + {{"comment-paragraph-plugin.discussion.available.without-end.header" | translate}} | |
15 | + </div> | |
16 | + </div> | |
17 | + <div ng-if="ctrl.closed()" class="description closed"> | |
18 | + {{"comment-paragraph-plugin.discussion.closed.header" | translate:{date: (ctrl.article.end_date | dateFormat | amTimeAgo)} }} | |
19 | + </div> | |
20 | + </div> | |
11 | 21 | </div> | ... | ... |
src/plugins/comment_paragraph/hotspot/article-content/article-content.scss
1 | 1 | .discussion-header { |
2 | 2 | @extend .pull-right; |
3 | 3 | margin-bottom: 20px; |
4 | - .date { | |
5 | - text-transform: lowercase; | |
6 | - font-size: 16px; | |
4 | + .period { | |
5 | + @extend .pull-right; | |
7 | 6 | .description { |
8 | 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 | 2 | "comment-paragraph-plugin.title": "Paragraph Comments", |
3 | 3 | "comment-paragraph-plugin.discussion.editor.start_date.label": "From", |
4 | 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 | 2 | "comment-paragraph-plugin.title": "Comentários por Parágrafo", |
3 | 3 | "comment-paragraph-plugin.discussion.editor.start_date.label": "De", |
4 | 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 | } | ... | ... |