From f686d194a987272c5da220fb5c4942a244c45b81 Mon Sep 17 00:00:00 2001 From: Nickolai Date: Thu, 15 Aug 2024 13:07:34 +0400 Subject: [PATCH] feat/ start delete trees --- src/components/Filter/Filter.tsx | 1 - src/components/SideBar/SideBar.tsx | 17 ++++--- src/pages/NewTeam/NewTeam.tsx | 5 +- src/services/dragAndDrop.ts | 7 +-- src/services/helpers.tsx | 19 ++++++- src/store/features/slice/membersSlice.ts | 60 ++++++++++++---------- src/ui/Card/Card.module.scss | 24 +++++---- src/ui/Card/Card.tsx | 63 +++++++++++++++++------- 8 files changed, 127 insertions(+), 69 deletions(-) diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx index afe192f..f6778aa 100644 --- 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 index bd1892f..ac9bc5c 100644 --- 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 (
{!shortWindow ? ( - - - + ) : ( - - - )}
); diff --git a/src/pages/NewTeam/NewTeam.tsx b/src/pages/NewTeam/NewTeam.tsx index 4a3f358..2fdbee6 100644 --- 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 ? ( -
Перенесите мембера сюда
+
Добавьте члена команды сюда
) : (
- {allCards.map(renderCards)} + {allCards.map(renderCards, setAllCards)} {renderEmptyCells(busyCells, isFilterOpen)} {arrows}
diff --git a/src/services/dragAndDrop.ts b/src/services/dragAndDrop.ts index 2a138db..9161f47 100644 --- a/src/services/dragAndDrop.ts +++ b/src/services/dragAndDrop.ts @@ -30,7 +30,6 @@ export const handleDrop = ( setDroppedCards: React.Dispatch>, 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 index 5333f87..de37e85 100644 --- 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 (
{ full_name={card.full_name} department={card.department} count={card.subordinates.length} + handleButtonClick={handleButtonClick} />
); diff --git a/src/store/features/slice/membersSlice.ts b/src/store/features/slice/membersSlice.ts index 79aaeb8..e2697a2 100644 --- 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 index a2fe741..44a9701 100644 --- 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,9 +40,10 @@ max-width: 188px; } -.edit { - cursor: pointer; +.buttonsContainer { color: $button-focus; + display: flex; + gap: 8px; &disabled { display: none !important; color: red; @@ -44,6 +51,10 @@ } } +.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; } diff --git a/src/ui/Card/Card.tsx b/src/ui/Card/Card.tsx index 164da62..cbf68a5 100644 --- a/src/ui/Card/Card.tsx +++ b/src/ui/Card/Card.tsx @@ -1,29 +1,42 @@ -import { DownOutlined, EditOutlined, UpOutlined } from '@ant-design/icons'; +import { + CloseOutlined, + DownOutlined, + EditOutlined, + UpOutlined, +} from '@ant-design/icons'; import styles from 'src/ui/Card/Card.module.scss'; import Avatar from 'src/assets/images/Avatar.png'; import { useState } from 'react'; import cn from 'classnames/bind'; import { membersProps } from 'src/services/types'; +import { + selectMembers, + setShowMembers, +} from 'src/store/features/slice/membersSlice'; +import { useAppDispatch, useAppSelector } from 'src/store/hooks'; const cx = cn.bind(styles); export default function Card({ employesRout = false, isFilterOpen = false, + draggable = true, full_name, department, title, count, id, + handleButtonClick, onDragStart, - draggable = true, }: membersProps) { const [isOpen, setIsopen] = useState(true); + let { showMembers } = useAppSelector(selectMembers); + const dispatch = useAppDispatch(); return (
{title}

-
- +
+ +
@@ -47,17 +65,17 @@ export default function Card({ [styles.miniContainer]: isFilterOpen, })} > -

- {full_name} -

-

- {department} -

+

+ {full_name} +

+

+ {department} +

setIsopen(!isOpen)} > - {isOpen ? : } + {isOpen ? ( + dispatch(setShowMembers(!showMembers))} + /> + ) : ( + dispatch(setShowMembers(!showMembers))} + /> + )}