From 4887ca9f2f5d0fe90c8e1f793ea96b82f7fab1a2 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Wed, 19 Aug 2020 09:01:34 +0200
Subject: [PATCH] Discussion improvements for groups

Show when a comment has been edited.

Closes #372

Hide the report functionnality for now

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 .../Discussion/DiscussionComment.vue          | 110 ++++++++++--------
 js/src/graphql/discussion.ts                  |   1 +
 js/src/i18n/en_US.json                        |   4 +-
 js/src/i18n/fr_FR.json                        |   4 +-
 js/src/types/comment.model.ts                 |   2 +-
 5 files changed, 70 insertions(+), 51 deletions(-)

diff --git a/js/src/components/Discussion/DiscussionComment.vue b/js/src/components/Discussion/DiscussionComment.vue
index e1329e630..26707c4a1 100644
--- a/js/src/components/Discussion/DiscussionComment.vue
+++ b/js/src/components/Discussion/DiscussionComment.vue
@@ -4,7 +4,7 @@
       <figure class="image is-48x48" v-if="comment.actor.avatar">
         <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
       </figure>
-      <b-icon v-else size="is-medium" icon="account-circle" />
+      <b-icon v-else size="is-large" icon="account-circle" />
     </div>
     <div class="body">
       <div class="meta">
@@ -12,10 +12,10 @@
           <strong>{{ comment.actor.name }}</strong>
           <small>@{{ usernameWithDomain(comment.actor) }}</small>
         </span>
-        <a v-else class="name comment-link has-text-grey">
-          <span>{{ $t("[deleted]") }}</span>
-        </a>
-        <span class="icons" v-if="!comment.deletedAt">
+        <span v-else class="name comment-link has-text-grey">
+          {{ $t("[deleted]") }}
+        </span>
+        <span class="icons" v-if="!comment.deletedAt && comment.actor.id === currentActor.id">
           <b-dropdown aria-role="list">
             <b-icon slot="trigger" role="button" icon="dots-horizontal" />
 
@@ -35,24 +35,30 @@
               <b-icon icon="delete"></b-icon>
               {{ $t("Delete") }}
             </b-dropdown-item>
-            <b-dropdown-item aria-role="listitem" @click="isReportModalActive = true">
+            <!-- <b-dropdown-item aria-role="listitem" @click="isReportModalActive = true">
               <b-icon icon="flag" />
               {{ $t("Report") }}
-            </b-dropdown-item>
+            </b-dropdown-item> -->
           </b-dropdown>
         </span>
         <div class="post-infos">
-          <span :title="comment.updatedAt | formatDateTimeString">
+          <span :title="comment.insertedAt | formatDateTimeString">
             {{ $timeAgo.format(new Date(comment.updatedAt), "twitter") || $t("Right now") }}</span
           >
         </div>
       </div>
-      <div
-        class="description-content"
-        v-html="comment.text"
-        v-if="!editMode && !comment.deletedAt"
-      ></div>
-      <div v-else-if="!editMode">{{ $t("[This comment has been deleted]") }}</div>
+      <div v-if="!editMode && !comment.deletedAt" class="text-wrapper">
+        <div class="description-content" v-html="comment.text"></div>
+        <p
+          v-if="comment.insertedAt.getTime() !== comment.updatedAt.getTime()"
+          :title="comment.updatedAt | formatDateTimeString"
+        >
+          {{ $t("Edited {ago}", { ago: $timeAgo.format(new Date(comment.updatedAt)) }) }}
+        </p>
+      </div>
+      <div class="comment-deleted" v-else-if="!editMode">
+        {{ $t("[This comment has been deleted by it's author]") }}
+      </div>
       <form v-else class="edition" @submit.prevent="updateComment">
         <editor v-model="updatedComment" />
         <div class="buttons">
