feat/ constructor empty party

hackathon-Gazprom · Aug 14, 2024 · e51ecf8 · e51ecf8
1 parent 02234fd
commit e51ecf8
Show file tree

Hide file tree

Showing 10 changed files with 158 additions and 131 deletions.
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -3,7 +3,7 @@ import Header from 'src/components/Header/Header';
 import SideBar from 'src/components/SideBar/SideBar';
 import { Outlet, useNavigate } from 'react-router-dom';
 import { useEffect, useState } from 'react';
-import { initialCards } from 'src/services/mock';
+// import { initialCards } from 'src/services/mock';
 import { useAppDispatch, useAppSelector } from 'src/store/hooks';
 import Registration from 'src/pages/Registration/Registration';
 import { allowDrop, handleDragStart, handleDrop } from 'src/services/dragAndDrop';
@@ -18,13 +18,12 @@ import {
   setLoggedIn,
 } from 'src/store/features/slice/userSlice';
 
-
 export default function App() {
   let { loggedIn } = useAppSelector(selectUsers);
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const [droppedCards, setDroppedCards] = useState<membersProps[]>([]);
-  const [cards, setCards] = useState<membersProps[]>(initialCards);
+  const [cards, setCards] = useState<membersProps[]>([]);
 
   function handleRegister({ email, password }: RegisterDataProps) {
     dispatch(registerUser({ email, password }))

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -2,9 +2,7 @@ import styles from 'src/components/Header/Header.module.scss';
 import Logo from 'src/assets/Logo.svg?react';
 import { Input } from 'antd';
 import { FilterOutlined } from '@ant-design/icons';
-import { 
-  // Link, 
-  useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import Filter from 'src/components/Filter/Filter';
 import cn from 'classnames/bind';
 import { useAppDispatch, useAppSelector } from 'src/store/hooks';
@@ -24,21 +22,21 @@ export default function Header({ droppedCards }: HeaderProps) {
   let { isFilterOpen } = useAppSelector(selectMembers);
   let { loggedIn } = useAppSelector(selectUsers);
   const dispatch = useAppDispatch();
-  const navigate = useNavigate();
 
   function handleFilterClick() {
     dispatch(setIsFilterOpen(!isFilterOpen));
-    navigate('/');
   }
-{/* <PlusOutlined /> */}
+  {
+    /* <PlusOutlined /> */
+  }
   return (
     <>
       <header
         className={cx(styles.header, { [styles.header_loggedIn]: !loggedIn })}
       >
-        {/* <Link to='/'> */}
+        <Link to='/'>
           <Logo />
-        {/* </Link> */}
+        </Link>
         {loggedIn && (
           <div className={styles.container}>
             <Input
@@ -56,9 +54,7 @@ export default function Header({ droppedCards }: HeaderProps) {
           </div>
         )}
       </header>
-      {isFilterOpen && (
-        <Filter droppedCards={droppedCards} />
-      )}
+      {isFilterOpen && <Filter droppedCards={droppedCards} />}
     </>
   );
 }
diff --git a/src/pages/Main/Main.tsx b/src/pages/Main/Main.tsx
@@ -7,13 +7,17 @@ import {
   renderCards,
   renderEmptyCells,
 } from 'src/services/helpers';
+import { selectMembers } from 'src/store/features/slice/membersSlice';
+import { useAppSelector } from 'src/store/hooks';
 
 export default function Main() {
   const { allowDrop, handleDrop, cards } = useOutletContext<{
     allowDrop: (e: React.DragEvent<HTMLImageElement>) => void;
     handleDrop: (e: React.DragEvent<HTMLDivElement>) => void;
     cards: membersProps[];
   }>();
+  let { isFilterOpen } = useAppSelector(selectMembers);
+
   const [allCards, setAllCards] = useState<membersProps[]>([]);
   const [arrows, setArrows] = useState<JSX.Element[]>([]);
   const [busyCells, setBusyCells] = useState<string[]>([]);
@@ -28,6 +32,7 @@ export default function Main() {
       );
     }
   };
+  console.log('cards: ', cards);
 
   useEffect(() => {
     const collectCards = (card: membersProps, collected: membersProps[]) => {
@@ -42,6 +47,7 @@ export default function Main() {
     const newBusyCells: string[] = [];
 
     cards.forEach((card) => {
+      console.log('cards: ', cards);
       collectCards(card, newAllCards);
       collectCellIds(card, newBusyCells);
     });
@@ -60,7 +66,7 @@ export default function Main() {
     <section className={styles.main} onDragOver={allowDrop} onDrop={handleDrop}>
       <div className={styles.cardContainer}>
         {allCards.map(renderCards)}
-        {renderEmptyCells(busyCells)}
+        {renderEmptyCells(busyCells, isFilterOpen)}
         {arrows}
       </div>
     </section>

diff --git a/src/pages/Teams/Teams.tsx b/src/pages/Teams/Teams.tsx
@@ -1,8 +1,9 @@
 import { useEffect, useLayoutEffect, useState } from 'react';
-import { useLocation, useParams } from 'react-router-dom';
+import { useLocation, useOutletContext, useParams } from 'react-router-dom';
 import styles from 'src/pages/Teams/Teams.module.scss';
 import { renderArrows, renderCards, renderEmptyCells } from 'src/services/helpers';
 import { membersProps } from 'src/services/types';
+import { selectMembers } from 'src/store/features/slice/membersSlice';
 import {
   fetchGetTeams,
   fetchGetTeamsId,
@@ -12,57 +13,64 @@ import { useAppDispatch, useAppSelector } from 'src/store/hooks';
 import TeamsItem from 'src/ui/TeamsItem/TeamsItem';
 
 export default function Teams() {
+  const { allowDrop, handleDrop } = useOutletContext<{
+    allowDrop: (e: React.DragEvent<HTMLImageElement>) => void;
+    handleDrop: (e: React.DragEvent<HTMLDivElement>) => void;
+    // cards: membersProps[];
+  }>();
   const { id } = useParams()
+  // const teamsRout = location.pathname.includes(`/teams/`)
 
   const dispatch = useAppDispatch();
   const { teams, team } = useAppSelector(selectTeams);
+  // console.log('team: ', team);
+  let { isFilterOpen } = useAppSelector(selectMembers);
+
 
+  const [allCards, setAllCards] = useState<membersProps[]>([]);
+  // console.log('allCards: ', allCards);
   const [arrows, setArrows] = useState<JSX.Element[]>([]);
   const [busyCells, setBusyCells] = useState<string[]>([]);
   const [teamsCards, setTeamsCards] = useState<membersProps[]>([]);
-  console.log('teamsCards: ', teamsCards);
 
 
-
-  // const teamsRout = location.pathname.includes(`/teams/`)
+  const collectCellIds = (card: membersProps, collected: string[]) => {
+    if (card.cellId) {
+      collected.push(card.cellId);
+    }
+    if (card.subordinates) {
+      card.subordinates.forEach((subordinate) =>
+        collectCellIds(subordinate, collected)
+      );
+    }
+  };
 
-  // const collectCellIds = (card: membersProps, collected: string[]) => {
-  //   if (card.cellId) {
-  //     collected.push(card.cellId);
-  //   }
-  //   if (card.subordinates) {
-  //     card.subordinates.forEach((subordinate) =>
-  //       collectCellIds(subordinate, collected)
-  //     );
-  //   }
-  // };
-
-  // useEffect(() => {
-  //   const collectCards = (card: membersProps, collected: membersProps[]) => {
-  //     collected.push(card);
-  //     if (card.subordinates) {
-  //       card.subordinates.forEach((subordinate) =>
-  //         collectCards(subordinate, collected)
-  //       );
-  //     }
-  //   };
-  //   const newAllCards: membersProps[] = [];
-  //   const newBusyCells: string[] = [];
-
-  //   cards.forEach((card) => {
-  //     collectCards(card, newAllCards);
-  //     collectCellIds(card, newBusyCells);
-  //   });
-
-  //   setAllCards(newAllCards);
-  //   setBusyCells(newBusyCells);
-  // }, [cards]);
-
-  // useLayoutEffect(() => {
-  //   if (team.employees?.subordinates.length > 0) {
-  //     renderArrows(team.employees?.subordinates, setArrows);
-  //   }
-  // }, [team.employees?.subordinates]);
+  useEffect(() => {
+    const collectCards = (card: membersProps, collected: membersProps[]) => {
+      collected.push(card);
+      if (card.subordinates) {
+        card.subordinates.forEach((subordinate) =>
+          collectCards(subordinate, collected)
+        );
+      }
+    };
+    const newAllCards: membersProps[] = [];
+    const newBusyCells: string[] = [];
+
+    teamsCards && teamsCards.forEach((card) => {
+      collectCards(card, newAllCards);
+      collectCellIds(card, newBusyCells);
+    });
+
+    setAllCards(newAllCards);
+    setBusyCells(newBusyCells);
+  }, [teamsCards]);
+
+  useLayoutEffect(() => {
+    if (allCards.length > 0) {
+      renderArrows(allCards, setArrows);
+    }
+  }, [allCards]);
 
 
   useEffect(() => {
@@ -80,14 +88,16 @@ export default function Teams() {
   useEffect(() => {
     setTeamsCards(team && team.employees?.subordinates)
   }, [team])
+
+  console.log('teamsCards: ', teamsCards);
 
   return (
-    <section className={styles.teams}>
+    <section className={styles.teams} onDragOver={allowDrop} onDrop={handleDrop}>
   {id ? (
         <div>
-         {/* {team.employees?.subordinates.map(renderCards)}
-        {renderEmptyCells(busyCells)}
-        {arrows} */}
+         {teamsCards && teamsCards.map(renderCards)}
+        {renderEmptyCells(busyCells, isFilterOpen)}
+        {arrows}
         </div>
       ) : (
         teams.map((item) => (

diff --git a/src/services/const.ts b/src/services/const.ts
@@ -1,24 +1,27 @@
+import { membersProps } from './types';
 
 export const cellWidth = 312;
 export const cellHeight = 149;
 export const numCols = 3;
 export const numRows = 10;
 export const itemsPerPage = 12;
 
-// export const inintialMember: membersProps = {
-//   id: '',
-//   index: 0,
-//   title: '',
-//   full_name: '',
-//   department: '',
-//   position: '',
-//   cellId: '',
-//   parentId: '',
-//   photo: '',
-//   subordinates: [],
-// }
+export const inintialMember: membersProps = {
+  id: '',
+  index: 0,
+  title: '',
+  full_name: '',
+  department: '',
+  position: '',
+  cellId: '',
+  parentId: '',
+  photo: '',
+  subordinates: [],
+}
 
 export const inintialTeam = {
   name: '',
   id: '',
-}
+}
+
+
diff --git a/src/services/dragAndDrop.ts b/src/services/dragAndDrop.ts
@@ -31,19 +31,21 @@ export const handleDrop = (
   members: membersProps[]
 ) => {
   e.preventDefault();
-  // Здесь мы получаем ID элемента, который перетаскивается.:
+  // Здесь мы получаем ID элемента, который перетаскивается.
   const itemId = e.dataTransfer.getData('id');
+  console.log('itemId: ', itemId);
 
-  // Эти строки позволяют получить размеры и положение области, куда была сброшена карточка.
+  // получаем размеры и положение области, куда была сброшена карточка.
   const dropTarget = e.currentTarget;
   const dropTargetRect = dropTarget.getBoundingClientRect();
 
-  //в какую ячейку сетки была сброшена карточка, основываясь на координатах курсора.
+  // в какую ячейку сетки была сброшена карточка, основываясь на координатах курсора.
   const columnIndex = Math.floor((e.clientX - dropTargetRect.left) / cellWidth);
   const rowIndex = Math.floor((e.clientY - dropTargetRect.top) / cellHeight);
 
   // ID ячейки формируется как строка, состоящая из индексов столбца и строки.
   const cellId = `${columnIndex}-${rowIndex}`;
+  console.log('cellId: ', cellId);
 
   // Если карточка сбрасывается в определённые ячейки, функция завершает выполнение.
   if (cellId === '0-0' || cellId === '2-0') {
@@ -54,11 +56,11 @@ export const handleDrop = (
   if (!droppedCards.some((card) => card.cellId === cellId)) {
     // Здесь вызывается функция для поиска родительской карточки по текущим координатам.
     const parentCard = findParentCard(cards, columnIndex, rowIndex);
-    if (parentCard) {
-      const originalCard = members.find((card) => String(card.id) === itemId);
+    const originalCard = members.find((card) => String(card.id) === itemId);
 
+    if (originalCard) {
       // Если родительская карточка найдена, создаётся новая подчинённая карточка с необходимыми свойствами.
-      if (originalCard) {
+      if (parentCard) {
         const newSubordinateCard: membersProps = {
           ...originalCard,
           id: itemId,
@@ -80,10 +82,26 @@ export const handleDrop = (
           { id: newSubordinateCard.id, cellId },
         ]);
       } else {
-        console.error`(Original card not found for itemId ${itemId})`;
+        // Если родительская карточка не найдена, создаём новую карточку с cellId '1-0'
+        const newSubordinateCard: membersProps = {
+          ...originalCard,
+          id: itemId,
+          subordinates: [],
+          cellId: '1-0', // Устанавливаем cellId как '1-0'
+          parentId: '', // Или другое значение, если нужно
+        };
+        // Добавляем новую карточку в массив
+        const updatedCards = [...cards, newSubordinateCard];
+
+        // Обновляем состояния карточек и сброшенных карточек
+        setCards(updatedCards);
+        setDroppedCards((prev) => [
+          ...prev,
+          { id: newSubordinateCard.id, cellId: '1-0' },
+        ]);
       }
     } else {
-      console.error`(Parent card not found for cellId ${cellId}.)`;
+      console.error(`(Original card not found for itemId ${itemId})`);
     }
   }
 };
@@ -110,9 +128,9 @@ const findParentCard = (
     if (card.cellId === parentCellId) {
       return card;
     }
-  // Функция проходит по массиву карточек и проверяет, есть ли карточка с соответствующим ID.
-  //  Если такая карточка найдена, она возвращается. Если нет,
-  //  функция рекурсивно ищет среди подчинённых карточек.
+    // Функция проходит по массиву карточек и проверяет, есть ли карточка с соответствующим ID.
+    //  Если такая карточка найдена, она возвращается. Если нет,
+    //  функция рекурсивно ищет среди подчинённых карточек.
     if (card.subordinates) {
       const found = findParentCard(card.subordinates, columnIndex, rowIndex);
       if (found) return found;
@@ -127,18 +145,17 @@ const addSubordinate = (
   parentId: string,
   subordinate: membersProps
 ): membersProps[] => {
-
   // Функция проходит по массиву карточек и ищет родительскую карточку по её ID.
   return cards.map((card) => {
-    // Если родительская карточка найдена, 
+    // Если родительская карточка найдена,
     // новая подчинённая карточка добавляется в её массив подчинённых.
     if (card.id === parentId) {
       return {
         ...card,
         subordinates: [...(card.subordinates || []), subordinate],
       };
     }
-    // Если у текущей карточки есть подчинённые, 
+    // Если у текущей карточки есть подчинённые,
     // функция рекурсивно вызывает себя для добавления подчинённой карточки к ним.
     if (card.subordinates) {
       return {