Skip to content

Commit

Permalink
feat: table record group (#8781)
Browse files Browse the repository at this point in the history 
Fix #8401 #8402

This PR is only taking care or displaying properly the record group on
the table.
Record-reorder within group has also been prepared.
Start of collapsible animation has been done, but not working for now.

<img width="1381" alt="Screenshot 2024-11-28 at 2 52 07 PM"
src="https://github.com/user-attachments/assets/514bb3e6-3475-4c47-a91c-64f7d20bbe73">
  • Loading branch information
@magrinj
magrinj authored Nov 29, 2024
1 parent 05149fe commit a2d55a8
Show file tree
Hide file tree
Showing 41 changed files with 671 additions and 392 deletions.
43 changes: 34 additions & 9 deletions ...cord/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,18 @@ import {
IconChevronLeft,
IconSettings,
MenuItem,
MenuItemSelect,
UndecoratedLink,
useIcons,
} from 'twenty-ui';

import { useObjectNamePluralFromSingular } from '@/object-metadata/hooks/useObjectNamePluralFromSingular';

import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { StyledInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect';
import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useOptionsDropdown';
import { useSearchRecordGroupField } from '@/object-record/object-options-dropdown/hooks/useSearchRecordGroupField';
import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState';
import { hiddenRecordGroupIdsComponentSelector } from '@/object-record/record-group/states/selectors/hiddenRecordGroupIdsComponentSelector';
import { useHandleRecordGroupField } from '@/object-record/record-index/hooks/useHandleRecordGroupField';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
Expand All @@ -23,6 +26,7 @@ import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMe
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useLocation } from 'react-router-dom';
import { useSetRecoilState } from 'recoil';
import { isDefined } from '~/utils/isDefined';

export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
const { getIcon } = useIcons();
Expand All @@ -43,16 +47,22 @@ export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
hiddenRecordGroupIdsComponentSelector,
);

const recordGroupFieldMetadataItem = useRecoilComponentValueV2(
recordGroupFieldMetadataComponentState,
);

const {
recordGroupFieldSearchInput,
setRecordGroupFieldSearchInput,
filteredRecordGroupFieldMetadataItems,
} = useSearchRecordGroupField();

const { handleRecordGroupFieldChange, resetRecordGroupField } =
useHandleRecordGroupField({
viewBarComponentId: recordIndexId,
});
const {
handleRecordGroupFieldChange: setRecordGroupField,
resetRecordGroupField,
} = useHandleRecordGroupField({
viewBarComponentId: recordIndexId,
});

const newFieldSettingsUrl = getSettingsPagePath(
SettingsPath.ObjectNewFieldSelect,
Expand All @@ -66,6 +76,18 @@ export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
navigationMemorizedUrlState,
);

const handleResetRecordGroupField = () => {
resetRecordGroupField();
closeDropdown();
};

const handleRecordGroupFieldChange = (
fieldMetadataItem: FieldMetadataItem,
) => {
setRecordGroupField(fieldMetadataItem);
closeDropdown();
};

