YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: member management enhancement (#617)

Browse Source 
* feat: member management enhancement

* update

* update

* update

* update
This commit is contained in:
Zeng1998
2022-11-28 19:59:11 +08:00
committed by GitHub
parent b04e001db1
commit b67a37453d
4 changed files with 179 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
web/src/components/Settings/MemberSection.tsx
View File

@ -4,8 +4,10 @@ import { userService } from "../../services";
import { useAppSelector } from "../../store";
import * as api from "../../helpers/api";
import toastHelper from "../Toast";
import Icon from "../Icon";
import Dropdown from "../common/Dropdown";
import { showCommonDialog } from "../Dialog/CommonDialog";
import showChangeMemberPasswordDialog from "../ChangeMemberPasswordDialog";
import "../../less/settings/member-section.less";
interface State {
@ -22,8 +24,13 @@ const PreferencesSection = () => {
createUserPassword: "",
repeatUserPassword: "",
});
const [userNameQueryText, setUserNameQueryText] = useState("");
const [userList, setUserList] = useState<User[]>([]);
const showUserList = userList.filter((user: User) => {
return user.username.toLowerCase().includes(userNameQueryText.toLowerCase());
});
useEffect(() => {
fetchUserList();
}, []);
@ -83,6 +90,15 @@ const PreferencesSection = () => {
});
};
const handleUserNameQueryInput = (event: React.FormEvent<HTMLInputElement>) => {
const text = event.currentTarget.value;
setUserNameQueryText(text);
};
const handleChangePasswordClick = (user: User) => {
showChangeMemberPasswordDialog(user);
};
const handleArchiveUserClick = (user: User) => {
showCommonDialog({
title: `Archive Member`,
@ -145,13 +161,29 @@ const PreferencesSection = () => {
<button onClick={handleCreateUserBtnClick}>{t("common.create")}</button>
</div>
</div>
<p className="title-text">{t("setting.member-list")}</p>
<div className="section-header-container">
<div className="title-text">{t("setting.member-list")}</div>
<div className="search-bar">
<div className="search-bar-container">
<div className="search-bar-inputer">
<Icon.Search className="icon-img" />
<input
className="text-input"
type="text"
placeholder={t("common.username")}
value={userNameQueryText}
onChange={handleUserNameQueryInput}
/>
</div>
</div>
</div>
</div>
<div className="member-container field-container">
<span className="field-text">ID</span>
<span className="field-text username-field">{t("common.username")}</span>
<span></span>
</div>
{userList.map((user) => (
{showUserList.map((user) => (
<div key={user.id} className={`member-container ${user.rowStatus === "ARCHIVED" ? "archived" : ""}`}>
<span className="field-text id-text">{user.id}</span>
<span className="field-text username-text">{user.username}</span>
@ -163,6 +195,12 @@ const PreferencesSection = () => {
actionsClassName="!w-24"
actions={
<>
<button
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100"
onClick={() => handleChangePasswordClick(user)}
>
{t("setting.account-section.change-password")}
</button>
{user.rowStatus === "NORMAL" ? (
<button
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100"