| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| |
|
| | import { useState, useEffect } from 'react'; |
| | import { useTranslation } from 'react-i18next'; |
| | import { API, showError, showSuccess } from '../../helpers'; |
| | import { ITEMS_PER_PAGE } from '../../constants'; |
| | import { useTableCompactMode } from '../common/useTableCompactMode'; |
| |
|
| | export const useUsersData = () => { |
| | const { t } = useTranslation(); |
| | const [compactMode, setCompactMode] = useTableCompactMode('users'); |
| |
|
| | |
| | const [users, setUsers] = useState([]); |
| | const [loading, setLoading] = useState(true); |
| | const [activePage, setActivePage] = useState(1); |
| | const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE); |
| | const [searching, setSearching] = useState(false); |
| | const [groupOptions, setGroupOptions] = useState([]); |
| | const [userCount, setUserCount] = useState(0); |
| |
|
| | |
| | const [showAddUser, setShowAddUser] = useState(false); |
| | const [showEditUser, setShowEditUser] = useState(false); |
| | const [editingUser, setEditingUser] = useState({ |
| | id: undefined, |
| | }); |
| |
|
| | |
| | const formInitValues = { |
| | searchKeyword: '', |
| | searchGroup: '', |
| | }; |
| |
|
| | |
| | const [formApi, setFormApi] = useState(null); |
| |
|
| | |
| | const getFormValues = () => { |
| | const formValues = formApi ? formApi.getValues() : {}; |
| | return { |
| | searchKeyword: formValues.searchKeyword || '', |
| | searchGroup: formValues.searchGroup || '', |
| | }; |
| | }; |
| |
|
| | |
| | const setUserFormat = (users) => { |
| | for (let i = 0; i < users.length; i++) { |
| | users[i].key = users[i].id; |
| | } |
| | setUsers(users); |
| | }; |
| |
|
| | |
| | const loadUsers = async (startIdx, pageSize) => { |
| | setLoading(true); |
| | const res = await API.get(`/api/user/?p=${startIdx}&page_size=${pageSize}`); |
| | const { success, message, data } = res.data; |
| | if (success) { |
| | const newPageData = data.items; |
| | setActivePage(data.page); |
| | setUserCount(data.total); |
| | setUserFormat(newPageData); |
| | } else { |
| | showError(message); |
| | } |
| | setLoading(false); |
| | }; |
| |
|
| | |
| | const searchUsers = async ( |
| | startIdx, |
| | pageSize, |
| | searchKeyword = null, |
| | searchGroup = null, |
| | ) => { |
| | |
| | if (searchKeyword === null || searchGroup === null) { |
| | const formValues = getFormValues(); |
| | searchKeyword = formValues.searchKeyword; |
| | searchGroup = formValues.searchGroup; |
| | } |
| |
|
| | if (searchKeyword === '' && searchGroup === '') { |
| | |
| | await loadUsers(startIdx, pageSize); |
| | return; |
| | } |
| | setSearching(true); |
| | const res = await API.get( |
| | `/api/user/search?keyword=${searchKeyword}&group=${searchGroup}&p=${startIdx}&page_size=${pageSize}`, |
| | ); |
| | const { success, message, data } = res.data; |
| | if (success) { |
| | const newPageData = data.items; |
| | setActivePage(data.page); |
| | setUserCount(data.total); |
| | setUserFormat(newPageData); |
| | } else { |
| | showError(message); |
| | } |
| | setSearching(false); |
| | }; |
| |
|
| | |
| | const manageUser = async (userId, action, record) => { |
| | |
| | setLoading(true); |
| |
|
| | const res = await API.post('/api/user/manage', { |
| | id: userId, |
| | action, |
| | }); |
| |
|
| | const { success, message } = res.data; |
| | if (success) { |
| | showSuccess('操作成功完成!'); |
| | const user = res.data.data; |
| |
|
| | |
| | const newUsers = users.map((u) => { |
| | if (u.id === userId) { |
| | if (action === 'delete') { |
| | return { ...u, DeletedAt: new Date() }; |
| | } |
| | return { ...u, status: user.status, role: user.role }; |
| | } |
| | return u; |
| | }); |
| |
|
| | setUsers(newUsers); |
| | } else { |
| | showError(message); |
| | } |
| |
|
| | setLoading(false); |
| | }; |
| |
|
| | const resetUserPasskey = async (user) => { |
| | if (!user) { |
| | return; |
| | } |
| | try { |
| | const res = await API.delete(`/api/user/${user.id}/reset_passkey`); |
| | const { success, message } = res.data; |
| | if (success) { |
| | showSuccess(t('Passkey 已重置')); |
| | } else { |
| | showError(message || t('操作失败,请重试')); |
| | } |
| | } catch (error) { |
| | showError(t('操作失败,请重试')); |
| | } |
| | }; |
| |
|
| | const resetUserTwoFA = async (user) => { |
| | if (!user) { |
| | return; |
| | } |
| | try { |
| | const res = await API.delete(`/api/user/${user.id}/2fa`); |
| | const { success, message } = res.data; |
| | if (success) { |
| | showSuccess(t('二步验证已重置')); |
| | } else { |
| | showError(message || t('操作失败,请重试')); |
| | } |
| | } catch (error) { |
| | showError(t('操作失败,请重试')); |
| | } |
| | }; |
| |
|
| | |
| | const handlePageChange = (page) => { |
| | setActivePage(page); |
| | const { searchKeyword, searchGroup } = getFormValues(); |
| | if (searchKeyword === '' && searchGroup === '') { |
| | loadUsers(page, pageSize).then(); |
| | } else { |
| | searchUsers(page, pageSize, searchKeyword, searchGroup).then(); |
| | } |
| | }; |
| |
|
| | |
| | const handlePageSizeChange = async (size) => { |
| | localStorage.setItem('page-size', size + ''); |
| | setPageSize(size); |
| | setActivePage(1); |
| | loadUsers(activePage, size) |
| | .then() |
| | .catch((reason) => { |
| | showError(reason); |
| | }); |
| | }; |
| |
|
| | |
| | const handleRow = (record, index) => { |
| | if (record.DeletedAt !== null || record.status !== 1) { |
| | return { |
| | style: { |
| | background: 'var(--semi-color-disabled-border)', |
| | }, |
| | }; |
| | } else { |
| | return {}; |
| | } |
| | }; |
| |
|
| | |
| | const refresh = async (page = activePage) => { |
| | const { searchKeyword, searchGroup } = getFormValues(); |
| | if (searchKeyword === '' && searchGroup === '') { |
| | await loadUsers(page, pageSize); |
| | } else { |
| | await searchUsers(page, pageSize, searchKeyword, searchGroup); |
| | } |
| | }; |
| |
|
| | |
| | const fetchGroups = async () => { |
| | try { |
| | let res = await API.get(`/api/group/`); |
| | if (res === undefined) { |
| | return; |
| | } |
| | setGroupOptions( |
| | res.data.data.map((group) => ({ |
| | label: group, |
| | value: group, |
| | })), |
| | ); |
| | } catch (error) { |
| | showError(error.message); |
| | } |
| | }; |
| |
|
| | |
| | const closeAddUser = () => { |
| | setShowAddUser(false); |
| | }; |
| |
|
| | const closeEditUser = () => { |
| | setShowEditUser(false); |
| | setEditingUser({ |
| | id: undefined, |
| | }); |
| | }; |
| |
|
| | |
| | useEffect(() => { |
| | loadUsers(0, pageSize) |
| | .then() |
| | .catch((reason) => { |
| | showError(reason); |
| | }); |
| | fetchGroups().then(); |
| | }, []); |
| |
|
| | return { |
| | |
| | users, |
| | loading, |
| | activePage, |
| | pageSize, |
| | userCount, |
| | searching, |
| | groupOptions, |
| |
|
| | |
| | showAddUser, |
| | showEditUser, |
| | editingUser, |
| | setShowAddUser, |
| | setShowEditUser, |
| | setEditingUser, |
| |
|
| | |
| | formInitValues, |
| | formApi, |
| | setFormApi, |
| |
|
| | |
| | compactMode, |
| | setCompactMode, |
| |
|
| | |
| | loadUsers, |
| | searchUsers, |
| | manageUser, |
| | resetUserPasskey, |
| | resetUserTwoFA, |
| | handlePageChange, |
| | handlePageSizeChange, |
| | handleRow, |
| | refresh, |
| | closeAddUser, |
| | closeEditUser, |
| | getFormValues, |
| |
|
| | |
| | t, |
| | }; |
| | }; |
| |
|