fix/drop

hackathon-Gazprom · Aug 12, 2024 · 65be2d3 · 65be2d3
1 parent b47bc7d
commit 65be2d3
Show file tree

Hide file tree

Showing 7 changed files with 134 additions and 114 deletions.
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -4,27 +4,28 @@ 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 { useAppDispatch, useAppSelector } from 'src/store/hooks';
+import Registration from 'src/pages/Registration/Registration';
 import {
   DroppedCard,
-  initialCardsProps,
+  // initialCardsProps,
+  membersProps,
   RegisterDataProps,
 } from 'src/services/types';
-import { useAppDispatch, useAppSelector } from 'src/store/hooks';
-import Registration from 'src/pages/Registration/Registration';
 import {
   registerUser,
   selectUsers,
   setLoggedIn,
 } from 'src/store/features/slice/userSlice';
 import { allowDrop, handleDragStart, handleDrop } from 'src/services/dragAndDrop';
-// import * as Api from 'src/services/utils'
+import { selectMembers } from 'src/store/features/slice/membersSlice';
 
 export default function App() {
   let { loggedIn } = useAppSelector(selectUsers);
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const [droppedCards, setDroppedCards] = useState<DroppedCard[]>([]);
-  const [cards, setCards] = useState<initialCardsProps[]>(initialCards);
+  const [cards, setCards] = useState<membersProps[]>(initialCards);
 
   function handleRegister({ email, password }: RegisterDataProps) {
     dispatch(registerUser({ email, password }))
@@ -47,7 +48,7 @@ export default function App() {
       dispatch(setLoggedIn(true));
     }
   }, [dispatch]);
