luci-base: form.js: rework section add/remove event handling

 - Redraw map even when it could not be saved due to validation errors
 - Use createHandlerFn() for attaching event handlers
 - Convert buttons to <button> element to allow use of spinning class

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

diff --git a/modules/luci-base/htdocs/luci-static/resources/form.js b/modules/luci-base/htdocs/luci-static/resources/form.js
index cc72d6e48799afc9e4fb4a36f5f577f9e1da4566..cb6bf7929a1536cbb41f77f04314454056b3720a 100644 (file)
--- a/modules/luci-base/htdocs/luci-static/resources/form.js
+++ b/modules/luci-base/htdocs/luci-static/resources/form.js
@@ -132,18 +132,19 @@ var CBIMap = CBINode.extend({
                return Promise.all(tasks);
        },
 
-       save: function(cb) {
+       save: function(cb, silent) {
                this.checkDepends();
 
                return this.parse()
                        .then(cb)
                        .then(uci.save.bind(uci))
                        .then(this.load.bind(this))
-                       .then(this.renderContents.bind(this))
                        .catch(function(e) {
-                               alert('Cannot save due to invalid values')
+                               if (!silent)
+                                       alert('Cannot save due to invalid values');
+
                                return Promise.reject();
-                       });
+                       }).finally(this.renderContents.bind(this));
        },
 
        reset: function() {
@@ -658,14 +659,14 @@ var CBITypedSection = CBIAbstractSection.extend({
                var config_name = this.uciconfig || this.map.config;
 
                uci.add(config_name, this.sectiontype, name);
-               this.map.save();
+               return this.map.save(null, true);
        },
 
        handleRemove: function(section_id, ev) {
                var config_name = this.uciconfig || this.map.config;
 
                uci.remove(config_name, section_id);
-               this.map.save();
+               return this.map.save(null, true);
        },
 
        renderSectionAdd: function(extra_class) {
@@ -680,13 +681,11 @@ var CBITypedSection = CBIAbstractSection.extend({
                        createEl.classList.add(extra_class);
 
                if (this.anonymous) {
-                       createEl.appendChild(E('input', {
-                               'type': 'submit',
+                       createEl.appendChild(E('button', {
                                'class': 'cbi-button cbi-button-add',
-                               'value': btn_title || _('Add'),
                                'title': btn_title || _('Add'),
-                               'click': L.bind(this.handleAdd, this)
-                       }));
+                               'click': L.ui.createHandlerFn(this, 'handleAdd')
+                       }, btn_title || _('Add')));
                }
                else {
                        var nameEl = E('input', {
@@ -701,12 +700,12 @@ var CBITypedSection = CBIAbstractSection.extend({
                                        'type': 'submit',
                                        'value': btn_title || _('Add'),
                                        'title': btn_title || _('Add'),
-                                       'click': L.bind(function(ev) {
+                                       'click': L.ui.createHandlerFn(this, function(ev) {
                                                if (nameEl.classList.contains('cbi-input-invalid'))
                                                        return;
 
-                                               this.handleAdd(ev, nameEl.value);
-                                       }, this)
+                                               return this.handleAdd(ev, nameEl.value);
+                                       })
                                })
                        ]);
 
@@ -743,14 +742,12 @@ var CBITypedSection = CBIAbstractSection.extend({
                        if (this.addremove) {
                                sectionEl.appendChild(
                                        E('div', { 'class': 'cbi-section-remove right' },
-                                               E('input', {
-                                                       'type': 'submit',
+                                               E('button', {
                                                        'class': 'cbi-button',
                                                        'name': 'cbi.rts.%s.%s'.format(config_name, cfgsections[i]),
-                                                       'value': _('Delete'),
                                                        'data-section-id': cfgsections[i],
-                                                       'click': L.bind(this.handleRemove, this, cfgsections[i])
-                                               })));
+                                                       'click': L.ui.createHandlerFn(this, 'handleRemove', cfgsections[i])
+                                               }, _('Delete'))));
                        }
 
                        if (!this.anonymous)
@@ -1004,7 +1001,7 @@ var CBITableSection = CBITypedSection.extend({
                                        'class': 'cbi-button cbi-button-remove',
                                        'click': L.bind(function(sid, ev) {
                                                uci.remove(config_name, sid);
-                                               this.map.save();
+                                               this.map.save(null, true);
                                        }, this, section_id)
                                })
                        );
@@ -1283,7 +1280,7 @@ var CBINamedSection = CBIAbstractSection.extend({
                    config_name = this.uciconfig || this.map.config;
 
                uci.add(config_name, this.sectiontype, section_id);
-               this.map.save();
+               return this.map.save(null, true);
        },
 
        handleRemove: function(ev) {
@@ -1291,7 +1288,7 @@ var CBINamedSection = CBIAbstractSection.extend({
                    config_name = this.uciconfig || this.map.config;
 
                uci.remove(config_name, section_id);
-               this.map.save();
+               return this.map.save(null, true);
        },
 
        renderContents: function(data) {
@@ -1315,12 +1312,10 @@ var CBINamedSection = CBIAbstractSection.extend({
                        if (this.addremove) {
                                sectionEl.appendChild(
                                        E('div', { 'class': 'cbi-section-remove right' },
-                                               E('input', {
-                                                       'type': 'submit',
+                                               E('button', {
                                                        'class': 'cbi-button',
-                                                       'value': _('Delete'),
-                                                       'click': L.bind(this.handleRemove, this)
-                                               })));
+                                                       'click': L.ui.createHandlerFn(this, 'handleRemove')
+                                               }, _('Delete'))));
                        }
 
                        sectionEl.appendChild(E('div', {
@@ -1332,12 +1327,10 @@ var CBINamedSection = CBIAbstractSection.extend({
                }
                else if (this.addremove) {
                        sectionEl.appendChild(
-                               E('input', {
-                                       'type': 'submit',
+                               E('button', {
                                        'class': 'cbi-button cbi-button-add',
-                                       'value': _('Add'),
-                                       'click': L.bind(this.handleAdd, this)
-                               }));
+                                       'click': L.ui.createHandlerFn(this, 'handleAdd')
+                               }, _('Add')));
                }
 
                L.dom.bindClassInstance(sectionEl, this);