From: Jo-Philipp Wich <jo@mein.io>
Date: Mon, 16 May 2022 11:10:20 +0000 (+0200)
Subject: luci-base: form.js: save parent map on opening nested modal map
X-Git-Url: http://git.lede-project.org./?a=commitdiff_plain;h=3be479446bdeaf446468c5e7ac3b9bc49da023da;p=project%2Fluci.git

luci-base: form.js: save parent map on opening nested modal map

Before opening (rendering) a nested modal map, make sure to save the parent
modal map in order to persist any structural uci changes, such as newly added
anonymous sections to prevent the nested map from operating on stale values
or ephemeral config section IDs.

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 3b2e89eccd..a09c805938 100644
--- a/modules/luci-base/htdocs/luci-static/resources/form.js
+++ b/modules/luci-base/htdocs/luci-static/resources/form.js
@@ -3206,63 +3206,70 @@ var CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection.p
 	/** @private */
 	renderMoreOptionsModal: function(section_id, ev) {
 		var parent = this.map,
-		    title = parent.title,
-		    name = null,
-		    m = new CBIMap(this.map.config, null, null),
-		    s = m.section(CBINamedSection, section_id, this.sectiontype);
+		    sref = parent.data.get(parent.config, section_id),
+		    mapNode = this.getActiveModalMap(),
+		    activeMap = mapNode ? dom.findClassInstance(mapNode) : null,
+		    stackedMap = activeMap && (activeMap.parent !== parent || activeMap.section !== section_id);
 
-		m.parent = parent;
-		m.section = section_id;
-		m.readonly = parent.readonly;
+		return (stackedMap ? activeMap.save(null, true) : Promise.resolve()).then(L.bind(function() {
+			section_id = sref['.name'];
 
-		s.tabs = this.tabs;
-		s.tab_names = this.tab_names;
+			var m = new CBIMap(parent.config, null, null),
+			    s = m.section(CBINamedSection, section_id, this.sectiontype);
 
-		if ((name = this.titleFn('modaltitle', section_id)) != null)
-			title = name;
-		else if ((name = this.titleFn('sectiontitle', section_id)) != null)
-			title = '%s - %s'.format(parent.title, name);
-		else if (!this.anonymous)
-			title = '%s - %s'.format(parent.title, section_id);
+			m.parent = parent;
+			m.section = section_id;
+			m.readonly = parent.readonly;
 
-		this.cloneOptions(this, s);
+			s.tabs = this.tabs;
+			s.tab_names = this.tab_names;
 
-		return Promise.resolve(this.addModalOptions(s, section_id, ev)).then(L.bind(m.render, m)).then(L.bind(function(nodes) {
-			var mapNode = this.getActiveModalMap(),
-			    activeMap = mapNode ? dom.findClassInstance(mapNode) : null;
+			this.cloneOptions(this, s);
 
-			if (activeMap && (activeMap.parent !== parent || activeMap.section !== section_id)) {
-				mapNode.parentNode
-					.querySelector('h4')
-					.appendChild(E('span', title ? ' » ' + title : ''));
+			return Promise.resolve(this.addModalOptions(s, section_id, ev)).then(function() {
+				return m.render();
+			}).then(L.bind(function(nodes) {
+				var title = parent.title,
+				    name = null;
 
-				mapNode.parentNode
-					.querySelector('div.right > button')
-					.firstChild.data = _('Back');
+				if ((name = this.titleFn('modaltitle', section_id)) != null)
+					title = name;
+				else if ((name = this.titleFn('sectiontitle', section_id)) != null)
+					title = '%s - %s'.format(parent.title, name);
+				else if (!this.anonymous)
+					title = '%s - %s'.format(parent.title, section_id);
+
+				if (stackedMap) {
+					mapNode.parentNode
+						.querySelector('h4')
+						.appendChild(E('span', title ? ' » ' + title : ''));
 
-				mapNode.classList.add('hidden');
-				mapNode.parentNode.insertBefore(nodes, mapNode.nextElementSibling);
+					mapNode.parentNode
+						.querySelector('div.right > button')
+						.firstChild.data = _('Back');
+
+					mapNode.classList.add('hidden');
+					mapNode.parentNode.insertBefore(nodes, mapNode.nextElementSibling);
 
-				return activeMap.save(null, true).then(function() {
 					nodes.classList.add('flash');
-				}, function() {});
-			}
-			else {
-				ui.showModal(title, [
-					nodes,
-					E('div', { 'class': 'right' }, [
-						E('button', {
-							'class': 'cbi-button',
-							'click': ui.createHandlerFn(this, 'handleModalCancel', m)
-						}, [ _('Dismiss') ]), ' ',
-						E('button', {
-							'class': 'cbi-button cbi-button-positive important',
-							'click': ui.createHandlerFn(this, 'handleModalSave', m),
-							'disabled': m.readonly || null
-						}, [ _('Save') ])
-					])
-				], 'cbi-modal');
-			}
+				}
+				else {
+					ui.showModal(title, [
+						nodes,
+						E('div', { 'class': 'right' }, [
+							E('button', {
+								'class': 'cbi-button',
+								'click': ui.createHandlerFn(this, 'handleModalCancel', m)
+							}, [ _('Dismiss') ]), ' ',
+							E('button', {
+								'class': 'cbi-button cbi-button-positive important',
+								'click': ui.createHandlerFn(this, 'handleModalSave', m),
+								'disabled': m.readonly || null
+							}, [ _('Save') ])
+						])
+					], 'cbi-modal');
+				}
+			}, this));
 		}, this)).catch(L.error);
 	}
 });