|
| 1 | +# ObjectView Demo |
| 2 | + |
| 3 | +A comprehensive demonstration of the `ObjectView` component, which integrates `ObjectTable` and `ObjectForm` into a complete, ready-to-use CRUD interface. |
| 4 | + |
| 5 | +## Features |
| 6 | + |
| 7 | +- **Integrated Table and Form**: Seamless combination of list view and create/edit forms |
| 8 | +- **Multiple Layout Modes**: Switch between drawer and modal layouts for form display |
| 9 | +- **Search Functionality**: Search across all records |
| 10 | +- **Filter Builder**: Placeholder for advanced filtering capabilities |
| 11 | +- **CRUD Operations**: Complete Create, Read, Update, Delete functionality |
| 12 | +- **Bulk Actions**: Select multiple rows and perform bulk delete |
| 13 | +- **Auto-refresh**: Table automatically refreshes after form submission |
| 14 | +- **Mock Data Source**: Demonstrates with in-memory mock data |
| 15 | + |
| 16 | +## Running the Demo |
| 17 | + |
| 18 | +```bash |
| 19 | +# From the root of the repository |
| 20 | +pnpm install |
| 21 | +pnpm --filter @examples/object-view-demo dev |
| 22 | +``` |
| 23 | + |
| 24 | +Then open your browser to `http://localhost:5173` |
| 25 | + |
| 26 | +## Usage |
| 27 | + |
| 28 | +The demo showcases: |
| 29 | + |
| 30 | +1. **Drawer Mode (Default)**: Forms slide in from the right side |
| 31 | +2. **Modal Mode**: Forms appear in a centered modal dialog |
| 32 | + |
| 33 | +### Actions |
| 34 | + |
| 35 | +- **Create**: Click the "Create" button in the toolbar |
| 36 | +- **View**: Click on any row in the table |
| 37 | +- **Edit**: Click the "Edit" button in the actions column |
| 38 | +- **Delete**: Click the "Delete" button (with confirmation) |
| 39 | +- **Bulk Delete**: Select multiple rows using checkboxes and click "Delete Selected" |
| 40 | +- **Search**: Type in the search box to filter records |
| 41 | +- **Filters**: Click the "Filters" button to toggle the filter panel (placeholder) |
| 42 | +- **Refresh**: Click the refresh button to reload the table |
| 43 | + |
| 44 | +## Component Overview |
| 45 | + |
| 46 | +The `ObjectView` component combines: |
| 47 | + |
| 48 | +- **ObjectTable**: Auto-generated table with schema-based columns |
| 49 | +- **ObjectForm**: Auto-generated form with schema-based fields |
| 50 | +- **Drawer/Modal**: Configurable overlay components for form display |
| 51 | +- **Search Bar**: Built-in search functionality |
| 52 | +- **Filter Panel**: Placeholder for future filter builder integration |
| 53 | +- **Toolbar**: Actions bar with create, refresh, and filter buttons |
| 54 | + |
| 55 | +## Schema Configuration |
| 56 | + |
| 57 | +```typescript |
| 58 | +const schema: ObjectViewSchema = { |
| 59 | + type: 'object-view', |
| 60 | + objectName: 'users', |
| 61 | + layout: 'drawer', // or 'modal' |
| 62 | + showSearch: true, |
| 63 | + showFilters: true, |
| 64 | + showCreate: true, |
| 65 | + operations: { |
| 66 | + create: true, |
| 67 | + read: true, |
| 68 | + update: true, |
| 69 | + delete: true, |
| 70 | + }, |
| 71 | + table: { |
| 72 | + fields: ['name', 'email', 'status', 'role'], |
| 73 | + selectable: 'multiple', |
| 74 | + }, |
| 75 | + form: { |
| 76 | + fields: ['name', 'email', 'status', 'role'], |
| 77 | + layout: 'vertical', |
| 78 | + }, |
| 79 | +}; |
| 80 | +``` |
| 81 | + |
| 82 | +## Next Steps |
| 83 | + |
| 84 | +- Integrate real ObjectQL backend |
| 85 | +- Implement advanced filtering with FilterBuilder |
| 86 | +- Add pagination controls |
| 87 | +- Add export/import functionality |
| 88 | +- Add custom actions and bulk operations |
0 commit comments