mirror of
https://github.com/usememos/memos.git
synced 2024-12-22 10:41:30 +03:00
chore: update member list action buttons
This commit is contained in:
parent
7b1bad5b29
commit
d371cfd78d
@ -55,7 +55,9 @@ const ChangePasswordDialog: React.FC<Props> = ({ destroy }: Props) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
const user = userService.getState().user as User;
|
||||||
await userService.patchUser({
|
await userService.patchUser({
|
||||||
|
id: user.id,
|
||||||
password: newPassword,
|
password: newPassword,
|
||||||
});
|
});
|
||||||
toastHelper.info("Password changed.");
|
toastHelper.info("Password changed.");
|
||||||
|
@ -25,7 +25,9 @@ const ConfirmResetOpenIdDialog: React.FC<Props> = ({ destroy }: Props) => {
|
|||||||
|
|
||||||
resetBtnClickLoadingState.setLoading();
|
resetBtnClickLoadingState.setLoading();
|
||||||
try {
|
try {
|
||||||
|
const user = userService.getState().user as User;
|
||||||
await userService.patchUser({
|
await userService.patchUser({
|
||||||
|
id: user.id,
|
||||||
resetOpenId: true,
|
resetOpenId: true,
|
||||||
});
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
@ -1,5 +1,7 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import { isEmpty } from "lodash-es";
|
import { isEmpty } from "lodash-es";
|
||||||
|
import { userService } from "../../services";
|
||||||
|
import { useAppSelector } from "../../store";
|
||||||
import * as api from "../../helpers/api";
|
import * as api from "../../helpers/api";
|
||||||
import toastHelper from "../Toast";
|
import toastHelper from "../Toast";
|
||||||
import "../../less/settings/member-section.less";
|
import "../../less/settings/member-section.less";
|
||||||
@ -12,6 +14,7 @@ interface State {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const PreferencesSection: React.FC<Props> = () => {
|
const PreferencesSection: React.FC<Props> = () => {
|
||||||
|
const currentUser = useAppSelector((state) => state.user.user);
|
||||||
const [state, setState] = useState<State>({
|
const [state, setState] = useState<State>({
|
||||||
createUserEmail: "",
|
createUserEmail: "",
|
||||||
createUserPassword: "",
|
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 (
|
return (
|
||||||
<div className="section-container member-section-container">
|
<div className="section-container member-section-container">
|
||||||
<p className="title-text">Create a member</p>
|
<p className="title-text">Create a member</p>
|
||||||
@ -86,15 +113,31 @@ const PreferencesSection: React.FC<Props> = () => {
|
|||||||
<div className="member-container field-container">
|
<div className="member-container field-container">
|
||||||
<span className="field-text">ID</span>
|
<span className="field-text">ID</span>
|
||||||
<span className="field-text">EMAIL</span>
|
<span className="field-text">EMAIL</span>
|
||||||
|
<span></span>
|
||||||
</div>
|
</div>
|
||||||
{userList.map((user) => (
|
{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 id-text">{user.id}</span>
|
||||||
<span className="field-text email-text">{user.email}</span>
|
<span className="field-text email-text">{user.email}</span>
|
||||||
{/* TODO */}
|
<div className="buttons-container">
|
||||||
{/* <div className="buttons-container">
|
{currentUser?.id === user.id ? (
|
||||||
<span>delete</span>
|
<span className="tip-text">Yourself</span>
|
||||||
</div> */}
|
) : 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>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
@ -39,6 +39,7 @@ const MyAccountSection: React.FC<Props> = () => {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
await userService.patchUser({
|
await userService.patchUser({
|
||||||
|
id: user.id,
|
||||||
name: username,
|
name: username,
|
||||||
});
|
});
|
||||||
toastHelper.info("Username changed");
|
toastHelper.info("Username changed");
|
||||||
|
@ -34,7 +34,7 @@ export function createUser(userCreate: UserCreate) {
|
|||||||
return axios.post<ResponseObject<User>>("/api/user", userCreate);
|
return axios.post<ResponseObject<User>>("/api/user", userCreate);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getUser() {
|
export function getMyselfUser() {
|
||||||
return axios.get<ResponseObject<User>>("/api/user/me");
|
return axios.get<ResponseObject<User>>("/api/user/me");
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -47,7 +47,11 @@ export function getUserById(id: number) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function patchUser(userPatch: UserPatch) {
|
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) {
|
export function getMemoList(memoFind?: MemoFind) {
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
.dialog-wrapper {
|
.dialog-wrapper {
|
||||||
.flex(column, flex-start, center);
|
.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();
|
.hide-scroll-bar();
|
||||||
|
|
||||||
&.showup {
|
&.showup {
|
||||||
|
@ -32,7 +32,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
> .member-container {
|
> .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 {
|
> .field-text {
|
||||||
@apply text-base pl-2 mr-4 w-16;
|
@apply text-base pl-2 mr-4 w-16;
|
||||||
@ -47,7 +47,31 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
> .buttons-container {
|
> .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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -33,7 +33,7 @@ const userService = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const { data: user } = (await api.getUser()).data;
|
const { data: user } = (await api.getMyselfUser()).data;
|
||||||
if (user) {
|
if (user) {
|
||||||
store.dispatch(setUser(convertResponseModelUser(user)));
|
store.dispatch(setUser(convertResponseModelUser(user)));
|
||||||
}
|
}
|
||||||
@ -53,7 +53,7 @@ const userService = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
doSignIn: async () => {
|
doSignIn: async () => {
|
||||||
const { data: user } = (await api.getUser()).data;
|
const { data: user } = (await api.getMyselfUser()).data;
|
||||||
if (user) {
|
if (user) {
|
||||||
store.dispatch(setUser(convertResponseModelUser(user)));
|
store.dispatch(setUser(convertResponseModelUser(user)));
|
||||||
} else {
|
} else {
|
||||||
@ -78,8 +78,14 @@ const userService = {
|
|||||||
|
|
||||||
patchUser: async (userPatch: UserPatch): Promise<void> => {
|
patchUser: async (userPatch: UserPatch): Promise<void> => {
|
||||||
const { data } = (await api.patchUser(userPatch)).data;
|
const { data } = (await api.patchUser(userPatch)).data;
|
||||||
|
if (userPatch.id === store.getState().user.user?.id) {
|
||||||
const user = convertResponseModelUser(data);
|
const user = convertResponseModelUser(data);
|
||||||
store.dispatch(patchUser(user));
|
store.dispatch(patchUser(user));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
deleteUser: async (userDelete: UserDelete) => {
|
||||||
|
await api.deleteUser(userDelete);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
8
web/src/types/modules/user.d.ts
vendored
8
web/src/types/modules/user.d.ts
vendored
@ -22,7 +22,15 @@ interface UserCreate {
|
|||||||
}
|
}
|
||||||
|
|
||||||
interface UserPatch {
|
interface UserPatch {
|
||||||
|
id: UserId;
|
||||||
|
|
||||||
|
rowStatus?: RowStatus;
|
||||||
|
|
||||||
name?: string;
|
name?: string;
|
||||||
password?: string;
|
password?: string;
|
||||||
resetOpenId?: boolean;
|
resetOpenId?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface UserDelete {
|
||||||
|
id: UserId;
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user