Rocket Form

RocketForm implements a rocket-form-renderer for a ManipulationDefinition and ManipulationHandler. These are currently implemented as in the RocketData Laravel package. Please note that RocketData automatically creates a ManipulationDefinition and ManipulationHandler from your model metadata.

RocketForm could be used for add, edit or add-edit operations.

Rocketform takes the following properties:

• url - Which is the route to the ManipulationHandler or the RocketData route.
• operation - it could be add, edit or add-edit.
• save-button-text - The button text during the edit operation.
• create-button-text - The button text during the create operation.
• cancel-button-text - The cancel button's text.
• id - The record id if it is an edit operation.

Rocketform will get and save it's own definition and data.

<rocket-form url="{{ route('rocketform.basic') }}"
                             operation="add-edit"
                             v-model="id"
                @saved="saved($event)"
                @created="created($event)"
                save-button-text="Save Person"
                create-button-text="Create Person">
</rocket-form>

 data : {
    id : 1484,
 },
 methods : {
            saved(data){
                console.log('Saved');
                console.log(data);
            },
            created(data){
                console.log('Created');
                console.log(data);
            }
        }

Events

• @saved gets called when the edit operation succeeds. It sends the form data to the handler.
• @created gets called when the create operation succeeds. It sends the form data to the handler.
• @cancel gets called when the cancel button is clicked.
• @input is used for v-model and receives the id when the add operation succeeds in add-edit mode.

Modifiers

It is possible to modify any of the rocket-form-renderer definitions by specifying the following modifiers:

 :edit-modifiers="modifiers"
 :create-modifiers="modifiers"

 modifiers : {
                name : {
                    options : {
                        prependIcon : 'person',
                        md : 6
                    }
                },
                email : {
                    options : {
                        prependIcon : 'mail',
                        md : 6
                    }
                },
                isadmin : {
                    show : (data)=>{
                        return data.name==='';
                    }
                }
            }

The modifier object key is the field name. The rocket-form-definition objects are merged with the provided objects.

Scoped slots

You may inject scoped slots for the create or edit definition. The following steps should be taken:

• Bind create-slots or edit-slots to objects.
• The object should contain the slot names and position (see example).
• Put the scoped slot template inside the rocket-form tag.

 <rocket-form url="{{ route('rocketform.basic') }}"
                             operation="add-edit"
                             v-model="id"
                @saved="saved($event)"
                @created="created($event)"
                save-button-text="Save Person"
                create-button-text="Create Person"
                :edit-modifiers="modifiers"
                :create-modifiers="modifiers"
                :create-slots="scopedSlots"
                :edit-slots="scopedSlots"
                >
                <template scope="data" slot="custom">
                  <vcode>{{data}}</code>
                </template>
                <template scope="data" slot="custom_files">
                  <vcode>{{data}}</code>
                </template>
              </rocket-form>

scopedSlots : [ //after: is before fieldId or groupId
                {after:'company',name:'custom'},
                {after:'filesgroup',name:'custom_files'},
            ],