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

feat: add Opportunities Views dropdown (#1503)

Browse Source 
* feat: add Opportunities Views dropdown

Closes #1454

* feat: persist Opportunities view filters and sorts

Closes #1456

* feat: create/edit/delete Opportunities views

Closes #1455, Closes #1457

* fix: add missing Opportunities view mock

---------

Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>
This commit is contained in:
Thaïs
2023-09-11 04:07:14 +02:00
committed by GitHub
parent 8ea4e6a51c
commit 88c6d0da2a
14 changed files with 408 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
front/src/modules/ui/board/components/BoardHeader.tsx
View File

@ -1,50 +1,52 @@
import type { ComponentProps, Context, ReactNode } from 'react';
import styled from '@emotion/styled';
import { type ComponentProps, useCallback } from 'react';
import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
import { TopBar } from '@/ui/top-bar/TopBar';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { FilterDropdownButton } from '@/ui/view-bar/components/FilterDropdownButton';
import { SortDropdownButton } from '@/ui/view-bar/components/SortDropdownButton';
import ViewBarDetails from '@/ui/view-bar/components/ViewBarDetails';
import { FiltersHotkeyScope } from '@/ui/view-bar/types/FiltersHotkeyScope';
import { SortType } from '@/ui/view-bar/types/interface';
import { ViewBar, type ViewBarProps } from '@/ui/view-bar/components/ViewBar';
import type { BoardColumnDefinition } from '../types/BoardColumnDefinition';
import { BoardOptionsDropdownKey } from '../types/BoardOptionsDropdownKey';
import { BoardOptionsHotkeyScope } from '../types/BoardOptionsHotkeyScope';
import { BoardOptionsDropdown } from './BoardOptionsDropdown';
type OwnProps<SortField> = ComponentProps<'div'> & {
viewName: string;
viewIcon?: ReactNode;
availableSorts?: Array<SortType<SortField>>;
export type BoardHeaderProps<SortField> = ComponentProps<'div'> & {
onStageAdd?: (boardColumn: BoardColumnDefinition) => void;
context: Context<string | null>;
};
const StyledIcon = styled.div`
display: flex;
margin-left: ${({ theme }) => theme.spacing(1)};
margin-right: ${({ theme }) => theme.spacing(2)};
& > svg {
font-size: ${({ theme }) => theme.icon.size.sm};
}
`;
} & Pick<
ViewBarProps<SortField>,
| 'availableSorts'
| 'defaultViewName'
| 'onViewsChange'
| 'onViewSubmit'
| 'scopeContext'
>;
export function BoardHeader<SortField>({
viewName,
viewIcon,
availableSorts,
onStageAdd,
context,
onViewsChange,
scopeContext,
...props
}: OwnProps<SortField>) {
}: BoardHeaderProps<SortField>) {
const OptionsDropdownButton = useCallback(
() => (
<BoardOptionsDropdown
customHotkeyScope={{ scope: BoardOptionsHotkeyScope.Dropdown }}
onStageAdd={onStageAdd}
onViewsChange={onViewsChange}
scopeContext={scopeContext}
/>
),
[onStageAdd, onViewsChange, scopeContext],
);
return (
<RecoilScope SpecificContext={DropdownRecoilScopeContext}>
<TopBar
<ViewBar
{...props}
onViewsChange={onViewsChange}
optionsDropdownKey={BoardOptionsDropdownKey}
OptionsDropdownButton={OptionsDropdownButton}
scopeContext={scopeContext}
displayBottomBorder={false}
leftComponent={
<>