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