-
+  const { members } = useAppSelector(selectMembers);
   return (
     <div>
       <Header droppedCards={droppedCards} />
@@ -58,7 +59,7 @@ export default function App() {
             context={{
               allowDrop,
               handleDrop: (e: React.DragEvent<HTMLDivElement>) =>
-                handleDrop(e, cards, setCards, droppedCards, setDroppedCards),
+                handleDrop(e, cards, setCards, droppedCards, setDroppedCards, members),
               handleDragStart,
               cards,
             }}

diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx
@@ -4,7 +4,7 @@ import useOutsideClick from 'src/hooks/useOutsideClick';
 import { Input } from 'antd';
 import { CloseOutlined } from '@ant-design/icons';
 import Card from 'src/ui/Card/Card';
-import { cardsList } from 'src/services/mock';
+// import { cardsList } from 'src/services/mock';
 import FilterList from 'src/ui/FilterList/FilterList';
 import { setIsFilterOpen } from 'src/store/features/slice/membersSlice';
 import { DroppedCard } from 'src/services/types';
@@ -23,7 +23,6 @@ export default function Filter({ droppedCards }: FilterProps) {
   let { isFilterOpen } = useAppSelector(selectMembers);
   const { members, currentPage } = useAppSelector(selectMembers);
   const dispatch = useAppDispatch();
-  console.log('members: ', members);
 
   useEffect(() => {
     dispatch(fetchGetMembers(currentPage));
@@ -71,12 +70,16 @@ export default function Filter({ droppedCards }: FilterProps) {
         </div>
         <FilterList teams='Подразделение' positions='Должность' city='Город' />
         <div className={styles.containerResult}>
-          {cardsList.map((card, index) => (
+          {members.map((card, index) => (
             <Card
-              id={card.id}
-              key={card.id}
-              name={card.name}
-              position={card.position}
+              id={String(card.id)}
+              key={String(card.id)}
+              // title={card.title}
+              // name={card.name}
+              // position={card.position}
+              title={card.position}
+              name={card.full_name}
+              position={card.department}
               index={index}
               isFilterOpen={isFilterOpen}
               onDragStart={(e) => handleDragStart(e, droppedCards)}

diff --git a/src/pages/Employees/Employees.module.scss b/src/pages/Employees/Employees.module.scss
@@ -40,6 +40,7 @@
 .pages {
   @include mp-null;
   @include use-font(14px, 16.8px, 400);
+  user-select: none;
 }
 
 .button {

diff --git a/src/services/dragAndDrop.ts b/src/services/dragAndDrop.ts
@@ -1,6 +1,6 @@
 import { cellHeight, cellWidth } from 'src/services/const';
-import { cardsList } from 'src/services/mock';
-import { DroppedCard, initialCardsProps } from 'src/services/types';
+// import { cardsList } from 'src/services/mock';
+import { DroppedCard, membersProps } from 'src/services/types';
 
 // Начальная область переноса
 export const handleDragStart = (
@@ -24,13 +24,18 @@ export const allowDrop = (e: React.DragEvent<HTMLDivElement>) => {
 // Логика сброса карточек
 export const handleDrop = (
   e: React.DragEvent<HTMLDivElement>,
-  cards: initialCardsProps[],
-  setCards: React.Dispatch<React.SetStateAction<initialCardsProps[]>>,
+  cards: membersProps[],
+  setCards: React.Dispatch<React.SetStateAction<membersProps[]>>,
   droppedCards: DroppedCard[],
-  setDroppedCards: React.Dispatch<React.SetStateAction<DroppedCard[]>>
+  setDroppedCards: React.Dispatch<React.SetStateAction<DroppedCard[]>>,
+  members: membersProps[],
 ) => {
+
+  console.log('members: ', members);
+
   e.preventDefault();
   const itemId = e.dataTransfer.getData('id');
+  console.log('itemId: ', itemId);
 
   const dropTarget = e.currentTarget;
   const dropTargetRect = dropTarget.getBoundingClientRect();
@@ -46,10 +51,10 @@ export const handleDrop = (
     const parentCard = findParentCard(cards, columnIndex, rowIndex);
 
     if (parentCard) {
-      const originalCard = cardsList.find((card) => card.id === itemId);
+      const originalCard = members.find((card) => card.id === itemId);
 
       if (originalCard) {
-        const newSubordinateCard: initialCardsProps = {
+        const newSubordinateCard: membersProps = {
           ...originalCard,
           id: itemId,
           subordinates: [],
@@ -68,17 +73,21 @@ export const handleDrop = (
           ...prev,
           { id: newSubordinateCard.id, cellId },
         ]);
+      } else {
+        console.error`(Original card not found for itemId ${itemId})`;
       }
+    } else {
+      console.error`(Parent card not found for cellId ${cellId}.)`;
     }
   }
 };
 
 // Поиск родительской карты
 const findParentCard = (
-  cards: initialCardsProps[],
+  cards: membersProps[],
   columnIndex: number,
   rowIndex: number
-): initialCardsProps | undefined => {
+): membersProps | undefined => {
   let parentCellId;
 
   if (
@@ -104,10 +113,10 @@ const findParentCard = (
 
 // Добавление подчиенной карты
 const addSubordinate = (
-  cards: initialCardsProps[],
+  cards: membersProps[],
   parentId: string,
-  subordinate: initialCardsProps
-): initialCardsProps[] => {
+  subordinate: membersProps
+): membersProps[] => {
   return cards.map((card) => {
     if (card.id === parentId) {
       return {

diff --git a/src/services/mock.ts b/src/services/mock.ts
@@ -1,9 +1,9 @@
 export const initialCards = [
   {
-    id: '0',
-    name: 'Директор',
-    position: 'Разработчик',
-    title: 'Frontend Developer',
+    id: '1',
+    position: 'Директор',
+    full_name: 'Иванннн',
+    department: 'Frontend Developer',
     photo: 'https://example.com/photo1.jpg',
     cellId: '1-0',
     parentId: '',
@@ -33,70 +33,70 @@ export const initialCards = [
   },
 ];
 
-export const cardsList = [
-  {
-    id: '6',
-    name: 'Иван',
-    position: 'Разработчик',
-    title: 'Frontend Developer',
-    photo: 'https://example.com/photo1.jpg',
-    parentId: '',
-    subordinates: [],
-  },
-  {
-    id: '7',
-    name: 'Мария',
-    position: 'Дизайнер',
-    title: 'UI/UX Designer',
-    photo: 'https://example.com/photo2.jpg',
-    subordinates: [],
-  },
-  {
-    id: '8',
-    name: 'Сергей',
-    position: 'Менеджер',
-    title: 'Project Manager',
-    photo: 'https://example.com/photo3.jpg',
-    subordinates: [],
-  },
-  {
-    id: '9',
-    name: 'Ольга',
-    position: 'Аналитик',
-    title: 'Data Analyst',
-    photo: 'https://example.com/photo4.jpg',
-    subordinates: [],
-  },
-  {
-    id: '10',
-    name: 'Алексей Сидоров',
-    position: 'Тестировщик',
-    title: 'QA Engineer',
-    photo: 'https://example.com/photo5.jpg',
-    subordinates: [],
-  },
-  {
-    id: '11',
-    name: 'Петя',
-    position: 'Скорее бы на море',
-    title: 'QA Engineer',
-    photo: 'https://example.com/photo5.jpg',
-    subordinates: [],
-  },
-  {
-    id: '12',
-    name: 'Алха',
-    position: 'КТо',
-    title: 'QA Engineer',
-    photo: 'https://example.com/photo5.jpg',
-    subordinates: [],
-  },
-  {
-    id: '13',
-    name: 'Трампампам',
-    position: 'Никто',
-    title: 'QA Engineer',
-    photo: 'https://example.com/photo5.jpg',
-    subordinates: [],
-  },
-];
+// export const cardsList = [
+//   {
+//     id: '6',
+//     full_name: 'Иван',
+//     position: 'Разработчик',
+//     title: 'Frontend Developer',
+//     photo: 'https://example.com/photo1.jpg',
+//     parentId: '',
+//     subordinates: [],
+//   },
+//   {
+//     id: '7',
+//     full_name: 'Мария',
+//     position: 'Дизайнер',
+//     title: 'UI/UX Designer',
+//     photo: 'https://example.com/photo2.jpg',
+//     subordinates: [],
+//   },
+//   {
+//     id: '8',
+//     full_name: 'Сергей',
+//     position: 'Менеджер',
+//     title: 'Project Manager',
+//     photo: 'https://example.com/photo3.jpg',
+//     subordinates: [],
+//   },
+//   {
+//     id: '9',
+//     full_name: 'Ольга',
+//     position: 'Аналитик',
+//     title: 'Data Analyst',
+//     photo: 'https://example.com/photo4.jpg',
+//     subordinates: [],
+//   },
+//   {
+//     id: '10',
+//     full_name: 'Алексей Сидоров',
+//     position: 'Тестировщик',
+//     title: 'QA Engineer',
+//     photo: 'https://example.com/photo5.jpg',
+//     subordinates: [],
+//   },
+//   {
+//     id: '11',
+//     full_name: 'Петя',
+//     position: 'Скорее бы на море',
+//     title: 'QA Engineer',
+//     photo: 'https://example.com/photo5.jpg',
+//     subordinates: [],
+//   },
+//   {
+//     id: '12',
+//     full_name: 'Алха',
+//     position: 'КТо',
+//     title: 'QA Engineer',
+//     photo: 'https://example.com/photo5.jpg',
+//     subordinates: [],
+//   },
+//   {
+//     id: '13',
+//     full_name: 'Трампампам',
+//     position: 'Никто',
+//     title: 'QA Engineer',
+//     photo: 'https://example.com/photo5.jpg',
+//     subordinates: [],
+//   },
+// ];
diff --git a/src/services/types.ts b/src/services/types.ts
@@ -11,25 +11,30 @@ export interface CardProps {
   draggable?: boolean;
 }
 
-export interface initialCardsProps {
-  id: string;
-  name: string;
-  position: string;
-  title: string;
-  photo: string;
-  cellId: string;
-  parentId?: string;
-  newId?: string;
-  subordinates: initialCardsProps[];
-}
+// export interface initialCardsProps {
+//   id: string;
+//   name: string;
+//   position: string;
+//   title: string;
+//   photo: string;
+//   cellId: string;
+//   parentId?: string;
+//   newId?: string;
+//   subordinates: initialCardsProps[];
+// }
 
 export interface membersProps {
   id: string;
-  title: string;
-  full_name: string;
-  department: string;
-  position: string;
-  subordinates: initialCardsProps[];
+  index?: number;
+  title?: string;
+  full_name?: string;
+  department?: string;
+  position?: string;
+  cellId?: string;
+  parentId?: string;
+  subordinates?: membersProps[];
+  onDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;
+  draggable?: boolean;
 }
 
 export interface RegisterDataProps {

diff --git a/src/ui/Card/Card.module.scss b/src/ui/Card/Card.module.scss
@@ -59,7 +59,8 @@
 .name {
   @include mp-null;
   @include use-font(14px, 17px, 500);
-  word-wrap: normal;
+  @include cut-word;
+  white-space: nowrap;
 }
 
 .position {