diff --git a/src/pages/AdminPanel/UserController/index.jsx b/src/pages/AdminPanel/UserController/index.jsx index dc5f87e..8fc4ccc 100644 --- a/src/pages/AdminPanel/UserController/index.jsx +++ b/src/pages/AdminPanel/UserController/index.jsx @@ -1,6 +1,7 @@ -import { Button, Tag } from 'antd' +import { Button, Input, Tag } from 'antd' import { UserSwitchOutlined } from '@ant-design/icons' -import { memo, useEffect, useState } from 'react' +import { memo, useCallback, useEffect, useState } from 'react' +import { BehaviorSubject, debounceTime, distinctUntilChanged, filter, map } from 'rxjs' import { EditableTable, @@ -23,23 +24,65 @@ import { arrayOrDefault } from '@utils' import RoleTag from './RoleTag' +const SEARCH_TIMEOUT = 400 export const UserController = memo(() => { const [users, setUsers] = useState([]) + const [filteredUsers, setFilteredUsers] = useState([]) + const [searchValue, setSearchValue] = useState('') const [showLoader, setShowLoader] = useState(false) + const [isSearching, setIsSearching] = useState(false) const [columns, setColumns] = useState([]) const [selectedUser, setSelectedUser] = useState(null) + const [subject, setSubject] = useState(null) - const additionalButtons = (record, editingKey) => ( + useEffect(() => invokeWebApiWrapperAsync( + async () => { + const filteredUsers = users.filter((user) => user && [ + user.login ?? '', + user.name ?? '', + user.surname ?? '', + user.partonymic ?? '', + user.email ?? '', + user.phone ?? '', + user.position ?? '', + user.company?.caption ?? '', + ].join(' ').toLowerCase().includes(searchValue)) + setFilteredUsers(filteredUsers) + }, + setIsSearching, + `Не удалось произвести поиск пользователей` + ), [users, searchValue]) + + useEffect(() => { + if (!subject) { + const sub = new BehaviorSubject('') + setSubject(sub) + } else { + const observable = subject.pipe( + debounceTime(SEARCH_TIMEOUT), + map(s => s.trim().toLowerCase() ?? ''), + distinctUntilChanged(), + filter(s => s.length <= 0 || s.length >= 2), + ).subscribe(value => setSearchValue(value)) + + return () => { + observable.unsubscribe() + subject.unsubscribe() + } + } + }, [subject]) + + const additionalButtons = useCallback((record, editingKey) => (