Create a cancel action to leave the dashboard edit mode without saving (#14650)

Closes https://github.com/twentyhq/core-team-issues/issues/1523
2025-09-23 10:36:37 +02:00
parent 1a1ef9f254
commit 3d27a1e48a
8 changed files with 220 additions and 30 deletions
@@ -0,0 +1,67 @@
+import { type PageLayoutWithData } from '@/page-layout/types/pageLayoutTypes';
+import { convertPageLayoutToTabLayouts } from '@/page-layout/utils/convertPageLayoutToTabLayouts';
+import { PageLayoutType, WidgetType } from '~/generated/graphql';
+
+describe('convertPageLayoutToTabLayouts', () => {
+  it('should convert page layout to tab layouts', () => {
+    const pageLayout: PageLayoutWithData = {
+      id: 'page-layout-1',
+      name: 'Page Layout 1',
+      type: PageLayoutType.RECORD_PAGE,
+      objectMetadataId: 'object-metadata-1',
+      tabs: [
+        {
+          id: 'tab-1',
+          title: 'Tab 1',
+          position: 0,
+          pageLayoutId: 'page-layout-1',
+          widgets: [
+            {
+              id: 'widget-1',
+              pageLayoutTabId: 'tab-1',
+              title: 'Widget 1',
+              type: WidgetType.GRAPH,
+              gridPosition: { row: 0, column: 0, rowSpan: 2, columnSpan: 2 },
+              objectMetadataId: 'object-metadata-1',
+              createdAt: '2025-01-01T00:00:00.000Z',
+              updatedAt: '2025-01-01T00:00:00.000Z',
+              deletedAt: null,
+            },
+            {
+              id: 'widget-2',
+              pageLayoutTabId: 'tab-1',
+              title: 'Widget 2',
+              type: WidgetType.GRAPH,
+              gridPosition: { row: 2, column: 0, rowSpan: 2, columnSpan: 2 },
+              objectMetadataId: 'object-metadata-1',
+              createdAt: '2025-01-01T00:00:00.000Z',
+              updatedAt: '2025-01-01T00:00:00.000Z',
+              deletedAt: null,
+            },
+          ],
+          createdAt: '2025-01-01T00:00:00.000Z',
+          updatedAt: '2025-01-01T00:00:00.000Z',
+          deletedAt: null,
+        },
+      ],
+      createdAt: '2025-01-01T00:00:00.000Z',
+      updatedAt: '2025-01-01T00:00:00.000Z',
+      deletedAt: null,
+    };
+
+    const result = convertPageLayoutToTabLayouts(pageLayout);
+
+    expect(result).toEqual({
+      'tab-1': {
+        desktop: [
+          { i: 'widget-1', x: 0, y: 0, w: 2, h: 2 },
+          { i: 'widget-2', x: 0, y: 2, w: 2, h: 2 },
+        ],
+        mobile: [
+          { i: 'widget-1', x: 0, y: 0, w: 1, h: 2 },
+          { i: 'widget-2', x: 0, y: 2, w: 1, h: 2 },
+        ],
+      },
+    });
+  });
+});
@@ -0,0 +1,29 @@
+import { type PageLayoutWithData } from '@/page-layout/types/pageLayoutTypes';
+import { type TabLayouts } from '@/page-layout/types/tab-layouts';
+
+export const convertPageLayoutToTabLayouts = (
+  pageLayout: PageLayoutWithData,
+): TabLayouts => {
+  if (pageLayout.tabs.length === 0) {
+    return {};
+  }
+
+  const tabLayouts: TabLayouts = {};
+
+  pageLayout.tabs.forEach((tab) => {
+    const layouts = tab.widgets.map((widget) => ({
+      i: widget.id,
+      x: widget.gridPosition.column,
+      y: widget.gridPosition.row,
+      w: widget.gridPosition.columnSpan,
+      h: widget.gridPosition.rowSpan,
+    }));
+
+    tabLayouts[tab.id] = {
+      desktop: layouts,
+      mobile: layouts.map((layout) => ({ ...layout, w: 1, x: 0 })),
+    };
+  });
+
+  return tabLayouts;
+};