Merge branch 'discussion-period' into 'master'

Improve the period's message in discussions See merge request !18

Merge branch 'discussion-period' into 'master'
Improve the period's message in discussions See merge request !18
Leandro Santos
2 parents 4902da4d 60a919fa
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
src/plugins/comment_paragraph/hotspot/article-content/article-content.component.ts
src/plugins/comment_paragraph/hotspot/article-content/article-content.html
src/plugins/comment_paragraph/hotspot/article-content/article-content.scss
src/plugins/comment_paragraph/languages/en.json
src/plugins/comment_paragraph/languages/pt.json
@@ -24,13 +24,87 @@ describe(&quot;Components&quot;, () =&gt; {
         });
  
         it("return false in isDiscussion when other type was specified", () => {
-          helper.changeProperties({article: {type: "TextArticle"}});
+            helper.changeProperties({ article: { type: "TextArticle" } });
             expect(helper.component.isDiscussion()).toBeFalsy();
         });
  
         it("return true in isDiscussion when discussion type was specified", () => {
-            helper.changeProperties({article: {type: "CommentParagraphPlugin::Discussion"}});
+            helper.changeProperties({ article: { type: "CommentParagraphPlugin::Discussion" } });
             expect(helper.component.isDiscussion()).toBeTruthy();
         });
+
+        it("return true in notOpened when start date is after today", () => {
+            let date = new Date();
+            date.setDate(date.getDate() + 1);
+            helper.changeProperties({ article: { start_date: date.toISOString() } });
+            expect(helper.component.notOpened()).toBeTruthy();
+            expect(helper.component.available()).toBeFalsy();
+            expect(helper.component.closed()).toBeFalsy();
+        });
+
+        it("return false in notOpened when start date is before today", () => {
+            let date = new Date();
+            date.setDate(date.getDate() - 1);
+            helper.changeProperties({ article: { start_date: date.toISOString() } });
+            expect(helper.component.notOpened()).toBeFalsy();
+        });
+
+        it("return false in notOpened when start date is null", () => {
+            helper.changeProperties({ article: { start_date: null } });
+            expect(helper.component.notOpened()).toBeFalsy();
+        });
+
+        it("return true in closed when end date is before today", () => {
+            let date = new Date();
+            date.setDate(date.getDate() - 1);
+            helper.changeProperties({ article: { end_date: date.toISOString() } });
+            expect(helper.component.closed()).toBeTruthy();
+            expect(helper.component.available()).toBeFalsy();
+            expect(helper.component.notOpened()).toBeFalsy();
+        });
+
+        it("return false in closed when start date is after today", () => {
+            let date = new Date();
+            date.setDate(date.getDate() + 1);
+            helper.changeProperties({ article: { end_date: date.toISOString() } });
+            expect(helper.component.closed()).toBeFalsy();
+        });
+
+        it("return false in closed when end date is null", () => {
+            helper.changeProperties({ article: { start_date: null } });
+            expect(helper.component.closed()).toBeFalsy();
+        });
+
+        it("return true in available when start date is before today and end date is after", () => {
+            let date = new Date();
+            date.setDate(date.getDate() - 1);
+            let startDate = date.toISOString();
+            date.setDate(date.getDate() + 3);
+            let endDate = date.toISOString();
+            helper.changeProperties({ article: { start_date: startDate, end_date: endDate } });
+            expect(helper.component.available()).toBeTruthy();
+            expect(helper.component.closed()).toBeFalsy();
+            expect(helper.component.notOpened()).toBeFalsy();
+        });
+
+        it("return true in available when start date is before today and end date is null", () => {
+            let date = new Date();
+            date.setDate(date.getDate() - 1);
+            let startDate = date.toISOString();
+            helper.changeProperties({ article: { start_date: startDate, end_date: null } });
+            expect(helper.component.available()).toBeTruthy();
+            expect(helper.component.closed()).toBeFalsy();
+            expect(helper.component.notOpened()).toBeFalsy();
+        });
+
+        it("return true in available when start date is null and end date is after today", () => {
+            let date = new Date();
+            date.setDate(date.getDate() + 3);
+            let endDate = date.toISOString();
+            helper.changeProperties({ article: { start_date: null, end_date: endDate } });
+            expect(helper.component.available()).toBeTruthy();
+            expect(helper.component.closed()).toBeFalsy();
+            expect(helper.component.notOpened()).toBeFalsy();
+        });
     });
 });
