Merge pull request #519 from objectstack-ai/copilot/add-view-type-switcher

Author: hotlong

apps/console/objectstack.shared.ts

@@ -27,6 +27,39 @@ if (crmApps.length > 0) {
     }
 }
 
+// ---------------------------------------------------------------------------
+// Merge stack-level views into object definitions.
+// The @objectstack/spec defines views at the stack level (views[].listViews),
+// but the runtime protocol serves objects without listViews. This helper
+// merges listViews from the views array into the corresponding objects so
+// the console can render the correct view type when switching views.
+// ---------------------------------------------------------------------------
+function mergeViewsIntoObjects(objects: any[], configs: any[]): any[] {
+  // Collect all listViews grouped by object name
+  const viewsByObject: Record<string, Record<string, any>> = {};
+  for (const config of configs) {
+    if (!Array.isArray(config.views)) continue;
+    for (const view of config.views) {
+      if (!view.listViews) continue;
+      for (const [viewName, listView] of Object.entries(view.listViews as Record<string, any>)) {
+        const objectName = listView?.data?.object;
+        if (!objectName) continue;
+        if (!viewsByObject[objectName]) viewsByObject[objectName] = {};
+        viewsByObject[objectName][viewName] = listView;
+      }
+    }
+  }
+
+  // Merge into objects
+  return objects.map((obj: any) => {
+    const views = viewsByObject[obj.name];
+    if (!views) return obj;
+    return { ...obj, listViews: { ...(obj.listViews || {}), ...views } };
+  });
+}
+
+const allConfigs = [crmConfig, todoConfig, kitchenSinkConfig];
+
 export const sharedConfig = {
   // ============================================================================
   // Project Metadata
@@ -39,13 +72,16 @@ export const sharedConfig = {
   // ============================================================================
   // Merged Stack Configuration (CRM + Todo + Kitchen Sink + HotCRM + Mock Metadata)
   // ============================================================================
-  objects: mergeObjects(
-    [
-      ...(crmConfig.objects || []),
-      ...(todoConfig.objects || []),
-      ...(kitchenSinkConfig.objects || []),
-    ],
-    hotcrmObjects,
+  objects: mergeViewsIntoObjects(
+    mergeObjects(
+      [
+        ...(crmConfig.objects || []),
+        ...(todoConfig.objects || []),
+        ...(kitchenSinkConfig.objects || []),
+      ],
+      hotcrmObjects,
+    ),
+    allConfigs,
   ),
   apps: [
     ...crmApps,

apps/console/src/components/ObjectView.tsx

@@ -72,9 +72,9 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
       );
     }
 
-    // Resolve Views from objectDef.list_views
+    // Resolve Views from objectDef.listViews (camelCase per @objectstack/spec)
     const views = useMemo(() => {
-        const definedViews = objectDef.list_views || {};
+        const definedViews = objectDef.listViews || objectDef.list_views || {};
         const viewList = Object.entries(definedViews).map(([key, value]: [string, any]) => ({
             id: key,
             ...value,

apps/console/src/components/ViewDesignerPage.tsx

@@ -41,8 +41,10 @@ export function ViewDesignerPage({ objects }: { objects: any[] }) {
 
   // Resolve existing view for editing
   const existingView = useMemo(() => {
-    if (!viewId || viewId === 'new' || !objectDef?.list_views) return null;
-    return objectDef.list_views[viewId] || null;
+    if (!viewId || viewId === 'new') return null;
+    const views = objectDef?.listViews || objectDef?.list_views;
+    if (!views) return null;
+    return views[viewId] || null;
   }, [viewId, objectDef]);
 
   const handleSave = useCallback(

examples/crm/objectstack.config.ts

@@ -20,6 +20,89 @@ export default defineStack({
     ProjectObject,
     EventObject
   ],
+  views: [
+    {
+      listViews: {
+        all: {
+          name: 'all',
+          label: 'All Opportunities',
+          type: 'grid',
+          data: { provider: 'object', object: 'opportunity' },
+          columns: ['name', 'amount', 'stage', 'close_date', 'probability'],
+        },
+        pipeline: {
+          name: 'pipeline',
+          label: 'Pipeline',
+          type: 'kanban',
+          data: { provider: 'object', object: 'opportunity' },
+          columns: ['name', 'amount', 'close_date', 'probability'],
+          kanban: {
+            groupByField: 'stage',
+            columns: ['name', 'amount', 'close_date'],
+          },
+        },
+      },
+    },
+    {
+      listViews: {
+        all_events: {
+          name: 'all_events',
+          label: 'All Events',
+          type: 'grid',
+          data: { provider: 'object', object: 'event' },
+          columns: ['subject', 'start', 'end', 'location', 'type'],
+        },
+        calendar: {
+          name: 'calendar',
+          label: 'Calendar',
+          type: 'calendar',
+          data: { provider: 'object', object: 'event' },
+          columns: ['subject', 'start', 'end', 'type'],
+          calendar: {
+            startDateField: 'start',
+            endDateField: 'end',
+            titleField: 'subject',
+          },
+        },
+      },
+    },
+    {
+      listViews: {
+        all_tasks: {
+          name: 'all_tasks',
+          label: 'All Tasks',
+          type: 'grid',
+          data: { provider: 'object', object: 'project_task' },
+          columns: ['name', 'status', 'priority', 'start_date', 'end_date', 'progress'],
+        },
+        board: {
+          name: 'board',
+          label: 'Board',
+          type: 'kanban',
+          data: { provider: 'object', object: 'project_task' },
+          columns: ['name', 'priority', 'start_date', 'end_date'],
+          kanban: {
+            groupByField: 'status',
+            columns: ['name', 'priority', 'start_date', 'end_date'],
+          },
+        },
+        gantt: {
+          name: 'gantt',
+          label: 'Gantt',
+          type: 'gantt',
+          data: { provider: 'object', object: 'project_task' },
+          columns: ['name', 'start_date', 'end_date', 'progress', 'status'],
+        },
+        timeline: {
+          name: 'timeline',
+          label: 'Timeline',
+          type: 'timeline',
+          data: { provider: 'object', object: 'project_task' },
+          columns: ['name', 'start_date', 'status'],
+        },
+      },
+    },
+  ],
   reports: [],
   pages: [
     {