diff --git a/front/src/modules/ui/board/components/EntityBoard.tsx b/front/src/modules/ui/board/components/EntityBoard.tsx index 28ca6ab54..3697e8ffb 100644 --- a/front/src/modules/ui/board/components/EntityBoard.tsx +++ b/front/src/modules/ui/board/components/EntityBoard.tsx @@ -1,4 +1,4 @@ -import { useCallback } from 'react'; +import { useCallback, useRef } from 'react'; import { getOperationName } from '@apollo/client/utilities'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; @@ -12,6 +12,7 @@ import { StyledBoard } from '@/ui/board/components/StyledBoard'; import { useUpdateBoardCardIds } from '@/ui/board/hooks/useUpdateBoardCardIds'; import { BoardColumnIdContext } from '@/ui/board/states/BoardColumnIdContext'; import { SelectedSortType } from '@/ui/filter-n-sort/types/interface'; +import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { PipelineProgress, @@ -23,6 +24,7 @@ import { import { GET_PIPELINE_PROGRESS } from '../../../pipeline/queries'; import { BoardColumnContext } from '../states/BoardColumnContext'; import { boardColumnsState } from '../states/boardColumnsState'; +import { selectedBoardCardIdsState } from '../states/selectedBoardCardIdsState'; import { BoardOptions } from '../types/BoardOptions'; import { EntityBoardColumn } from './EntityBoardColumn'; @@ -103,6 +105,21 @@ export function EntityBoard({ return a.index - b.index; }); + const boardRef = useRef(null); + const [selectedBoardCards, setSelectedBoardCards] = useRecoilState( + selectedBoardCardIdsState, + ); + + function setRowSelectedState(boardCardId: string, selected: boolean) { + if (selected && !selectedBoardCards.includes(boardCardId)) { + setSelectedBoardCards([...selectedBoardCards, boardCardId ?? '']); + } else if (!selected && selectedBoardCards.includes(boardCardId)) { + setSelectedBoardCards( + selectedBoardCards.filter((id) => id !== boardCardId), + ); + } + } + return (boardColumns?.length ?? 0) > 0 ? ( - + {sortedBoardColumns.map((column) => ( @@ -128,6 +145,10 @@ export function EntityBoard({ ))} + ) : ( <> diff --git a/front/src/modules/ui/board/components/EntityBoardCard.tsx b/front/src/modules/ui/board/components/EntityBoardCard.tsx index 3e472ee52..764826328 100644 --- a/front/src/modules/ui/board/components/EntityBoardCard.tsx +++ b/front/src/modules/ui/board/components/EntityBoardCard.tsx @@ -18,6 +18,8 @@ export function EntityBoardCard({ ref={draggableProvided?.innerRef} {...draggableProvided?.dragHandleProps} {...draggableProvided?.draggableProps} + data-selectable-id={cardId} + data-select-disable > {boardOptions.cardComponent} diff --git a/front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx b/front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx index d30033d41..b0b7c499e 100644 --- a/front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx +++ b/front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx @@ -7,7 +7,7 @@ import { type OwnProps = { dragSelectable: RefObject; onDragSelectionChange: (id: string, selected: boolean) => void; - onDragSelectionStart: () => void; + onDragSelectionStart?: () => void; }; export function DragSelect({