chore: update member list action buttons

web/src/components/ChangePasswordDialog.tsx

@@ -55,7 +55,9 @@ const ChangePasswordDialog: React.FC<Props> = ({ destroy }: Props) => {
     }
 
     try {
+      const user = userService.getState().user as User;
       await userService.patchUser({
+        id: user.id,
         password: newPassword,
       });
       toastHelper.info("Password changed.");

web/src/components/ConfirmResetOpenIdDialog.tsx

@@ -25,7 +25,9 @@ const ConfirmResetOpenIdDialog: React.FC<Props> = ({ destroy }: Props) => {
 
     resetBtnClickLoadingState.setLoading();
     try {
+      const user = userService.getState().user as User;
       await userService.patchUser({
+        id: user.id,
         resetOpenId: true,
       });
     } catch (error) {

web/src/components/Settings/MemberSection.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { isEmpty } from "lodash-es";
+import { userService } from "../../services";
+import { useAppSelector } from "../../store";
 import * as api from "../../helpers/api";
 import toastHelper from "../Toast";
 import "../../less/settings/member-section.less";
@@ -12,6 +14,7 @@ interface State {
 }
 
 const PreferencesSection: React.FC<Props> = () => {
+  const currentUser = useAppSelector((state) => state.user.user);
   const [state, setState] = useState<State>({
     createUserEmail: "",
     createUserPassword: "",
@@ -66,6 +69,30 @@ const PreferencesSection: React.FC<Props> = () => {
     });
   };
 
+  const handleArchiveUserClick = async (user: User) => {
+    await userService.patchUser({
+      id: user.id,
+      rowStatus: "ARCHIVED",
+    });
+    fetchUserList();
+  };
+
+  const handleRestoreUserClick = async (user: User) => {
+    await userService.patchUser({
+      id: user.id,
+      rowStatus: "NORMAL",
+    });
+    fetchUserList();
+  };
+
+  // TODO: show a dialog to confirm delete user.
+  const handleDeleteUserClick = async (user: User) => {
+    await userService.deleteUser({
+      id: user.id,
+    });
+    fetchUserList();
+  };
+
   return (
     <div className="section-container member-section-container">
       <p className="title-text">Create a member</p>
@@ -86,15 +113,31 @@ const PreferencesSection: React.FC<Props> = () => {
       <div className="member-container field-container">
         <span className="field-text">ID</span>
         <span className="field-text">EMAIL</span>
+        <span></span>
       </div>
       {userList.map((user) => (
-        <div key={user.id} className="member-container">
+        <div key={user.id} className={`member-container ${user.rowStatus === "ARCHIVED" ? "archived" : ""}`}>
           <span className="field-text id-text">{user.id}</span>
           <span className="field-text email-text">{user.email}</span>
-          {/* TODO */}
-          {/* <div className="buttons-container">
-            <span>delete</span>
-          </div> */}
+          <div className="buttons-container">
+            {currentUser?.id === user.id ? (
+              <span className="tip-text">Yourself</span>
+            ) : user.rowStatus === "NORMAL" ? (
+              <span className="btn archive" onClick={() => handleArchiveUserClick(user)}>
+                archive
+              </span>
+            ) : (
+              <>
+                <span className="btn restore" onClick={() => handleRestoreUserClick(user)}>
+                  restore
+                </span>
+                <span className="split-line">/</span>
+                <span className="btn delete" onClick={() => handleDeleteUserClick(user)}>
+                  delete
+                </span>
+              </>
+            )}
+          </div>
         </div>
       ))}
     </div>

web/src/components/Settings/MyAccountSection.tsx

@@ -39,6 +39,7 @@ const MyAccountSection: React.FC<Props> = () => {
 
     try {
       await userService.patchUser({
+        id: user.id,
         name: username,
       });
       toastHelper.info("Username changed");

web/src/helpers/api.ts

@@ -34,7 +34,7 @@ export function createUser(userCreate: UserCreate) {
   return axios.post<ResponseObject<User>>("/api/user", userCreate);
 }
 
-export function getUser() {
+export function getMyselfUser() {
   return axios.get<ResponseObject<User>>("/api/user/me");
 }
 
@@ -47,7 +47,11 @@ export function getUserById(id: number) {
 }
 
 export function patchUser(userPatch: UserPatch) {
-  return axios.patch<ResponseObject<User>>("/api/user/me", userPatch);
+  return axios.patch<ResponseObject<User>>(`/api/user/${userPatch.id}`, userPatch);
+}
+
+export function deleteUser(userDelete: UserDelete) {
+  return axios.delete(`/api/user/${userDelete.id}`);
 }
 
 export function getMemoList(memoFind?: MemoFind) {

web/src/less/dialog.less

@@ -2,7 +2,7 @@
 
 .dialog-wrapper {
   .flex(column, flex-start, center);
-  @apply fixed top-0 left-0 w-full h-full pt-16 z-1000 overflow-x-hidden overflow-y-scroll bg-transparent transition-all;
+  @apply fixed top-0 left-0 w-full h-full pt-16 z-100 overflow-x-hidden overflow-y-scroll bg-transparent transition-all;
   .hide-scroll-bar();
 
   &.showup {

web/src/less/settings/member-section.less

@@ -32,7 +32,7 @@
   }
 
   > .member-container {
-    @apply w-full grid grid-cols-5 border-b py-2;
+    @apply w-full grid grid-cols-6 border-b py-2;
 
     > .field-text {
       @apply text-base pl-2 mr-4 w-16;
@@ -47,7 +47,31 @@
     }
 
     > .buttons-container {
-      @apply col-span-1;
+      @apply col-span-2;
+
+      > .btn {
+        @apply px-2 py-1 border rounded shadow hover:opacity-80;
+
+        &.archive {
+          @apply bg-yellow-100 text-yellow-600;
+        }
+
+        &.restore {
+          @apply bg-green-100 text-green-600;
+        }
+
+        &.delete {
+          @apply bg-red-100 text-red-600;
+        }
+      }
+
+      > .tip-text {
+        @apply text-gray-400;
+      }
+
+      > .split-line {
+        @apply font-mono text-gray-300 mx-1;
+      }
     }
   }
 }

web/src/services/userService.ts

@@ -33,7 +33,7 @@ const userService = {
       }
     }
 
-    const { data: user } = (await api.getUser()).data;
+    const { data: user } = (await api.getMyselfUser()).data;
     if (user) {
       store.dispatch(setUser(convertResponseModelUser(user)));
     }
@@ -53,7 +53,7 @@ const userService = {
   },
 
   doSignIn: async () => {
-    const { data: user } = (await api.getUser()).data;
+    const { data: user } = (await api.getMyselfUser()).data;
     if (user) {
       store.dispatch(setUser(convertResponseModelUser(user)));
     } else {
@@ -78,8 +78,14 @@ const userService = {
 
   patchUser: async (userPatch: UserPatch): Promise<void> => {
     const { data } = (await api.patchUser(userPatch)).data;
+    if (userPatch.id === store.getState().user.user?.id) {
       const user = convertResponseModelUser(data);
       store.dispatch(patchUser(user));
+    }
+  },
+
+  deleteUser: async (userDelete: UserDelete) => {
+    await api.deleteUser(userDelete);
   },
 };
 

web/src/types/modules/user.d.ts

@@ -22,7 +22,15 @@ interface UserCreate {
 }
 
 interface UserPatch {
+  id: UserId;
+
+  rowStatus?: RowStatus;
+
   name?: string;
   password?: string;
   resetOpenId?: boolean;
 }
+
+interface UserDelete {
+  id: UserId;
+}