Create Resource Dialog
CreateResourceDialog
A generic dialog to create rows for any resource. It supports explicit configuration or DB-driven configuration via resource_routes when resourceName is supplied.
Import
import { CreateResourceDialog } from "@/packages/resource-framework/components/create-resource-dialog";
```typescript
### Props
- `open: boolean` – dialog visibility
- `onClose(): void` – close callback
- `table?: string` – target table for insertion
- `required?: string[]` – required fields
- `optional?: string[]` – optional fields
- `columns?: Array<string | { column_name; header?; header_label?; hidden?; data_type?; editor? }>`
- `title?: string` – dialog title
- `onCreated?(createdRow: any): void` – called with created row (first item if the API returns an array)
- `DialogComponent?: React.ComponentType<{ onSubmit(values); onCancel(); initial?; pending? }>` – fully custom renderer; call `onSubmit` to perform the insert
- `resourceName?: string` – when explicit config isn’t provided, fetch `resource_routes` by `resource_name` then fallback by `"table"`
- `cacheEnabled?: boolean` – when false, sends `Cache-Control: no-cache`
### Behavior
- If explicit `table/required/optional/columns` exist, they are used.
- Else, when `resourceName` is set, the dialog fetches `resource_routes` and derives:
- `table` → insertion target
- `new_resource_mandatory_columns` → required
- `new_resource_optional_columns` → optional
- `columns` → input rendering (supports `editor.type = "select"` with `options`)
- Empty strings are omitted from the payload.
- Boolean fields render as a checkbox; number inputs render when `data_type` is numeric.
- On success, shows a success notification and calls `onCreated`.
### Examples
Explicit configuration:
```tsx
<CreateResourceDialog
open={open}
onClose={() => setOpen(false)}
title="New customer"
table="customers"
required={["name", "email"]}
optional={["phone"]}
onCreated={(row) => {
// navigate or refresh
}}
/>
```typescript
DB-driven (fallback to `resource_routes`):
```tsx
<CreateResourceDialog
open={open}
onClose={() => setOpen(false)}
resourceName="customers"
cacheEnabled={false}
title="New customer"
onCreated={() => window.location.reload()}
/>
```typescript
Custom rendering:
```tsx
function CustomCustomerForm({ onSubmit, onCancel, initial, pending }: any) {
// collect values, then call onSubmit({ ...payload })
return null;
}
<CreateResourceDialog
open={open}
onClose={() => setOpen(false)}
resourceName="customers"
DialogComponent={CustomCustomerForm}
/>
```typescript