fixed typing

examples/shadcn-react-table/README.md

@@ -1,13 +1,26 @@
 # Shadcn React Table
 
-This examples demos server side sorting / filtering / paging using remult with shadcn design
-
 [Open in stackblitz](https://stackblitz.com/github/remult/remult/tree/main/examples/shadcn-react-table)
 
-Based on Shadcn tasks example:
-https://ui.shadcn.com/examples/tasks
-and this table example
-https://table.sadmn.com/
+This examples demos:
+
+- Typed Server side sorting, filtering & paging from the frontend
+- Full CRUD capabilities
+- Single source of truth for:
+  - typing
+  - Database structure
+  - rest api
+  - frontend & api validation
+  - Frontend query language
+  - UI metadata (grid columns, and form fields)
+- live query
+- Using remult with react-hook-forms
+- remult admin (`/api/admin`)
+
+## Inspired by
+
+- https://ui.shadcn.com/examples/tasks
+- https://table.sadmn.com/
 
 To run this example:
 

examples/shadcn-react-table/src/model/label.ts

@@ -0,0 +1,7 @@
+export const labelOptions = [
+  'bug',
+  'feature',
+  'enhancement',
+  'documentation',
+] as const
+export type Label = (typeof labelOptions)[number]

examples/shadcn-react-table/src/model/priority.ts

@@ -0,0 +1,2 @@
+export const priorityOptions = ['low', 'medium', 'high'] as const
+export type Priority = (typeof priorityOptions)[number]

examples/shadcn-react-table/src/model/seed.ts

@@ -1,19 +1,24 @@
-import { repo, type DataProvider } from 'remult'
+import { getValueList, repo, type DataProvider } from 'remult'
 import { faker } from '@faker-js/faker'
-import { Task, labelOptions, priorityOptions, statusOptions } from './task.ts'
+import { Task } from './task.ts'
 
 export async function seed(dataProvider?: DataProvider) {
+  const taskRepo = repo(Task, dataProvider)
   console.log('Seeding data...')
   for (let index = 0; index < 1000; index++) {
     try {
-      await repo(Task, dataProvider).insert({
+      await taskRepo.insert({
         code: `TASK-${(1000 + index).toString()}`,
         title: faker.hacker
           .phrase()
           .replace(/^./, (letter) => letter.toUpperCase()),
-        status: faker.helpers.arrayElement(statusOptions),
-        label: faker.helpers.arrayElement(labelOptions),
-        priority: faker.helpers.arrayElement(priorityOptions),
+        status: faker.helpers.arrayElement(
+          getValueList(taskRepo.fields.status),
+        ),
+        label: faker.helpers.arrayElement(getValueList(taskRepo.fields.label)),
+        priority: faker.helpers.arrayElement(
+          getValueList(taskRepo.fields.priority),
+        ),
         createdAt: faker.date.past(),
       })
     } catch {}

examples/shadcn-react-table/src/model/status.ts

@@ -0,0 +1,7 @@
+export const statusOptions = [
+  'todo',
+  'in-progress',
+  'done',
+  'canceled',
+] as const
+export type Status = (typeof statusOptions)[number]

examples/shadcn-react-table/src/model/task.ts

@@ -1,24 +1,8 @@
 import { Entity, Fields, Validators } from 'remult'
 import { capitalize } from '../lib/utils.ts'
-
-export const statusOptions = [
-  'todo',
-  'in-progress',
-  'done',
-  'canceled',
-] as const
-export type Status = (typeof statusOptions)[number]
-
-export const labelOptions = [
-  'bug',
-  'feature',
-  'enhancement',
-  'documentation',
-] as const
-export type Label = (typeof labelOptions)[number]
-
-export const priorityOptions = ['low', 'medium', 'high'] as const
-export type Priority = (typeof priorityOptions)[number]
+import { statusOptions, type Status } from './status.ts'
+import { labelOptions, type Label } from './label.ts'
+import { priorityOptions, type Priority } from './priority.ts'
 
 @Entity('tasks', {
   allowApiCrud: true,
@@ -31,6 +15,7 @@ export class Task {
     validate: Validators.unique,
     allowApiUpdate: false,
     saving: async (task, e) => {
+      // Generate a unique code for the task
       if (!task.code) {
         const maxTaskCodeRow = await e.entityRef.repository.findOne({
           orderBy: { code: 'desc' },
@@ -52,13 +37,13 @@ export class Task {
     validate: Validators.required,
     displayValue: (_, value) => capitalize(value),
   })
-  status: Status = 'todo'
-  @Fields.literal(() => labelOptions, {
+  label: Label = 'bug'
+  @Fields.literal(() => priorityOptions, {
     validate: Validators.required,
     displayValue: (_, value) => capitalize(value),
   })
-  label: Label = 'bug'
-  @Fields.literal(() => priorityOptions, {
+  status: Status = 'todo'
+  @Fields.literal(() => labelOptions, {
     validate: Validators.required,
     displayValue: (_, value) => capitalize(value),
   })