useEffect(() => {
if (
currentContentId === 'hiddenRecordGroups' &&
Expand All @@ -90,13 +112,16 @@ export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
onChange={(event) => setRecordGroupFieldSearchInput(event.target.value)}
/>
<DropdownMenuItemsContainer>
<MenuItem text="None" onClick={resetRecordGroupField} />
<MenuItemSelect
text="None"
selected={!isDefined(recordGroupFieldMetadataItem)}
onClick={handleResetRecordGroupField}
/>
{filteredRecordGroupFieldMetadataItems.map((fieldMetadataItem) => (
<MenuItem
<MenuItemSelect
key={fieldMetadataItem.id}
onClick={() => {
handleRecordGroupFieldChange(fieldMetadataItem);
}}
selected={fieldMetadataItem.id === recordGroupFieldMetadataItem?.id}
onClick={() => handleRecordGroupFieldChange(fieldMetadataItem)}
LeftIcon={getIcon(fieldMetadataItem.icon)}
text={fieldMetadataItem.label}
/>
Expand Down
23 changes: 12 additions & 11 deletions packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ import { RecordBoardComponentInstanceContext } from '@/object-record/record-boar
import { getDraggedRecordPosition } from '@/object-record/record-board/utils/getDraggedRecordPosition';
import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
import { visibleRecordGroupIdsComponentSelector } from '@/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector';
import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState';
import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState';
import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState';
import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
Expand Down Expand Up @@ -69,12 +69,13 @@ export const RecordBoard = () => {
visibleRecordGroupIdsComponentSelector,
);

const recordIndexRowIdsByGroupFamilyState = useRecoilComponentCallbackStateV2(
recordIndexRowIdsByGroupComponentFamilyState,
);
const recordIndexRecordIdsByGroupFamilyState =
useRecoilComponentCallbackStateV2(
recordIndexRecordIdsByGroupComponentFamilyState,
);

const recordIndexAllRowIdsState = useRecoilComponentCallbackStateV2(
recordIndexAllRowIdsComponentState,
const recordIndexAllRecordIdsState = useRecoilComponentCallbackStateV2(
recordIndexAllRecordIdsComponentSelector,
);

const { resetRecordSelection, setRecordAsSelected } =
Expand All @@ -97,14 +98,14 @@ export const RecordBoard = () => {
() => {
const allRecordIds = getSnapshotValue(
snapshot,
recordIndexAllRowIdsState,
recordIndexAllRecordIdsState,
);

for (const recordId of allRecordIds) {
setRecordAsSelected(recordId, true);
}
},
[recordIndexAllRowIdsState, setRecordAsSelected],
[recordIndexAllRecordIdsState, setRecordAsSelected],
);

useScopedHotkeys('ctrl+a,meta+a', selectAll, TableHotkeyScope.Table);
Expand Down Expand Up @@ -137,7 +138,7 @@ export const RecordBoard = () => {

const destinationRecordByGroupIds = getSnapshotValue(
snapshot,
recordIndexRowIdsByGroupFamilyState(destinationRecordGroupId),
recordIndexRecordIdsByGroupFamilyState(destinationRecordGroupId),
);
const otherRecordIdsInDestinationColumn =
sourceRecordGroupId === destinationRecordGroupId
Expand Down Expand Up @@ -172,7 +173,7 @@ export const RecordBoard = () => {
});
},
[
recordIndexRowIdsByGroupFamilyState,
recordIndexRecordIdsByGroupFamilyState,
selectFieldMetadataItem,
updateOneRecord,
],
Expand Down
44 changes: 9 additions & 35 deletions ...s/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordBoardRecordIds.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@ import { useRecoilCallback } from 'recoil';
import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState';
import { visibleRecordGroupIdsComponentSelector } from '@/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector';
import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState';
import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState';
import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { sortRecordsByPosition } from '@/object-record/utils/sortRecordsByPosition';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
Expand All @@ -22,24 +21,15 @@ export const useSetRecordBoardRecordIds = (recordBoardId?: string) => {
recordBoardId,
);

const recordIndexAllRowIdsState = useRecoilComponentCallbackStateV2(
recordIndexAllRowIdsComponentState,
recordBoardId,
);

const recordIndexRowIdsByGroupFamilyState = useRecoilComponentCallbackStateV2(
recordIndexRowIdsByGroupComponentFamilyState,
recordBoardId,
);
const recordIndexRecordIdsByGroupFamilyState =
useRecoilComponentCallbackStateV2(
recordIndexRecordIdsByGroupComponentFamilyState,
recordBoardId,
);

const setRecordIds = useRecoilCallback(
({ set, snapshot }) =>
(records: ObjectRecord[]) => {
const existingAllRowIds = getSnapshotValue(
snapshot,
recordIndexAllRowIdsState,
);

const recordGroupIds = getSnapshotValue(
snapshot,
visibleRecordGroupIdsSelector,
Expand All @@ -53,7 +43,7 @@ export const useSetRecordBoardRecordIds = (recordBoardId?: string) => {

const existingRecordGroupRowIds = getSnapshotValue(
snapshot,
recordIndexRowIdsByGroupFamilyState(recordGroupId),
recordIndexRecordIdsByGroupFamilyState(recordGroupId),
);

const recordGroupFieldMetadata = getSnapshotValue(
Expand All @@ -75,32 +65,16 @@ export const useSetRecordBoardRecordIds = (recordBoardId?: string) => {

if (!isDeeplyEqual(existingRecordGroupRowIds, recordGroupRowIds)) {
set(
recordIndexRowIdsByGroupFamilyState(recordGroupId),
recordIndexRecordIdsByGroupFamilyState(recordGroupId),
recordGroupRowIds,
);
}
}

const allRowIds: string[] = [];

for (const recordGroupId of recordGroupIds) {
const tableRowIdsByGroup = getSnapshotValue(
snapshot,
recordIndexRowIdsByGroupFamilyState(recordGroupId),
);

allRowIds.push(...tableRowIdsByGroup);
}

if (!isDeeplyEqual(existingAllRowIds, allRowIds)) {
set(recordIndexAllRowIdsState, allRowIds);
}
},
[
visibleRecordGroupIdsSelector,
recordIndexRowIdsByGroupFamilyState,
recordIndexRecordIdsByGroupFamilyState,
recordGroupFieldMetadataState,
recordIndexAllRowIdsState,
],
);

Expand Down
59 changes: 9 additions & 50 deletions ...ges/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordIdsForColumn.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,7 @@ import { useRecoilCallback } from 'recoil';

import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState';
import { recordGroupIdsComponentState } from '@/object-record/record-group/states/recordGroupIdsComponentState';
import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState';
import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState';
import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { sortRecordsByPosition } from '@/object-record/utils/sortRecordsByPosition';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
Expand All @@ -13,44 +11,28 @@ import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
import { isDefined } from '~/utils/isDefined';

export const useSetRecordIdsForColumn = (recordBoardId?: string) => {
const recordGroupIdsState = useRecoilComponentCallbackStateV2(
recordGroupIdsComponentState,
recordBoardId,
);

const recordGroupFieldMetadataState = useRecoilComponentCallbackStateV2(
recordGroupFieldMetadataComponentState,
recordBoardId,
);

const recordIndexAllRowIdsState = useRecoilComponentCallbackStateV2(
recordIndexAllRowIdsComponentState,
recordBoardId,
);

const recordIndexRowIdsByGroupFamilyState = useRecoilComponentCallbackStateV2(
recordIndexRowIdsByGroupComponentFamilyState,
recordBoardId,
);
const recordIndexRecordIdsByGroupFamilyState =
useRecoilComponentCallbackStateV2(
recordIndexRecordIdsByGroupComponentFamilyState,
recordBoardId,
);

const setRecordIdsForColumn = useRecoilCallback(
({ set, snapshot }) =>
(currentRecordGroupId: string, records: ObjectRecord[]) => {
const existingAllRowIds = getSnapshotValue(
snapshot,
recordIndexAllRowIdsState,
);

const recordGroupIds = getSnapshotValue(snapshot, recordGroupIdsState);

const recordGroup = getSnapshotValue(
snapshot,
recordGroupDefinitionFamilyState(currentRecordGroupId),
);

const existingRecordGroupRowIds = getSnapshotValue(
snapshot,
recordIndexRowIdsByGroupFamilyState(currentRecordGroupId),
recordIndexRecordIdsByGroupFamilyState(currentRecordGroupId),
);

const recordGroupFieldMetadata = getSnapshotValue(
Expand All @@ -72,35 +54,12 @@ export const useSetRecordIdsForColumn = (recordBoardId?: string) => {

if (!isDeeplyEqual(existingRecordGroupRowIds, recordGroupRowIds)) {
set(
recordIndexRowIdsByGroupFamilyState(currentRecordGroupId),
recordIndexRecordIdsByGroupFamilyState(currentRecordGroupId),
recordGroupRowIds,
);
}

const allRowIds: string[] = [];

for (const recordGroupId of recordGroupIds) {
const tableRowIdsByGroup =
recordGroupId !== currentRecordGroupId
? getSnapshotValue(
snapshot,
recordIndexRowIdsByGroupFamilyState(recordGroupId),
)
: recordGroupRowIds;

allRowIds.push(...tableRowIdsByGroup);
}

if (!isDeeplyEqual(existingAllRowIds, allRowIds)) {
set(recordIndexAllRowIdsState, allRowIds);
}
},
[
recordGroupIdsState,
recordIndexRowIdsByGroupFamilyState,
recordGroupFieldMetadataState,
recordIndexAllRowIdsState,
],
[recordIndexRecordIdsByGroupFamilyState, recordGroupFieldMetadataState],
);

return {
Expand Down
12 changes: 6 additions & 6 deletions ...c/modules/object-record/record-board/record-board-column/components/RecordBoardColumn.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Droppable } from '@hello-pangea/dnd';
import { RecordBoardColumnCardsContainer } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnCardsContainer';
import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext';
import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState';
import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState';
import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
import { useRecoilValue } from 'recoil';

Expand All @@ -31,8 +31,8 @@ export const RecordBoardColumn = ({
recordGroupDefinitionFamilyState(recordBoardColumnId),
);

const recordRowIdsByGroup = useRecoilComponentFamilyValueV2(
recordIndexRowIdsByGroupComponentFamilyState,
const recordIdsByGroup = useRecoilComponentFamilyValueV2(
recordIndexRecordIdsByGroupComponentFamilyState,
recordBoardColumnId,
);

Expand All @@ -44,17 +44,17 @@ export const RecordBoardColumn = ({
<RecordBoardColumnContext.Provider
value={{
columnDefinition: recordGroupDefinition,
recordCount: recordRowIdsByGroup.length,
recordCount: recordIdsByGroup.length,
columnId: recordBoardColumnId,
recordIds: recordRowIdsByGroup,
recordIds: recordIdsByGroup,
}}
>
<Droppable droppableId={recordBoardColumnId}>
{(droppableProvided) => (
<StyledColumn>
<RecordBoardColumnCardsContainer
droppableProvided={droppableProvided}
recordIds={recordRowIdsByGroup}
recordIds={recordIdsByGroup}
/>
</StyledColumn>
)}
Expand Down
Loading

0 comments on commit a2d55a8

Please sign in to comment.