feat: add ProjectObject schema and integrate Gantt view support in ObjectView

Author: hotlong

apps/console/package.json

@@ -33,6 +33,7 @@
     "@object-ui/plugin-calendar": "workspace:*",
     "@object-ui/plugin-dashboard": "workspace:*",
     "@object-ui/plugin-form": "workspace:*",
+    "@object-ui/plugin-gantt": "workspace:*",
     "@object-ui/plugin-grid": "workspace:*",
     "@object-ui/plugin-kanban": "workspace:*",
     "@object-ui/react": "workspace:*",

apps/console/src/components/ObjectView.tsx

@@ -3,8 +3,9 @@ import { useParams, useSearchParams } from 'react-router-dom';
 import { ObjectGrid } from '@object-ui/plugin-grid';
 import { ObjectKanban } from '@object-ui/plugin-kanban';
 import { ObjectCalendar } from '@object-ui/plugin-calendar';
+import { ObjectGantt } from '@object-ui/plugin-gantt';
 import { Button, Tabs, TabsList, TabsTrigger } from '@object-ui/components';
-import { Plus, Calendar as CalendarIcon, Kanban as KanbanIcon, Table as TableIcon } from 'lucide-react';
+import { Plus, Calendar as CalendarIcon, Kanban as KanbanIcon, Table as TableIcon, AlignLeft } from 'lucide-react';
 
 export function ObjectView({ dataSource, objects, onEdit }: any) {
     const { objectName } = useParams();
@@ -110,10 +111,33 @@ export function ObjectView({ dataSource, objects, onEdit }: any) {
                             dateField: activeView.dateField || 'due_date',
                             endField: activeView.endField,
                             titleField: activeView.titleField || 'name',
+                            colorField: activeView.colorField,
                         }}
                        {...interactionProps}
                     />
                 );
+            case 'gantt':
+                return (
+                    <ObjectGantt
+                        key={key}
+                        {...commonProps}
+                        schema={{
+                            type: 'gantt',
+                            objectName: objectDef.name,
+                            filter: {
+                                gantt: {
+                                    startDateField: activeView.startDateField || 'start_date',
+                                    endDateField: activeView.endDateField || 'end_date',
+                                    titleField: activeView.titleField || 'name',
+                                    progressField: activeView.progressField || 'progress',
+                                    dependenciesField: activeView.dependenciesField,
+                                    colorField: activeView.colorField,
+                                }
+                            }
+                        }}
+                        {...interactionProps}
+                    />
+                );
             case 'grid':
             default:
                 return (
@@ -160,6 +184,7 @@ export function ObjectView({ dataSource, objects, onEdit }: any) {
                                             {v.type === 'kanban' && <KanbanIcon className="mr-2 h-3.5 w-3.5" />}
                                             {v.type === 'calendar' && <CalendarIcon className="mr-2 h-3.5 w-3.5" />}
                                             {v.type === 'grid' && <TableIcon className="mr-2 h-3.5 w-3.5" />}
+                                            {v.type === 'gantt' && <AlignLeft className="mr-2 h-3.5 w-3.5" />}
                                             {v.label}
                                         </TabsTrigger>
                                     ))}

examples/crm/objectstack.config.ts

@@ -6,6 +6,7 @@ import { OpportunityObject } from './src/objects/opportunity.object';
 import { ProductObject } from './src/objects/product.object';
 import { OrderObject } from './src/objects/order.object';
 import { UserObject } from './src/objects/user.object';
+import { ProjectObject } from './src/objects/project.object';
 
 export default defineStack({
   objects: [
@@ -14,7 +15,8 @@ export default defineStack({
     OpportunityObject,
     ProductObject,
     OrderObject,
-    UserObject
+    UserObject,
+    ProjectObject
   ],
   apps: [
     App.create({
@@ -47,6 +49,12 @@ export default defineStack({
           objectName: 'opportunity',
           label: 'Opportunities'
         },
+        {
+          id: 'nav_projects',
+          type: 'object',
+          objectName: 'project_task',
+          label: 'Projects'
+        },
         {
           id: 'nav_sales',
           type: 'group',

examples/crm/src/index.ts

@@ -4,4 +4,5 @@ export * from './objects/opportunity.object';
 export * from './objects/product.object';
 export * from './objects/order.object';
 export * from './objects/user.object';
+export * from './objects/project.object';
 export { default as config } from '../objectstack.config';

examples/crm/src/objects/project.object.ts

@@ -0,0 +1,36 @@
+import { ObjectSchema, Field } from '@objectstack/spec/data';
+
+export const ProjectObject = ObjectSchema.create({
+  name: 'project_task',
+  label: 'Project Task',
+  icon: 'clipboard-list',
+  fields: {
+    name: Field.text({ label: 'Task Name', required: true, searchable: true }),
+    start_date: Field.date({ label: 'Start Date', required: true }),
+    end_date: Field.date({ label: 'End Date', required: true }),
+    progress: Field.percent({ label: 'Progress' }),
+    status: Field.select(['Planned', 'In Progress', 'Completed', 'On Hold'], { label: 'Status' }),
+    priority: Field.select(['High', 'Medium', 'Low'], { label: 'Priority' }),
+    manager: Field.lookup('user', { label: 'Manager' }),
+    description: Field.textarea({ label: 'Description' }),
+    color: Field.text({ label: 'Color' }), // For Gantt bar color
+  },
+  list_views: {
+    all: {
+      label: 'All Tasks',
+      columns: ['name', 'status', 'progress', 'start_date', 'end_date', 'priority', 'manager'],
+      sort: [['start_date', 'asc']]
+    },
+    gantt_view: {
+      label: 'Gantt View',
+      type: 'gantt',
+      columns: ['name', 'start_date', 'end_date', 'progress'],
+      // Standard Gantt configuration mapped to specific fields
+      startDateField: 'start_date',
+      endDateField: 'end_date',
+      titleField: 'name',
+      progressField: 'progress',
+      colorField: 'color',
+    } as any // Cast to allow extra properties if type definition is strict
+  }
+});