From 5a647c97e367c48cfacad7fa2ead49f4076cfd49 Mon Sep 17 00:00:00 2001
From: Victor Costa <vfcosta@gmail.com>
Date: Tue, 17 May 2016 10:05:26 -0300
Subject: [PATCH] Improve the period's message in discussions

---
 src/plugins/comment_paragraph/hotspot/article-content/article-content.component.spec.ts | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
 src/plugins/comment_paragraph/hotspot/article-content/article-content.component.ts      | 16 ++++++++++++++++
 src/plugins/comment_paragraph/hotspot/article-content/article-content.html              | 28 +++++++++++++++++++---------
 src/plugins/comment_paragraph/hotspot/article-content/article-content.scss              | 17 ++++++-----------
 src/plugins/comment_paragraph/languages/en.json                                         |  6 +++++-
 src/plugins/comment_paragraph/languages/pt.json                                         |  6 +++++-
 6 files changed, 127 insertions(+), 24 deletions(-)

diff --git a/src/plugins/comment_paragraph/hotspot/article-content/article-content.component.spec.ts b/src/plugins/comment_paragraph/hotspot/article-content/article-content.component.spec.ts
index 429f7a1..ad38832 100644
--- a/src/plugins/comment_paragraph/hotspot/article-content/article-content.component.spec.ts
+++ b/src/plugins/comment_paragraph/hotspot/article-content/article-content.component.spec.ts
@@ -24,13 +24,87 @@ describe("Components", () => {
         });
 
         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();
+        });
     });
 });
diff --git a/src/plugins/comment_paragraph/hotspot/article-content/article-content.component.ts b/src/plugins/comment_paragraph/hotspot/article-content/article-content.component.ts
index 2feffec..ff65503 100644
--- a/src/plugins/comment_paragraph/hotspot/article-content/article-content.component.ts
+++ b/src/plugins/comment_paragraph/hotspot/article-content/article-content.component.ts
@@ -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;
+    }
 }
diff --git a/src/plugins/comment_paragraph/hotspot/article-content/article-content.html b/src/plugins/comment_paragraph/hotspot/article-content/article-content.html
index 936ae69..f1acb89 100644
--- a/src/plugins/comment_paragraph/hotspot/article-content/article-content.html
+++ b/src/plugins/comment_paragraph/hotspot/article-content/article-content.html
@@ -1,11 +1,21 @@
 <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">
+      {{"comment-paragraph-plugin.discussion.notOpened.header" | translate:{date: (ctrl.article.start_date | dateFormat | amTimeAgo)} }}
+    </div>
+    <div ng-if="ctrl.available()" class="description">
+      <div ng-if="ctrl.article.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="description">
+        {{"comment-paragraph-plugin.discussion.available.without-end.header" | translate}}
+      </div>
+    </div>
+    <div ng-if="ctrl.closed()" class="description">
+      {{"comment-paragraph-plugin.discussion.closed.header" | translate:{date: (ctrl.article.end_date | dateFormat | amTimeAgo)} }}
+    </div>
+  </div>
 </div>
diff --git a/src/plugins/comment_paragraph/hotspot/article-content/article-content.scss b/src/plugins/comment_paragraph/hotspot/article-content/article-content.scss
index f321148..4b04acc 100644
--- a/src/plugins/comment_paragraph/hotspot/article-content/article-content.scss
+++ b/src/plugins/comment_paragraph/hotspot/article-content/article-content.scss
@@ -1,20 +1,15 @@
 .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;
   }
 }
diff --git a/src/plugins/comment_paragraph/languages/en.json b/src/plugins/comment_paragraph/languages/en.json
index 0bb95c6..c64ea0f 100644
--- a/src/plugins/comment_paragraph/languages/en.json
+++ b/src/plugins/comment_paragraph/languages/en.json
@@ -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}}"
 }
diff --git a/src/plugins/comment_paragraph/languages/pt.json b/src/plugins/comment_paragraph/languages/pt.json
index 89ce633..58a0d00 100644
--- a/src/plugins/comment_paragraph/languages/pt.json
+++ b/src/plugins/comment_paragraph/languages/pt.json
@@ -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}}"
 }
--
libgit2 0.21.2