From b791a5418af0edcda69618c5e40642ff14ab1cba Mon Sep 17 00:00:00 2001
From: goodm2ice <hamel2517@gmail.com>
Date: Fri, 25 Feb 2022 17:11:50 +0500
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=BE=20=D0=BF=D0=BE=D0=BB=D0=B5=20=D0=BF=D0=BE=D0=B8?=
 =?UTF-8?q?=D1=81=D0=BA=D0=B0=20=D0=BF=D0=BE=D0=BB=D1=8C=D0=B7=D0=BE=D0=B2?=
 =?UTF-8?q?=D0=B0=D1=82=D0=B5=D0=BB=D0=B5=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/AdminPanel/UserController/index.jsx | 66 +++++++++++++++++--
 1 file changed, 59 insertions(+), 7 deletions(-)

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) => (
         <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, 'Удаление пользователя')}