* 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
59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
import { useCallback, useState } from 'react';
|
|
import { useTheme } from '@emotion/react';
|
|
|
|
import { HooksCompanyBoard } from '@/companies/components/HooksCompanyBoard';
|
|
import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext';
|
|
import { BoardActionBarButtonDeletePipelineProgress } from '@/pipeline/components/BoardActionBarButtonDeletePipelineProgress';
|
|
import { EntityBoard } from '@/pipeline/components/EntityBoard';
|
|
import { EntityBoardActionBar } from '@/pipeline/components/EntityBoardActionBar';
|
|
import {
|
|
defaultPipelineProgressOrderBy,
|
|
PipelineProgressesSelectedSortType,
|
|
} from '@/pipeline/queries';
|
|
import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers';
|
|
import { IconTargetArrow } from '@/ui/icon/index';
|
|
import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
|
|
import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
|
|
import { PipelineProgressOrderByWithRelationInput } from '~/generated/graphql';
|
|
import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions';
|
|
|
|
export function Opportunities() {
|
|
const theme = useTheme();
|
|
|
|
const [orderBy, setOrderBy] = useState<
|
|
PipelineProgressOrderByWithRelationInput[]
|
|
>(defaultPipelineProgressOrderBy);
|
|
|
|
const updateSorts = useCallback(
|
|
(sorts: Array<PipelineProgressesSelectedSortType>) => {
|
|
setOrderBy(
|
|
sorts.length
|
|
? reduceSortsToOrderBy(sorts)
|
|
: defaultPipelineProgressOrderBy,
|
|
);
|
|
},
|
|
[],
|
|
);
|
|
|
|
return (
|
|
<WithTopBarContainer
|
|
title="Opportunities"
|
|
icon={<IconTargetArrow size={theme.icon.size.md} />}
|
|
>
|
|
<RecoilScope SpecificContext={CompanyBoardContext}>
|
|
<HooksCompanyBoard
|
|
availableFilters={opportunitiesBoardOptions.filters}
|
|
orderBy={orderBy}
|
|
/>
|
|
<EntityBoard
|
|
boardOptions={opportunitiesBoardOptions}
|
|
updateSorts={updateSorts}
|
|
/>
|
|
<EntityBoardActionBar>
|
|
<BoardActionBarButtonDeletePipelineProgress />
|
|
</EntityBoardActionBar>
|
|
</RecoilScope>
|
|
</WithTopBarContainer>
|
|
);
|
|
}
|