feat(comments): filtering

2022-05-14 12:11:58 +01:00
parent b45766ff19
commit c51945cb8a
2 changed files with 54 additions and 1 deletions
@@ -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
@@ -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">