UserManageSidebar.tsx - AiToEarn

UserManageSidebar.tsx

1	import { ForwardedRef, forwardRef, memo, useRef, useState } from 'react';
2	import { Button, Input, message, Modal } from 'antd';
3	import {
4	ExclamationCircleFilled,
5	PlusOutlined,
6	UnorderedListOutlined,
7	} from '@ant-design/icons';
8	import { useAccountStore } from '@/store/account';
9	import { useShallow } from 'zustand/react/shallow';
10	import styles from './AccountSidebar.module.scss';
11	import {
12	icpEditDeleteAccountGroup,
13	icpAddAccountGroup,
14	icpDeleteAccountGroup,
15	} from '@/icp/account';
16	import { defaultAccountGroupId } from '../../../../../commont/AccountEnum';
17	import { Menu, MenuItem } from '@electron-uikit/contextmenu/renderer';
18	import { ReactSortable } from 'react-sortablejs';
19
20	export interface IUserManageSidebarRef {}
21
22	export interface IUserManageSidebarProps {
23	activeGroup: number;
24	allUser: number;
25	onChange: (id: number) => void;
26	onSortEnd: () => void;
27	}
28
29	const { confirm } = Modal;
30
31	const UserManageSidebar = memo(
32	forwardRef(
33	(
34	{ activeGroup, allUser, onChange, onSortEnd }: IUserManageSidebarProps,
35	ref: ForwardedRef<IUserManageSidebarRef>,
36	) => {
37	const {
38	accountGroupList,
39	accountList,
40	setAccountGroupList,
41	getAccountGroup,
42	getAccountList,
43	} = useAccountStore(
44	useShallow((state) => ({
45	accountGroupList: state.accountGroupList,
46	accountList: state.accountList,
47	getAccountGroup: state.getAccountGroup,
48	getAccountList: state.getAccountList,
49	setAccountGroupList: state.setAccountGroupList,
50	})),
51	);
52	const [openCreateGroup, setOpenCreateGroup] = useState(false);
53	const [groupName, setGroupName] = useState('');
54	const [createGroupLoading, setCreateGroupLoading] = useState(false);
55	// -1=新建不然为重命名，值为要重命名的id
56	const [createGroupId, setCreateGroupId] = useState(0);
57	const srcollEl = useRef<HTMLElement>(undefined);
58
59	const createGroupCancel = () => {
60	setOpenCreateGroup(false);
61	setGroupName('');
62	};
63
64	return (
65	<>
66	<Modal
67	title={createGroupId === -1 ? '新建列表' : '重命名列表'}
68	open={openCreateGroup}
69	onCancel={createGroupCancel}
70	footer={
71	<>
72	<Button onClick={createGroupCancel}>取消</Button>
73	<Button
74	type="primary"
75	disabled={groupName.length === 0}
76	onClick={async () => {
77	setCreateGroupLoading(true);
78	if (createGroupId === -1) {
79	await icpAddAccountGroup({
80	name: groupName,
81	});
82	} else {
83	await icpEditDeleteAccountGroup({
84	name: groupName,
85	id: createGroupId,
86	});
87	}
88
89	await getAccountGroup();
90	setCreateGroupLoading(false);
91	createGroupCancel();
92	}}
93	loading={createGroupLoading}
94	>
95	保存
96	</Button>
97	</>
98	}
99	>
100	<div className={styles.createGroup}>
101	<label>列表名</label>
102	<Input
103	value={groupName}
104	placeholder="请输入列表名称"
105	onChange={(e) => setGroupName(e.target.value)}
106	/>
107	</div>
108	</Modal>
109
110	<div className="userManage-sidebar">
111	<div className="userManage-sidebar-top">
112	<div
113	className={[
114	'userManage-sidebar-allUser',
115	activeGroup === allUser && 'userManage-sidebar--active',
116	].join(' ')}
117	onClick={() => {
118	onChange(allUser);
119	}}
120	>
121	<span className="userManage-sidebar-name">全部账号</span>
122	<span className="userManage-sidebar-count">
123	{accountList.length}
124	</span>
125	</div>
126	<div className="userManage-sidebar-list">
127	<p className="userManage-sidebar-list-title">列表</p>
128
129	<ReactSortable
130	className="userManage-sidebar-list-sortable"
131	list={accountGroupList}
132	animation={250}
133	onEnd={async () => {
134	onSortEnd();
135	}}
136	setList={setAccountGroupList}
137	scrollSensitivity={100}
138	scroll={srcollEl.current}
139	scrollSpeed={15}
140	handle=".userManage-sidebar-sortHandle"
141	id="id"
142	>
143	{accountGroupList.map((v) => {
144	return (
145	<div
146	className={[
147	'userManage-sidebar-list-item',
148	activeGroup === v.id && 'userManage-sidebar--active',
149	].join(' ')}
150	key={v.id}
151	onClick={() => {
152	onChange(v.id);
153	}}
154	onContextMenu={(e) => {
155	if (v.id === defaultAccountGroupId) {
156	return message.error('不能操作默认列表');
157	}
158	e.preventDefault();
159
160	const menu = new Menu();
161	menu.append(
162	new MenuItem({
163	label: '重命名',
164	click: () => {
165	setCreateGroupId(v.id);
166	setOpenCreateGroup(true);
167	setGroupName(v.name);
168	},
169	}),
170	);
171	menu.append(
172	new MenuItem({
173	label: '删除',
174	click: () => {
175	confirm({
176	title: '提示',
177	icon: <ExclamationCircleFilled />,
178	content: (
179	<>
180	请确认是否删除列表：
181	<span
182	style={{
183	color: 'var(--colorPrimary6)',
184	}}
185	>
186	{v.name}
187	</span>
188	，删除后该列表下的账号将被移动到
189	<span
190	style={{
191	color: 'var(--colorPrimary6)',
192	}}
193	>
194	默认列表
195	</span>
196	中
197	</>
198	),
199	async onOk() {
200	await icpDeleteAccountGroup(v.id);
201	await getAccountList();
202	},
203	});
204	},
205	}),
206	);
207	menu.popup();
208	}}
209	>
210	<div className="userManage-sidebar-left">
211	<div className="userManage-sidebar-sortHandle">
212	<UnorderedListOutlined />
213	</div>
214	<span className="userManage-sidebar-name">
215	{v.name}
216	</span>
217	</div>
218	<span className="userManage-sidebar-count">
219	{v.children.length}
220	</span>
221	</div>
222	);
223	})}
224	</ReactSortable>
225	</div>
226	</div>
227	<div className="userManage-sidebar-bottom">
228	<Button
229	type="primary"
230	icon={<PlusOutlined />}
231	onClick={() => {
232	setCreateGroupId(-1);
233	setOpenCreateGroup(true);
234	}}
235	>
236	新建列表
237	</Button>
238	</div>
239	</div>
240	</>
241	);
242	},
243	),
244	);
245	UserManageSidebar.displayName = 'UserManageSidebar';
246
247	export default UserManageSidebar;
248

248 lines Plain Text