Merge pull request #720 from contember/feat/playground-custom-components

Add more examples to playground

packages/playground/admin/app/components/navigation.tsx

@@ -61,6 +61,9 @@ export const Navigation = () => {
 					<MenuItem icon={line} label={'Plate editor'} to={'plateEditor'} />
 					<MenuItem icon={line} label={'Legacy block editor'} to={'legacyEditor/blocks'} />
 				</MenuItem>
+				<MenuItem icon={<PencilIcon size={16} />} label={'Custom components'}>
+					<MenuItem icon={line} label={'Input'} to={'custom/input'} />
+				</MenuItem>
 			</Menu>
 		</div>
 	)

packages/playground/admin/app/pages/custom.tsx

@@ -0,0 +1,41 @@
+import { Component, EntitySubTree, Field, SugaredRelativeSingleField, useField } from '@contember/interface'
+import { Binding, PersistButton } from '../../lib/components/binding'
+import * as React from 'react'
+import { Slots } from '../../lib/components/slots'
+import { Button } from '../../lib/components/ui/button'
+
+export const input = () => (
+	<Binding>
+		<Slots.Actions><PersistButton/></Slots.Actions>
+		<EntitySubTree entity={'InputRoot(unique=unique)'} setOnCreate={'(unique=unique)'}>
+			<UseFieldComponent field={'intValue'}/>
+		</EntitySubTree>
+	</Binding>
+)
+
+type MyComponentProps = {
+	field: SugaredRelativeSingleField['field']
+}
+
+const UseFieldComponent = Component<MyComponentProps>(
+	({ field }) => {
+		// The `useField` hook is used to get and update the field value from data-binding.
+		const { value, updateValue } = useField<number>(field)
+		const increment = () => updateValue((value ?? 0) + 1)
+		const decrement = () => updateValue((value ?? 0) - 1)
+
+		return (
+			<div className={'flex gap-4 items-center'}>
+				<Button onClick={decrement}>Decrement</Button>
+				<div className={'w-8 h-8 border flex justify-center items-center'}>
+					<div>{value}</div>
+				</div>
+				<Button onClick={increment}>Increment</Button>
+			</div>
+		)
+	},
+	// When using hooks in the render function above, specify `staticRender` as the second argument to `Component` to ensure all data is properly registered.
+	({ field }) => (
+		<Field field={field}/>
+	),
+)

packages/playground/admin/app/pages/grid.tsx

@@ -279,7 +279,7 @@ const CustomGridRow = Component(() => (
 			</div>
 			<div className="inline-flex gap-2">
 				<MessageSquareIcon className="w-4 h-4" />
-				<HasMany field="comments" listComponent={({ accessor }) => accessor.length} />
+				<Field field={'details.commentsCount'} />
 			</div>
 		</div>
 	</div>

packages/playground/api/migrations/2024-06-10-144526-grid-article-view.json

@@ -0,0 +1,106 @@
+{
+	"formatVersion": 5,
+	"modifications": [
+		{
+			"modification": "createView",
+			"entity": {
+				"eventLog": {
+					"enabled": true
+				},
+				"name": "GridArticleDetail",
+				"primary": "id",
+				"primaryColumn": "id",
+				"tableName": "grid_article_detail",
+				"fields": {
+					"id": {
+						"name": "id",
+						"columnName": "id",
+						"columnType": "uuid",
+						"nullable": false,
+						"type": "Uuid"
+					},
+					"commentsCount": {
+						"name": "commentsCount",
+						"columnName": "comments_count",
+						"columnType": "integer",
+						"nullable": false,
+						"type": "Integer"
+					},
+					"article": {
+						"type": "OneHasOne",
+						"name": "article",
+						"target": "GridArticle",
+						"joiningColumn": {
+							"columnName": "article_id",
+							"onDelete": "restrict"
+						},
+						"nullable": false,
+						"inversedBy": "details"
+					}
+				},
+				"unique": [],
+				"indexes": [],
+				"view": {
+					"sql": "\n\tSELECT\n\t\tarticle.id AS id,\n\t\tarticle.id AS article_id,\n\t\t(SELECT COUNT(*)\n\t\t FROM \"grid_article_comment\" comment\n\t\t WHERE comment.article_id = article.id) AS comments_count\n\tFROM \"grid_article\" article;\n"
+				}
+			}
+		},
+		{
+			"modification": "createRelationInverseSide",
+			"entityName": "GridArticle",
+			"relation": {
+				"type": "OneHasOne",
+				"name": "details",
+				"target": "GridArticleDetail",
+				"ownedBy": "article",
+				"nullable": true
+			}
+		},
+		{
+			"modification": "patchAclSchema",
+			"patch": [
+				{
+					"op": "add",
+					"path": "/roles/admin/entities/GridArticleDetail",
+					"value": {
+						"predicates": {},
+						"operations": {
+							"read": {
+								"id": true,
+								"article": true,
+								"commentsCount": true
+							},
+							"create": {
+								"id": true,
+								"article": true,
+								"commentsCount": true
+							},
+							"update": {
+								"id": true,
+								"article": true,
+								"commentsCount": true
+							},
+							"delete": true,
+							"customPrimary": true
+						}
+					}
+				},
+				{
+					"op": "add",
+					"path": "/roles/admin/entities/GridArticle/operations/read/details",
+					"value": true
+				},
+				{
+					"op": "add",
+					"path": "/roles/admin/entities/GridArticle/operations/create/details",
+					"value": true
+				},
+				{
+					"op": "add",
+					"path": "/roles/admin/entities/GridArticle/operations/update/details",
+					"value": true
+				}
+			]
+		}
+	]
+}

packages/playground/api/model/Grid.ts

@@ -14,6 +14,7 @@ export class GridArticle {
 	tags = c.manyHasMany(GridTag)
 	views = c.intColumn()
 	comments = c.oneHasMany(GridArticleComment, 'article')
+	details = c.oneHasOneInverse(GridArticleDetail, 'article')
 }
 
 export class GridTag {
@@ -37,3 +38,17 @@ export class GridArticleComment {
 	content = c.stringColumn()
 	createdAt = c.dateTimeColumn()
 }
+
+@c.View(`
+	SELECT
+		article.id AS id,
+		article.id AS article_id,
+		(SELECT COUNT(*)
+		 FROM "grid_article_comment" comment
+		 WHERE comment.article_id = article.id) AS comments_count
+	FROM "grid_article" article;
+`)
+export class GridArticleDetail {
+	article = c.oneHasOne(GridArticle, 'details').notNull()
+	commentsCount = c.intColumn().notNull()
+}