fix/add finish2

hackathon-Gazprom · Aug 23, 2024 · 0c8df49 · 0c8df49
1 parent 9ae82ee
commit 0c8df49
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 58 deletions.
diff --git a/src/components/Filter/Filter.module.scss b/src/components/Filter/Filter.module.scss
@@ -45,4 +45,10 @@
 
 .downContainer {
   height: 100px;
+}
+
+.noFound {
+  @include mp-null;
+  @include use-font;
+  margin: 200px auto;
 }
diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx
@@ -142,27 +142,33 @@ export default function Filter({ droppedCards }: FilterProps) {
           />
           <p className={styles.text}>Фильтры</p>
         </div>
-        <FilterList />
-        <div className={styles.containerResult}>
-          {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>
+        <FilterList setCurrentPageFilter={setCurrentPageFilter} />
+        {members.length ? (
+          <div className={styles.containerResult}>
+            {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>
+        ) : (
+          <p className={styles.noFound}>
+            По вашему запросу ничего не найдено, попробуйте изменить фильтры
+          </p>
+        )}
         <div className={styles.downContainer}></div>
       </div>
     </div>

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -36,11 +36,11 @@ export default function Header({ droppedCards }: HeaderProps) {
     dispatch(setIsProfileOpen(false));
   }
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { value } = event.target;
+  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
     dispatch(setCurrentPage(1));
+    const { value } = event.target;
     dispatch(setSearch(value));
-    dispatch(
+    await dispatch(
       fetchGetMembers({
         page: currentPage,
         search: value,

diff --git a/src/components/SideBar/SideBar.module.scss b/src/components/SideBar/SideBar.module.scss
@@ -49,6 +49,7 @@
 .text {
   @include mp-null;
   @include use-font;
+  @include user-highlighting;
   word-break: normal;
   overflow: hidden;
   display: flex;

diff --git a/src/pages/Employees/Employees.module.scss b/src/pages/Employees/Employees.module.scss
@@ -87,3 +87,9 @@
 .arrow {
   color: $button-focus;
 }
+
+.noFound {
+  @include mp-null;
+  @include use-font(24px, 28.8px, 500);
+  margin: 200px auto;
+}
diff --git a/src/pages/Employees/Employees.tsx b/src/pages/Employees/Employees.tsx
@@ -31,7 +31,13 @@ export default function Employees() {
   function nextPage() {
     if (currentPage < maxPages) {
       dispatch(
-        fetchGetMembers({ page: currentPage + 1, search, position, department, city })
+        fetchGetMembers({
+          page: currentPage + 1,
+          search,
+          position,
+          department,
+          city,
+        })
       );
       dispatch(setCurrentPage(currentPage + 1));
     }
@@ -40,7 +46,13 @@ export default function Employees() {
   function previousPage() {
     if (currentPage > 1) {
       dispatch(
-        fetchGetMembers({ page: currentPage - 1, search, position, department, city })
+        fetchGetMembers({
+          page: currentPage - 1,
+          search,
+          position,
+          department,
+          city,
+        })
       );
       dispatch(setCurrentPage(currentPage - 1));
     }
@@ -93,22 +105,28 @@ export default function Employees() {
           </div>
         </div>
       </div>
-      <div
-        className={cx(styles.cardContainer, {
-          [styles.cardContainer_center]: shortWindow,
-        })}
-      >
-        {members.map((card, index) => (
-          <Card
-            id={card.id}
-            key={card.id}
-            title={card.position}
-            full_name={card.full_name}
-            department={card.department}
-            index={index}
-          />
-        ))}
-      </div>
+      {members.length ? (
+        <div
+          className={cx(styles.cardContainer, {
+            [styles.cardContainer_center]: shortWindow,
+          })}
+        >
+          {members.map((card, index) => (
+            <Card
+              id={card.id}
+              key={card.id}
+              title={card.position}
+              full_name={card.full_name}
+              department={card.department}
+              index={index}
+            />
+          ))}
+        </div>
+      ) : (
+        <p className={styles.noFound}>
+          По вашему запросу ничего не найдено, попробуйте изменить фильтры
+        </p>
+      )}
       {isProfileOpen && <PopupProfile />}
     </section>
   );

diff --git a/src/ui/EmployeesList/EmployeesList.tsx b/src/ui/EmployeesList/EmployeesList.tsx
@@ -27,26 +27,35 @@ export default function EmployeesList() {
     dispatch(setSearch(value));
     dispatch(setCurrentPage(1));
     await dispatch(
-      fetchGetMembers({ page: 1, search: value, position, department, city: '' })
+      fetchGetMembers({
+        page: 1,
+        search: value,
+        position,
+        department,
+        city: '',
+      })
     );
   };
 
-  const handleSelectChange = (value: string, type: 'position' | 'department') => {
+  const handleSelectChange = (
+    value: string,
+    type: 'position' | 'department'
+  ) => {
     if (type === 'position') {
-        dispatch(setPosition(value));
+      dispatch(setPosition(value));
     } else {
-        dispatch(setDepartment(value));
+      dispatch(setDepartment(value));
     }
     dispatch(setCurrentPage(1));
-};
-
-useEffect(() => {
-  return () => {
-    dispatch(setPosition(''));
-    dispatch(setDepartment(''));
-    dispatch(setCurrentPage(1));
   };
-}, [location.pathname, dispatch]);
+
+  useEffect(() => {
+    return () => {
+      dispatch(setPosition(''));
+      dispatch(setDepartment(''));
+      dispatch(setCurrentPage(1));
+    };
+  }, [location.pathname, dispatch]);
 
   useEffect(() => {
     dispatch(fetchSelects());

diff --git a/src/ui/FilterList/FilterList.tsx b/src/ui/FilterList/FilterList.tsx
@@ -1,6 +1,5 @@
 import styles from 'src/ui/FilterList/FilterList.module.scss';
 import { useAppDispatch, useAppSelector } from 'src/store/hooks';
-import { setCurrentPage } from 'src/store/features/slice/membersSlice';
 import {
   fetchSelects,
   selectFilter,
@@ -11,7 +10,11 @@ import {
 import { useEffect } from 'react';
 import Select from 'src/ui/Select/Select';
 
-export default function FilterList() {
+interface currentPageFilterProps {
+  setCurrentPageFilter: (type: number) => void;
+}
+
+export default function FilterList({ setCurrentPageFilter}: currentPageFilterProps) {
   const { selects, department, position, city } = useAppSelector(selectFilter);
 
   const dispatch = useAppDispatch();
@@ -27,15 +30,16 @@ export default function FilterList() {
     } else if (type === 'city') {
       dispatch(setCity(value));
     }
-    dispatch(setCurrentPage(1));
+    setCurrentPageFilter(1);
   };
 
   useEffect(() => {
     return () => {
       dispatch(setPosition(''));
       dispatch(setDepartment(''));
       dispatch(setCity(''));
-      dispatch(setCurrentPage(1));
+
+    setCurrentPageFilter(1);
     };
   }, [location.pathname, dispatch]);