admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Feature/filter and sort board (#725)

Browse Source 
* Get pipeline progress from stage IDs

* Rename hooks file

* Addd first amount filter

* Add remaining filters

* Design fixes

* Add filtering on creation date or amount

* Fix card updates and creations with the new state management

* Keep ordering when dropping a card

* Add remainint sorts

* Make board header more generic

* Move available filters and sorts to board options

* Fix decorators for test

* Add pipeline stage ids to mock data

* Adapt mock data

* Linter
This commit is contained in:
Emilien Chauvet
2023-07-17 19:32:47 -07:00
committed by GitHub
parent 9895c1d5d6
commit 6301bc2fbf
19 changed files with 784 additions and 413 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
front/src/modules/pipeline/components/EntityBoard.tsx
View File

@ -1,10 +1,18 @@
import { useCallback } from 'react';
import { getOperationName } from '@apollo/client/utilities';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { DragDropContext, OnDragEndResponder } from '@hello-pangea/dnd'; // Atlassian dnd does not support StrictMode from RN 18, so we use a fork @hello-pangea/dnd https://github.com/atlassian/react-beautiful-dnd/issues/2350
import { IconList } from '@tabler/icons-react';
import { useRecoilState } from 'recoil';
import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext';
import { BoardHeader } from '@/ui/board/components/BoardHeader';
import { SelectedSortType } from '@/ui/filter-n-sort/types/interface';
import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
import {
PipelineProgress,
PipelineProgressOrderByWithRelationInput,
PipelineStage,
useUpdateOnePipelineProgressStageMutation,
} from '~/generated/graphql';
@ -13,14 +21,31 @@ import {
getOptimisticlyUpdatedBoard,
StyledBoard,
} from '../../ui/board/components/Board';
import { GET_PIPELINE_PROGRESS } from '../queries';
import { BoardColumnContext } from '../states/BoardColumnContext';
import { boardState } from '../states/boardState';
import { BoardOptions } from '../types/BoardOptions';
import { EntityBoardColumn } from './EntityBoardColumn';
export function EntityBoard({ boardOptions }: { boardOptions: BoardOptions }) {
const StyledBoardWithHeader = styled.div`
display: flex;
flex: 1;
flex-direction: column;
width: 100%;
`;
export function EntityBoard({
boardOptions,
updateSorts,
}: {
boardOptions: BoardOptions;
updateSorts: (
sorts: Array<SelectedSortType<PipelineProgressOrderByWithRelationInput>>,
) => void;
}) {
const [board, setBoard] = useRecoilState(boardState);
const theme = useTheme();
const [updatePipelineProgressStage] =
useUpdateOnePipelineProgressStageMutation();
@ -34,6 +59,7 @@ export function EntityBoard({ boardOptions }: { boardOptions: BoardOptions }) {
id: pipelineProgressId,
pipelineStageId,
},
refetchQueries: [getOperationName(GET_PIPELINE_PROGRESS) ?? ''],
});
},
[updatePipelineProgressStage],
@ -69,18 +95,27 @@ export function EntityBoard({ boardOptions }: { boardOptions: BoardOptions }) {
: [];
return (board?.length ?? 0) > 0 ? (
<StyledBoard>
<DragDropContext onDragEnd={onDragEnd}>
{sortedBoard.map((column) => (
<RecoilScope
SpecificContext={BoardColumnContext}
key={column.pipelineStageId}
>
<EntityBoardColumn boardOptions={boardOptions} column={column} />
</RecoilScope>
))}
</DragDropContext>
</StyledBoard>
<StyledBoardWithHeader>
<BoardHeader
viewName="All opportunities"
viewIcon={<IconList size={theme.icon.size.md} />}
availableSorts={boardOptions.sorts}
onSortsUpdate={updateSorts}
context={CompanyBoardContext}
/>
<StyledBoard>
<DragDropContext onDragEnd={onDragEnd}>
{sortedBoard.map((column) => (
<RecoilScope
SpecificContext={BoardColumnContext}
key={column.pipelineStageId}
>
<EntityBoardColumn boardOptions={boardOptions} column={column} />
</RecoilScope>
))}
</DragDropContext>
</StyledBoard>
</StyledBoardWithHeader>
) : (
<></>
);

26
front/src/modules/pipeline/queries/select.ts
View File

@ -1,5 +1,14 @@
import { gql } from '@apollo/client';
import { SelectedSortType } from '@/ui/filter-n-sort/types/interface';
import {
PipelineProgressOrderByWithRelationInput as PipelineProgresses_Order_By,
SortOrder as Order_By,
} from '~/generated/graphql';
export type PipelineProgressesSelectedSortType =
SelectedSortType<PipelineProgresses_Order_By>;
export const GET_PIPELINES = gql`
query GetPipelines($where: PipelineWhereInput) {
findManyPipeline(where: $where) {
@ -11,18 +20,19 @@ export const GET_PIPELINES = gql`
name
color
index
pipelineProgresses {
id
}
}
}
}
`;
export const GET_PIPELINE_PROGRESS = gql`
query GetPipelineProgress($where: PipelineProgressWhereInput) {
findManyPipelineProgress(where: $where, orderBy: { createdAt: asc }) {
query GetPipelineProgress(
$where: PipelineProgressWhereInput
$orderBy: [PipelineProgressOrderByWithRelationInput!]
) {
findManyPipelineProgress(where: $where, orderBy: $orderBy) {
id
pipelineStageId
progressableType
progressableId
amount
@ -83,3 +93,9 @@ export const ADD_ENTITY_TO_PIPELINE = gql`
}
}
`;
export const defaultPipelineProgressOrderBy: PipelineProgresses_Order_By[] = [
{
createdAt: Order_By.Asc,
},
];

7
front/src/modules/pipeline/types/BoardOptions.ts
View File

@ -1,4 +1,11 @@
import { FilterDefinitionByEntity } from '@/ui/filter-n-sort/types/FilterDefinitionByEntity';
import { SortType } from '@/ui/filter-n-sort/types/interface';
import { PipelineProgress } from '~/generated/graphql';
import { PipelineProgressOrderByWithRelationInput as PipelineProgresses_Order_By } from '~/generated/graphql';
export type BoardOptions = {
newCardComponent: React.ReactNode;
cardComponent: React.ReactNode;
filters: FilterDefinitionByEntity<PipelineProgress>[];
sorts: Array<SortType<PipelineProgresses_Order_By>>;
};