From 2e4f2d54aa4f1276586040462e6f5102ce751b39 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Tue, 30 Jan 2024 18:38:31 +0100 Subject: [PATCH] Refactor board and table options (#3700) * Refactor board and table options * Fix * Fix --- .../components/RecordBoardColumn.tsx | 1 - .../components/RecordIndexContainer.tsx | 30 +--- .../components/RecordIndexOptionsDropdown.tsx | 38 +++++ .../RecordIndexOptionsDropdownButton.tsx} | 6 +- .../RecordIndexOptionsDropdownContent.tsx} | 132 ++++++++------- .../RecordIndexBoardOptionsDropdownId.ts | 2 + .../constants/RecordIndexOptionsDropdownId.ts | 2 + .../hooks/useRecordIndexOptionsForBoard.ts | 156 ++++++++++++++++++ .../hooks/useRecordIndexOptionsForTable.ts | 44 +++++ .../hooks/useRecordIndexOptionsImport.ts | 23 +++ .../constants/TableOptionsDropdownId.ts | 2 - .../components/TableOptionsDropdown.tsx | 34 ---- .../SignInBackgroundMockContainer.tsx | 19 ++- 13 files changed, 358 insertions(+), 131 deletions(-) create mode 100644 packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdown.tsx rename packages/twenty-front/src/modules/object-record/{record-table/options/components/TableOptionsDropdownButton.tsx => record-index/options/components/RecordIndexOptionsDropdownButton.tsx} (64%) rename packages/twenty-front/src/modules/object-record/{record-table/options/components/TableOptionsDropdownContent.tsx => record-index/options/components/RecordIndexOptionsDropdownContent.tsx} (54%) create mode 100644 packages/twenty-front/src/modules/object-record/record-index/options/constants/RecordIndexBoardOptionsDropdownId.ts create mode 100644 packages/twenty-front/src/modules/object-record/record-index/options/constants/RecordIndexOptionsDropdownId.ts create mode 100644 packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsForBoard.ts create mode 100644 packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsForTable.ts create mode 100644 packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsImport.ts delete mode 100644 packages/twenty-front/src/modules/object-record/record-table/constants/TableOptionsDropdownId.ts delete mode 100644 packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdown.tsx diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumn.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumn.tsx index 769f261dd..70660329b 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumn.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumn.tsx @@ -14,7 +14,6 @@ const StyledColumn = styled.div<{ isFirstColumn: boolean }>` isFirstColumn ? 'none' : theme.border.color.light}; display: flex; flex-direction: column; - height: fit-content; max-width: 200px; min-width: 200px; diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx index 9c35cccad..1cbe6f6c5 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx @@ -2,7 +2,6 @@ import { useState } from 'react'; import styled from '@emotion/styled'; import { useSetRecoilState } from 'recoil'; -import { useSpreadsheetCompanyImport } from '@/companies/hooks/useSpreadsheetCompanyImport'; import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata'; import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural'; @@ -11,13 +10,12 @@ import { RecordIndexBoardContainerEffect } from '@/object-record/record-index/co import { RecordIndexTableContainer } from '@/object-record/record-index/components/RecordIndexTableContainer'; import { RecordIndexTableContainerEffect } from '@/object-record/record-index/components/RecordIndexTableContainerEffect'; import { RecordIndexViewBarEffect } from '@/object-record/record-index/components/RecordIndexViewBarEffect'; +import { RecordIndexOptionsDropdown } from '@/object-record/record-index/options/components/RecordIndexOptionsDropdown'; +import { RECORD_INDEX_OPTIONS_DROPDOWN_ID } from '@/object-record/record-index/options/constants/RecordIndexOptionsDropdownId'; import { recordIndexFieldDefinitionsState } from '@/object-record/record-index/states/recordIndexFieldDefinitionsState'; import { recordIndexFiltersState } from '@/object-record/record-index/states/recordIndexFiltersState'; import { recordIndexSortsState } from '@/object-record/record-index/states/recordIndexSortsState'; -import { TableOptionsDropdownId } from '@/object-record/record-table/constants/TableOptionsDropdownId'; import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; -import { TableOptionsDropdown } from '@/object-record/record-table/options/components/TableOptionsDropdown'; -import { useSpreadsheetPersonImport } from '@/people/hooks/useSpreadsheetPersonImport'; import { SpreadsheetImportProvider } from '@/spreadsheet-import/provider/components/SpreadsheetImportProvider'; import { ViewBar } from '@/views/components/ViewBar'; import { ViewType } from '@/views/types/ViewType'; @@ -66,37 +64,23 @@ export const RecordIndexContainer = ({ const setRecordIndexFilters = useSetRecoilState(recordIndexFiltersState); const setRecordIndexSorts = useSetRecoilState(recordIndexSortsState); - const { openPersonSpreadsheetImport } = useSpreadsheetPersonImport(); - const { openCompanySpreadsheetImport } = useSpreadsheetCompanyImport(); - const { setTableFilters, setTableSorts, setTableColumns } = useRecordTable({ recordTableId: recordIndexId, }); - const handleImport = () => { - const openImport = - objectNamePlural === 'companies' - ? openCompanySpreadsheetImport - : openPersonSpreadsheetImport; - openImport(); - }; - return ( } - optionsDropdownScopeId={TableOptionsDropdownId} + optionsDropdownScopeId={RECORD_INDEX_OPTIONS_DROPDOWN_ID} onViewFieldsChange={(viewFields) => { setTableColumns( mapViewFieldsToColumnDefinitions(viewFields, columnDefinitions), diff --git a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdown.tsx b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdown.tsx new file mode 100644 index 000000000..8d420f42c --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdown.tsx @@ -0,0 +1,38 @@ +import { RecordIndexOptionsDropdownButton } from '@/object-record/record-index/options/components/RecordIndexOptionsDropdownButton'; +import { RecordIndexOptionsDropdownContent } from '@/object-record/record-index/options/components/RecordIndexOptionsDropdownContent'; +import { RECORD_INDEX_OPTIONS_DROPDOWN_ID } from '@/object-record/record-index/options/constants/RecordIndexOptionsDropdownId'; +import { TableOptionsHotkeyScope } from '@/object-record/record-table/types/TableOptionsHotkeyScope'; +import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; +import { useViewBar } from '@/views/hooks/useViewBar'; +import { ViewType } from '@/views/types/ViewType'; + +type RecordIndexOptionsDropdownProps = { + viewType: ViewType; + objectNameSingular: string; + recordIndexId: string; +}; + +export const RecordIndexOptionsDropdown = ({ + recordIndexId, + objectNameSingular, + viewType, +}: RecordIndexOptionsDropdownProps) => { + const { setViewEditMode } = useViewBar(); + + return ( + } + dropdownHotkeyScope={{ scope: TableOptionsHotkeyScope.Dropdown }} + dropdownOffset={{ y: 8 }} + dropdownComponents={ + + } + onClickOutside={() => setViewEditMode('none')} + /> + ); +}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownButton.tsx similarity index 64% rename from packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdownButton.tsx rename to packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownButton.tsx index 11736f506..6c47f815f 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdownButton.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownButton.tsx @@ -1,10 +1,10 @@ -import { TableOptionsDropdownId } from '@/object-record/record-table/constants/TableOptionsDropdownId'; +import { RECORD_INDEX_OPTIONS_DROPDOWN_ID } from '@/object-record/record-index/options/constants/RecordIndexOptionsDropdownId'; import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -export const TableOptionsDropdownButton = () => { +export const RecordIndexOptionsDropdownButton = () => { const { isDropdownOpen, toggleDropdown } = useDropdown( - TableOptionsDropdownId, + RECORD_INDEX_OPTIONS_DROPDOWN_ID, ); return ( diff --git a/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdownContent.tsx b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx similarity index 54% rename from packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdownContent.tsx rename to packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx index 2cfe4c811..8d1308604 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdownContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx @@ -1,10 +1,12 @@ -import { useCallback, useRef, useState } from 'react'; -import { OnDragEndResponder } from '@hello-pangea/dnd'; +import { useRef, useState } from 'react'; import { useRecoilValue } from 'recoil'; import { Key } from 'ts-key-enum'; -import { TableOptionsDropdownId } from '@/object-record/record-table/constants/TableOptionsDropdownId'; -import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; +import { RECORD_INDEX_OPTIONS_DROPDOWN_ID } from '@/object-record/record-index/options/constants/RecordIndexOptionsDropdownId'; +import { useRecordIndexOptionsForBoard } from '@/object-record/record-index/options/hooks/useRecordIndexOptionsForBoard'; +import { useRecordIndexOptionsForTable } from '@/object-record/record-index/options/hooks/useRecordIndexOptionsForTable'; +import { useRecordIndexOptionsImport } from '@/object-record/record-index/options/hooks/useRecordIndexOptionsImport'; +import { TableOptionsHotkeyScope } from '@/object-record/record-table/types/TableOptionsHotkeyScope'; import { IconChevronLeft, IconFileImport, IconTag } from '@/ui/display/icon'; import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader'; import { DropdownMenuInput } from '@/ui/layout/dropdown/components/DropdownMenuInput'; @@ -16,69 +18,42 @@ import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFieldsVisibilityDropdownSection'; import { useViewScopedStates } from '@/views/hooks/internal/useViewScopedStates'; import { useViewBar } from '@/views/hooks/useViewBar'; +import { ViewType } from '@/views/types/ViewType'; -import { useTableColumns } from '../../hooks/useTableColumns'; -import { TableOptionsHotkeyScope } from '../../types/TableOptionsHotkeyScope'; +type RecordIndexOptionsMenu = 'fields'; -type TableOptionsMenu = 'fields'; +type RecordIndexOptionsDropdownContentProps = { + recordIndexId: string; + objectNameSingular: string; + viewType: ViewType; +}; -export const TableOptionsDropdownContent = ({ - onImport, - recordTableId, -}: { - onImport?: () => void; - recordTableId: string; -}) => { - const { setViewEditMode, handleViewNameSubmit } = useViewBar(); +export const RecordIndexOptionsDropdownContent = ({ + viewType, + recordIndexId, + objectNameSingular, +}: RecordIndexOptionsDropdownContentProps) => { + const { setViewEditMode, handleViewNameSubmit } = useViewBar({ + viewBarId: recordIndexId, + }); const { viewEditModeState, currentViewSelector } = useViewScopedStates(); const viewEditMode = useRecoilValue(viewEditModeState); const currentView = useRecoilValue(currentViewSelector); - const { closeDropdown } = useDropdown(TableOptionsDropdownId); + const { closeDropdown } = useDropdown(RECORD_INDEX_OPTIONS_DROPDOWN_ID); - const [currentMenu, setCurrentMenu] = useState( - undefined, - ); + const [currentMenu, setCurrentMenu] = useState< + RecordIndexOptionsMenu | undefined + >(undefined); + + const resetMenu = () => setCurrentMenu(undefined); const viewEditInputRef = useRef(null); - const { getHiddenTableColumnsSelector, getVisibleTableColumnsSelector } = - useRecordTableStates(recordTableId); - - const hiddenTableColumns = useRecoilValue(getHiddenTableColumnsSelector()); - const visibleTableColumns = useRecoilValue(getVisibleTableColumnsSelector()); - - const { handleColumnVisibilityChange, handleColumnReorder } = useTableColumns( - { recordTableId }, - ); - - const handleSelectMenu = (option: TableOptionsMenu) => { - const name = viewEditInputRef.current?.value; - handleViewNameSubmit(name); + const handleSelectMenu = (option: RecordIndexOptionsMenu) => { setCurrentMenu(option); }; - const handleReorderField: OnDragEndResponder = useCallback( - (result) => { - if ( - !result.destination || - result.destination.index === 1 || - result.source.index === 1 - ) { - return; - } - - const reorderFields = [...visibleTableColumns]; - const [removed] = reorderFields.splice(result.source.index - 1, 1); - reorderFields.splice(result.destination.index - 1, 0, removed); - - handleColumnReorder(reorderFields); - }, - [visibleTableColumns, handleColumnReorder], - ); - - const resetMenu = () => setCurrentMenu(undefined); - useScopedHotkeys( [Key.Escape], () => { @@ -99,6 +74,41 @@ export const TableOptionsDropdownContent = ({ TableOptionsHotkeyScope.Dropdown, ); + const { + handleColumnVisibilityChange, + handleReorderColumns, + visibleTableColumns, + hiddenTableColumns, + } = useRecordIndexOptionsForTable(recordIndexId); + + const { + visibleBoardFields, + hiddenBoardFields, + handleReorderBoardFields, + handleBoardFieldVisibilityChange, + } = useRecordIndexOptionsForBoard({ + objectNameSingular, + viewBarId: recordIndexId, + }); + + const visibleRecordFields = + viewType === ViewType.Kanban ? visibleBoardFields : visibleTableColumns; + + const hiddenRecordFields = + viewType === ViewType.Kanban ? hiddenBoardFields : hiddenTableColumns; + + const handleReorderFields = + viewType === ViewType.Kanban + ? handleReorderBoardFields + : handleReorderColumns; + + const handleChangeFieldVisibility = + viewType === ViewType.Kanban + ? handleBoardFieldVisibilityChange + : handleColumnVisibilityChange; + + const { handleImport } = useRecordIndexOptionsImport({ objectNameSingular }); + return ( <> {!currentMenu && ( @@ -122,9 +132,9 @@ export const TableOptionsDropdownContent = ({ LeftIcon={IconTag} text="Fields" /> - {onImport && ( + {handleImport && ( handleImport()} LeftIcon={IconFileImport} text="Import" /> @@ -140,20 +150,20 @@ export const TableOptionsDropdownContent = ({ - {hiddenTableColumns.length > 0 && ( + {hiddenRecordFields.length > 0 && ( <> diff --git a/packages/twenty-front/src/modules/object-record/record-index/options/constants/RecordIndexBoardOptionsDropdownId.ts b/packages/twenty-front/src/modules/object-record/record-index/options/constants/RecordIndexBoardOptionsDropdownId.ts new file mode 100644 index 000000000..2ccb636a1 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-index/options/constants/RecordIndexBoardOptionsDropdownId.ts @@ -0,0 +1,2 @@ +export const RECORD_INDEX_BOARD_OPTIONS_DROPDOWN_ID = + 'record-index-table-options-dropdown-id'; diff --git a/packages/twenty-front/src/modules/object-record/record-index/options/constants/RecordIndexOptionsDropdownId.ts b/packages/twenty-front/src/modules/object-record/record-index/options/constants/RecordIndexOptionsDropdownId.ts new file mode 100644 index 000000000..ec21fa258 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-index/options/constants/RecordIndexOptionsDropdownId.ts @@ -0,0 +1,2 @@ +export const RECORD_INDEX_OPTIONS_DROPDOWN_ID = + 'record-index-options-dropdown-id'; diff --git a/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsForBoard.ts b/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsForBoard.ts new file mode 100644 index 000000000..040403db7 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsForBoard.ts @@ -0,0 +1,156 @@ +import { useCallback, useMemo } from 'react'; +import { OnDragEndResponder } from '@hello-pangea/dnd'; +import { useRecoilState } from 'recoil'; + +import { mapBoardFieldDefinitionsToViewFields } from '@/companies/utils/mapBoardFieldDefinitionsToViewFields'; +import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata'; +import { useObjectMetadataItemOnly } from '@/object-metadata/hooks/useObjectMetadataItemOnly'; +import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; +import { recordIndexFieldDefinitionsState } from '@/object-record/record-index/states/recordIndexFieldDefinitionsState'; +import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition'; +import { useViewFields } from '@/views/hooks/internal/useViewFields'; + +type useRecordIndexOptionsForBoardParams = { + objectNameSingular: string; + viewBarId: string; +}; + +export const useRecordIndexOptionsForBoard = ({ + objectNameSingular, + viewBarId, +}: useRecordIndexOptionsForBoardParams) => { + const [recordIndexFieldDefinitions, setRecordIndexFieldDefinitions] = + useRecoilState(recordIndexFieldDefinitionsState); + + const { persistViewFields } = useViewFields(viewBarId); + + const { objectMetadataItem } = useObjectMetadataItemOnly({ + objectNameSingular, + }); + + const { columnDefinitions } = + useColumnDefinitionsFromFieldMetadata(objectMetadataItem); + + const visibleBoardFields = useMemo( + () => + columnDefinitions.filter((columnDefinition) => { + return recordIndexFieldDefinitions.some( + (existingRecordFieldDefinition) => { + return ( + columnDefinition.fieldMetadataId === + existingRecordFieldDefinition.fieldMetadataId && + existingRecordFieldDefinition.isVisible + ); + }, + ); + }), + [columnDefinitions, recordIndexFieldDefinitions], + ); + + const hiddenBoardFields = useMemo( + () => + columnDefinitions.filter((columnDefinition) => { + return !recordIndexFieldDefinitions.some( + (existingRecordFieldDefinition) => { + return ( + columnDefinition.fieldMetadataId === + existingRecordFieldDefinition.fieldMetadataId && + existingRecordFieldDefinition.isVisible + ); + }, + ); + }), + [columnDefinitions, recordIndexFieldDefinitions], + ); + + const handleReorderBoardFields: OnDragEndResponder = useCallback( + (result) => { + if ( + !result.destination || + result.destination.index === 1 || + result.source.index === 1 + ) { + return; + } + + const reorderFields = [...recordIndexFieldDefinitions]; + const [removed] = reorderFields.splice(result.source.index - 1, 1); + reorderFields.splice(result.destination.index - 1, 0, removed); + + const updatedFields = reorderFields.map((field, index) => ({ + ...field, + position: index, + })); + + setRecordIndexFieldDefinitions(updatedFields); + persistViewFields(mapBoardFieldDefinitionsToViewFields(updatedFields)); + }, + [ + persistViewFields, + recordIndexFieldDefinitions, + setRecordIndexFieldDefinitions, + ], + ); + + // Todo : this seems over complex and should at least be extracted to an util with unit test. + // Let's refactor this as we introduce the new viewBar + const handleBoardFieldVisibilityChange = useCallback( + async ( + updatedFieldDefinition: Omit< + ColumnDefinition, + 'size' | 'position' + >, + ) => { + const isNewViewField = !recordIndexFieldDefinitions.some( + (fieldDefinition) => + fieldDefinition.fieldMetadataId === + updatedFieldDefinition.fieldMetadataId, + ); + + let updatedFieldsDefinitions: ColumnDefinition[]; + + if (isNewViewField) { + const correspondingFieldDefinition = columnDefinitions.find( + (availableTableColumn) => + availableTableColumn.fieldMetadataId === + updatedFieldDefinition.fieldMetadataId, + ); + if (!correspondingFieldDefinition) return; + + updatedFieldsDefinitions = [ + ...recordIndexFieldDefinitions, + { ...correspondingFieldDefinition, isVisible: true }, + ]; + } else { + updatedFieldsDefinitions = recordIndexFieldDefinitions.map( + (exitingFieldDefinition) => + exitingFieldDefinition.fieldMetadataId === + updatedFieldDefinition.fieldMetadataId + ? { + ...exitingFieldDefinition, + isVisible: !updatedFieldDefinition.isVisible, + } + : exitingFieldDefinition, + ); + } + + setRecordIndexFieldDefinitions(updatedFieldsDefinitions); + persistViewFields( + mapBoardFieldDefinitionsToViewFields(updatedFieldsDefinitions), + ); + }, + [ + recordIndexFieldDefinitions, + setRecordIndexFieldDefinitions, + persistViewFields, + columnDefinitions, + ], + ); + + return { + handleReorderBoardFields, + handleBoardFieldVisibilityChange, + visibleBoardFields, + hiddenBoardFields, + }; +}; diff --git a/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsForTable.ts b/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsForTable.ts new file mode 100644 index 000000000..f095e5ca1 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsForTable.ts @@ -0,0 +1,44 @@ +import { useCallback } from 'react'; +import { OnDragEndResponder } from '@hello-pangea/dnd'; +import { useRecoilValue } from 'recoil'; + +import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; +import { useTableColumns } from '@/object-record/record-table/hooks/useTableColumns'; + +export const useRecordIndexOptionsForTable = (recordTableId: string) => { + const { getHiddenTableColumnsSelector, getVisibleTableColumnsSelector } = + useRecordTableStates(recordTableId); + + const hiddenTableColumns = useRecoilValue(getHiddenTableColumnsSelector()); + const visibleTableColumns = useRecoilValue(getVisibleTableColumnsSelector()); + + const { handleColumnVisibilityChange, handleColumnReorder } = useTableColumns( + { recordTableId: recordTableId }, + ); + + const handleReorderColumns: OnDragEndResponder = useCallback( + (result) => { + if ( + !result.destination || + result.destination.index === 1 || + result.source.index === 1 + ) { + return; + } + + const reorderFields = [...visibleTableColumns]; + const [removed] = reorderFields.splice(result.source.index - 1, 1); + reorderFields.splice(result.destination.index - 1, 0, removed); + + handleColumnReorder(reorderFields); + }, + [visibleTableColumns, handleColumnReorder], + ); + + return { + handleReorderColumns, + handleColumnVisibilityChange, + visibleTableColumns, + hiddenTableColumns, + }; +}; diff --git a/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsImport.ts b/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsImport.ts new file mode 100644 index 000000000..6acb8b376 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsImport.ts @@ -0,0 +1,23 @@ +import { useSpreadsheetCompanyImport } from '@/companies/hooks/useSpreadsheetCompanyImport'; +import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; +import { useSpreadsheetPersonImport } from '@/people/hooks/useSpreadsheetPersonImport'; + +type useRecordIndexOptionsImportParams = { + objectNameSingular: string; +}; + +export const useRecordIndexOptionsImport = ({ + objectNameSingular, +}: useRecordIndexOptionsImportParams) => { + const { openPersonSpreadsheetImport } = useSpreadsheetPersonImport(); + const { openCompanySpreadsheetImport } = useSpreadsheetCompanyImport(); + + const handleImport = + CoreObjectNameSingular.Company === objectNameSingular + ? openCompanySpreadsheetImport + : CoreObjectNameSingular.Person === objectNameSingular + ? openPersonSpreadsheetImport + : undefined; + + return { handleImport }; +}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/constants/TableOptionsDropdownId.ts b/packages/twenty-front/src/modules/object-record/record-table/constants/TableOptionsDropdownId.ts deleted file mode 100644 index 57628d119..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/constants/TableOptionsDropdownId.ts +++ /dev/null @@ -1,2 +0,0 @@ -// We should either apply the constant all caps case or maybe define a more general enum to store those ids ? -export const TableOptionsDropdownId = 'table-options-dropdown-id'; diff --git a/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdown.tsx b/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdown.tsx deleted file mode 100644 index 874268a2f..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdown.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; -import { useViewBar } from '@/views/hooks/useViewBar'; - -import { TableOptionsDropdownId } from '../../constants/TableOptionsDropdownId'; -import { TableOptionsHotkeyScope } from '../../types/TableOptionsHotkeyScope'; - -import { TableOptionsDropdownButton } from './TableOptionsDropdownButton'; -import { TableOptionsDropdownContent } from './TableOptionsDropdownContent'; - -export const TableOptionsDropdown = ({ - onImport, - recordTableId, -}: { - onImport?: () => void; - recordTableId: string; -}) => { - const { setViewEditMode } = useViewBar(); - - return ( - } - dropdownHotkeyScope={{ scope: TableOptionsHotkeyScope.Dropdown }} - dropdownOffset={{ y: 8 }} - dropdownComponents={ - - } - onClickOutside={() => setViewEditMode('none')} - /> - ); -}; diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx index 4726fecca..941647853 100644 --- a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx +++ b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx @@ -1,10 +1,11 @@ import styled from '@emotion/styled'; +import { RecordIndexOptionsDropdown } from '@/object-record/record-index/options/components/RecordIndexOptionsDropdown'; +import { RECORD_INDEX_OPTIONS_DROPDOWN_ID } from '@/object-record/record-index/options/constants/RecordIndexOptionsDropdownId'; import { RecordTableWithWrappers } from '@/object-record/record-table/components/RecordTableWithWrappers'; -import { TableOptionsDropdownId } from '@/object-record/record-table/constants/TableOptionsDropdownId'; -import { TableOptionsDropdown } from '@/object-record/record-table/options/components/TableOptionsDropdown'; import { SignInBackgroundMockContainerEffect } from '@/sign-in-background-mock/components/SignInBackgroundMockContainerEffect'; import { ViewBar } from '@/views/components/ViewBar'; +import { ViewType } from '@/views/types/ViewType'; const StyledContainer = styled.div` display: flex; @@ -16,7 +17,7 @@ const StyledContainer = styled.div` export const SignInBackgroundMockContainer = () => { const objectNamePlural = 'companies'; const objectNameSingular = 'company'; - const recordTableId = 'sign-up-mock-record-table-id'; + const recordIndexId = 'sign-up-mock-record-table-id'; const viewBarId = 'companies-mock'; return ( @@ -24,18 +25,22 @@ export const SignInBackgroundMockContainer = () => { + } - optionsDropdownScopeId={TableOptionsDropdownId} + optionsDropdownScopeId={RECORD_INDEX_OPTIONS_DROPDOWN_ID} /> {}} updateRecordMutation={() => {}}