feat/ teams

README.md

@@ -31,6 +31,7 @@
 react-beautiful-dnd
 framer-motion
 classnames
+simplebar-react
 
 
 ## Установка и запуск

package.json

@@ -26,6 +26,7 @@
     "react-router-dom": "^6.25.1",
     "react-svg": "^16.1.34",
     "redux": "^5.0.1",
+    "simplebar-react": "^3.2.6",
     "vite-plugin-svgr": "^4.2.0"
   },
   "devDependencies": {

src/components/Filter/Filter.tsx

@@ -14,26 +14,25 @@ import {
   selectMembers,
 } from 'src/store/features/slice/membersSlice';
 import { useAppDispatch, useAppSelector } from 'src/store/hooks';
-import {
-  fetchGetFilters,
-  selectFilters,
-} from 'src/store/features/slice/filterSlice';
+// import {
+//   fetchGetFilters,
+//   selectFilters,
+// } from 'src/store/features/slice/filterSlice';
 
 interface FilterProps {
   droppedCards: membersProps[];
 }
 
 export default function Filter({ droppedCards }: FilterProps) {
   let { isFilterOpen } = useAppSelector(selectMembers);
-  const { filters } = useAppSelector(selectFilters);
-  console.log('fiters: ', filters);
+  // const { filters } = useAppSelector(selectFilters);
 
   const { members, currentPage } = useAppSelector(selectMembers);
   const dispatch = useAppDispatch();
 
-  useEffect(() => {
-    dispatch(fetchGetFilters());
-  }, [dispatch]);
+  // useEffect(() => {
+  //   dispatch(fetchGetFilters());
+  // }, [dispatch]);
 
   useEffect(() => {
     dispatch(fetchGetMembers(currentPage));

src/components/Header/Header.tsx

@@ -28,7 +28,7 @@ export default function Header({ droppedCards }: HeaderProps) {
     dispatch(setIsFilterOpen(!isFilterOpen));
     navigate('/');
   }
-
+{/* <PlusOutlined /> */}
   return (
     <>
       <header

src/pages/Employees/Employees.module.scss

@@ -3,11 +3,10 @@
   @include flex-column-container;
   margin: 56px 64px 0 0;
   max-width: 948px;
-}
-
-.employeesasdasdasd {
-  max-width: 948px;
-  margin: 56px auto 0;
+  &_short {
+    max-width: 948px;
+    margin: 56px auto 0;
+  }
 }
 
 .title {
@@ -65,4 +64,30 @@
 
 .marginLeft {
   margin-left: 0;
-}
+}
+
+.containerItem {
+  display: flex;
+  gap: 4px;
+  cursor: pointer;
+}
+
+.list {
+  @include mp-null-list;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  border: $border-white;
+  border-radius: $border-radius-s;
+  padding: 4px 16px;
+  max-height: 41px;
+}
+
+.item {
+  @include mp-null;
+  @include use-font(14px, 17px, 400);
+}
+
+.arrow {
+  color: $button-focus;
+}

src/pages/Employees/Employees.tsx

@@ -1,32 +1,56 @@
 import { useLocation } from 'react-router-dom';
 import styles from 'src/pages/Employees/Employees.module.scss';
 import Card from 'src/ui/Card/Card';
-import FilterList from 'src/ui/FilterList/FilterList';
+// import FilterList from 'src/ui/FilterList/FilterList';
 import { useAppDispatch, useAppSelector } from 'src/store/hooks';
 import { useEffect } from 'react';
 import { LeftOutlined, RightOutlined } from '@ant-design/icons';
 import {
   fetchGetMembers,
   fetchGetMembersAmount,
+  // fetchGetMembersValue,
   selectMembers,
   setCurrentPage,
 } from 'src/store/features/slice/membersSlice';
 import cn from 'classnames/bind';
 import { itemsPerPage } from 'src/services/const';
+import Select from 'src/ui/Select/Select';
+import { Input } from 'antd';
+// import {
+//   fetchGetFilters,
+//   selectFilters,
+// } from 'src/store/features/slice/filterSlice';
 
 export default function Employees() {
   let { shortWindow } = useAppSelector(selectMembers);
   const cx = cn.bind(styles);
+  // const { filters } = useAppSelector(selectFilters);
+  // console.log('fiters: ', filters);
 
   const location = useLocation();
   const dispatch = useAppDispatch();
   const { members, membersAmount, currentPage } = useAppSelector(selectMembers);
+  console.log('members: ', members);
   const employesRout = location.pathname === '/employees';
 
   const startIndex = (currentPage - 1) * itemsPerPage + 1;
   const endIndex = Math.min(startIndex + itemsPerPage - 1, membersAmount);
   const maxPages = Math.ceil(membersAmount / itemsPerPage);
 
+  // const [value, setValue] = useState('');
+  // const [valuePositions, setValuePosition] = useState('');
+  // const [valueDepartments, setDepartments] = useState('');
+
+
+  // const handleChange = (value) => {
+  //   setDepartments(value);
+  //   dispatch(fetchGetMembersValue(value)); 
+  // };
+
+  // useEffect(() => {
+  //   dispatch(fetchGetMembersValue(valuePositions));
+  // }, [dispatch]);
+
   function nextPage() {
     if (currentPage < maxPages) {
       dispatch(fetchGetMembers(currentPage + 1));
@@ -49,26 +73,54 @@ export default function Employees() {
     dispatch(fetchGetMembers(currentPage));
   }, [dispatch]);
 
+  // useEffect(() => {
+  //   dispatch(fetchGetFilters());
+  // }, [dispatch]);
+
   return (
-    <div   className={cx(styles.employees, {
-      [styles.employeesasdasdasd]: shortWindow,
-    })}>
+    <section
+      className={cx(styles.employees, {
+        [styles.employees_short]: shortWindow,
+      })}
+    >
       <p
         className={cx(styles.title, {
           [styles.marginLeft]: shortWindow,
         })}
       >
         Всего {membersAmount} сотрудников
       </p>
-      <div className={cx(styles.headerContainer, {
+      <div
+        className={cx(styles.headerContainer, {
           [styles.marginLeft]: shortWindow,
-        })}>
-        <FilterList
-          employesRout={employesRout}
-          teams='ФИО'
-          positions='Должность'
-          city='Отдел'
-        />
+        })}
+      >
+        <ul className={styles.list}>
+          <li className={styles.containerItem}>
+            <Input
+              placeholder='ФИО'
+              className={styles.input}
+              // value={value}
+              // setValue={setValue}
+            />
+          </li>
+          <li className={styles.containerItem}>
+            <Select
+              text='Должность'
+              // options={filters.positions}
+              // value={valuePositions}
+              // setValue={setValuePosition}
+            />
+          </li>
+          <li className={styles.containerItem}>
+            <Select
+              text='Отдел'
+              // options={filters.departments}
+              // value={valueDepartments}
+              // setValue={setDepartments}
+            />
+          </li>
+        </ul>
         <div className={styles.pagesContainer}>
           <p className={styles.pages}>
             {startIndex}-{endIndex} из {membersAmount}
@@ -108,6 +160,6 @@ export default function Employees() {
           />
         ))}
       </div>
-    </div>
+    </section>
   );
 }

src/pages/NotFound/NotFound.tsx

@@ -4,12 +4,12 @@ import styles from 'src/pages/NotFound/NotFound.module.scss';
 
 export default function NotFound() {
   return (
-    <div className={styles.notFound}>
+    <section className={styles.notFound}>
       <p className={styles.title}>404 Ошибка</p>
       <p className={styles.text}>Страница, которую вы ищете, не существует</p>
       <Link to='./' className={styles.link}>
         <Button className={styles.button}>На главную</Button>
       </Link>
-    </div>
+    </section>
   );
 }

src/pages/Profile/Profile.tsx

@@ -27,7 +27,7 @@ export default function Profile() {
   const cx = cn.bind(styles);
 
   return (
-    <div className={styles.profile}>
+    <section className={styles.profile}>
       <div className={styles.containerProfile}>
         <div className={styles.photoContainer}>
           <img
@@ -115,6 +115,6 @@ export default function Profile() {
           ))}
         </div>
       </div>
-    </div>
+    </section>
   );
 }

src/pages/Projects/Projects.tsx

@@ -15,14 +15,14 @@ export default function Projects() {
   }, []);
 
   return (
-    <div className={styles.projects}>
+    <section className={styles.projects}>
       {projects.map((item) => (
         <ProjectsItem
           key={item.id}
           name={item.name}
           teams={item.teams}
         />
       ))}
-    </div>
+    </section>
   );
 }

src/pages/Registration/Registration.tsx

@@ -20,7 +20,7 @@ export default function Registration({ handleRegister }: RegistrationProps) {
   };
 
   return (
-    <div className={styles.registration}>
+    <section className={styles.registration}>
       <h1 className={styles.title}>Авторизация</h1>
       <form className={styles.container} onSubmit={handleSubmit}>
         <Input
@@ -40,6 +40,6 @@ export default function Registration({ handleRegister }: RegistrationProps) {
           Войти
         </Button>
       </form>
-    </div>
+    </section>
   );
 }

src/pages/Teams/Teams.tsx

@@ -15,14 +15,14 @@ export default function Teams() {
   }, []);
 
   return (
-    <div className={styles.teams}>
+    <section className={styles.teams}>
       {teams.map((item) => (
         <TeamsItem
           key={item.id}
           name={item.name}
           projects={item.projects}
         />
       ))}
-    </div>
+    </section>
   );
 }