From e346bea17fd97b1f30a6b180ebe5e43dc20e4b6a Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 18 Sep 2023 15:50:44 +0800
Subject: [PATCH] fix: missing ui permission condition about users

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 .../contents/_components/ContributorList.vue  | 39 +++++++++++++++++++
 .../contents/attachments/AttachmentList.vue   |  5 +++
 .../contents/pages/DeletedSinglePageList.vue  | 23 +----------
 .../pages/components/SinglePageListItem.vue   | 20 +---------
 .../contents/posts/DeletedPostList.vue        | 22 +----------
 .../entity-fields/ContributorsField.vue       | 21 ++--------
 6 files changed, 53 insertions(+), 77 deletions(-)
 create mode 100644 console/src/modules/contents/_components/ContributorList.vue

diff --git a/console/src/modules/contents/_components/ContributorList.vue b/console/src/modules/contents/_components/ContributorList.vue
new file mode 100644
index 0000000000..67dd027691
--- /dev/null
+++ b/console/src/modules/contents/_components/ContributorList.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { usePermission } from "@/utils/permission";
+import type { Contributor } from "@halo-dev/api-client";
+import { VAvatar } from "@halo-dev/components";
+import { useRouter } from "vue-router";
+
+withDefaults(
+  defineProps<{
+    contributors: Contributor[];
+  }>(),
+  {}
+);
+
+const router = useRouter();
+const { currentUserHasPermission } = usePermission();
+
+function handleRouteToUserDetail(contributor: Contributor) {
+  if (!currentUserHasPermission(["system:users:view"])) {
+    return;
+  }
+  router.push({
+    name: "UserDetail",
+    params: { name: contributor.name },
+  });
+}
+</script>
+
+<template>
+  <VAvatar
+    v-for="(contributor, contributorIndex) in contributors"
+    :key="contributorIndex"
+    v-tooltip="contributor.displayName"
+    size="xs"
+    :src="contributor.avatar"
+    :alt="contributor.displayName"
+    circle
+    @click="handleRouteToUserDetail(contributor)"
+  ></VAvatar>
+</template>
diff --git a/console/src/modules/contents/attachments/AttachmentList.vue b/console/src/modules/contents/attachments/AttachmentList.vue
index 92b9599a19..47f2a5f00a 100644
--- a/console/src/modules/contents/attachments/AttachmentList.vue
+++ b/console/src/modules/contents/attachments/AttachmentList.vue
@@ -612,6 +612,11 @@ onMounted(() => {
                               },
                             }"
                             class="text-xs text-gray-500"
+                            :class="{
+                              'pointer-events-none': !currentUserHasPermission([
+                                'system:users:view',
+                              ]),
+                            }"
                           >
                             {{ attachment.spec.ownerName }}
                           </RouterLink>
diff --git a/console/src/modules/contents/pages/DeletedSinglePageList.vue b/console/src/modules/contents/pages/DeletedSinglePageList.vue
index 4cfc8990a0..38b361a0b8 100644
--- a/console/src/modules/contents/pages/DeletedSinglePageList.vue
+++ b/console/src/modules/contents/pages/DeletedSinglePageList.vue
@@ -9,7 +9,6 @@ import {
   VSpace,
   Dialog,
   VEmpty,
-  VAvatar,
   VEntity,
   VEntityField,
   VPageHeader,
@@ -22,11 +21,11 @@ import { ref, watch } from "vue";
 import type { ListedSinglePage, SinglePage } from "@halo-dev/api-client";
 import { apiClient } from "@/utils/api-client";
 import { formatDatetime } from "@/utils/date";
-import { RouterLink } from "vue-router";
 import cloneDeep from "lodash.clonedeep";
 import { usePermission } from "@/utils/permission";
 import { useQuery } from "@tanstack/vue-query";
 import { useI18n } from "vue-i18n";
+import ContributorList from "../_components/ContributorList.vue";
 
 const { currentUserHasPermission } = usePermission();
 const { t } = useI18n();
@@ -338,25 +337,7 @@ watch(
               <template #end>
                 <VEntityField>
                   <template #description>
-                    <RouterLink
-                      v-for="(
-                        contributor, contributorIndex
-                      ) in singlePage.contributors"
-                      :key="contributorIndex"
-                      :to="{
-                        name: 'UserDetail',
-                        params: { name: contributor.name },
-                      }"
-                      class="flex items-center"
-                    >
-                      <VAvatar
-                        v-tooltip="contributor.displayName"
-                        size="xs"
-                        :src="contributor.avatar"
-                        :alt="contributor.displayName"
-                        circle
-                      ></VAvatar>
-                    </RouterLink>
+                    <ContributorList :contributors="singlePage.contributors" />
                   </template>
                 </VEntityField>
                 <VEntityField v-if="!singlePage?.page?.spec.deleted">
