npm package: @samfurlong/directus-panel-internal-form
Description: Create and update collection records directly from the dashboard. Integrates well with relationship variable panels.
Latest version: 1.0.6

# Directus Internal Form Panel

A Directus panel extension that allows you to create and update collection records directly from the dashboard. This extension integrates seamlessly with relationship variable panels and provides an intuitive form interface for data management.

## Features

- **Create New Records**: Add new items to any collection directly from a dashboard panel
- **Update Existing Records**: Edit existing records by providing an item ID
- **Dynamic Form Fields**: Configure which fields to display in the form
- **Responsive Design**: Adapts to different panel sizes (small/large layouts)
- **Permission Aware**: Respects Directus user permissions for collection access
- **Custom Response Format**: Configure how successful submissions are displayed
- **Loading States**: Visual feedback during form submission and data loading
- **Scrollable Content**: Handles large forms with repeater fields and code editors

## Installation

1. Copy the extension to your Directus extensions directory:
   ```
   /extensions/panels/internal-form/
   ```

2. Build the extension:
   ```bash
   npm run build
   ```

3. Restart your Directus instance

## Configuration

When adding the panel to your dashboard, you can configure:

### Panel Options

- **Collection**: The target collection for creating/updating records
- **Fields**: Array of field names to include in the form
- **Item ID**: (Optional) ID of an existing item to edit. Leave empty to create new records
- **Response Format**: Template string for displaying successful submission results
- **Show Header**: Toggle panel header visibility

### Example Configuration

```json
{
  "collection": "tasks",
  "fields": ["name", "description", "status", "assigned_to"],
  "itemId": "{{ $route.params.id }}",
  "responseFormat": "{{ name }} - {{ status }}",
  "showHeader": true
}
```

## Usage

### Creating New Records

1. Configure the panel with your target collection and desired fields
2. Leave the "Item ID" field empty
3. Fill out the form fields
4. Click "Save" to create the new record

### Updating Existing Records

1. Configure the panel with your target collection and desired fields  
2. Set the "Item ID" to the ID of the record you want to edit
3. The form will automatically load the existing data
4. Modify the fields as needed
5. Click "Update" to save changes

### Integration with Variables

The extension works great with Directus variables. For example, you can use route parameters or other dashboard variables:

- `{{ $route.params.id }}` - Use the current route's ID parameter
- `{{ $filters.client_id }}` - Use a dashboard filter value

## Field Types Supported

The extension supports all standard Directus field types including:

- Text and textarea fields
- Number fields
- Date and datetime fields
- Boolean toggles
- Select dropdowns
- Relationship fields
- Repeater fields (with scrollable content)
- Code editor fields
- File and image uploads

## Permissions

The extension respects Directus permissions. Users must have:

- **Create** permission for the collection to add new records
- **Update** permission for the collection to edit existing records
- **Read** permission to view and populate form fields

## Development

### Build Commands

- `npm run build` - Build for production
- `npm run dev` - Build in development mode with watch
- `npm run validate` - Validate the extension
- `npm run link` - Link the extension for development

### Requirements

- Directus ^10.10.0
- Vue ^3.5.16
- TypeScript ^5.8.3

## License

MIT License - see LICENSE file for details

## Support

For issues, questions, or contributions, please visit the project repository or contact the maintainer.