Dev

src/components/App/App.scss

@@ -2,12 +2,9 @@
   font-family: "Roboto", sans-serif;
   line-height: 1.5;
   font-weight: 400;
-
-  margin: 0 auto;
-
   color: #141414;
   background: #FFF;
-  
+
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -17,9 +14,7 @@
 body {
   margin: 0 auto;
   min-width: 320px;
-  max-width: 1440px;
-  min-height: 100vh;
-
+  max-width: 1440px; 
 }
 
 * {

src/components/App/App.tsx

@@ -73,7 +73,7 @@ export default function App() {
   }, [dispatch, mainRout, loggedIn]);
 
    return (
-    <div>
+    <>
       <Header droppedCards={droppedCards} />
       {loading && <Preloader />}
       {loggedIn ? (
@@ -100,6 +100,6 @@ export default function App() {
       ) : (
         <Registration handleRegister={handleRegister} />
       )}
-    </div>
+    </>
   );
 }

src/components/Filter/Filter.module.scss

@@ -4,7 +4,7 @@
   right: 10px;
   border-radius: 0 0 0 16px;
   width: 354px;
-  height: 100vh;
+  height: 99%;
   box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);
   background: #fff;
   padding: 56px 48px;
@@ -42,3 +42,7 @@
   @include mp-null;
   @include use-font;
 }
+
+.downContainer {
+  height: 100px;
+}

src/components/Filter/Filter.tsx

@@ -1,39 +1,101 @@
 import styles from 'src/components/Filter/Filter.module.scss';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import useOutsideClick from 'src/hooks/useOutsideClick';
 import { Input } from 'antd';
 import { CloseOutlined } from '@ant-design/icons';
 import Card from 'src/ui/Card/Card';
 import FilterList from 'src/ui/FilterList/FilterList';
-import { setIsFilterOpen } from 'src/store/features/slice/membersSlice';
+import {
+  setIsFilterOpen,
+  setSearch,
+} from 'src/store/features/slice/membersSlice';
 import { membersProps } from 'src/services/types';
 import { handleDragStart } from 'src/services/dragAndDrop';
 import {
   fetchGetMembers,
   selectMembers,
 } from 'src/store/features/slice/membersSlice';
 import { useAppDispatch, useAppSelector } from 'src/store/hooks';
+import { itemsPerPage } from 'src/services/const';
+import { selectFilter } from 'src/store/features/slice/filterSlice';
 
 interface FilterProps {
   droppedCards: membersProps[];
 }
 
 export default function Filter({ droppedCards }: FilterProps) {
-  const { isFilterOpen } = useAppSelector(selectMembers);
-  const { members, currentPage } = useAppSelector(selectMembers);
+  const { isFilterOpen, members, search, membersAmount } =
+    useAppSelector(selectMembers);
+  const modalRef = useRef<HTMLDivElement>(null);
   const dispatch = useAppDispatch();
+  const { department, position } = useAppSelector(selectFilter);
+  const [currentPageFilter, setCurrentPageFilter] = useState(1);
+
+  const currentPageRef = useRef(currentPageFilter);
+
+  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = event.target;
+    dispatch(setSearch(value));
+    setCurrentPageFilter(1);
+    currentPageRef.current = 1;
+    await dispatch(
+      fetchGetMembers({ page: 1, search: value, position, department })
+    );
+  };
+
+  const handleScroll = async () => {
+    if (!modalRef.current) return;
+    const { scrollTop, clientHeight, scrollHeight } = modalRef.current;
+    const maxPages = Math.ceil(membersAmount / itemsPerPage);
+    const nextPage = currentPageRef.current + 1;
 
+    if (scrollHeight - scrollTop - clientHeight <= 0 && nextPage <= maxPages) {
+      setCurrentPageFilter(nextPage);
+      currentPageRef.current = nextPage;
+      await dispatch(
+        fetchGetMembers({
+          page: nextPage,
+          search: search ? search : '',
+          position,
+          department,
+        })
+      );
+    }
+  };
+
+  // Отслеживание изменения membersAmount
   useEffect(() => {
-    dispatch(fetchGetMembers(currentPage));
-  }, [dispatch]);
+    if (membersAmount > 0) {
+      const modalElement = modalRef.current;
+      if (modalElement) {
+        modalElement.addEventListener('scroll', handleScroll);
+      }
 
-  const ref = useRef(null);
+      return () => {
+        if (modalElement) {
+          modalElement.removeEventListener('scroll', handleScroll);
+        }
+      };
+    }
+  }, [membersAmount]);
 
-  useOutsideClick(ref, () => {
-    dispatch(setIsFilterOpen(false));
-  });
+  useEffect(() => {
+    dispatch(
+      fetchGetMembers({
+        page: currentPageFilter,
+        search: search ? search : '',
+        position,
+        department,
+      })
+    );
+  }, [dispatch, currentPageFilter, search, position, department]);
+
+  useEffect(() => {
+    if (modalRef.current) {
+      modalRef.current.scrollTop = 0;
+    }
+  }, [members]);
 
-  const modalRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     if (modalRef.current) {
       const modal = modalRef.current;
@@ -58,34 +120,48 @@ export default function Filter({ droppedCards }: FilterProps) {
     }
   }, [isFilterOpen]);
 