diff --git a/console/src/modules/contents/pages/components/SinglePageListItem.vue b/console/src/modules/contents/pages/components/SinglePageListItem.vue
index 8511f94d71..ac4aff6d30 100644
--- a/console/src/modules/contents/pages/components/SinglePageListItem.vue
+++ b/console/src/modules/contents/pages/components/SinglePageListItem.vue
@@ -5,7 +5,6 @@ import {
   IconExternalLinkLine,
   VSpace,
   Dialog,
-  VAvatar,
   VStatusDot,
   VEntity,
   VEntityField,
@@ -25,6 +24,7 @@ import { useMutation, useQueryClient } from "@tanstack/vue-query";
 import { useI18n } from "vue-i18n";
 import { inject } from "vue";
 import type { Ref } from "vue";
+import ContributorList from "../../_components/ContributorList.vue";
 
 const { currentUserHasPermission } = usePermission();
 const { t } = useI18n();
@@ -189,23 +189,7 @@ const handleDelete = async () => {
     <template #end>
       <VEntityField>
         <template #description>
-          <RouterLink
-            v-for="(contributor, contributorIndex) in singlePage.contributors"
-            :key="contributorIndex"
-            :to="{
-              name: 'UserDetail',
-              params: { name: contributor.name },
-            }"
-            class="flex items-center"
-          >
-            <VAvatar
-              v-tooltip="contributor.displayName"
-              size="xs"
-              :src="contributor.avatar"
-              :alt="contributor.displayName"
-              circle
-            ></VAvatar>
-          </RouterLink>
+          <ContributorList :contributors="singlePage.contributors" />
         </template>
       </VEntityField>
       <VEntityField :description="publishStatus">
diff --git a/console/src/modules/contents/posts/DeletedPostList.vue b/console/src/modules/contents/posts/DeletedPostList.vue
index 5aa5a04321..c6e07737ff 100644
--- a/console/src/modules/contents/posts/DeletedPostList.vue
+++ b/console/src/modules/contents/posts/DeletedPostList.vue
@@ -10,7 +10,6 @@ import {
   VPageHeader,
   VPagination,
   VSpace,
-  VAvatar,
   VStatusDot,
   VEntity,
   VEntityField,
@@ -27,6 +26,7 @@ import { usePermission } from "@/utils/permission";
 import cloneDeep from "lodash.clonedeep";
 import { useQuery } from "@tanstack/vue-query";
 import { useI18n } from "vue-i18n";
+import ContributorList from "../_components/ContributorList.vue";
 
 const { currentUserHasPermission } = usePermission();
 const { t } = useI18n();
@@ -353,25 +353,7 @@ watch(
               <template #end>
                 <VEntityField>
                   <template #description>
-                    <RouterLink
-                      v-for="(
-                        contributor, contributorIndex
-                      ) in post.contributors"
-                      :key="contributorIndex"
-                      :to="{
-                        name: 'UserDetail',
-                        params: { name: contributor.name },
-                      }"
-                      class="flex items-center"
-                    >
-                      <VAvatar
-                        v-tooltip="contributor.displayName"
-                        size="xs"
-                        :src="contributor.avatar"
-                        :alt="contributor.displayName"
-                        circle
-                      ></VAvatar>
-                    </RouterLink>
+                    <ContributorList :contributors="post.contributors" />
                   </template>
                 </VEntityField>
                 <VEntityField v-if="!post?.post?.spec.deleted">
diff --git a/console/src/modules/contents/posts/components/entity-fields/ContributorsField.vue b/console/src/modules/contents/posts/components/entity-fields/ContributorsField.vue
index 88d213c3f8..148ce8f9af 100644
--- a/console/src/modules/contents/posts/components/entity-fields/ContributorsField.vue
+++ b/console/src/modules/contents/posts/components/entity-fields/ContributorsField.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { VAvatar, VEntityField } from "@halo-dev/components";
+import { VEntityField } from "@halo-dev/components";
 import type { ListedPost } from "@halo-dev/api-client";
+import ContributorList from "@/modules/contents/_components/ContributorList.vue";
 
 withDefaults(
   defineProps<{
@@ -13,23 +14,7 @@ withDefaults(
 <template>
   <VEntityField>
     <template #description>
-      <RouterLink
-        v-for="(contributor, contributorIndex) in post.contributors"
-        :key="contributorIndex"
-        :to="{
-          name: 'UserDetail',
-          params: { name: contributor.name },
-        }"
-        class="flex items-center"
-      >
-        <VAvatar
-          v-tooltip="contributor.displayName"
-          size="xs"
-          :src="contributor.avatar"
-          :alt="contributor.displayName"
-          circle
-        ></VAvatar>
-      </RouterLink>
+      <ContributorList :contributors="post.contributors" />
     </template>
   </VEntityField>
 </template>