diff --git a/front/src/modules/ui/table/components/ColumnHead.tsx b/front/src/modules/ui/table/components/ColumnHead.tsx index 081b2c721..3685093e7 100644 --- a/front/src/modules/ui/table/components/ColumnHead.tsx +++ b/front/src/modules/ui/table/components/ColumnHead.tsx @@ -12,6 +12,7 @@ type OwnProps = { column: ColumnDefinition; isFirstColumn: boolean; isLastColumn: boolean; + primaryColumnKey: string; }; const StyledTitle = styled.div` @@ -44,6 +45,7 @@ export const ColumnHead = ({ column, isFirstColumn, isLastColumn, + primaryColumnKey, }: OwnProps) => { const theme = useTheme(); @@ -63,6 +65,7 @@ export const ColumnHead = ({ column={column} isFirstColumn={isFirstColumn} isLastColumn={isLastColumn} + primaryColumnKey={primaryColumnKey} /> ); diff --git a/front/src/modules/ui/table/components/EntityTableHeader.tsx b/front/src/modules/ui/table/components/EntityTableHeader.tsx index 040d30196..2528afc5b 100644 --- a/front/src/modules/ui/table/components/EntityTableHeader.tsx +++ b/front/src/modules/ui/table/components/EntityTableHeader.tsx @@ -158,6 +158,8 @@ export const EntityTableHeader = () => { setIsColumnMenuOpen((previousValue) => !previousValue); }, []); + const primaryColumn = visibleTableColumns[0]; + return ( @@ -183,8 +185,9 @@ export const EntityTableHeader = () => { > ; - isFirstColumn: boolean; - isLastColumn: boolean; -}; + export const EntityTableHeaderOptions = ({ column, isFirstColumn, isLastColumn, + primaryColumnKey, }: EntityTableHeaderOptionsProps) => { - const { - handleColumnVisibilityChange, - handleColumnLeftMove, - handleColumnRightMove, - } = useTableColumns(); - - const { closeDropdownButton } = useDropdownButton({ - dropdownId: column.key + '-header', - }); - - const handleColumnMoveLeft = () => { - closeDropdownButton(); - if (isFirstColumn) { - return; - } - handleColumnLeftMove(column); - }; - - const handleColumnMoveRight = () => { - closeDropdownButton(); - if (isLastColumn) { - return; - } - handleColumnRightMove(column); - }; - - const handleColumnVisibility = () => { - handleColumnVisibilityChange(column); - }; - return ( - - - - - - + } dropdownHotkeyScope={{ scope: column.key + '-header' }} /> diff --git a/front/src/modules/ui/table/components/TableColumnDropdownMenu.tsx b/front/src/modules/ui/table/components/TableColumnDropdownMenu.tsx new file mode 100644 index 000000000..c11a1cf15 --- /dev/null +++ b/front/src/modules/ui/table/components/TableColumnDropdownMenu.tsx @@ -0,0 +1,82 @@ +import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu'; +import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer'; +import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton'; +import { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField'; +import { IconArrowLeft, IconArrowRight, IconEyeOff } from '@/ui/icon'; +import { MenuItem } from '@/ui/menu-item/components/MenuItem'; + +import { ColumnHeadDropdownId } from '../constants/ColumnHeadDropdownId'; +import { useTableColumns } from '../hooks/useTableColumns'; +import { ColumnDefinition } from '../types/ColumnDefinition'; + +export type EntityTableHeaderOptionsProps = { + column: ColumnDefinition; + isFirstColumn: boolean; + isLastColumn: boolean; + primaryColumnKey: string; +}; + +export const TableColumnDropdownMenu = ({ + column, + isFirstColumn, + isLastColumn, + primaryColumnKey, +}: EntityTableHeaderOptionsProps) => { + const { + handleColumnVisibilityChange, + handleColumnLeftMove, + handleColumnRightMove, + } = useTableColumns(); + + const { closeDropdownButton } = useDropdownButton({ + dropdownId: ColumnHeadDropdownId, + }); + + const handleColumnMoveLeft = () => { + closeDropdownButton(); + if (isFirstColumn) { + return; + } + handleColumnLeftMove(column); + }; + + const handleColumnMoveRight = () => { + closeDropdownButton(); + if (isLastColumn) { + return; + } + handleColumnRightMove(column); + }; + + const handleColumnVisibility = () => { + handleColumnVisibilityChange(column); + }; + + return column.key === primaryColumnKey ? ( + <> + ) : ( + + + {!isFirstColumn && ( + + )} + {!isLastColumn && ( + + )} + + + + ); +}; diff --git a/front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx b/front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx index 973a49734..fea09c1ff 100644 --- a/front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx +++ b/front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx @@ -95,7 +95,7 @@ export const TableOptionsDropdownContent = () => { const handleReorderField: OnDragEndResponder = useCallback( (result) => { - if (!result.destination) { + if (!result.destination || result.destination.index === 0) { return; } diff --git a/front/src/modules/ui/view-bar/components/ViewFieldsVisibilityDropdownSection.tsx b/front/src/modules/ui/view-bar/components/ViewFieldsVisibilityDropdownSection.tsx index e11b72e4b..77d7b9113 100644 --- a/front/src/modules/ui/view-bar/components/ViewFieldsVisibilityDropdownSection.tsx +++ b/front/src/modules/ui/view-bar/components/ViewFieldsVisibilityDropdownSection.tsx @@ -41,6 +41,18 @@ export const ViewFieldsVisibilityDropdownSection = < const handleOnDrag = (result: DropResult, provided: ResponderProvided) => { onDragEnd?.(result, provided); }; + + const getIconButtons = (index: number, field: Field) => { + if (index !== 0) { + return [ + { + Icon: field.isVisible ? IconMinus : IconPlus, + onClick: () => onVisibilityChange(field), + }, + ]; + } + }; + return ( <> {title} @@ -56,6 +68,7 @@ export const ViewFieldsVisibilityDropdownSection = < key={field.key} draggableId={field.key} index={index} + isDragDisabled={index === 0} > {(draggableProvided) => { const draggableStyle = @@ -79,17 +92,10 @@ export const ViewFieldsVisibilityDropdownSection = < {...draggableProvided.dragHandleProps} > onVisibilityChange(field), - }, - ]} + iconButtons={getIconButtons(index, field)} text={field.name} />