feat: auditing comments modal support click into the comment management (#517)

Signed-off-by: Ryan Wang <i@ryanc.cc>

src/components/Comment/CommentListView.vue

@@ -1,7 +1,12 @@
 <template>
   <a-list :dataSource="comments" :loading="loading" item-layout="vertical">
     <template #renderItem="item, index">
-      <a-list-item :key="index" class="!p-0">
+      <a-list-item
+        :key="index"
+        class="!p-0"
+        :class="{ 'hover:bg-gray-100 hover:!px-1 hover:rounded transition-all cursor-pointer': clickable }"
+        @click="handleClick(item)"
+      >
         <a-comment :avatar="item.avatar">
           <template #author>
             <a v-if="item.authorUrl" :href="item.authorUrl" class="!text-gray-800 hover:!text-blue-500" target="_blank">
@@ -40,6 +45,10 @@ export default {
     loading: {
       type: Boolean,
       default: false
+    },
+    clickable: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -73,6 +82,11 @@ export default {
           window.open(link, '_blank')
         }
       }
+    },
+    handleClick(item) {
+      if (this.clickable) {
+        this.$emit('click', item)
+      }
     }
   }
 }

src/components/Comment/TargetCommentListModal.vue

@@ -1,6 +1,6 @@
 <template>
   <a-modal v-model="modalVisible" :afterClose="onClose" :title="title" :width="1024" destroyOnClose>
-    <a-spin :spinning="list.loading">
+    <a-list :loading="list.loading" item-layout="vertical">
       <TargetCommentTreeNode
         v-for="(comment, index) in list.data"
         :key="index"
@@ -9,9 +9,7 @@
         :target-id="targetId"
         @reload="handleGetComments"
       />
-    </a-spin>
+    </a-list>
-
-    <a-empty v-if="!list.loading && !list.data.length" />
 
     <div class="page-wrapper">
       <a-pagination

src/components/Comment/TargetCommentTreeNode.vue

@@ -1,4 +1,5 @@
 <template>
+  <a-list-item class="!p-0">
     <a-comment>
       <template #author>
         <a :href="comment.authorUrl" target="_blank">
@@ -82,6 +83,7 @@
         @succeed="$emit('reload')"
       />
     </a-comment>
+  </a-list-item>
 </template>
 <script>
 import apiClient from '@/utils/api-client'

src/components/Tools/HeaderComment.vue

@@ -12,7 +12,12 @@
       <div class="custom-tab-wrapper">
         <a-tabs v-model="activeKey" :animated="{ inkBar: true, tabPane: false }" @change="handleListAuditingComments">
           <a-tab-pane v-for="target in targets" :key="target.key" :tab="target.label">
-            <CommentListView :comments="comments[target.dataKey]" :loading="comments.loading" />
+            <CommentListView
+              :comments="comments[target.dataKey]"
+              :loading="comments.loading"
+              clickable
+              @click="handleRouteToCommentList(arguments[0], target)"
+            />
           </a-tab-pane>
         </a-tabs>
       </div>
@@ -30,6 +35,7 @@
 
 <script>
 import apiClient from '@/utils/api-client'
+import { commentStatuses } from '@/core/constant'
 
 const targets = [
   {
@@ -87,6 +93,21 @@ export default {
       } finally {
         this.comments.loading = false
       }
+    },
+
+    handleRouteToCommentList(comment, target) {
+      this.$log.debug('Handle click auditing comment', comment, target)
+
+      const { name } = this.$router.currentRoute
+
+      this.$router.push({
+        name: 'Comments',
+        query: { activeKey: target.dataKey, defaultStatus: commentStatuses.AUDITING.value }
+      })
+
+      if (name === 'Comments') {
+        this.$router.go(0)
+      }
     }
   }
 }

src/components/Tools/HeaderCommentTab.vue

@@ -1,7 +0,0 @@
-<template>
-  <div></div>
-</template>
-<script>
-export default {}
-</script>
-<style lang="less" scoped></style>

src/styles/global.less

@@ -518,14 +518,6 @@ body {
   }
 }
 
-.ant-comment {
-  .ant-comment-actions {
-    margin-bottom: 0 !important;
-    margin-top: 0 !important;
-    padding-bottom: 0 !important;
-  }
-}
-
 .ant-comment-inner {
   .ant-comment-content {
     .ant-comment-content-detail {

src/views/comment/CommentList.vue

@@ -1,15 +1,9 @@
 <template>
   <page-view>
     <div class="card-container">
-      <a-tabs type="card">
+      <a-tabs v-model="activeKey" type="card">
-        <a-tab-pane key="post" tab="文章">
+        <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title">
-          <comment-tab target="post"></comment-tab>
+          <comment-tab :target="pane.key" :defaultStatus="defaultStatus"></comment-tab>
-        </a-tab-pane>
-        <a-tab-pane key="sheet" tab="页面">
-          <comment-tab target="sheet"></comment-tab>
-        </a-tab-pane>
-        <a-tab-pane key="journal" tab="日志">
-          <comment-tab target="journal"></comment-tab>
         </a-tab-pane>
       </a-tabs>
     </div>
@@ -24,6 +18,37 @@ export default {
   components: {
     PageView,
     CommentTab
+  },
+  data() {
+    const panes = [
+      { title: '文章', key: 'post' },
+      { title: '页面', key: 'sheet' },
+      { title: '日志', key: 'journal' }
+    ]
+    return {
+      panes,
+      activeKey: panes[0].key,
+      defaultStatus: undefined
+    }
+  },
+  beforeRouteEnter(to, from, next) {
+    // Get post id from query
+    const activeKey = to.query.activeKey
+    const defaultStatus = to.query.defaultStatus
+    next(vm => {
+      if (activeKey) {
+        vm.activeKey = activeKey
+      }
+      if (defaultStatus) {
+        vm.defaultStatus = defaultStatus
+      }
+    })
+  },
+  watch: {
+    activeKey(newVal) {
+      const path = this.$router.history.current.path
+      this.$router.push({ path, query: { activeKey: newVal } }).catch(err => err)
+    }
   }
 }
 </script>

src/views/comment/components/CommentTab.vue

@@ -450,6 +450,10 @@ export default {
       validator: function (value) {
         return ['post', 'sheet', 'journal'].indexOf(value) !== -1
       }
+    },
+    defaultStatus: {
+      type: String,
+      default: undefined
     }
   },
   data() {
@@ -466,7 +470,7 @@ export default {
           page: 0,
           size: 10,
           keyword: null,
-          status: null
+          status: undefined
         }
       },
 
@@ -476,9 +480,6 @@ export default {
       replyModalVisible: false
     }
   },
-  created() {
-    this.handleListComments()
-  },
   computed: {
     pagination() {
       return {
@@ -512,6 +513,20 @@ export default {
       return 0
     }
   },
+  watch: {
+    defaultStatus(status) {
+      this.list.params.status = status
+      this.$nextTick(() => {
+        this.handleListComments()
+      })
+    }
+  },
+  mounted() {
+    this.list.params.status = this.defaultStatus
+    this.$nextTick(() => {
+      this.handleListComments()
+    })
+  },
   methods: {
     async handleListComments() {
       try {
@@ -621,7 +636,7 @@ export default {
 
     handleResetParam() {
       this.list.params.keyword = null
-      this.list.params.status = null
+      this.list.params.status = undefined
       this.handleClearRowKeys()
       this.handlePageChange(1)
     },