feat: Add orders table, drop old tables, and improve relation field handling in CRUD forms.

Author: clifordpereira

playground/app/components/crud/Form.vue

@@ -38,9 +38,23 @@ const formSchema = useDynamicZodSchema(filteredFields, !!props.initialState)
 const state = reactive<Record<string, unknown>>(
   filteredFields.reduce(
     (acc, field) => {
-      acc[field.name]
-        = props.initialState?.[field.name]
-          ?? (field.type === 'boolean' ? false : '')
+      let value = props.initialState?.[field.name]
+
+      // Handle relation fields that might be objects
+      // Case 1: value is an object with id (e.g. customer_id: { id: 1, ... })
+      if ((field.name.endsWith('_id') || field.name.endsWith('Id')) && value && typeof value === 'object' && 'id' in value) {
+        value = (value as { id: unknown }).id
+      }
+      // Case 2: value is undefined, but there might be a relation object (e.g. field is customer_id, but props has customer: { id: 1 })
+      else if ((field.name.endsWith('_id') || field.name.endsWith('Id')) && value === undefined) {
+        const relationName = field.name.endsWith('_id') ? field.name.replace('_id', '') : field.name.replace('Id', '')
+        const relationValue = props.initialState?.[relationName]
+        if (relationValue && typeof relationValue === 'object' && 'id' in relationValue) {
+          value = (relationValue as { id: unknown }).id
+        }
+      }
+
+      acc[field.name] = value ?? (field.type === 'boolean' ? false : undefined)
       return acc
     },
     {} as Record<string, unknown>,
@@ -54,6 +68,9 @@ const processedFields = computed(() =>
     if (label.endsWith('_id')) {
       label = label.replace('_id', '')
     }
+    else if (label.endsWith('Id')) {
+      label = label.replace('Id', '')
+    }
     label = useChangeCase(label, 'capitalCase').value
     return {
       ...field,
@@ -81,7 +98,6 @@ function handleSubmit(event: FormSubmitEvent<Record<string, unknown>>) {
         :key="field.name"
       >
         <UFormField
-          v-if="!props.initialState || field.name !== 'password'"
           :label="field.label"
           :name="field.name"
         >
@@ -91,23 +107,30 @@ function handleSubmit(event: FormSubmitEvent<Record<string, unknown>>) {
           />
 
           <CrudNameList
-            v-else-if="field.name.endsWith('_id')"
+            v-else-if="field.name.endsWith('_id') || field.name.endsWith('Id')"
             v-model="state[field.name] as string | number | null"
             :field-name="field.name"
           />
 
+          <template v-else-if="field.name === 'password'">
+            <CommonPassword
+              v-if="!props.initialState"
+              v-model="state[field.name] as string"
+              type="password"
+            />
+            <span
+              v-else
+              class="text-gray-500 italic text-sm"
+            >
+              Password can only be set on creation.
+            </span>
+          </template>
           <UInput
             v-else-if="field.type === 'date'"
             v-model="state[field.name] as string"
             type="datetime-local"
           />
 
-          <CommonPassword
-            v-else-if="field.name === 'password'"
-            v-model="state[field.name] as string"
-            type="password"
-          />
-
           <USelect
             v-else-if="field.type === 'enum'"
             v-model="state[field.name] as string"
@@ -124,6 +147,7 @@ function handleSubmit(event: FormSubmitEvent<Record<string, unknown>>) {
           />
         </UFormField>
       </template>
+
       <UButton type="submit">
         Submit
       </UButton>

playground/app/components/crud/NameList.vue

@@ -14,7 +14,7 @@ if (props.tableName) {
   urlPath = props.tableName
 }
 else if (props.fieldName) {
-  const baseName = props.fieldName.replace(/_id$/, '')
+  const baseName = props.fieldName.replace(/(_id|Id)$/, '')
   urlPath = pluralize(baseName) // e.g., user_id → users
 }
 
@@ -35,20 +35,36 @@ const { data: options } = await useFetch(() => `${crudBaseUrl}/${urlPath}`, {
   lazy: true,
   headers: crudHeaders(),
 })
+
+function handleUpdate(value: unknown) {
+  if (value && typeof value === 'object') {
+    // If USelectMenu returns the full object despite value-attribute, extract the ID
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const id = (value as any).value || (value as any).id
+    emit('update:modelValue', id)
+  }
+  else {
+    emit('update:modelValue', value)
+  }
+}
 </script>
 
 <template>
   <USelectMenu
-    :items="options"
-    :model-value="modelValue"
+    :items="options || []"
+    :model-value="modelValue as any"
     value-attribute="value"
+    option-attribute="label"
     placeholder="Select"
     class="w-full"
-    @update:model-value="emit('update:modelValue', $event)"
+    @update:model-value="handleUpdate"
   >
     <template #item-label="{ item }">
-      {{ item.label }}
-      <span class="text-muted">{{ item.extra }}</span>
+      <span>{{ item.label }}</span>
+      <span
+        v-if="item.extra"
+        class="text-gray-400 text-xs ml-2"
+      >({{ item.extra }})</span>
     </template>
   </USelectMenu>
 </template>

playground/app/composables/useDynamicZodSchema.ts

@@ -41,8 +41,8 @@ export function useDynamicZodSchema(
     }
     else if (field.type === 'number') {
       validators[field.name] = field.required
-        ? z.number()
-        : z.number().optional()
+        ? z.coerce.number()
+        : z.coerce.number().optional()
     }
     else if (field.type === 'date') {
       validators[field.name] = field.required

playground/server/database/migrations/0002_stormy_albert_cleary.sql

@@ -0,0 +1,14 @@
+CREATE TABLE `orders` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`customer_id` integer NOT NULL,
+	`product_id` integer NOT NULL,
+	`quantity` integer DEFAULT 1 NOT NULL,
+	`total` real NOT NULL,
+	`status` text DEFAULT 'pending' NOT NULL,
+	`created_at` integer NOT NULL,
+	FOREIGN KEY (`customer_id`) REFERENCES `customers`(`id`) ON UPDATE no action ON DELETE no action,
+	FOREIGN KEY (`product_id`) REFERENCES `products`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+DROP TABLE `notifications`;--> statement-breakpoint
+DROP TABLE `sales`;