feat/ finish add team

hackathon-Gazprom · Aug 15, 2024 · 5c4c83b · 5c4c83b
1 parent bdc7452
commit 5c4c83b
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 35 deletions.
diff --git a/src/pages/NewTeam/NewTeam.tsx b/src/pages/NewTeam/NewTeam.tsx
@@ -51,6 +51,7 @@ export default function NewTeam() {
     });
 
     setAllCards(newAllCards);
+    setOriginalCards(newAllCards);
     setBusyCells(newBusyCells);
   }, [cards]);
 
@@ -60,7 +61,10 @@ export default function NewTeam() {
     }
   }, [allCards]);
   console.log('allCards: ', allCards);
-
+
+  const [originalCards, setOriginalCards] = useState<membersProps[]>([]);
+  console.log('originalCards: ', originalCards);
+
   return (
     <section
       className={styles.newTeam}
@@ -71,7 +75,10 @@ export default function NewTeam() {
         <div className={styles.title}>Добавьте члена команды сюда</div>
       ) : (
         <div className={styles.cardContainer}>
-          {allCards.map((card) => renderCards(card, setAllCards))}{' '}
+          {allCards.map((card) =>
+            renderCards(card, setAllCards, originalCards, setOriginalCards
+            )
+          )}
           {renderEmptyCells(busyCells, isFilterOpen)}
           {arrows}
         </div>

diff --git a/src/services/helpers.tsx b/src/services/helpers.tsx
@@ -7,12 +7,18 @@ import Card from 'src/ui/Card/Card';
 // Рендер карточек в дереве
 export const renderCards = (
   card: membersProps,
-  setAllCards: React.Dispatch<React.SetStateAction<membersProps[]>>
+  setAllCards: React.Dispatch<React.SetStateAction<membersProps[]>>,
+  originalCards: membersProps[],
+  setOriginalCards: React.Dispatch<React.SetStateAction<membersProps[]>>,
 ) => {
+
   if (!card.cellId || !card.subordinates) {
     return null;
   }
-  const handleButtonClick = () => {
+  const hideMembers = () => {
+    console.log('Прячем')
+
+    setOriginalCards(allCards => [...allCards]);
     if (!card.cellId) {
       return card;
     }
@@ -46,6 +52,12 @@ export const renderCards = (
     }
   };
 
+  const restoreMembers = () => {
+    // Восстанавливаем оригинальные карточки
+    console.log('Восстанавливаем')
+    setAllCards(originalCards);
+  };
+
   const [col, row] = card.cellId.split('-').map(Number);
   return (
     <div
@@ -59,7 +71,8 @@ export const renderCards = (
         full_name={card.full_name}
         department={card.department}
         count={card.subordinates.length}
-        handleButtonClick={handleButtonClick}
+        hideMembers={hideMembers}
+        restoreMembers={restoreMembers}
       />
     </div>
   );

diff --git a/src/services/types.ts b/src/services/types.ts
@@ -34,7 +34,8 @@ export interface membersProps {
   photo?: string;
   count?: number;
   subordinates?: membersProps[];
-  handleButtonClick?: () => void;
+  hideMembers?: () => void;
+  restoreMembers?: () => void;
   onDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;
   draggable?: boolean;
   isFilterOpen?: boolean;

diff --git a/src/store/features/slice/membersSlice.ts b/src/store/features/slice/membersSlice.ts
@@ -12,7 +12,6 @@ export interface StateType {
   membersAmount: number;
   shortWindow: boolean;
   membersValue: string;
-  showMembers: boolean;
 }
 
 const initialState: StateType = {
@@ -24,7 +23,6 @@ const initialState: StateType = {
   membersAmount: 0,
   shortWindow: false,
   membersValue: '',
-  showMembers: false,
 };
 
 export const fetchGetMembersAmount = createAsyncThunk(
@@ -64,9 +62,6 @@ const membersSlice = createSlice({
     setShortWindow(state, action) {
       state.shortWindow = action.payload;
     },
-    setShowMembers(state, action) {
-      state.showMembers = action.payload;
-    },
   },
   extraReducers: (builder) => {
     builder
@@ -101,7 +96,6 @@ export const {
   setIsFilterOpen,
   setCurrentPage,
   setShortWindow,
-  setShowMembers,
 } = membersSlice.actions;
 export const membersReducer = membersSlice.reducer;
 export const selectMembers = (state: RootStore) => state.members;
diff --git a/src/ui/Card/Card.tsx b/src/ui/Card/Card.tsx
@@ -1,19 +1,14 @@
-import {
-  CloseOutlined,
-  DownOutlined,
-  EditOutlined,
-  UpOutlined,
-} from '@ant-design/icons';
 import styles from 'src/ui/Card/Card.module.scss';
 import Avatar from 'src/assets/images/Avatar.png';
 import { useState } from 'react';
 import cn from 'classnames/bind';
 import { membersProps } from 'src/services/types';
 import {
-  selectMembers,
-  setShowMembers,
-} from 'src/store/features/slice/membersSlice';
-import { useAppDispatch, useAppSelector } from 'src/store/hooks';
+  CloseOutlined,
+  DownOutlined,
+  EditOutlined,
+  UpOutlined,
+} from '@ant-design/icons';
 
 const cx = cn.bind(styles);
 
@@ -26,12 +21,12 @@ export default function Card({
   title,
   count,
   id,
-  handleButtonClick,
+  hideMembers,
+  restoreMembers,
   onDragStart,
 }: membersProps) {
-  const [isOpen, setIsopen] = useState(true);
-  // let { showMembers } = useAppSelector(selectMembers);
-  // const dispatch = useAppDispatch();
+  const [showMembers, setShowMembers] = useState(true);
+  console.log('showMembers: ', showMembers);
 
   return (
     <div
@@ -86,18 +81,15 @@ export default function Card({
               className={cx(styles.countImg, {
                 [styles.disabled]: employesRout,
               })}
-              onClick={() => setIsopen(!isOpen)}
+              onClick={() => setShowMembers(!showMembers)}
             >
-              {isOpen ? (
-                <UpOutlined
-                onClick={handleButtonClick}
-                  // onClick={() => dispatch(setShowMembers(!showMembers))}
+              {showMembers ? (
+                <DownOutlined
+                onClick={hideMembers}
                 />
               ) : (
-                <DownOutlined
-                onClick={handleButtonClick}
-
-                  // onClick={() => dispatch(setShowMembers(!showMembers))}
+                <UpOutlined
+                onClick={restoreMembers}
                 />
               )}
             </div>