XYLEX Group
DevelopmentResource FrameworkCreate Resource

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