twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-18 17:12:53 +03:00
Code Issues Packages Projects Releases Wiki Activity

Enable to drag under New button on pipeline (#970)

Browse Source
This commit is contained in:
Charles Bochet 2023-07-27 18:50:29 -07:00 committed by GitHub
parent c13d6b4f60
commit 8cf8183342
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
front/src/modules/pipeline/components/EntityBoardColumn.tsx
View File

@ -1,7 +1,7 @@
import { useEffect } from 'react'; import { useEffect } from 'react';
import { getOperationName } from '@apollo/client/utilities'; import { getOperationName } from '@apollo/client/utilities';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { Droppable, DroppableProvided } from '@hello-pangea/dnd'; import { Draggable, Droppable, DroppableProvided } from '@hello-pangea/dnd';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import { BoardPipelineStageColumn } from '@/ui/board/components/Board'; import { BoardPipelineStageColumn } from '@/ui/board/components/Board';
@ -27,6 +27,12 @@ const StyledNewCardButtonContainer = styled.div`
padding-bottom: ${({ theme }) => theme.spacing(4)}; padding-bottom: ${({ theme }) => theme.spacing(4)};
`; `;
const StyledColumnCardsContainer = styled.div`
display: flex;
flex: 1;
flex-direction: column;
`;
const BoardColumnCardsContainer = ({ const BoardColumnCardsContainer = ({
children, children,
droppableProvided, droppableProvided,
@ -35,13 +41,13 @@ const BoardColumnCardsContainer = ({
droppableProvided: DroppableProvided; droppableProvided: DroppableProvided;
}) => { }) => {
return ( return (
<div <StyledColumnCardsContainer
ref={droppableProvided?.innerRef} ref={droppableProvided?.innerRef}
{...droppableProvided?.droppableProps} {...droppableProvided?.droppableProps}
> >
{children} {children}
<StyledPlaceholder>{droppableProvided?.placeholder}</StyledPlaceholder> <StyledPlaceholder>{droppableProvided?.placeholder}</StyledPlaceholder>
</div> </StyledColumnCardsContainer>
); );
}; };
@ -112,10 +118,22 @@ export function EntityBoardColumn({
/> />
</RecoilScope> </RecoilScope>
))} ))}
<Draggable
draggableId={`new-${column.pipelineStageId}`}
index={column.pipelineProgressIds.length}
>
{(draggableProvided) => (
<div
ref={draggableProvided?.innerRef}
{...draggableProvided?.draggableProps}
>
<StyledNewCardButtonContainer>
<RecoilScope>{boardOptions.newCardComponent}</RecoilScope>
</StyledNewCardButtonContainer>
</div>
)}
</Draggable>
</BoardColumnCardsContainer> </BoardColumnCardsContainer>
<StyledNewCardButtonContainer>
<RecoilScope>{boardOptions.newCardComponent}</RecoilScope>
</StyledNewCardButtonContainer>
</BoardColumn> </BoardColumn>
)} )}
</Droppable> </Droppable>

1
front/src/modules/ui/board/components/Board.tsx
View File

@ -6,7 +6,6 @@ export const StyledBoard = styled.div`
display: flex; display: flex;
flex: 1; flex: 1;
flex-direction: row; flex-direction: row;
overflow-x: auto;
padding-left: ${({ theme }) => theme.spacing(2)}; padding-left: ${({ theme }) => theme.spacing(2)};
`; `;