Добавлено поле поиска пользователей

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) => (
         <Button
             icon={<UserSwitchOutlined />}
             onClick={() => setSelectedUser(record)}
             title={'Сменить пароль'}
             disabled={editingKey !== ''}
         />
-    )
+    ), [])
 
-    const updateTable = () => invokeWebApiWrapperAsync(
+    const updateTable = useCallback(() => invokeWebApiWrapperAsync(
         async() => {
             const users = await AdminUserService.getAll()
             setUsers(arrayOrDefault(users))
@@ -47,7 +90,7 @@ export const UserController = memo(() => {
         setShowLoader,
         `Не удалось загрузить список пользователей`,
         'Получение списка пользователей'
-    )
+    ), [])
 
     useEffect(() => invokeWebApiWrapperAsync(
         async () => {
@@ -150,14 +193,23 @@ export const UserController = memo(() => {
         onComplete: updateTable,
     }
 
+    const onSearchTextChange = useCallback((e) => subject?.next(e?.target?.value), [subject])
+
     return (
         <>
             <LoaderPortal show={showLoader}>
+                <Input.Search
+                    allowClear
+                    placeholder={'Поиск пользователей'}
+                    onChange={onSearchTextChange}
+                    style={{ marginBottom: '15px' }}
+                    loading={isSearching}
+                />
                 <EditableTable
                     size={'small'}
                     bordered
                     columns={columns}
-                    dataSource={users}
+                    dataSource={filteredUsers}
                     onRowAdd={hasPermission('AdminUser.edit') && makeActionHandler('insert', handlerProps, null, 'Добавление пользователя')}
                     onRowEdit={hasPermission('AdminUser.edit') && makeActionHandler('update', handlerProps, null, 'Редактирование пользователя')}
                     onRowDelete={hasPermission('AdminUser.delete') && makeActionHandler('delete', handlerProps, null, 'Удаление пользователя')}