Editor: save and save as new in edit mode (bs modal)

flames

Dear Allan,

first, thank You for the awesome software!

Here is where i got stuck:

I am aware of the "duplicate" example in the documentation, which works fine for me https://editor.datatables.net/examples/api/duplicateButton.html

Now i need to implement in the edit mode an additional button "save as new", beside of "save" [this.submit()]. In the documentation i found the event preSubmit(). Can it be used to switch mode (create/edit) on demand by clicking either "save" or "save as new" buttons?
Here is my buttons section:

buttons: [
    {
        extend: "create",
        editor: editorDocuments,
        className: 'btn btn-default btn-sm btn-success',
        formButtons: [
            { label: 'Create', className: 'btn-success', fn: function () { this.submit(); } },
            { label: 'Cancel', className: 'btn-warning', fn: function () { this.close(); } }
        ]
    },
    {
        extend: "selectedSingle",
        text: 'Duplicate',
        className: 'btn btn-default btn-sm btn-success',
        action: function ( e, dt, node, config ) {
            // Place the selected row into edit mode (but hidden),
            // then get the values for all fields in the form
            var values = editorDocuments.edit(
                    oTableDocuments.row( { selected: true } ).index(),
                    false
                )
                .val();
            // Create a new entry (discarding the previous edit) and
            // set the values from the read values
            editorDocuments
            .create({
                title: 'Duplicate document',
                buttons: [
                    { label: 'Create', className: 'btn-success', fn: function () { this.submit(); } },
                    { label: 'Cancel', className: 'btn-warning', fn: function () { this.close(); } }
                ]
            })
            .set( values );
        }
    },
    {
        extend: "editSingle",
        editor: editorDocuments,
        className: 'btn btn-default btn-sm btn-warning',
        formButtons: [
            { label: 'Save', className: 'btn-success', fn: function () { this.submit(); } },
            { label: 'Save as new', className: 'btn-success', fn: function () { this.preSubmit(); this.submit(); } },
            { label: 'Cancel', className: 'btn-warning', fn: function () { this.close(); } }
        ]
    },
    {
        extend: "remove",
        editor: editorDocuments,
        className: 'btn btn-default btn-sm btn-danger',
        formButtons: [
            { label: 'Delete', className: 'btn-danger', fn: function () { this.submit(); } },
            { label: 'Cancel', className: 'btn-warning', fn: function () { this.close(); } }
        ]
    }
]

Thanks in advance
Arthur

allan

Excellent question - thanks for this.

There isn't currently a way to make Editor switch modes between create and edit. I don't actually recall this being asked before, but it seems like a very sensible idea. It is slightly tricky as the form can't be in two states (i.e. if we could trigger a create action based on the contents of the edit form, that would have done it).

A total hack, but actually quite simple, to make it work is to use preSubmit to modify Editor's internal state:

editor.one('preSubmit', function (e,d,action) {
  d.action = 'create';
  this.s.action = 'create';
} );

You would also have to modify this line in Editor:

json, notGood, submitParams, submitParamsLocal, action,

to be:

json, notGood, submitParams, submitParamsLocal, that.s.action,

I've just tried that and it does actually work quite nicely. I'll have a think about how I can formalise that into a public API.

Regards,
Allan

flames

Chapeau! This simple solution works perfectly. Maybe its something vor 1.6.6
Thanks and best regards,
Arthur

allan

Just to say that this will be in Editor 1.7. The mode() method will be able to be used as a setter as of 1.7, effectively allowing an edit to be changes into a create or remove action.

Thanks for the suggestion!

Allan