From c51945cb8a34e4d3cd84d8b918152a8599ffdbcd Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Sat, 14 May 2022 12:11:58 +0100
Subject: [PATCH] feat(comments): filtering

---
 .../comments/CommentsViewerNavbar.vue         | 49 ++++++++++++++++++-
 .../components/viewer/CommentsOverlay.vue     |  6 +++
 2 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/main/components/comments/CommentsViewerNavbar.vue b/packages/frontend/src/main/components/comments/CommentsViewerNavbar.vue
index 000f0d8ab..248dc4ef4 100644
--- a/packages/frontend/src/main/components/comments/CommentsViewerNavbar.vue
+++ b/packages/frontend/src/main/components/comments/CommentsViewerNavbar.vue
@@ -26,8 +26,38 @@
     </v-list>
     <v-scroll-y-transition>
       <div v-show="expand" class="px-2">
+        <div class="d-flex align-center px-2 mb-3">
+          <span class="caption mr-3">Filter</span>
+          <v-btn
+            x-small
+            class="ml-2"
+            :depressed="filter === 'all'"
+            :zzzcolor="`${filter === 'all' ? 'primary' : ''}`"
+            @click="$emit('set-filter', 'all')"
+          >
+            all
+          </v-btn>
+          <v-btn
+            x-small
+            class="ml-2"
+            :depressed="filter === 'unread'"
+            :zzzcolor="`${filter === 'unread' ? 'primary' : ''}`"
+            @click="$emit('set-filter', 'unread')"
+          >
+            unread
+          </v-btn>
+          <v-btn
+            x-small
+            class="ml-2"
+            :depressed="filter === 'none'"
+            :zzzcolor="`${filter === 'none' ? 'primary' : ''}`"
+            @click="$emit('set-filter', 'none')"
+          >
+            none
+          </v-btn>
+        </div>
         <v-row
-          v-for="comment in comments"
+          v-for="comment in visibleComments"
           :key="comment.id + '-card-sidebar'"
           no-gutters
           :class="`${isUnread(comment) ? 'border' : ''} my-2 property-row rounded-lg ${
@@ -96,6 +126,10 @@ export default {
     comments: {
       type: Array,
       default: () => []
+    },
+    filter: {
+      type: String,
+      default: 'all'
     }
   },
   data() {
@@ -103,6 +137,19 @@ export default {
       expand: true
     }
   },
+  computed: {
+    visibleComments() {
+      switch (this.filter) {
+        case 'all':
+          return this.comments
+        case 'unread':
+          return this.comments.filter((c) => this.isUnread(c))
+        case 'none':
+          return this.comments // important, hides in the display, but you can still see all comments
+      }
+      return this.comments
+    }
+  },
   methods: {
     isUnread(comment) {
       return new Date(comment.updatedAt) - new Date(comment.viewedAt) > 0
diff --git a/packages/frontend/src/main/components/viewer/CommentsOverlay.vue b/packages/frontend/src/main/components/viewer/CommentsOverlay.vue
index 778a4bbac..d8db4ad26 100644
--- a/packages/frontend/src/main/components/viewer/CommentsOverlay.vue
+++ b/packages/frontend/src/main/components/viewer/CommentsOverlay.vue
@@ -118,12 +118,18 @@
     <portal v-if="activeComments.length !== 0" to="comments">
       <comments-viewer-navbar
         :comments="activeComments"
+        :filter="commentsFilter"
         @select-comment="
           (e) => {
             if (!e.expanded && !showComments) showComments = true
             e.expanded ? collapseComment(e) : expandComment(e)
           }
         "
+        @set-filter="
+          (state) => {
+            commentsFilter = state
+          }
+        "
       />
     </portal>
     <portal to="viewercontrols" :order="5">