Merge pull request #639 from Laravel-Backpack/add-docs-for-modal-form-component

Author: tabacitu

7.x-dev/base-components.md

@@ -90,14 +90,13 @@ These are the components that Backpack uses inside the default CRUD operations.
 
 ![Backpack v7 Dataform component](https://backpackforlaravel.com/uploads/v7/dataform_component.jpg)
 
-This component helps you show a form _anywhere you want_, so the admin to easily create or edit an entries for an Eloquent model. The dataform component is a extension of a CrudController - so a CrudController for that entity needs to be already set up, and passed to this component as a parameter:
+This component helps you show a form _anywhere you want_, so the admin can easily create or edit an entries for an Eloquent model. The dataform component is a extension of a CrudController - so a CrudController for that entity needs to be already set up, and passed to this component as a parameter:
 
 ```html
 <x-bp-dataform controller="\App\Http\Controllers\Admin\InvoiceCrudController" />
 ```
 
 **Configuration options:**
-- `name='invoice_form'` - by default, a name will be generated; but you can pick one you can recognize;
 - `operation='create'` - by default, the datatable component will pick up everything that controller sets up for the Create operation; if you want to change the operation it will initialize, you can pass this parameter;
 - `:entry="\App\Models\Invoice::find(1)"` - if you want to use UpdateOperation or a custom form operation that needs the entry;
 - `:setup="function($crud, $parent) {}"` - if you want to make changes to the operation setup (eg. add/remove fields, configure functionality), you can use this parameter; the closure passed here will be run _after_ the setup of that operation had already completed;
@@ -118,6 +117,47 @@ This component helps you show a form _anywhere you want_, so the admin to easily
 
 <hr>
 
+<a name="dataform-modal"></a>
+### Dataform Modal
+
+![Backpack v7 Dataform Modal component](https://backpackforlaravel.com/uploads/v7/dataform_component.jpg)
+
+This component helps you show a form _anywhere you want_ inside a modal, so the admin can easily create or edit an entry for an Eloquent model without having to refresh the whole page.
+
+To use this component you are required to add `CreateInModalOperation` and/or `UpdateInModalOperation` in your CrudController. The dataform modal component is a extension of a CrudController - so a CrudController for that entity needs to be already set up, and passed to this component as a parameter:
+
+First, in your CrudController, either remove `CreateOperation` in favor of `CreateInModalOperation`, or you can keep both operations. Having both of them is usefull if you want your ListOperation to still show the regular "Create" button, but you would like also to have the possibility to create this entity somewhere else in your application using a modal form. 
+
+```php
+use \Backpack\DataformModal\Http\Controllers\Operations\CreateInModalOperation;
+```
+
+```html
+<x-bp-dataform-modal controller="\App\Http\Controllers\Admin\InvoiceCrudController" />
+```
+
+**Configuration options:**
+- `operation='createInModal'` - by default, the component will pick up everything that controller sets up for the Create operation; if you want to change the operation it will initialize, you can pass this parameter, eg: `updateInModal`
+- `:entry="\App\Models\Invoice::find(1)"` - if you want to use UpdateInModalOperation or a custom form operation that needs the entry;
+- `:setup="function($crud, $parent) {}"` - if you want to make changes to the operation setup (eg. add/remove fields, configure functionality), you can use this parameter; the closure passed here will be run _after_ the setup of that operation had already completed;
+
+**Advanced example:**
+
+```html
+<x-bp-dataform-modal
+    controller="\App\Http\Controllers\Admin\InvoiceCrudController"
+    name="invoice_form"
+    operation="updateInModal"
+    :entry="\App\Models\Invoice::find(1)"
+    :setup="function($crud, $parent) {
+        $crud->removeColumn('notes');
+    }"
+ />
+```
+<hr>
+
+> **NOTE**: The date_picker (jquery version) does not properly work in this context. Please use any alternative. 
+
 <a name="datatable"></a>
 ### Datatable