feat(comments): adds archival to comment list

packages/frontend/src/main/components/comments/CommentListItem.vue

@@ -29,6 +29,28 @@
             <span class="grey--text">
               Created on {{ new Date(commentDetails.createdAt).toLocaleString() }}
             </span>
+            <br>
+            <v-btn v-if="canArchiveThread" @click="showArchiveDialog=true" class="ml-n2 red--text rounded-lg elevation-0" x-small plain>Archive</v-btn>
+             <v-dialog v-model="showArchiveDialog" max-width="500">
+              <v-card>
+                <v-toolbar color="error" dark flat>
+                  <v-app-bar-nav-icon style="pointer-events: none">
+                    <v-icon>mdi-pencil</v-icon>
+                  </v-app-bar-nav-icon>
+                  <v-toolbar-title>Archive Comment Thread</v-toolbar-title>
+                  <v-spacer></v-spacer>
+                  <v-btn icon @click="showArchiveDialog = false"><v-icon>mdi-close</v-icon></v-btn>
+                </v-toolbar>
+                <v-card-text class="mt-4">
+                  This comment thread will be archived. Are you sure?
+                </v-card-text>
+                <v-card-actions>
+                  <v-spacer></v-spacer>
+                  <v-btn text @click="showArchiveDialog = false">Cancel</v-btn>
+                  <v-btn color="error" text @click="archiveComment()">Archive</v-btn>
+                </v-card-actions>
+              </v-card>
+            </v-dialog>
           </div>
         </div>
         <div class="body-2 px-4 flex-shrink-0">
@@ -46,16 +68,12 @@
           >
             <v-icon small>mdi-cube-outline</v-icon>
           </span>
-          <v-icon small>mdi-comment-outline</v-icon>
-          {{ commentDetails.replies.totalCount }}
-          <span v-show="!$vuetify.breakpoint.xs && false" class="">
-            {{
-              commentDetails.replies.totalCount > 1 || commentDetails.replies.totalCount === 0
-                ? 'replies'
-                : 'reply'
-            }}
-          </span>
-          <v-btn small class="ml-1 primary dark rounded-xl" :to="link">reply</v-btn>
+         
+          <v-btn small class="ml-1 primary dark rounded-xl" :to="link">
+            <v-icon small>mdi-comment-outline</v-icon>
+            {{ commentDetails.replies.totalCount }}
+            reply
+          </v-btn>
         </div>
         <div class="flex-shrink-0">
           <router-link class="text-decoration-none" :to="link">