+  useOutsideClick(modalRef, () => {
+    dispatch(setIsFilterOpen(false));
+  });
+
   return (
-    <div ref={ref} className={styles.filter}>
-      <div ref={modalRef}>
-        <Input className={styles.input} placeholder='Поиск' />
+    <div ref={modalRef} className={styles.filter}>
+      <div>
+        <Input
+          className={styles.input}
+          placeholder='Поиск'
+          onChange={handleChange}
+          value={search}
+        />
         <div className={styles.container}>
-          <CloseOutlined className={styles.img} />
+          <CloseOutlined
+            className={styles.img}
+            onClick={() => dispatch(setIsFilterOpen(false))}
+          />
           <p className={styles.text}>Фильтры</p>
         </div>
         <FilterList teams='Подразделение' positions='Должность' city='Город' />
         <div className={styles.containerResult}>
-          {members.map((card, index) => (
-            <Card
-              id={String(card.id)}
-              key={String(card.id)}
-              title={card.position}
-              full_name={card.full_name}
-              department={card.department}
-              index={index}
-              isFilterOpen={isFilterOpen}
-              onDragStart={(e) => handleDragStart(e, droppedCards)}
-              draggable={
-                !droppedCards.some(
-                  (droppedCard) => droppedCard.id === String(card.id)
-                )
-              }
-            />
-          ))}
+          {members &&
+            members.map((card, index) => (
+              <Card
+                id={String(card.id)}
+                key={String(card.id)}
+                title={card.position}
+                full_name={card.full_name}
+                department={card.department}
+                index={index}
+                isFilterOpen={isFilterOpen}
+                onDragStart={(e) => handleDragStart(e, droppedCards)}
+                draggable={
+                  !droppedCards.some(
+                    (droppedCard) => droppedCard.id === String(card.id)
+                  )
+                }
+              />
+            ))}
         </div>
+        <div className={styles.downContainer}></div>
       </div>
     </div>
   );

src/components/Header/Header.tsx

@@ -2,30 +2,59 @@ import styles from 'src/components/Header/Header.module.scss';
 import Logo from 'src/assets/icon/Logo.svg?react';
 import { Input } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import Filter from 'src/components/Filter/Filter';
 import cn from 'classnames/bind';
 import { useAppDispatch, useAppSelector } from 'src/store/hooks';
 import {
+  fetchGetMembers,
   selectMembers,
+  setCurrentPage,
   setIsFilterOpen,
+  setSearch,
 } from 'src/store/features/slice/membersSlice';
 import { membersProps } from 'src/services/types';
-import { selectUsers } from 'src/store/features/slice/userSlice';
+import {
+  selectUsers,
+  setIsProfileOpen,
+} from 'src/store/features/slice/userSlice';
+import { useEffect } from 'react';
 const cx = cn.bind(styles);
 
 interface HeaderProps {
   droppedCards: membersProps[];
 }
 
 export default function Header({ droppedCards }: HeaderProps) {
-  const { isFilterOpen } = useAppSelector(selectMembers);
+  const { isFilterOpen, search, currentPage } = useAppSelector(selectMembers);
   const { loggedIn } = useAppSelector(selectUsers);
   const dispatch = useAppDispatch();
+  const navigate = useNavigate();
 
   function handleFilterClick() {
     dispatch(setIsFilterOpen(!isFilterOpen));
+    dispatch(setIsProfileOpen(false));
   }
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = event.target;
+    dispatch(setCurrentPage(1));
+    dispatch(setSearch(value));
+    dispatch(
+      fetchGetMembers({
+        page: currentPage,
+        search: value,
+        position: '',
+        department: '',
+      })
+    );
+    navigate('/employees');
+  };
+
+  useEffect(() => {
+    dispatch(setSearch(''));
+  }, [location.pathname]);
+
   return (
     <>
       <header
@@ -38,6 +67,8 @@ export default function Header({ droppedCards }: HeaderProps) {
           <div className={styles.container}>
             <Input
               placeholder='Поиск'
+              onChange={handleChange}
+              value={search}
               className={cx(styles.input, {
                 [styles.input_disabled]: isFilterOpen,
               })}

src/components/PopupProfile/PopupProfile.module.scss

@@ -4,9 +4,9 @@
   right: 10px;
   border-radius: 0 0 0 16px;
   width: 354px;
-  height: 100vh;
+  height: 100%;
   box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);
-  background: #fff;
+  background: $white;
   padding: 56px 64px 0 48px;
   z-index: 3;
   overflow-y: auto;
@@ -16,7 +16,7 @@
   display: flex;
   gap: 16px;
   padding: 0 0 16px;
-  border-bottom: 1px solid #d9d9d9;
+  border-bottom: $border-white;
 }
 
 .img {
@@ -29,7 +29,6 @@
   @include use-font;
 }
 
-
 .containerProfile {
   @include flex-column-center;
   border-radius: 8px;

src/components/SideBar/SideBar.tsx

@@ -4,7 +4,6 @@ import cn from 'classnames/bind';
 import { motion } from 'framer-motion';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import {
-  CheckOutlined,
   ClusterOutlined,
   DatabaseOutlined,
   DownOutlined,
@@ -175,32 +174,18 @@ export default function SideBar() {
         </Button>
       </div>
 
-      {!shortWindow ? (
-        <Button
-          className={cx(styles.button, {
-            [styles.button_none]: !teamsRout,
-          })}
-          onClick={openFilter}
-        >
+      {!shortWindow && (teamsRout || newTeamRout) ? (
+        <Button className={styles.button} onClick={openFilter}>
           Создать
         </Button>
       ) : (
         <>
-          {teamsRout && (
+          {shortWindow && (teamsRout || newTeamRout) && (
             <PlusOutlined
               onClick={openFilter}
               className={cx(styles.button, {
-                [styles.button_mini]: shortWindow,
-                [styles.button_none]: !teamsRout,
-              })}
-            />
-          )}
-          {newTeamRout && (
-            <CheckOutlined
-              onClick={openFilter}
-              className={cx(styles.button, {
-                [styles.button_mini]: shortWindow,
-                [styles.button_none]: !teamsRout,
+                [styles.button_mini]:
+                  (shortWindow && teamsRout) || (shortWindow && newTeamRout),
               })}
             />
           )}