@@ -92,7 +98,7 @@ export default class DiscussionComment extends Vue {
 
   usernameWithDomain = usernameWithDomain;
 
-  isReportModalActive: boolean = false;
+  // isReportModalActive: boolean = false;
 
   toggleEditMode() {
     this.updatedComment = this.comment.text;
@@ -133,9 +139,7 @@ article.comment {
           line-height: 1rem;
         }
 
-        span {
-          color: #3c376e;
-        }
+        color: #3c376e;
       }
 
       .icons {
@@ -144,46 +148,56 @@ article.comment {
       }
     }
 
-    div.description-content {
-      padding: 0 1rem 0.3rem;
+    .text-wrapper,
+    .comment-deleted {
+      padding: 0 1rem;
 
-      /deep/ h1 {
-        font-size: 2rem;
+      & > p {
+        font-size: 0.85rem;
+        font-style: italic;
       }
 
-      /deep/ h2 {
-        font-size: 1.5rem;
-      }
+      div.description-content {
+        padding-bottom: 0.3rem;
 
-      /deep/ h3 {
-        font-size: 1.25rem;
-      }
+        /deep/ h1 {
+          font-size: 2rem;
+        }
 
-      /deep/ ul {
-        list-style-type: disc;
-      }
+        /deep/ h2 {
+          font-size: 1.5rem;
+        }
 
-      /deep/ li {
-        margin: 10px auto 10px 2rem;
-      }
+        /deep/ h3 {
+          font-size: 1.25rem;
+        }
 
-      /deep/ blockquote {
-        border-left: 0.2em solid #333;
-        display: block;
-        padding-left: 1em;
-      }
+        /deep/ ul {
+          list-style-type: disc;
+        }
 
-      /deep/ p {
-        margin: 10px auto;
+        /deep/ li {
+          margin: 10px auto 10px 2rem;
+        }
 
-        a {
-          display: inline-block;
-          padding: 0.3rem;
-          background: $secondary;
-          color: #111;
+        /deep/ blockquote {
+          border-left: 0.2em solid #333;
+          display: block;
+          padding-left: 1em;
+        }
 
-          &:empty {
-            display: none;
+        /deep/ p {
+          margin: 10px auto;
+
+          a {
+            display: inline-block;
+            padding: 0.3rem;
+            background: $secondary;
+            color: #111;
+
+            &:empty {
+              display: none;
+            }
           }
         }
       }
diff --git a/js/src/graphql/discussion.ts b/js/src/graphql/discussion.ts
index dbfd9df55..90c96a2f7 100644
--- a/js/src/graphql/discussion.ts
+++ b/js/src/graphql/discussion.ts
@@ -57,6 +57,7 @@ export const DISCUSSION_FIELDS_FRAGMENT = gql`
     lastComment {
       id
       text
+      insertedAt
       updatedAt
     }
     actor {
diff --git a/js/src/i18n/en_US.json b/js/src/i18n/en_US.json
index 404246474..2eca592ef 100644
--- a/js/src/i18n/en_US.json
+++ b/js/src/i18n/en_US.json
@@ -762,5 +762,7 @@
   "Leave group": "Leave group",
   "Remove": "Remove",
   "Update": "Update",
-  "Search…": "Search…"
+  "Search…": "Search…",
+  "Edited {ago}": "Edited {ago}",
+  "[This comment has been deleted by it's author]": "[This comment has been deleted by it's author]"
 }
diff --git a/js/src/i18n/fr_FR.json b/js/src/i18n/fr_FR.json
index 86659e621..e8442adf8 100644
--- a/js/src/i18n/fr_FR.json
+++ b/js/src/i18n/fr_FR.json
@@ -763,5 +763,7 @@
   "{title} ({count} todos)": "{title} ({count} todos)",
   "© The OpenStreetMap Contributors": "© Les Contributeur⋅ices OpenStreetMap",
   "Update": "Éditer",
-  "Search…": "Rechercher…"
+  "Search…": "Rechercher…",
+  "Edited {ago}": "Édité {ago}",
+  "[This comment has been deleted by it's author]": "[Ce commentaire a été supprimé par son auteur]"
 }
diff --git a/js/src/types/comment.model.ts b/js/src/types/comment.model.ts
index f9315378b..6bac3624f 100644
--- a/js/src/types/comment.model.ts
+++ b/js/src/types/comment.model.ts
@@ -59,7 +59,7 @@ export class CommentModel implements IComment {
     this.actor = hash.actor ? new Actor(hash.actor) : new Actor();
     this.event = new EventModel(hash.event);
     this.replies = hash.replies;
-    this.updatedAt = hash.updatedAt;
+    this.updatedAt = new Date(hash.updatedAt as string);
     this.deletedAt = hash.deletedAt;
     this.insertedAt = new Date(hash.insertedAt as string);
     this.totalReplies = hash.totalReplies;