Create the Dashboard record show page (#14423)

Closes https://github.com/twentyhq/core-team-issues/issues/1438 - Reorganized PageLayout module - Created `DashboardRenderer` and `PageLayoutRenderer` - Created stories for the `PageLayoutRenderer` - Refactored the Widget components https://github.com/user-attachments/assets/27e9ac8f-b237-4c21-8494-3fab6d65af3a
2025-09-11 18:26:26 +02:00
parent 140b416b22
commit e80c552ae7
124 changed files with 1528 additions and 808 deletions
@@ -0,0 +1,72 @@
+import { type Layout, type Layouts } from 'react-grid-layout';
+import { useRecoilCallback } from 'recoil';
+import { isDefined } from 'twenty-shared/utils';
+import { pageLayoutCurrentLayoutsState } from '../states/pageLayoutCurrentLayoutsState';
+import { pageLayoutDraftState } from '../states/pageLayoutDraftState';
+import { type PageLayoutWidgetWithData } from '../types/pageLayoutTypes';
+import { convertLayoutsToWidgets } from '../utils/convertLayoutsToWidgets';
+
+export const usePageLayoutHandleLayoutChange = (activeTabId: string | null) => {
+  const handleLayoutChange = useRecoilCallback(
+    ({ snapshot, set }) =>
+      (_: Layout[], allLayouts: Layouts) => {
+        if (!isDefined(activeTabId)) return;
+        const currentTabLayouts = snapshot
+          .getLoadable(pageLayoutCurrentLayoutsState)
+          .getValue();
+
+        set(pageLayoutCurrentLayoutsState, {
+          ...currentTabLayouts,
+          [activeTabId]: allLayouts,
+        });
+
+        const pageLayoutDraft = snapshot
+          .getLoadable(pageLayoutDraftState)
+          .getValue();
+
+        const currentTab = pageLayoutDraft.tabs.find(
+          (tab) => tab.id === activeTabId,
+        );
+        if (!currentTab) return;
+        const updatedWidgets = convertLayoutsToWidgets(
+          currentTab.widgets,
+          allLayouts,
+        );
+
+        if (isDefined(activeTabId)) {
+          set(pageLayoutDraftState, (prev) => ({
+            ...prev,
+            tabs: prev.tabs.map((tab) => {
+              if (tab.id === activeTabId) {
+                const tabWidgets: PageLayoutWidgetWithData[] = updatedWidgets
+                  .filter((w) => w.pageLayoutTabId === activeTabId)
+                  .map((widget) => ({
+                    id: widget.id,
+                    pageLayoutTabId: widget.pageLayoutTabId || activeTabId,
+                    title: widget.title,
+                    type: widget.type,
+                    objectMetadataId: null,
+                    gridPosition: widget.gridPosition,
+                    configuration: widget.configuration || undefined,
+                    data: widget.data,
+                    createdAt:
+                      tab.widgets.find((w) => w.id === widget.id)?.createdAt ||
+                      new Date().toISOString(),
+                    updatedAt: new Date().toISOString(),
+                    deletedAt: null,
+                  }));
+                return {
+                  ...tab,
+                  widgets: tabWidgets,
+                };
+              }
+              return tab;
+            }),
+          }));
+        }
+      },
+    [activeTabId],
+  );
+
+  return { handleLayoutChange };
+};