@@ -13,4 +13,20 @@ export class CommentParagraphArticleContentHotspotComponent {
     isDiscussion() {
         return this.article.type === "CommentParagraphPlugin::Discussion";
     }
+
+    notOpened() {
+        let now = new Date();
+        return !!this.article.start_date && new Date(this.article.start_date) > now;
+    }
+
+    available() {
+        let now = new Date();
+        return (!this.article.start_date || new Date(this.article.start_date) <= now) &&
+            (!this.article.end_date || new Date(this.article.end_date) >= now);
+    }
+
+    closed() {
+        let now = new Date();
+        return !!this.article.end_date && new Date(this.article.end_date) < now;
+    }
 }
 <div class="discussion-header" ng-if="ctrl.isDiscussion()">
-  <span class="description">{{"comment-paragraph-plugin.discussion.header" | translate}}</span>
-  <span class="start-date date" ng-if="ctrl.article.start_date">
-    <span class="description">{{"comment-paragraph-plugin.discussion.editor.start_date.label" | translate}}</span>
-    <span class="value">{{ctrl.article.start_date | amDateFormat:'DD/MM/YYYY'}}</span>
-  </span>
-  <span class="end-date date" ng-if="ctrl.article.end_date">
-    <span class="description">{{"comment-paragraph-plugin.discussion.editor.end_date.label" | translate}}</span>
-    <span class="value">{{ctrl.article.end_date | amDateFormat:'DD/MM/YYYY'}}</span>
-  </span>
+  <div class="icon">
+    <i class="fa fa-calendar fa-fw fa-lg"></i>
+  </div>
+  <div class="period">
+    <div ng-if="ctrl.notOpened()" class="description not-opened">
+      {{"comment-paragraph-plugin.discussion.notOpened.header" | translate:{date: (ctrl.article.start_date | dateFormat | amTimeAgo)} }}
+    </div>
+    <div ng-if="ctrl.available()" class="description available">
+      <div ng-if="ctrl.article.end_date" class="with-end-date">
+        {{"comment-paragraph-plugin.discussion.available.header" | translate:{date: (ctrl.article.end_date | dateFormat | amTimeAgo)} }}
+      </div>
+      <div ng-if="!ctrl.article.end_date" class="without-end-date">
+        {{"comment-paragraph-plugin.discussion.available.without-end.header" | translate}}
+      </div>
+    </div>
+    <div ng-if="ctrl.closed()" class="description closed">
+      {{"comment-paragraph-plugin.discussion.closed.header" | translate:{date: (ctrl.article.end_date | dateFormat | amTimeAgo)} }}
+    </div>
+  </div>
 </div>
 .discussion-header {
   @extend .pull-right;
   margin-bottom: 20px;
-  .date {
-    text-transform: lowercase;
-    font-size: 16px;
+  .period {
+    @extend .pull-right;
     .description {
       font-weight: bold;
-      color: #BFBFBF;
-    }
-    .value {
-      font-size: 15px;
-      color: #969696;
+      color: #A2A2A2;
     }
   }
-  .description {
-    font-weight: bold;
-    color: #BFBFBF;
+  .icon {
+    @extend .pull-right;
+    margin-left: 8px;
   }
 }
@@ -2,5 +2,9 @@
   "comment-paragraph-plugin.title": "Paragraph Comments",
   "comment-paragraph-plugin.discussion.editor.start_date.label": "From",
   "comment-paragraph-plugin.discussion.editor.end_date.label": "To",
-  "comment-paragraph-plugin.discussion.header": "Open for comments"
+  "comment-paragraph-plugin.discussion.header": "Open for comments",
+  "comment-paragraph-plugin.discussion.notOpened.header": "Discussion will start {{date}}",
+  "comment-paragraph-plugin.discussion.available.header": "Discussion will end {{date}}",
+  "comment-paragraph-plugin.discussion.available.without-end.header": "Discussion opened",
+  "comment-paragraph-plugin.discussion.closed.header": "Discussion finished {{date}}"
 }
@@ -2,5 +2,9 @@
   "comment-paragraph-plugin.title": "Comentários por Parágrafo",
   "comment-paragraph-plugin.discussion.editor.start_date.label": "De",
   "comment-paragraph-plugin.discussion.editor.end_date.label": "Até",
-  "comment-paragraph-plugin.discussion.header": "Aberto para comentários"
+  "comment-paragraph-plugin.discussion.header": "Aberto para comentários",
+  "comment-paragraph-plugin.discussion.notOpened.header": "Discussão iniciará {{date}}",
+  "comment-paragraph-plugin.discussion.available.header": "Discussão terminará {{date}}",
+  "comment-paragraph-plugin.discussion.available.without-end.header": "Discussão aberta",
+  "comment-paragraph-plugin.discussion.closed.header": "Discussão finalizada {{date}}"
 }
...	...	@@ -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	});
...	...
...	...	@@ -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	}
...	...
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>
...	...
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	}
...	...
...	...	@@ -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	}
...	...
...	...	@@ -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	}
...	...