Skip to content

Commit 9ea2dce

Browse files
hotlonghotlong
authored
Merge pull request #133
Merging pull request #133
2 parents beea288 + e41368e commit 9ea2dce

File tree

8 files changed

+1753
-2
lines changed

8 files changed

+1753
-2
lines changed

‎examples/showcase/pages/objectql/crud-example.json‎

Lines changed: 255 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,255 @@
1+
{
2+
"type": "page",
3+
"title": "Complete CRUD Example - ObjectQL Components",
4+
"body": [
5+
{
6+
"type": "div",
7+
"className": "space-y-6 container mx-auto py-6 max-w-7xl",
8+
"children": [
9+
{
10+
"type": "div",
11+
"className": "space-y-2",
12+
"children": [
13+
{
14+
"type": "text",
15+
"value": "Complete CRUD Example",
16+
"className": "text-3xl font-bold tracking-tight"
17+
},
18+
{
19+
"type": "text",
20+
"value": "A comprehensive example showing ObjectTable with ObjectForm for complete Create, Read, Update, Delete operations. Features include field-level permissions, validation, batch operations, and optimistic updates.",
21+
"className": "text-lg text-muted-foreground"
22+
}
23+
]
24+
},
25+
{
26+
"type": "separator",
27+
"className": "my-6"
28+
},
29+
{
30+
"type": "div",
31+
"className": "space-y-6",
32+
"children": [
33+
{
34+
"type": "card",
35+
"title": "ObjectTable with CRUD Operations",
36+
"description": "Automatically generates table columns from object schema with row actions for edit and delete.",
37+
"children": {
38+
"type": "div",
39+
"className": "space-y-4",
40+
"children": [
41+
{
42+
"type": "alert",
43+
"variant": "default",
44+
"title": "New Features",
45+
"description": "✅ Field-level permissions • ✅ Optimistic updates • ✅ Delete confirmation • ✅ Batch operations • ✅ Row actions",
46+
"className": "mb-4"
47+
},
48+
{
49+
"type": "div",
50+
"className": "p-4 bg-muted/50 rounded-lg font-mono text-sm",
51+
"children": {
52+
"type": "text",
53+
"value": "// Initialize ObjectQL Data Source\nconst dataSource = new ObjectQLDataSource({\n baseUrl: 'https://api.example.com',\n token: 'your-auth-token'\n});\n\n// ObjectTable with CRUD operations\n<ObjectTable\n schema={{\n type: 'object-table',\n objectName: 'users',\n title: 'Users Management',\n fields: ['name', 'email', 'status', 'role'],\n operations: {\n create: true,\n read: true,\n update: true,\n delete: true\n },\n selectable: 'multiple',\n defaultSort: { field: 'name', order: 'asc' }\n }}\n dataSource={dataSource}\n onEdit={(record) => openEditForm(record)}\n onDelete={(record) => console.log('Deleted:', record)}\n onBulkDelete={(records) => console.log('Bulk delete:', records)}\n/>",
54+
"className": "whitespace-pre"
55+
}
56+
},
57+
{
58+
"type": "text",
59+
"value": "Example Table Output (with row actions):",
60+
"className": "text-sm font-semibold mt-4"
61+
},
62+
{
63+
"type": "table",
64+
"caption": "Users Management",
65+
"selectable": "multiple",
66+
"columns": [
67+
{ "header": "Name", "accessorKey": "name" },
68+
{ "header": "Email", "accessorKey": "email" },
69+
{ "header": "Status", "accessorKey": "status", "type": "text" },
70+
{ "header": "Role", "accessorKey": "role" },
71+
{
72+
"header": "Actions",
73+
"accessorKey": "_actions",
74+
"cell": {
75+
"type": "button-group",
76+
"buttons": [
77+
{ "label": "Edit", "variant": "ghost", "size": "sm" },
78+
{ "label": "Delete", "variant": "ghost", "size": "sm" }
79+
]
80+
}
81+
}
82+
],
83+
"data": [
84+
{ "_id": "1", "name": "John Doe", "email": "john@example.com", "status": "Active", "role": "Admin" },
85+
{ "_id": "2", "name": "Jane Smith", "email": "jane@example.com", "status": "Active", "role": "User" },
86+
{ "_id": "3", "name": "Bob Johnson", "email": "bob@example.com", "status": "Inactive", "role": "User" }
87+
]
88+
}
89+
]
90+
}
91+
},
92+
{
93+
"type": "card",
94+
"title": "ObjectForm with Validation",
95+
"description": "Auto-generates form fields with validation rules from object metadata.",
96+
"children": {
97+
"type": "div",
98+
"className": "space-y-4",
99+
"children": [
100+
{
101+
"type": "div",
102+
"className": "p-4 bg-muted/50 rounded-lg font-mono text-sm",
103+
"children": {
104+
"type": "text",
105+
"value": "// ObjectForm with metadata-driven validation\n<ObjectForm\n schema={{\n type: 'object-form',\n objectName: 'users',\n mode: 'create',\n fields: ['name', 'email', 'status', 'role'],\n onSuccess: (data) => {\n console.log('User created:', data);\n refreshTable();\n }\n }}\n dataSource={dataSource}\n/>\n\n// Validation rules from metadata:\n// - name: required, minLength: 2, maxLength: 100\n// - email: required, pattern: email format\n// - status: select from options\n// - role: select with field dependencies",
106+
"className": "whitespace-pre"
107+
}
108+
},
109+
{
110+
"type": "text",
111+
"value": "Example Form Output (with validation):",
112+
"className": "text-sm font-semibold mt-4"
113+
},
114+
{
115+
"type": "form",
116+
"layout": "vertical",
117+
"submitLabel": "Create User",
118+
"showCancel": true,
119+
"fields": [
120+
{
121+
"name": "name",
122+
"label": "Full Name",
123+
"type": "input",
124+
"required": true,
125+
"placeholder": "Enter full name",
126+
"description": "Min 2 characters, max 100 characters"
127+
},
128+
{
129+
"name": "email",
130+
"label": "Email Address",
131+
"type": "input",
132+
"inputType": "email",
133+
"required": true,
134+
"placeholder": "user@example.com",
135+
"description": "Must be a valid email address"
136+
},
137+
{
138+
"name": "status",
139+
"label": "Status",
140+
"type": "select",
141+
"required": true,
142+
"options": [
143+
{ "label": "Active", "value": "active" },
144+
{ "label": "Inactive", "value": "inactive" }
145+
]
146+
},
147+
{
148+
"name": "role",
149+
"label": "Role",
150+
"type": "select",
151+
"required": true,
152+
"options": [
153+
{ "label": "Admin", "value": "admin" },
154+
{ "label": "User", "value": "user" },
155+
{ "label": "Guest", "value": "guest" }
156+
],
157+
"description": "User role determines permissions"
158+
}
159+
]
160+
}
161+
]
162+
}
163+
},
164+
{
165+
"type": "card",
166+
"title": "Field-Level Permissions",
167+
"description": "Fields are automatically hidden based on user permissions from metadata.",
168+
"children": {
169+
"type": "div",
170+
"className": "space-y-4",
171+
"children": [
172+
{
173+
"type": "div",
174+
"className": "p-4 bg-muted/50 rounded-lg font-mono text-sm",
175+
"children": {
176+
"type": "text",
177+
"value": "// Object metadata with field permissions\n{\n fields: {\n name: {\n type: 'text',\n label: 'Name',\n permissions: { read: true, write: true }\n },\n email: {\n type: 'email',\n label: 'Email',\n permissions: { read: true, write: true }\n },\n salary: {\n type: 'currency',\n label: 'Salary',\n permissions: { \n read: false, // Hidden in table\n write: false // Hidden in form\n }\n }\n }\n}\n\n// Result: salary field is automatically excluded\n// from both ObjectTable and ObjectForm",
178+
"className": "whitespace-pre"
179+
}
180+
},
181+
{
182+
"type": "alert",
183+
"variant": "default",
184+
"title": "Automatic Permission Handling",
185+
"description": "Fields without read permission are hidden from tables. Fields without write permission are excluded from create/edit forms."
186+
}
187+
]
188+
}
189+
},
190+
{
191+
"type": "card",
192+
"title": "Batch Operations",
193+
"description": "Select multiple rows for bulk operations like delete.",
194+
"children": {
195+
"type": "div",
196+
"className": "space-y-4",
197+
"children": [
198+
{
199+
"type": "div",
200+
"className": "p-4 bg-muted/50 rounded-lg font-mono text-sm",
201+
"children": {
202+
"type": "text",
203+
"value": "// Enable batch operations\n<ObjectTable\n schema={{\n type: 'object-table',\n objectName: 'users',\n selectable: 'multiple', // Enable row selection\n }}\n dataSource={dataSource}\n onBulkDelete={(records) => {\n // Confirm with user\n // Delete records with optimistic update\n // Show success message\n }}\n/>\n\n// UI automatically shows:\n// - Checkboxes for row selection\n// - Toolbar with \"Delete Selected\" button\n// - Confirmation dialog before deletion",
204+
"className": "whitespace-pre"
205+
}
206+
}
207+
]
208+
}
209+
},
210+
{
211+
"type": "card",
212+
"title": "Optimistic Updates",
213+
"description": "Delete operations update UI immediately for better user experience.",
214+
"children": {
215+
"type": "div",
216+
"className": "space-y-4",
217+
"children": [
218+
{
219+
"type": "div",
220+
"className": "p-4 bg-muted/50 rounded-lg font-mono text-sm",
221+
"children": {
222+
"type": "text",
223+
"value": "// Delete with optimistic update\n1. User clicks delete\n2. Show confirmation dialog\n3. Remove row from UI immediately\n4. Call API in background\n5. On error: revert and show error message\n6. On success: operation complete\n\n// Benefits:\n// - Instant feedback to user\n// - No loading spinner needed\n// - Better perceived performance\n// - Automatic error recovery",
224+
"className": "whitespace-pre"
225+
}
226+
}
227+
]
228+
}
229+
},
230+
{
231+
"type": "card",
232+
"title": "Conditional Field Visibility",
233+
"description": "Form fields can be shown/hidden based on other field values.",
234+
"children": {
235+
"type": "div",
236+
"className": "space-y-4",
237+
"children": [
238+
{
239+
"type": "div",
240+
"className": "p-4 bg-muted/50 rounded-lg font-mono text-sm",
241+
"children": {
242+
"type": "text",
243+
"value": "// Field metadata with conditional visibility\n{\n type: {\n type: 'select',\n label: 'Account Type',\n options: ['personal', 'business']\n },\n company_name: {\n type: 'text',\n label: 'Company Name',\n visible_on: {\n field: 'type',\n operator: '=',\n value: 'business'\n }\n },\n tax_id: {\n type: 'text',\n label: 'Tax ID',\n visible_on: {\n and: [\n { field: 'type', operator: '=', value: 'business' },\n { field: 'country', operator: 'in', value: ['US', 'CA'] }\n ]\n }\n }\n}",
244+
"className": "whitespace-pre"
245+
}
246+
}
247+
]
248+
}
249+
}
250+
]
251+
}
252+
]
253+
}
254+
]
255+
}

0 commit comments

Comments
 (0)