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

feat: add board options dropdown and pipeline stage creation (#1399)

Browse Source 
* feat: add board options dropdown and pipeline stage creation

Closes #1395

* refactor: code review

- remove useCallback
This commit is contained in:
Thaïs
2023-09-04 11:37:31 +02:00
committed by GitHub
parent 2ac32e42c5
commit f29d843db9
14 changed files with 351 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,18 +1,26 @@
import { Context, ReactNode, useCallback, useState } from 'react';
import styled from '@emotion/styled';
import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
import { FilterDropdownButton } from '@/ui/filter-n-sort/components/FilterDropdownButton';
import SortAndFilterBar from '@/ui/filter-n-sort/components/SortAndFilterBar';
import { SortDropdownButton } from '@/ui/filter-n-sort/components/SortDropdownButton';
import { FiltersHotkeyScope } from '@/ui/filter-n-sort/types/FiltersHotkeyScope';
import { SelectedSortType, SortType } from '@/ui/filter-n-sort/types/interface';
import { TopBar } from '@/ui/top-bar/TopBar';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import type { BoardColumnDefinition } from '../types/BoardColumnDefinition';
import { BoardOptionsHotkeyScope } from '../types/BoardOptionsHotkeyScope';
import { BoardOptionsDropdown } from './BoardOptionsDropdown';
type OwnProps<SortField> = {
viewName: string;
viewIcon?: ReactNode;
availableSorts?: Array<SortType<SortField>>;
onSortsUpdate?: (sorts: Array<SelectedSortType<SortField>>) => void;
onStageAdd?: (boardColumn: BoardColumnDefinition) => void;
context: Context<string | null>;
};
@ -31,6 +39,7 @@ export function BoardHeader<SortField>({
viewIcon,
availableSorts,
onSortsUpdate,
onStageAdd,
context,
}: OwnProps<SortField>) {
const [sorts, innerSetSorts] = useState<Array<SelectedSortType<SortField>>>(
@ -56,41 +65,47 @@ export function BoardHeader<SortField>({
);
return (
<TopBar
displayBottomBorder={false}
leftComponent={
<>
<StyledIcon>{viewIcon}</StyledIcon>
{viewName}
</>
}
rightComponent={
<>
<FilterDropdownButton
<RecoilScope SpecificContext={DropdownRecoilScopeContext}>
<TopBar
displayBottomBorder={false}
leftComponent={
<>
<StyledIcon>{viewIcon}</StyledIcon>
{viewName}
</>
}
rightComponent={
<>
<FilterDropdownButton
context={context}
HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
/>
<SortDropdownButton<SortField>
context={context}
isSortSelected={sorts.length > 0}
availableSorts={availableSorts || []}
onSortSelect={sortSelect}
HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
/>
<BoardOptionsDropdown
customHotkeyScope={{ scope: BoardOptionsHotkeyScope.Dropdown }}
onStageAdd={onStageAdd}
/>
</>
}
bottomComponent={
<SortAndFilterBar
context={context}
HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
sorts={sorts}
onRemoveSort={sortUnselect}
onCancelClick={() => {
innerSetSorts([]);
onSortsUpdate?.([]);
}}
/>
<SortDropdownButton<SortField>
context={context}
isSortSelected={sorts.length > 0}
availableSorts={availableSorts || []}
onSortSelect={sortSelect}
HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
/>
</>
}
bottomComponent={
<SortAndFilterBar
context={context}
sorts={sorts}
onRemoveSort={sortUnselect}
onCancelClick={() => {
innerSetSorts([]);
onSortsUpdate && onSortsUpdate([]);
}}
/>
}
/>
}
/>
</RecoilScope>
);
}

26
front/src/modules/ui/board/components/BoardOptionsDropdown.tsx
View File

@ -1,14 +1,32 @@
import { DropdownButton } from '@/ui/dropdown/components/DropdownButton';
import type { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { BoardColumnDefinition } from '../types/BoardColumnDefinition';
import { BoardOptionsDropdownKey } from '../types/BoardOptionsDropdownKey';
import { BoardOptionsDropdownButton } from './BoardOptionsDropdownButton';
import { BoardOptionsDropdownContent } from './BoardOptionsDropdownContent';
export function BoardOptionsDropdown() {
type BoardOptionsDropdownProps = {
customHotkeyScope: HotkeyScope;
onStageAdd?: (boardColumn: BoardColumnDefinition) => void;
};
export function BoardOptionsDropdown({
customHotkeyScope,
onStageAdd,
}: BoardOptionsDropdownProps) {
return (
<DropdownButton
dropdownKey="options"
buttonComponents={<BoardOptionsDropdownButton />}
dropdownComponents={<BoardOptionsDropdownContent />}
></DropdownButton>
dropdownComponents={
<BoardOptionsDropdownContent
customHotkeyScope={customHotkeyScope}
onStageAdd={onStageAdd}
/>
}
dropdownHotkeyScope={customHotkeyScope}
dropdownKey={BoardOptionsDropdownKey}
/>
);
}

4
front/src/modules/ui/board/components/BoardOptionsDropdownButton.tsx
View File

@ -1,9 +1,11 @@
import { StyledHeaderDropdownButton } from '@/ui/dropdown/components/StyledHeaderDropdownButton';
import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
import { BoardOptionsDropdownKey } from '../types/BoardOptionsDropdownKey';
export function BoardOptionsDropdownButton() {
const { isDropdownButtonOpen, toggleDropdownButton } = useDropdownButton({
key: 'options',
key: BoardOptionsDropdownKey,
});
function handleClick() {

155
front/src/modules/ui/board/components/BoardOptionsDropdownContent.tsx
View File

@ -1,54 +1,153 @@
import { useState } from 'react';
import { useRef, useState } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { Key } from 'ts-key-enum';
import { v4 } from 'uuid';
import { DropdownMenuHeader } from '@/ui/dropdown/components/DropdownMenuHeader';
import { DropdownMenuInput } from '@/ui/dropdown/components/DropdownMenuInput';
import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
import { IconChevronLeft } from '@/ui/icon';
import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
import {
IconChevronLeft,
IconChevronRight,
IconLayoutKanban,
IconPlus,
IconSettings,
} from '@/ui/icon';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
type BoardOptionsDropdownMenu = 'options' | 'fields';
import { boardColumnsState } from '../states/boardColumnsState';
import type { BoardColumnDefinition } from '../types/BoardColumnDefinition';
import { BoardOptionsDropdownKey } from '../types/BoardOptionsDropdownKey';
export function BoardOptionsDropdownContent() {
type BoardOptionsDropdownContentProps = {
customHotkeyScope: HotkeyScope;
onStageAdd?: (boardColumn: BoardColumnDefinition) => void;
};
const StyledIconSettings = styled(IconSettings)`
margin-right: ${({ theme }) => theme.spacing(1)};
`;
const StyledIconChevronRight = styled(IconChevronRight)`
color: ${({ theme }) => theme.font.color.tertiary};
margin-left: auto;
`;
enum BoardOptionsMenu {
StageCreation = 'StageCreation',
Stages = 'Stages',
}
export function BoardOptionsDropdownContent({
customHotkeyScope,
onStageAdd,
}: BoardOptionsDropdownContentProps) {
const theme = useTheme();
const [menuShown, setMenuShown] =
useState<BoardOptionsDropdownMenu>('options');
const stageInputRef = useRef<HTMLInputElement>(null);
function handleFieldsClick() {
setMenuShown('fields');
}
const [currentMenu, setCurrentMenu] = useState<
BoardOptionsMenu | undefined
>();
function handleMenuHeaderClick() {
setMenuShown('options');
}
const [boardColumns, setBoardColumns] = useRecoilState(boardColumnsState);
const resetMenu = () => setCurrentMenu(undefined);
const handleStageSubmit = () => {
if (
currentMenu !== BoardOptionsMenu.StageCreation ||
!stageInputRef?.current?.value
)
return;
const columnToCreate = {
id: v4(),
colorCode: 'gray',
index: boardColumns.length,
title: stageInputRef.current.value,
};
setBoardColumns((previousBoardColumns) => [
...previousBoardColumns,
columnToCreate,
]);
onStageAdd?.(columnToCreate);
};
const { closeDropdownButton } = useDropdownButton({
key: BoardOptionsDropdownKey,
});
useScopedHotkeys(
Key.Escape,
() => {
closeDropdownButton();
},
customHotkeyScope.scope,
);
useScopedHotkeys(
Key.Enter,
() => {
handleStageSubmit();
closeDropdownButton();
},
customHotkeyScope.scope,
);
return (
<StyledDropdownMenu>
{menuShown === 'options' ? (
{!currentMenu && (
<>
<DropdownMenuHeader>Options</DropdownMenuHeader>
<DropdownMenuHeader>
<StyledIconSettings size={theme.icon.size.md} />
Settings
</DropdownMenuHeader>
<StyledDropdownMenuSeparator />
<StyledDropdownMenuItemsContainer>
<DropdownMenuItem onClick={handleFieldsClick}>
Fields
<DropdownMenuItem
onClick={() => setCurrentMenu(BoardOptionsMenu.Stages)}
>
<IconLayoutKanban size={theme.icon.size.md} />
Stages
<StyledIconChevronRight size={theme.icon.size.sm} />
</DropdownMenuItem>
</StyledDropdownMenuItemsContainer>
</>
) : (
menuShown === 'fields' && (
<>
<DropdownMenuHeader
startIcon={<IconChevronLeft size={theme.icon.size.md} />}
onClick={handleMenuHeaderClick}
)}
{currentMenu === BoardOptionsMenu.Stages && (
<>
<DropdownMenuHeader
startIcon={<IconChevronLeft size={theme.icon.size.md} />}
onClick={resetMenu}
>
Stages
</DropdownMenuHeader>
<StyledDropdownMenuSeparator />
<StyledDropdownMenuItemsContainer>
<DropdownMenuItem
onClick={() => setCurrentMenu(BoardOptionsMenu.StageCreation)}
>
Fields
</DropdownMenuHeader>
<StyledDropdownMenuSeparator />
{}
</>
)
<IconPlus size={theme.icon.size.md} />
Add stage
</DropdownMenuItem>
</StyledDropdownMenuItemsContainer>
</>
)}
{currentMenu === BoardOptionsMenu.StageCreation && (
<DropdownMenuInput
autoFocus
placeholder="New stage"
ref={stageInputRef}
/>
)}
</StyledDropdownMenu>
);

4
front/src/modules/ui/board/components/EntityBoard.tsx
View File

@ -30,6 +30,7 @@ import { useSetCardSelected } from '../hooks/useSetCardSelected';
import { useUpdateBoardCardIds } from '../hooks/useUpdateBoardCardIds';
import { boardColumnsState } from '../states/boardColumnsState';
import { BoardColumnRecoilScopeContext } from '../states/recoil-scope-contexts/BoardColumnRecoilScopeContext';
import type { BoardColumnDefinition } from '../types/BoardColumnDefinition';
import { BoardOptions } from '../types/BoardOptions';
import { EntityBoardColumn } from './EntityBoardColumn';
@ -44,12 +45,14 @@ export function EntityBoard({
boardOptions,
updateSorts,
onEditColumnTitle,
onStageAdd,
}: {
boardOptions: BoardOptions;
updateSorts: (
sorts: Array<SelectedSortType<PipelineProgressOrderByWithRelationInput>>,
) => void;
onEditColumnTitle: (columnId: string, title: string, color: string) => void;
onStageAdd?: (boardColumn: BoardColumnDefinition) => void;
}) {
const [boardColumns] = useRecoilState(boardColumnsState);
const setCardSelected = useSetCardSelected();
@ -130,6 +133,7 @@ export function EntityBoard({
viewIcon={<IconList size={theme.icon.size.md} />}
availableSorts={boardOptions.sorts}
onSortsUpdate={updateSorts}
onStageAdd={onStageAdd}
context={CompanyBoardRecoilScopeContext}
/>
<ScrollWrapper>

1
front/src/modules/ui/board/types/BoardOptionsDropdownKey.ts Normal file
View File

@ -0,0 +1 @@
export const BoardOptionsDropdownKey = 'board-options';

3
front/src/modules/ui/board/types/BoardOptionsHotkeyScope.ts Normal file
View File

@ -0,0 +1,3 @@
export enum BoardOptionsHotkeyScope {
Dropdown = 'board-options-dropdown',
}

1
front/src/modules/ui/icon/index.ts
View File

@ -41,6 +41,7 @@ export {
IconHeart,
IconHelpCircle,
IconInbox,
IconLayoutKanban,
IconLayoutSidebarLeftCollapse,
IconLayoutSidebarRightCollapse,
IconLayoutSidebarRightExpand,