@@ -83,7 +101,8 @@ export default {
     UserAvatar: () => import('@/main/components/common/UserAvatar')
   },
   props: {
-    comment: { type: Object, default: () => null }
+    comment: { type: Object, default: () => null },
+    stream: { type: Object, default: () => { return { role: null } } }
   },
   apollo: {
     commentDetails: {
@@ -121,10 +140,16 @@ export default {
   },
   data() {
     return {
-      hovered: false
+      hovered: false,
+      showArchiveDialog: false
     }
   },
   computed: {
+    canArchiveThread() {
+      if(!this.comment || !this.stream ) return false
+      if(!this.stream.role) return false
+      if(this.comment.authorId === this.$userId() || this.stream.role ==='stream:owner') return true
+    },
     link() {
       if (!this.commentDetails) return
       let res = this.commentDetails.resources.filter((r) => r.resourceType !== 'stream')
@@ -139,6 +164,33 @@ export default {
       if (!this.commentDetails) return
       return new Date(this.commentDetails.updatedAt) - new Date(this.commentDetails.viewedAt) > 0
     }
+  },
+  methods:{
+    async archiveComment() {
+      try {
+        await this.$apollo.mutate({
+          mutation: gql`
+            mutation commentArchive($streamId: String!, $commentId: String!) {
+              commentArchive(streamId: $streamId, commentId: $commentId)
+            }
+          `,
+          variables: {
+            streamId: this.$route.params.streamId,
+            commentId: this.comment.id
+          }
+        })
+        this.showArchiveDialog = false
+        this.$emit('deleted', this.comment)
+        this.$mixpanel.track('Comment Action', { type: 'action', name: 'archive' })
+        this.$eventHub.$emit('notification', {
+          text: 'Thread archived.'
+        })
+      } catch (e) {
+        this.$eventHub.$emit('notification', {
+          text: e.message
+        })
+      }
+    }
   }
 }
 </script>

packages/frontend/src/main/components/comments/CommentThreadViewer.vue

@@ -1,9 +1,9 @@
 <template>
   <div
-    class="mt-2 px-2 py-4"
-    :style="`${$vuetify.breakpoint.xs ? 'width: 90vw;' : 'width: 300px;'}`"
+    class="no-mouse pa-2"
+    :style="`${$vuetify.breakpoint.xs ? 'width: 90vw;' : 'width: 300px;'} xxx-background: rgba(0.5, 0.5, 0.5, 0.5)`"
   >
-    <div v-if="$vuetify.breakpoint.xs" class="text-right mb-5">
+    <div v-if="$vuetify.breakpoint.xs" class="text-right mb-5 mouse">
       <v-btn icon small class="background ml-2 elevation-10" @click="minimise = !minimise">
         <v-icon v-if="!minimise" small>mdi-minus</v-icon>
         <v-icon v-else small>mdi-plus</v-icon>
@@ -17,7 +17,7 @@
         <v-icon small>mdi-close</v-icon>
       </v-btn>
     </div>
-    <div v-show="!minimise" style="width: 100%">
+    <div v-show="!minimise" style="width: 100%" class="mouse">
       <div v-if="!isComplete" class="warning rounded-xl py-2 caption mb-2 text-center" dense>
         <v-icon x-small>mdi-alert-circle-outline</v-icon>
         This comment is targeting other resources.
@@ -62,6 +62,7 @@
         ></v-textarea>
         <div class="text-right">
           <v-btn
+            v-show="canArchiveThread"
             v-tooltip="'Marks this thread as archived.'"
             class="white--text mt-2 mr-2"
             small
@@ -124,6 +125,19 @@ export default {
     comment: { type: Object, default: () => null }
   },
   apollo: {
+    stream: {
+      query: gql`
+        query($streamId: String!) {
+          stream(id: $streamId){
+            id
+            role
+          }
+        }
+      `,
+      variables() {
+        return { streamId: this.$route.params.streamId }
+      }
+    },
     replyQuery: {
       query: gql`
         query($streamId: String!, $id: String!) {
@@ -204,6 +218,11 @@ export default {
     }
   },
   computed: {
+    canArchiveThread() {
+      if(!this.comment || !this.stream ) return false
+      if(!this.stream.role) return false
+      if(this.comment.authorId === this.$userId() || this.stream.role ==='stream:owner') return true
+    },
     thread() {
       let sorted = [...this.localReplies].sort(
         (a, b) => new Date(a.createdAt) - new Date(b.createdAt)

packages/frontend/src/main/components/viewer/CommentsOverlay.vue

@@ -206,8 +206,8 @@ export default {
             data.commentActivity.expanded = false
             data.commentActivity.hovered = false
             data.commentActivity.bouncing = false
-            if (data.commentActivity.authorId === this.$userId()) {
-              data.commentActivity.viewedAt = Date.now()
+            if (data.commentActivity.authorId !== this.$userId()) {
+              data.commentActivity.viewedAt = new Date('1987')
             }
             this.localComments.push(data.commentActivity)
             setTimeout(() => {

packages/frontend/src/main/pages/stream/Comments.vue

@@ -40,7 +40,7 @@
         <p class="mb-0 mt-2">All this stream's comments are listed below.</p>
       </v-col>
       <v-col v-for="c in localComments" :key="c.id" cols="12" sm="6">
-        <comment-list-item :comment="c" />
+        <comment-list-item :comment="c" :stream="stream" @deleted="handleDeletion"/>
       </v-col>
       <v-col cols="12" class="align-center">
         <infinite-loading :key="localComments[0].id" spinner="waveDots" @infinite="infiniteHandler">
@@ -84,6 +84,7 @@ export default {
           stream(id: $id) {
             id
             name
+            role
           }
         }
       `,
@@ -136,6 +137,11 @@ export default {
     }
   },
   methods: {
+    handleDeletion( comment ){
+      let indx = this.localComments.findIndex(lc => lc.id === comment.id)
+      this.localComments.splice(indx, 1)
+
+    },
     async infiniteHandler($state) {
       let res = await this.$apollo.queries.comments.refetch({
         cursor: this.cursor ? this.cursor : null,