Skip to content

Commit

Permalink
fix/employes
Browse files Browse the repository at this point in the history
  • Loading branch information
@k0t1k777
k0t1k777 committed Aug 11, 2024
1 parent 3554a8c commit b06d061
Show file tree
Hide file tree
Showing 12 changed files with 317 additions and 299 deletions.
159 changes: 13 additions & 146 deletions src/components/App/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,28 @@ 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, cardsList } from 'src/services/mock';
import { DroppedCard, initialCardsProps, RegisterDataProps } from 'src/services/types';
import { initialCards } from 'src/services/mock';
import {
DroppedCard,
initialCardsProps,
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 { cellHeight, cellWidth } from 'src/services/const';
import { allowDrop, handleDragStart, handleDrop } from 'src/services/dragAndDrop';
// import * as Api from 'src/services/utils'


export default function App() {
let { loggedIn } = useAppSelector(selectUsers);
const dispatch = useAppDispatch();
const dispatch = useAppDispatch();
const navigate = useNavigate();
const [droppedCards, setDroppedCards] = useState<DroppedCard[]>([]);
const [cards, setCards] = useState<initialCardsProps[]>(initialCards);

function handleRegister({ email, password }: RegisterDataProps) {
dispatch(registerUser({ email, password }))
Expand All @@ -36,142 +41,6 @@ export default function App() {
});
}


// ДНД
const [droppedCards, setDroppedCards] = useState<DroppedCard[]>([]);
const [cards, setCards] = useState<initialCardsProps[]>(initialCards);

const handleDragStart = (e: React.DragEvent<HTMLDivElement>) => {
const itemId = e.currentTarget.id;

if (droppedCards.some((card) => card.id === itemId)) {
e.preventDefault();
} else {
e.dataTransfer.setData('id', itemId);
}
};


const allowDrop = (e: React.DragEvent<HTMLDivElement>) => {
e.preventDefault();
};

const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
e.preventDefault();
e.currentTarget.style.cursor = 'default';
const itemId = e.dataTransfer.getData('id');

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);

const cellId = `${columnIndex}-${rowIndex}`;
if (cellId === '0-0' || cellId === '2-0') {
return;
}
// Проверяем, что в этой ячейке еще нет карточки
if (!droppedCards.some((card) => card.cellId === cellId)) {

// Находим родителя, к которому мы будем добавлять новую карточку
const parentCard = findParentCard(cards, columnIndex, rowIndex);

if (parentCard) {
// Находим оригинальную карточку по itemId
const originalCard = cardsList.find((card) => card.id === itemId);

if (originalCard) {
// Создаем новую подчиненную карточку на основе оригинальной
const newSubordinateCard: initialCardsProps = {
...originalCard,
id: itemId,
subordinates: [],
cellId,
parentId: parentCard.id,
};

const updatedCards = addSubordinate(
cards,
parentCard.id,
newSubordinateCard
);

setCards(updatedCards);

setDroppedCards((prev) => [
...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[],
columnIndex: number,
rowIndex: number
): initialCardsProps | undefined => {
let parentCellId;

// Условие для определения родительской ячейки
if (
(rowIndex === 0 && (columnIndex === 0 || columnIndex === 2)) ||
(rowIndex === 1 && (columnIndex === 0 || columnIndex === 2))
) {
parentCellId = '1-0';
} else {
parentCellId = `${columnIndex}-${rowIndex - 1}`; // Формируем cellId для родителя
}

for (const card of cards) {
// Проверяем, соответствует ли текущая карточка родительскому cellId
if (card.cellId === parentCellId) {
return card;
}
if (card.subordinates) {
const found = findParentCard(card.subordinates, columnIndex, rowIndex);
if (found) return found;
}
}
return undefined;
};

const addSubordinate = (
cards: initialCardsProps[],
parentId: string,
subordinate: initialCardsProps
): initialCardsProps[] => {
return cards.map((card) => {
if (card.id === parentId) {
return {
...card,
subordinates: [...(card.subordinates || []), subordinate],
};
}
if (card.subordinates) {
return {
...card,
subordinates: addSubordinate(
card.subordinates,
parentId,
subordinate
),
};
}
return card;
});
};

useEffect(() => {
const token = localStorage.getItem('token');
if (token) {
Expand All @@ -181,17 +50,15 @@ export default function App() {

return (
<div>
<Header
onDragStart={handleDragStart}
droppedCards={droppedCards}
/>
<Header droppedCards={droppedCards} />
{loggedIn ? (
<div className='container'>
<SideBar />
<Outlet
context={{
allowDrop,
handleDrop,
handleDrop: (e: React.DragEvent<HTMLDivElement>) =>
handleDrop(e, cards, setCards, droppedCards, setDroppedCards),
handleDragStart,
cards,
}}
Expand Down
6 changes: 3 additions & 3 deletions src/components/Filter/Filter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ import {
setIsFilterOpen,
} from 'src/store/features/slice/membersSlice';
import { DroppedCard } from 'src/services/types';
import { handleDragStart } from 'src/services/dragAndDrop';
// import { fetchGetMembers, selectMembers } from 'src/store/features/slice/membersSlice';
// import { useAppDispatch, useAppSelector } from 'src/store/hooks';

interface FilterProps {
onDragStart: (e: React.DragEvent<HTMLDivElement>) => void;
droppedCards: DroppedCard[];
}
// const dispatch = useAppDispatch();
Expand All @@ -25,7 +25,7 @@ interface FilterProps {
// useEffect(() => {
// dispatch(fetchGetMembers());
// }, [dispatch]);
export default function Filter({ onDragStart, droppedCards }: FilterProps) {
export default function Filter({ droppedCards }: FilterProps) {
let { isFilterOpen } = useAppSelector(selectMembers);
const dispatch = useAppDispatch();

Expand Down Expand Up @@ -80,7 +80,7 @@ export default function Filter({ onDragStart, droppedCards }: FilterProps) {
position={card.position}
index={index}
isFilterOpen={isFilterOpen}
onDragStart={onDragStart}
onDragStart={(e) => handleDragStart(e, droppedCards)}
draggable={
!droppedCards.some((droppedCard) => droppedCard.id === card.id)
}
Expand Down
15 changes: 10 additions & 5 deletions src/components/Header/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +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 } from 'react-router-dom';
import { Link, useNavigate } from 'react-router-dom';
import Filter from 'src/components/Filter/Filter';
import cn from 'classnames/bind';
import { useAppDispatch, useAppSelector } from 'src/store/hooks';
Expand All @@ -15,14 +15,19 @@ import { selectUsers } from 'src/store/features/slice/userSlice';
const cx = cn.bind(styles);

interface HeaderProps {
onDragStart: (e: React.DragEvent<HTMLDivElement>) => void;
droppedCards: DroppedCard[];
}

export default function Header({ onDragStart, droppedCards }: HeaderProps) {
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('/');
}

return (
<>
Expand All @@ -41,7 +46,7 @@ export default function Header({ onDragStart, droppedCards }: HeaderProps) {
})}
/>
<FilterOutlined
onClick={() => dispatch(setIsFilterOpen(!isFilterOpen))}
onClick={handleFilterClick}
className={cx(styles.headerIcon, {
[styles.headerIcon_disabled]: isFilterOpen,
})}
Expand All @@ -50,7 +55,7 @@ export default function Header({ onDragStart, droppedCards }: HeaderProps) {
)}
</header>
{isFilterOpen && (
<Filter onDragStart={onDragStart} droppedCards={droppedCards} />
<Filter droppedCards={droppedCards} />
)}
</>
);
Expand Down
22 changes: 17 additions & 5 deletions src/pages/Employees/Employees.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,27 @@ import { useLocation } from 'react-router-dom';
import styles from 'src/pages/Employees/Employees.module.scss';
import Card from 'src/ui/Card/Card';
import FilterList from 'src/ui/FilterList/FilterList';
import { cardsList } from 'src/services/mock';
import { useAppDispatch, useAppSelector } from 'src/store/hooks';
import {
fetchGetMembers,
selectMembers,
} from 'src/store/features/slice/membersSlice';
import { useEffect } from 'react';

export default function Employees() {
const location = useLocation();
const dispatch = useAppDispatch();
const { members } = useAppSelector(selectMembers);
console.log('members: ', members);

useEffect(() => {
dispatch(fetchGetMembers());
}, [dispatch]);

const employesRout = location.pathname === '/employees';
return (
<div className={styles.employees}>
<p className={styles.title}>Всего {666} сотрудников</p>
<p className={styles.title}>Всего {members.length} сотрудников</p>
<div className={styles.filterContainer}>
<FilterList
employesRout={employesRout}
Expand All @@ -20,12 +32,12 @@ export default function Employees() {
/>
</div>
<div className={styles.cardContainer}>
{cardsList.map((card, index) => (
{members.map((card, index) => (
<Card
id={card.id}
key={card.id}
name={card.name}
position={card.position}
name={card.full_name}
position={card.department}
index={index}
employesRout={employesRout}
/>
Expand Down
Loading

0 comments on commit b06d061

Please sign in to comment.