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

Support ungrouped fields + improve edition UX (#18224)

Browse Source 
## Demo


https://github.com/user-attachments/assets/59e530ea-1c5b-44be-a012-42551e68221c

## Demo – creating a new group


https://github.com/user-attachments/assets/e8511bc3-d586-422c-aca8-b02794a0c84f

## Demo – ungrouped fields


https://github.com/user-attachments/assets/6ded4a90-fb08-485e-ad08-086f3a970752

Closes https://github.com/twentyhq/core-team-issues/issues/2232
Closes https://github.com/twentyhq/core-team-issues/issues/2237
Closes https://github.com/twentyhq/core-team-issues/issues/2238
This commit is contained in:
Baptiste Devessier
2026-03-04 12:45:14 +01:00
committed by GitHub
parent 3b2bf39565
commit 5b544809f7
36 changed files with 1839 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/page-layout/utils/convertPageLayoutDraftToUpdateInput.ts
+35 -9
View File
@@ -1,10 +1,43 @@
import { type DraftPageLayout } from '@/page-layout/types/DraftPageLayout';
import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
import { isDynamicRelationWidget } from '@/page-layout/utils/isDynamicRelationWidget';
import {
PageLayoutTabLayoutMode,
type UpdatePageLayoutWithTabsInput,
} from '~/generated-metadata/graphql';
const buildWidgetPosition = (widget: PageLayoutWidget, widgetIndex: number) => {
const layoutMode =
widget.position?.layoutMode ?? PageLayoutTabLayoutMode.GRID;
switch (layoutMode) {
case PageLayoutTabLayoutMode.VERTICAL_LIST: {
const index =
widget.position?.__typename === 'PageLayoutWidgetVerticalListPosition'
? widget.position.index
: widgetIndex;
return {
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
index,
};
}
case PageLayoutTabLayoutMode.CANVAS:
return {
layoutMode: PageLayoutTabLayoutMode.CANVAS,
};
case PageLayoutTabLayoutMode.GRID:
default:
return {
layoutMode: PageLayoutTabLayoutMode.GRID,
row: widget.gridPosition.row,
column: widget.gridPosition.column,
rowSpan: widget.gridPosition.rowSpan,
columnSpan: widget.gridPosition.columnSpan,
};
}
};
export const convertPageLayoutDraftToUpdateInput = (
pageLayoutDraft: DraftPageLayout,
): UpdatePageLayoutWithTabsInput => {
@@ -18,7 +51,7 @@ export const convertPageLayoutDraftToUpdateInput = (
position: tab.position,
widgets: tab.widgets
.filter((widget) => !isDynamicRelationWidget(widget))
.map((widget) => ({
.map((widget, widgetIndex) => ({
id: widget.id,
pageLayoutTabId: widget.pageLayoutTabId,
title: widget.title,
@@ -30,14 +63,7 @@ export const convertPageLayoutDraftToUpdateInput = (
rowSpan: widget.gridPosition.rowSpan,
columnSpan: widget.gridPosition.columnSpan,
},
position: {
layoutMode:
widget.position?.layoutMode ?? PageLayoutTabLayoutMode.GRID,
row: widget.gridPosition.row,
column: widget.gridPosition.column,
rowSpan: widget.gridPosition.rowSpan,
columnSpan: widget.gridPosition.columnSpan,
},
position: buildWidgetPosition(widget, widgetIndex),
configuration: widget.configuration ?? null,
})),
})),