Skip to content

Commit

Permalink
feat/ teams []
Browse files Browse the repository at this point in the history
  • Loading branch information
k0t1k777 committed Aug 14, 2024
1 parent be93cbe commit 02234fd
Show file tree
Hide file tree
Showing 12 changed files with 229 additions and 66 deletions.
8 changes: 5 additions & 3 deletions src/components/Header/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@ 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, useNavigate } 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 Down Expand Up @@ -34,9 +36,9 @@ export default function Header({ droppedCards }: HeaderProps) {
<header
className={cx(styles.header, { [styles.header_loggedIn]: !loggedIn })}
>
<Link to='/'>
{/* <Link to='/'> */}
<Logo />
</Link>
{/* </Link> */}
{loggedIn && (
<div className={styles.container}>
<Input
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Profile/Profile.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@
.photo {
width: 150px;
height: 150px;
border-radius: $border-white;
border-radius: $border-radius;
border: none;
object-fit: cover

Expand Down
94 changes: 85 additions & 9 deletions src/pages/Teams/Teams.tsx
Original file line number Diff line number Diff line change
@@ -1,28 +1,104 @@
import { useEffect } from 'react';
import { useEffect, useLayoutEffect, useState } from 'react';
import { useLocation, useParams } from 'react-router-dom';
import styles from 'src/pages/Teams/Teams.module.scss';
import { renderArrows, renderCards, renderEmptyCells } from 'src/services/helpers';
import { membersProps } from 'src/services/types';
import {
fetchGetTeams,
fetchGetTeamsId,
selectTeams,
} from 'src/store/features/slice/teamsSlice';
import { useAppDispatch, useAppSelector } from 'src/store/hooks';
import TeamsItem from 'src/ui/TeamsItem/TeamsItem';

export default function Teams() {
const { id } = useParams()

const dispatch = useAppDispatch();
const { teams } = useAppSelector(selectTeams);
const { teams, team } = useAppSelector(selectTeams);

const [arrows, setArrows] = useState<JSX.Element[]>([]);
const [busyCells, setBusyCells] = useState<string[]>([]);
const [teamsCards, setTeamsCards] = useState<membersProps[]>([]);
console.log('teamsCards: ', teamsCards);



// const teamsRout = location.pathname.includes(`/teams/`)

// const collectCellIds = (card: membersProps, collected: string[]) => {
// if (card.cellId) {
// collected.push(card.cellId);
// }
// if (card.subordinates) {
// card.subordinates.forEach((subordinate) =>
// collectCellIds(subordinate, collected)
// );
// }
// };

// useEffect(() => {
// const collectCards = (card: membersProps, collected: membersProps[]) => {
// collected.push(card);
// if (card.subordinates) {
// card.subordinates.forEach((subordinate) =>
// collectCards(subordinate, collected)
// );
// }
// };
// const newAllCards: membersProps[] = [];
// const newBusyCells: string[] = [];

// cards.forEach((card) => {
// collectCards(card, newAllCards);
// collectCellIds(card, newBusyCells);
// });

// setAllCards(newAllCards);
// setBusyCells(newBusyCells);
// }, [cards]);

// useLayoutEffect(() => {
// if (team.employees?.subordinates.length > 0) {
// renderArrows(team.employees?.subordinates, setArrows);
// }
// }, [team.employees?.subordinates]);


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


useEffect(() => {
if (id) {
const parsedId = parseInt(id, 10)
dispatch(fetchGetTeamsId(parsedId))
}
}, [dispatch, id])

useEffect(() => {
setTeamsCards(team && team.employees?.subordinates)
}, [team])

return (
<section className={styles.teams}>
{teams.map((item) => (
<TeamsItem
key={item.id}
name={item.name}
projects={item.projects}
/>
))}
{id ? (
<div>
{/* {team.employees?.subordinates.map(renderCards)}
{renderEmptyCells(busyCells)}
{arrows} */}
</div>
) : (
teams.map((item) => (
<TeamsItem
id={item.id}
key={item.id}
name={item.name}
projects={item.projects}
/>
))
)}
</section>
);
}
21 changes: 20 additions & 1 deletion src/services/const.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,24 @@

export const cellWidth = 312;
export const cellHeight = 149;
export const numCols = 3;
export const numRows = 10;
export const itemsPerPage = 12;
export const itemsPerPage = 12;

// export const inintialMember: membersProps = {
// id: '',
// index: 0,
// title: '',
// full_name: '',
// department: '',
// position: '',
// cellId: '',
// parentId: '',
// photo: '',
// subordinates: [],
// }

export const inintialTeam = {
name: '',
id: '',
}
25 changes: 21 additions & 4 deletions src/services/dragAndDrop.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,28 +28,36 @@ export const handleDrop = (
setCards: React.Dispatch<React.SetStateAction<membersProps[]>>,
droppedCards: membersProps[],
setDroppedCards: React.Dispatch<React.SetStateAction<membersProps[]>>,
members: membersProps[],
members: membersProps[]
) => {

e.preventDefault();
// Здесь мы получаем ID элемента, который перетаскивается.:
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);

// ID ячейки формируется как строка, состоящая из индексов столбца и строки.
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) {
const originalCard = members.find((card) => String(card.id) === itemId);

// Если родительская карточка найдена, создаётся новая подчинённая карточка с необходимыми свойствами.
if (originalCard) {
const newSubordinateCard: membersProps = {
...originalCard,
Expand All @@ -65,6 +73,7 @@ export const handleDrop = (
newSubordinateCard
);

// Обновляются состояния карточек и сброшенных карточек
setCards(updatedCards);
setDroppedCards((prev) => [
...prev,
Expand All @@ -87,6 +96,7 @@ const findParentCard = (
): membersProps | undefined => {
let parentCellId;

// В зависимости от индексов строки и столбца определяется ID родительской ячейки.
if (
(rowIndex === 0 && (columnIndex === 0 || columnIndex === 2)) ||
(rowIndex === 1 && (columnIndex === 0 || columnIndex === 2))
Expand All @@ -100,6 +110,9 @@ const findParentCard = (
if (card.cellId === parentCellId) {
return card;
}
// Функция проходит по массиву карточек и проверяет, есть ли карточка с соответствующим ID.
// Если такая карточка найдена, она возвращается. Если нет,
// функция рекурсивно ищет среди подчинённых карточек.
if (card.subordinates) {
const found = findParentCard(card.subordinates, columnIndex, rowIndex);
if (found) return found;
Expand All @@ -114,15 +127,19 @@ const addSubordinate = (
parentId: string,
subordinate: membersProps
): membersProps[] => {
console.log('cards: ', cards);

// Функция проходит по массиву карточек и ищет родительскую карточку по её ID.
return cards.map((card) => {
// Если родительская карточка найдена,
// новая подчинённая карточка добавляется в её массив подчинённых.
if (card.id === parentId) {
return {
...card,
subordinates: [...(card.subordinates || []), subordinate],
};
}
// Если у текущей карточки есть подчинённые,
// функция рекурсивно вызывает себя для добавления подчинённой карточки к ним.
if (card.subordinates) {
return {
...card,
Expand Down
65 changes: 33 additions & 32 deletions src/services/mock.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,36 +40,37 @@ export const PROJECT_DATA = [
]

export const initialCards = [
{
id: '999',
position: 'Директор',
full_name: 'Иванннн',
department: 'Frontend Developer',
photo: 'https://example.com/photo1.jpg',
cellId: '1-0',
parentId: '',
subordinates: [
// {
// id: '1211',
// name: 'Иван',
// position: 'Разработчик',
// title: 'Frontend Developer',
// photo: 'https://example.com/photo1.jpg',
// parentId: '',
// cellId: '2-1',
// subordinates: [
// // {
// // id: '1211',
// // name: 'Иван',
// // position: 'Разработчик',
// // title: 'Frontend Developer',
// // photo: 'https://example.com/photo1.jpg',
// // parentId: '',
// // cellId: '0-0',
// // subordinates: [],
// // },
// ],
// },
],
},
{}
// {
// id: '999',
// position: 'Директор',
// full_name: 'Иванннн',
// department: 'Frontend Developer',
// photo: 'https://example.com/photo1.jpg',
// cellId: '1-0',
// parentId: '',
// subordinates: [
// {
// id: '121211',
// name: 'Иван',
// position: 'Разработчик',
// title: 'Frontend Developer',
// photo: 'https://example.com/photo1.jpg',
// parentId: '',
// cellId: '1-1',
// subordinates: [
// {
// id: '112211',
// name: 'Иван',
// position: 'Разработчик',
// title: 'Frontend Developer',
// photo: 'https://example.com/photo1.jpg',
// parentId: '',
// cellId: '0-0',
// subordinates: [],
// },
// ],
// },
// ],
// },
];
13 changes: 8 additions & 5 deletions src/services/router.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,11 @@ import Profile from 'src/pages/Profile/Profile';
import Projects from 'src/pages/Projects/Projects';
import Teams from 'src/pages/Teams/Teams';

// export const router = createHashRouter([
export const router = createBrowserRouter([
{
path: '/',
element: <App />,
children: [
{
path: '*',
element: <NotFound />,
},
{
path: '/',
element: <Main />,
Expand All @@ -38,10 +33,18 @@ export const router = createBrowserRouter([
path: 'teams',
element: <Teams />,
},
{
path: 'teams/:id',
element: <Teams />,
},
{
path: 'projects',
element: <Projects />,
},
{
path: '*',
element: <NotFound />,
},
],
},
]);
8 changes: 7 additions & 1 deletion src/services/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,12 @@ export interface ProjectseProps {
export interface TeamsProps {
name: string;
id?: string;
employees?: {
id?: 0;
user_id?: 0;
image: '';
subordinates: membersProps[];
}[];
projects?: {
name?: string;
id?: string;
Expand All @@ -87,4 +93,4 @@ export interface FiltersProps {
cities: string[];
departments: string[];
positions: string[];
}
}
Loading

0 comments on commit 02234fd

Please sign in to comment.