From 2c4e85f40b658566b576afbf3a0098a1a78aadc3 Mon Sep 17 00:00:00 2001
From: Nancy <153055234+LEIYOUSU@users.noreply.github.com>
Date: Wed, 30 Oct 2024 12:50:39 +0800
Subject: [PATCH] feat: add grant permission and user deletion features to user
 detail page (#6963)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

What type of PR is this?

/area ui
/kind improvement
/milestone 2.20.x

What this PR does / why we need it:

期望支持在用户详情页面支持变更用户角色及删除用户 。

Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/6944

Special notes for your reviewer:

Does this PR introduce a user-facing change?
```release-note
支持在用户详情页面支持变更用户角色及删除用户 。
```
---
 .../modules/system/users/UserDetail.vue       | 53 +++++++++++++++++--
 ui/src/locales/en.yaml                        |  2 +
 ui/src/locales/zh-CN.yaml                     |  2 +
 ui/src/locales/zh-TW.yaml                     |  2 +
 4 files changed, 55 insertions(+), 4 deletions(-)

diff --git a/ui/console-src/modules/system/users/UserDetail.vue b/ui/console-src/modules/system/users/UserDetail.vue
index 798d01d3c1..e106ec860f 100644
--- a/ui/console-src/modules/system/users/UserDetail.vue
+++ b/ui/console-src/modules/system/users/UserDetail.vue
@@ -3,8 +3,11 @@ import UserAvatar from "@/components/user-avatar/UserAvatar.vue";
 import { usePluginModuleStore } from "@/stores/plugin";
 import { useUserStore } from "@/stores/user";
 import { usePermission } from "@/utils/permission";
-import { consoleApiClient } from "@halo-dev/api-client";
+import type { User } from "@halo-dev/api-client";
+import { consoleApiClient, coreApiClient } from "@halo-dev/api-client";
 import {
+  Dialog,
+  Toast,
   VButton,
   VDropdown,
   VDropdownItem,
@@ -23,7 +26,8 @@ import {
   type Ref,
 } from "vue";
 import { useI18n } from "vue-i18n";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
+import GrantPermissionModal from "./components/GrantPermissionModal.vue";
 import UserEditingModal from "./components/UserEditingModal.vue";
 import UserPasswordChangeModal from "./components/UserPasswordChangeModal.vue";
 import DetailTab from "./tabs/Detail.vue";
@@ -34,9 +38,9 @@ const { currentUser } = useUserStore();
 
 const editingModal = ref(false);
 const passwordChangeModal = ref(false);
-
+const grantPermissionModal = ref<boolean>(false);
 const { params } = useRoute();
-
+const router = useRouter();
 const {
   data: user,
   isLoading,
@@ -97,6 +101,27 @@ const tabbarItems = computed(() => {
     }));
 });
 
+const handleDelete = async (userToDelete: User) => {
+  Dialog.warning({
+    title: t("core.user.operations.delete.title"),
+    description: t("core.common.dialog.descriptions.cannot_be_recovered"),
+    confirmType: "danger",
+    confirmText: t("core.common.buttons.confirm"),
+    cancelText: t("core.common.buttons.cancel"),
+    onConfirm: async () => {
+      try {
+        await coreApiClient.user.deleteUser({
+          name: userToDelete.metadata.name,
+        });
+        Toast.success(t("core.common.toast.delete_success"));
+        router.push({ name: "Users" });
+      } catch (e) {
+        console.error("Failed to delete user", e);
+      }
+    },
+  });
+};
+
 function handleRouteToUC() {
   window.location.href = "/uc";
 }
@@ -105,6 +130,10 @@ function onPasswordChangeModalClose() {
   passwordChangeModal.value = false;
   refetch();
 }
+function onGrantPermissionModalClose() {
+  grantPermissionModal.value = false;
+  refetch();
+}
 </script>
 <template>
   <UserEditingModal
@@ -119,6 +148,12 @@ function onPasswordChangeModalClose() {
     @close="onPasswordChangeModalClose"
   />
 
+  <GrantPermissionModal
+    v-if="grantPermissionModal"
+    :user="user?.user"
+    @close="onGrantPermissionModalClose"
+  />
+
   <header class="bg-white">
     <div class="p-4">
       <div class="flex items-center justify-between">
@@ -154,6 +189,16 @@ function onPasswordChangeModalClose() {
               <VDropdownItem @click="passwordChangeModal = true">
                 {{ $t("core.user.detail.actions.change_password.title") }}
               </VDropdownItem>
+              <VDropdownItem @click="grantPermissionModal = true">
+                {{ $t("core.user.detail.actions.grant_permission.title") }}
+              </VDropdownItem>
+              <VDropdownItem
+                v-if="user?.user"
+                type="danger"
+                @click="handleDelete(user.user)"
+              >
+                {{ $t("core.common.buttons.delete") }}
+              </VDropdownItem>
             </template>
           </VDropdown>
         </div>
diff --git a/ui/src/locales/en.yaml b/ui/src/locales/en.yaml
index 4de7d181e9..e44d576f1f 100644
--- a/ui/src/locales/en.yaml
+++ b/ui/src/locales/en.yaml
@@ -1068,6 +1068,8 @@ core:
           title: Update profile
         change_password:
           title: Change password
+          grant_permission:
+            title: Grant permission
         profile:
           title: Profile
       fields:
diff --git a/ui/src/locales/zh-CN.yaml b/ui/src/locales/zh-CN.yaml
index 5ad468be78..390a104277 100644
--- a/ui/src/locales/zh-CN.yaml
+++ b/ui/src/locales/zh-CN.yaml
@@ -998,6 +998,8 @@ core:
           title: 修改资料
         change_password:
           title: 修改密码
+        grant_permission:
+          title: 分配角色
         profile:
           title: 个人中心
       fields:
diff --git a/ui/src/locales/zh-TW.yaml b/ui/src/locales/zh-TW.yaml
index 9fb191650f..c8116c90d2 100644
--- a/ui/src/locales/zh-TW.yaml
+++ b/ui/src/locales/zh-TW.yaml
@@ -975,6 +975,8 @@ core:
           title: 修改資料
         change_password:
           title: 修改密碼
+        grant_permission:
+          title: 分配角色
         profile:
           title: 個人中心
       fields: