feat/ start delete trees

hackathon-Gazprom · Aug 15, 2024 · f686d19 · f686d19
1 parent 7271637
commit f686d19
Show file tree

Hide file tree

Showing 8 changed files with 127 additions and 69 deletions.
diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx
@@ -28,7 +28,6 @@ export default function Filter({ droppedCards }: FilterProps) {
   // const { filters } = useAppSelector(selectFilters);
 
   const { members, currentPage } = useAppSelector(selectMembers);
-  console.log('members: ', members);
   const dispatch = useAppDispatch();
 
   // useEffect(() => {

diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react';
 import styles from 'src/components/SideBar/SideBar.module.scss';
 import cn from 'classnames/bind';
 import { motion } from 'framer-motion';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
 import {
   ClusterOutlined,
   DatabaseOutlined,
@@ -20,6 +20,7 @@ import {
 import { useAppDispatch, useAppSelector } from 'src/store/hooks';
 import {
   selectMembers,
+  setIsFilterOpen,
   setShortWindow,
 } from 'src/store/features/slice/membersSlice';
 
@@ -30,6 +31,12 @@ export default function SideBar() {
   const dispatch = useAppDispatch();
   const [showMore, setShorMore] = useState(true);
   const location = useLocation();
+  const navigate = useNavigate()
+
+  function openFilter() {
+    navigate('/new-team')
+    dispatch(setIsFilterOpen(true))
+  }
 
   return (
     <div
@@ -166,17 +173,13 @@ export default function SideBar() {
       </div>
 
       {!shortWindow ? (
-        <Link to='/new-team' className={styles.link}>
-          <Button className={styles.button}>Создать</Button>
-        </Link>
+          <Button className={styles.button} onClick={openFilter}>Создать</Button>
       ) : (
-        <Link to='/new-team' className={styles.link}>
-          <PlusOutlined
+          <PlusOutlined onClick={openFilter}
             className={cx(styles.button, {
               [styles.button_short]: shortWindow,
             })}
           />
-        </Link>
       )}
     </div>
   );

diff --git a/src/pages/NewTeam/NewTeam.tsx b/src/pages/NewTeam/NewTeam.tsx
@@ -46,7 +46,6 @@ export default function NewTeam() {
     const newBusyCells: string[] = [];
 
     cards.forEach((card) => {
-      console.log('cards: ', cards);
       collectCards(card, newAllCards);
       collectCellIds(card, newBusyCells);
     });
@@ -69,10 +68,10 @@ export default function NewTeam() {
       onDrop={handleDrop}
     >
       {allCards.length === 0 ? (
-        <div className={styles.title}>Перенесите мембера сюда</div>
+        <div className={styles.title}>Добавьте члена команды сюда</div>
       ) : (
         <div className={styles.cardContainer}>
-          {allCards.map(renderCards)}
+          {allCards.map(renderCards, setAllCards)}
           {renderEmptyCells(busyCells, isFilterOpen)}
           {arrows}
         </div>

diff --git a/src/services/dragAndDrop.ts b/src/services/dragAndDrop.ts
@@ -30,7 +30,6 @@ export const handleDrop = (
   setDroppedCards: React.Dispatch<React.SetStateAction<membersProps[]>>,
   members: membersProps[]
 ) => {
-
   e.preventDefault();
   const itemId = e.dataTransfer.getData('id');
   console.log('itemId: ', itemId);
@@ -76,14 +75,11 @@ export const handleDrop = (
         ]);
       } else {
         // Если родительская карточка не найдена, создаём новую карточку с cellId '1-0' только для первой карточки
-        const fallbackParentCard = cards.find(card => card.cellId === '1-0')
-
         const newSubordinateCard: membersProps = {
           ...originalCard,
           id: itemId,
           subordinates: [],
-          cellId: cards.length === 0 ? '1-0' : cellId,
-          parentId: fallbackParentCard ? fallbackParentCard.id : '',
+          cellId: cards.length === 0 ? '1-0' : '',
         };
 
         const updatedCards = [...cards, newSubordinateCard];
@@ -111,7 +107,6 @@ const findParentCard = (
 
   // В зависимости от индексов строки и столбца определяется ID родительской ячейки.
   if (
-    (rowIndex === 0 && (columnIndex === 0 || columnIndex === 2)) ||
     (rowIndex === 1 && (columnIndex === 0 || columnIndex === 2))
   ) {
     parentCellId = '1-0';

diff --git a/src/services/helpers.tsx b/src/services/helpers.tsx
@@ -9,7 +9,23 @@ export const renderCards = (card: membersProps) => {
   if (!card.cellId || !card.subordinates) {
     return null;
   }
-
+  const handleButtonClick = (cardId: string) => {
+    setAllCards((prevCards) => {
+      return prevCards.map((card) => {
+        if (card.id === cardId) {
+          // Если subordinates пустой, восстанавливаем его
+          if (card.subordinates.length === 0) {
+            // Предположим, что у вас есть способ сохранить оригинальные subordinates
+            return { ...card, subordinates: originalSubordinates[cardId] || [] };
+          } else {
+            // Если subordinates не пустой, очищаем его
+            return { ...card, subordinates: [] };
+          }
+        }
+        return card;
+      });
+    });
+  };
   const [col, row] = card.cellId.split('-').map(Number);
   return (
     <div
@@ -23,6 +39,7 @@ export const renderCards = (card: membersProps) => {
         full_name={card.full_name}
         department={card.department}
         count={card.subordinates.length}
+        handleButtonClick={handleButtonClick}
       />
     </div>
   );

diff --git a/src/store/features/slice/membersSlice.ts b/src/store/features/slice/membersSlice.ts
@@ -12,6 +12,7 @@ export interface StateType {
   membersAmount: number;
   shortWindow: boolean;
   membersValue: string;
+  showMembers: boolean;
 }
 
 const initialState: StateType = {
@@ -23,6 +24,7 @@ const initialState: StateType = {
   membersAmount: 0,
   shortWindow: false,
   membersValue: '',
+  showMembers: false,
 };
 
 export const fetchGetMembersAmount = createAsyncThunk(
@@ -62,36 +64,44 @@ const membersSlice = createSlice({
     setShortWindow(state, action) {
       state.shortWindow = action.payload;
     },
+    setShowMembers(state, action) {
+      state.showMembers = action.payload;
+    },
   },
   extraReducers: (builder) => {
     builder
-    .addCase(fetchGetMembersAmount.pending, (state) => {
-      state.isLoading = true;
-    })
-    .addCase(fetchGetMembersAmount.fulfilled, (state, action) => {
-      state.membersAmount = action.payload.count;
-      state.isLoading = false;
-      state.error = null;
-    })
-    .addCase(fetchGetMembersAmount.rejected, (state, action) => {
-      state.isLoading = false;
-      state.error = action.error.message;
-    })
-    .addCase(fetchGetMembers.pending, (state) => {
-      state.isLoading = true;
-    })
-    .addCase(fetchGetMembers.fulfilled, (state, action) => {
-      state.members = action.payload.results;
-      state.isLoading = false;
-      state.error = null;
-    })
-    .addCase(fetchGetMembers.rejected, (state, action) => {
-      state.isLoading = false;
-      state.error = action.error.message;
-    });
+      .addCase(fetchGetMembersAmount.pending, (state) => {
+        state.isLoading = true;
+      })
+      .addCase(fetchGetMembersAmount.fulfilled, (state, action) => {
+        state.membersAmount = action.payload.count;
+        state.isLoading = false;
+        state.error = null;
+      })
+      .addCase(fetchGetMembersAmount.rejected, (state, action) => {
+        state.isLoading = false;
+        state.error = action.error.message;
+      })
+      .addCase(fetchGetMembers.pending, (state) => {
+        state.isLoading = true;
+      })
+      .addCase(fetchGetMembers.fulfilled, (state, action) => {
+        state.members = action.payload.results;
+        state.isLoading = false;
+        state.error = null;
+      })
+      .addCase(fetchGetMembers.rejected, (state, action) => {
+        state.isLoading = false;
+        state.error = action.error.message;
+      });
   },
 });
 
-export const { setIsFilterOpen, setCurrentPage, setShortWindow } = membersSlice.actions;
+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.module.scss b/src/ui/Card/Card.module.scss
@@ -10,6 +10,11 @@
   margin: 0;
   cursor: pointer;
   box-shadow: $items-shadow;
+  &_mini {
+    height: 100%;
+    width: 100%;
+    cursor: move;
+  }
 }
 
 .titleContainer {
@@ -26,6 +31,7 @@
   display: flex;
   justify-content: end;
   gap: 8px;
+  margin: auto 0 0;
 }
 
 .mainContainer {
@@ -34,16 +40,21 @@
   max-width: 188px;
 }
 
-.edit {
-  cursor: pointer;
+.buttonsContainer {
   color: $button-focus;
+  display: flex;
+  gap: 8px;
   &disabled {
     display: none !important;
     color: red;
     width: 100px;
   }
 }
 
+.button {
+  cursor: pointer;
+}
+
 .title {
   @include mp-null;
   @include use-font;
@@ -60,7 +71,7 @@
   @include mp-null;
   @include use-font(14px, 17px, 500);
   @include cut-word;
-  white-space: nowrap;
+  white-space: wrap;
 }
 
 .position {
@@ -78,6 +89,7 @@
   @include use-font(14px, 17px, 500);
   @include cut-word;
   color: $main-text-grey;
+  white-space: wrap;
 }
 
 .countImg {
@@ -86,12 +98,6 @@
   display: flex;
 }
 
-.mini {
-  height: 82px;
-  width: 100%;
-  cursor: move;
-}
-
 .miniContainer {
   gap: 4px;
 }