diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index 0f5b8e5..f331692 100644 --- 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([]); - const [cards, setCards] = useState(initialCards); + const [cards, setCards] = useState(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 (
@@ -58,7 +59,7 @@ export default function App() { context={{ allowDrop, handleDrop: (e: React.DragEvent) => - 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 index 437b790..fbcda10 100644 --- 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) {
- {cardsList.map((card, index) => ( + {members.map((card, index) => ( handleDragStart(e, droppedCards)} diff --git a/src/pages/Employees/Employees.module.scss b/src/pages/Employees/Employees.module.scss index 319cba9..b2bbe75 100644 --- 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 index c9c26d2..02a8a31 100644 --- 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) => { // Логика сброса карточек export const handleDrop = ( e: React.DragEvent, - cards: initialCardsProps[], - setCards: React.Dispatch>, + cards: membersProps[], + setCards: React.Dispatch>, droppedCards: DroppedCard[], - setDroppedCards: React.Dispatch> + setDroppedCards: React.Dispatch>, + 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 index 103a4af..7a4016e 100644 --- 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 index 7665088..7e5b399 100644 --- 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) => void; + draggable?: boolean; } export interface RegisterDataProps { diff --git a/src/ui/Card/Card.module.scss b/src/ui/Card/Card.module.scss index 5d8ce51..a2fe741 100644 --- 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 {