chore: update member list action buttons

This commit is contained in:
boojack 2022-07-26 22:36:24 +08:00
parent 7b1bad5b29
commit d371cfd78d
9 changed files with 104 additions and 14 deletions

View File

@ -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.");

View File

@ -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) {

View File

@ -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>

View File

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

View File

@ -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) {

View File

@ -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 {

View File

@ -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;
}
}
}
}

View File

@ -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;
const user = convertResponseModelUser(data);
store.dispatch(patchUser(user));
if (userPatch.id === store.getState().user.user?.id) {
const user = convertResponseModelUser(data);
store.dispatch(patchUser(user));
}
},
deleteUser: async (userDelete: UserDelete) => {
await api.deleteUser(userDelete);
},
};

View File

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