Add comments under events to activities

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Activity/EventActivityItem.vue

@@ -35,7 +35,10 @@
 </template>
 <script lang="ts">
 import { usernameWithDomain } from "@/types/actor";
-import { ActivityEventSubject } from "@/types/enums";
+import {
+  ActivityEventCommentSubject,
+  ActivityEventSubject,
+} from "@/types/enums";
 import { mixins } from "vue-class-component";
 import { Component } from "vue-property-decorator";
 import RouteName from "../../router/name";
@@ -69,6 +72,17 @@ export default class EventActivityItem extends mixins(ActivityMixin) {
           return "You deleted the event {event}.";
         }
         return "The event {event} was deleted by {profile}.";
+      case ActivityEventCommentSubject.COMMENT_POSTED:
+        if (this.subjectParams.comment_reply_to) {
+          if (this.isAuthorCurrentActor) {
+            return "You replied to a comment on the event {event}.";
+          }
+          return "{profile} replied to a comment on the event {event}.";
+        }
+        if (this.isAuthorCurrentActor) {
+          return "You posted a comment on the event {event}.";
+        }
+        return "{profile} posted a comment on the event {event}.";
       default:
         return undefined;
     }
@@ -77,6 +91,7 @@ export default class EventActivityItem extends mixins(ActivityMixin) {
   get iconColor(): string | undefined {
     switch (this.activity.subject) {
       case ActivityEventSubject.EVENT_CREATED:
+      case ActivityEventCommentSubject.COMMENT_POSTED:
         return "is-success";
       case ActivityEventSubject.EVENT_UPDATED:
         return "is-grey";

js/src/components/Comment/Comment.vue

@@ -97,7 +97,7 @@
             <span
               style="cursor: pointer"
               class="level-item reply-btn"
-              @click="createReplyToComment(comment)"
+              @click="createReplyToComment()"
             >
               <span class="icon is-small">
                 <b-icon icon="reply" />
@@ -235,17 +235,13 @@ export default class Comment extends Vue {
     }
   }
 
-  async createReplyToComment(comment: IComment): Promise<void> {
+  async createReplyToComment(): Promise<void> {
     if (this.replyTo) {
       this.replyTo = false;
       this.newComment = new CommentModel();
       return;
     }
     this.replyTo = true;
-    // this.newComment.inReplyToComment = comment;
-    await this.$nextTick();
-    await this.$nextTick(); // For some reason commenteditor needs two $nextTick() to fully render
-    this.commentEditor.replyToComment(comment);
   }
 
   replyToComment(): void {
@@ -303,7 +299,7 @@ export default class Comment extends Vue {
 
   get commentId(): string {
     if (this.comment.originComment)
-      return `#comment-${this.comment.originComment.uuid}:${this.comment.uuid}`;
+      return `#comment-${this.comment.originComment.uuid}-${this.comment.uuid}`;
     return `#comment-${this.comment.uuid}`;
   }
 

js/src/graphql/group.ts

@@ -393,6 +393,9 @@ export const GROUP_TIMELINE = gql`
               title
               slug
             }
+            ... on Comment {
+              id
+            }
             ... on Group {
               id
               preferredUsername

js/src/i18n/en_US.json

@@ -963,5 +963,9 @@
   "Delete discussion": "Delete discussion",
   "All activities": "All activities",
   "From yourself": "From yourself",
-  "By others": "By others"
+  "By others": "By others",
+  "You posted a comment on the event {event}.": "You posted a comment on the event {event}.",
+  "{profile} posted a comment on the event {event}.": "{profile} posted a comment on the event {event}.",
+  "You replied to a comment on the event {event}.": "You replied to a comment on the event {event}.",
+  "{profile} replied to a comment on the event {event}.": "{profile} replied to a comment on the event {event}."
 }

js/src/i18n/fr_FR.json

@@ -1057,5 +1057,9 @@
   "Delete discussion": "Supprimer la discussion",
   "All activities": "Toutes les activités",
   "From yourself": "De vous",
-  "By others": "Des autres"
+  "By others": "Des autres",
+  "You posted a comment on the event {event}.": "Vous avez posté un commentaire sur l'événement {event}.",
+  "{profile} posted a comment on the event {event}.": "{profile} a posté un commentaire sur l'événement {event}.",
+  "You replied to a comment on the event {event}.": "Vous avez répondu à un commentaire sur l'événement {event}.",
+  "{profile} replied to a comment on the event {event}.": "{profile} a répondu à un commentaire sur l'événement {event}."
 }

js/src/types/activity.model.ts

@@ -2,6 +2,7 @@ import { IActor, IGroup } from "./actor";
 import { IMember } from "./actor/member.model";
 import {
   ActivityDiscussionSubject,
+  ActivityEventCommentSubject,
   ActivityEventSubject,
   ActivityGroupSubject,
   ActivityMemberSubject,
@@ -19,7 +20,8 @@ export type ActivitySubject =
   | ActivityMemberSubject
   | ActivityResourceSubject
   | ActivityDiscussionSubject
-  | ActivityGroupSubject;
+  | ActivityGroupSubject
+  | ActivityEventCommentSubject;
 
 export interface IActivity {
   id: string;

js/src/types/enums.ts

@@ -197,6 +197,10 @@ export enum ActivityEventSubject {
   EVENT_DELETED = "event_deleted",
 }
 
+export enum ActivityEventCommentSubject {
+  COMMENT_POSTED = "comment_posted",
+}
+
 export enum ActivityPostSubject {
   POST_CREATED = "post_created",
   POST_UPDATED = "post_updated",

js/src/views/Group/Timeline.vue

@@ -168,7 +168,6 @@ import { IActivity } from "../../types/activity.model";
 import Observer from "../../components/Utils/Observer.vue";
 import SkeletonActivityItem from "../../components/Activity/SkeletonActivityItem.vue";
 import RouteName from "../../router/name";
-import { Location } from "vue-router";
 
 const PAGINATION_LIMIT = 25;
 const SKELETON_DAY_ITEMS = 2;