pict-section-form 1.3.3 → 1.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pict-section-form",
-    "version": "1.3.3",
+    "version": "1.3.5",
     "description": "Pict dynamic forms",
     "main": "source/Pict-Section-Form.js",
     "directories": {

package/source/providers/Pict-Provider-DynamicTabularData.js

@@ -330,7 +330,7 @@ class DynamicTabularData extends libPictProvider
 				// Render (source + dependent views) BEFORE solving so dependent DynamicColumns tables
 				// don't blank until the next edit, and the solve's DOM side effects survive. Matches
 				// the add/delete handlers' order.
-				this._repaintAfterRowReorder(tmpGroup);
+				this._repaintAfterRowReorder(pView, tmpGroup);
 			}
 		}
 	}
@@ -375,7 +375,7 @@ class DynamicTabularData extends libPictProvider
 				// (e.g. SetGroupVisibility hiding a validation message) act on the freshly rebuilt
 				// DOM and survive, and so dependent DynamicColumns tables don't blank until the next
 				// edit. Matches the add/delete handlers' order.
-				this._repaintAfterRowReorder(tmpGroup);
+				this._repaintAfterRowReorder(pView, tmpGroup);
 			}
 		}
 	}
@@ -425,7 +425,7 @@ class DynamicTabularData extends libPictProvider
 				// (e.g. SetGroupVisibility hiding a validation message) act on the freshly rebuilt
 				// DOM and survive, and so dependent DynamicColumns tables don't blank until the next
 				// edit. Matches the add/delete handlers' order.
-				this._repaintAfterRowReorder(tmpGroup);
+				this._repaintAfterRowReorder(pView, tmpGroup);
 			}
 		}
 	}
@@ -843,43 +843,34 @@ class DynamicTabularData extends libPictProvider
 	 *
 	 * @param {Object} pGroup - The reordered group (its RecordSetAddress drives dependents).
 	 */
-	_repaintAfterRowReorder(pGroup)
+	_repaintAfterRowReorder(pView, pGroup)
 	{
-		// Render every view that renders this record set as a table (the source table itself
-		// plus any sibling views bound to the same RecordSetAddress).
-		let tmpViewsToRender = this.pict.views.PictFormMetacontroller.filterViews(
-			(pViewToTestForGroup) =>
-			{
-				if (!pViewToTestForGroup.isPictSectionForm)
-				{
-					return false;
-				}
-				let tmpGroupsToTest = pViewToTestForGroup.getGroups();
-				for (let i = 0; i < tmpGroupsToTest.length; i++)
-				{
-					if (tmpGroupsToTest[i].RecordSetAddress == pGroup.RecordSetAddress)
-					{
-						return true;
-					}
-				}
-				return false;
-			});
-		// Re-rendering an entity-selector table clobbers its selected values in the
-		// model, so preserve them across the render.
-		this._renderViewsPreservingRecordSet(pGroup.RecordSetAddress, tmpViewsToRender);
-
-		// Rebuild any OTHER views whose DynamicColumns are sourced from this record set
-		// HERE, in the render phase -- BEFORE the marshal below -- so the column DOM is
-		// correct (and re-labeled to the new order) when the marshal fills it. Without
-		// this the dependent table is only rebuilt mid-marshal (onDataMarshalToForm),
-		// which renders AFTER the cells were filled and blanks them until the next edit.
+		// A reorder (move up/down/set-index) preserves the row COUNT -- the source table's DOM rows
+		// already exist; only which row holds which value changes. A full source-view render() would
+		// tear down and re-create every cell widget, and each entity-selector select2 re-init costs
+		// roughly O(document size), so on a large form that is SECONDS per move. Skip the source
+		// render and let the marshal below push the reordered model values into the existing DOM rows
+		// in place. (Add/delete change the row count and still render via their own paths.) Skipping
+		// the render also removes the need for the snapshot/restore in _renderViewsPreservingRecordSet:
+		// with no destructive render, the entity values are never clobbered.
+
+		// Dependent DynamicColumns views still need their generated column labels re-resolved for the
+		// new order (cheap -- those tables carry no entity widgets).
 		this._rebuildDependentDynamicColumnViews(pGroup.RecordSetAddress);
 
-		// Run the solver
+		// Run the solver, then marshal the model back out to the existing form DOM.
 		this.pict.providers.DynamicSolver.solveViews();
-
-		// We've re-rendered but we don't know what needs to be marshaled based on the solve that ran above so marshal everything
 		this.pict.views.PictFormMetacontroller.marshalFormSections();
+
+		// marshalFormSections updates simple cells in place, but a stateful widget (an entity
+		// selector's select2) will not switch to a reordered value whose <option> isn't the one it
+		// currently shows. Ask each input provider to repaint its display for the new row order:
+		// entity selectors force their select2 to the row's current value, everything else no-ops.
+		// Cheap (in-place value set, no widget teardown) versus the full re-render this replaced.
+		if (pView && (typeof pView.runInputProviderFunctions === 'function'))
+		{
+			pView.runInputProviderFunctions('onTabularRowReorderRepaint', null, null, this.fable.getUUID());
+		}
 	}
 }
 

package/source/providers/Pict-Provider-InputExtension.js

@@ -156,6 +156,45 @@ class PictInputExtensionProvider extends libPictProvider
 		return true;
 	}
 
+	/**
+	 * Repaint this input's rendered display from the model after a tabular row REORDER
+	 * (move up/down/set-index), which preserves the row count but changes which row holds
+	 * which value. A plain marshal updates simple inputs in place, but stateful widgets
+	 * (e.g. an entity-selector's select2) will not switch to a value whose option isn't the
+	 * one currently shown; those providers override this to force their display to the row's
+	 * current value. Default is a no-op.
+	 *
+	 * @param {Object} pView - The view object.
+	 * @param {Object} pGroup - The group definition object.
+	 * @param {number} pRow - The row index.
+	 * @param {Object} pInput - The input object.
+	 * @param {any} pValue - The value to display.
+	 * @param {string} pHTMLSelector - The HTML selector.
+	 * @param {string} pTransactionGUID - The transaction GUID for the event dispatch.
+	 * @returns {boolean} - Returns true.
+	 */
+	onTabularRowReorderRepaint(pView, pGroup, pRow, pInput, pValue, pHTMLSelector, pTransactionGUID)
+	{
+		return true;
+	}
+
+	/**
+	 * Tabular sibling of onTabularRowReorderRepaint. Default is a no-op.
+	 *
+	 * @param {Object} pView - The view object.
+	 * @param {Object} pGroup - The group definition object.
+	 * @param {Object} pInput - The input object.
+	 * @param {any} pValue - The value to display.
+	 * @param {string} pHTMLSelector - The HTML selector.
+	 * @param {number} pRowIndex - The row index of the tabular data.
+	 * @param {string} pTransactionGUID - The transaction GUID for the event dispatch.
+	 * @returns {boolean} - Returns true.
+	 */
+	onTabularRowReorderRepaintTabular(pView, pGroup, pInput, pValue, pHTMLSelector, pRowIndex, pTransactionGUID)
+	{
+		return true;
+	}
+
 	/**
 	 * Handles data requests for the Pict-Provider-InputExtension.
 	 *

package/source/providers/layouts/Pict-Layout-Tabular.js

@@ -1389,15 +1389,17 @@ class TabularLayout extends libPictSectionGroupLayout
 		// Leading (non-data) columns that precede the data cells: row-select, row labels, left controls.
 		let tmpLeadingColumnCount = (tmpRowSelectionEnabled ? 1 : 0) + tmpRowLabels.length + (tmpEditingLeft ? 1 : 0);
 
-		// When EditingControlsPosition isn't 'right' (the default), suppress the default
-		// extra-postfix slots by registering empty view-specific overrides. This keeps the
-		// existing template machinery intact for backwards compatibility -- consumers that
-		// don't opt in to the new behavior see identical output.
-		if (tmpEditingControlsPosition === 'left' || tmpEditingControlsPosition === 'hidden')
-		{
-			this.pict.TemplateProvider.addTemplate(pView.getViewSpecificTemplateHash('-TabularTemplate-Row-ExtraPostfix'), '');
-			this.pict.TemplateProvider.addTemplate(pView.getViewSpecificTemplateHash('-TabularTemplate-RowHeader-ExtraPostfix'), '');
-		}
+		// When EditingControlsPosition isn't 'right' (the default), the right-side editing-
+		// controls slots are suppressed PER GROUP by gating their emission on tmpEditingRight
+		// below (the RowHeader-ExtraPostfix parity cell and the per-row Row-ExtraPostfix cell).
+		//
+		// We must NOT suppress by registering an empty view-specific override here:
+		// getViewSpecificTemplateHash() is keyed by the view's formsTemplateSetPrefix, which is
+		// shared by EVERY tabular group in the section. A single 'hidden'/'left' group registering
+		// the empty override would shadow the default editing-controls template for sibling groups
+		// that DO want controls ('right'), deleting their menu column from the DOM entirely. The
+		// gate is the group's own EditingControlsPosition, so each group is independent and a
+		// view-specific override (if a host registers one) still applies to the groups that emit.
 
 		// The chooser bar sits ABOVE the group's table container (a div can't live
 		// inside <table> without the browser foster-parenting it out anyway).
@@ -1542,7 +1544,12 @@ class TabularLayout extends libPictSectionGroupLayout
 			tmpDataColumnCount++;
 		}
 
-		tmpTemplate += tmpMetatemplateGenerator.getMetatemplateTemplateReference(pView, `-TabularTemplate-RowHeader-ExtraPostfix`, `getGroup("${pGroup.GroupIndex}")`);
+		// Right-side editing-controls header parity cell -- only when this group keeps its
+		// controls on the right. Gated per group (matches the extra-header-row parity above).
+		if (tmpEditingRight)
+		{
+			tmpTemplate += tmpMetatemplateGenerator.getMetatemplateTemplateReference(pView, `-TabularTemplate-RowHeader-ExtraPostfix`, `getGroup("${pGroup.GroupIndex}")`);
+		}
 		tmpTemplate += tmpMetatemplateGenerator.getMetatemplateTemplateReference(pView, `-TabularTemplate-RowHeader-Postfix`, `getGroup("${pGroup.GroupIndex}")`);
 
 		// Warn on header alignment mismatches (data-column count must equal each extra-header
@@ -1584,7 +1591,13 @@ class TabularLayout extends libPictSectionGroupLayout
 		}
 
 		tmpTemplateSetVirtualRowTemplate += `\n\n{~T:${pGroup.SectionTabularRowTemplateHash}:Record~}\n`;
-		tmpTemplateSetVirtualRowTemplate += tmpMetatemplateGenerator.getMetatemplateTemplateReferenceRaw(pView, `-TabularTemplate-Row-ExtraPostfix`, `Record`);
+		// Right-side editing-controls cell (del/up/down) -- only when this group keeps its
+		// controls on the right. Gated per group so a sibling group's 'hidden'/'left' setting
+		// can't suppress this group's column. 'left' emits its controls via {~TEC:~} above.
+		if (tmpEditingRight)
+		{
+			tmpTemplateSetVirtualRowTemplate += tmpMetatemplateGenerator.getMetatemplateTemplateReferenceRaw(pView, `-TabularTemplate-Row-ExtraPostfix`, `Record`);
+		}
 		tmpTemplateSetVirtualRowTemplate += tmpMetatemplateGenerator.getMetatemplateTemplateReference(pView, `-TabularTemplate-Row-Postfix`, `getGroup("${pGroup.GroupIndex}")`);
 
 		// This is a custom template expression

package/test/PictSectionForm-Tabular-Features_tests.js

@@ -1687,4 +1687,132 @@ suite('PictSectionForm Tabular Features', () =>
 			}, fDone);
 		});
 	});
+
+	// ------------------------------------------------------------------------
+	// Regression: editing controls are PER GROUP, not per section.
+	// A 'hidden'/'left' tabular group used to register a view-shared empty
+	// template override (keyed by formsTemplateSetPrefix, which every group in
+	// the section shares), which deleted the right-side controls column of any
+	// sibling 'right' group -- the column was absent from the DOM, not just
+	// hidden. The fix gates the controls emission on the group's own
+	// EditingControlsPosition instead of a shared override.
+	// ------------------------------------------------------------------------
+	suite('Editing controls position is per-group (no section-wide bleed)', () =>
+	{
+		function makeTwoGroupApplication(pGroupA, pGroupB)
+		{
+			let App = makeApplication(pGroupA);
+			App.default_configuration.pict_configuration.DefaultFormManifest.Sections[0].Groups.push(JSON.parse(JSON.stringify(pGroupB)));
+			return App;
+		}
+
+		test("A sibling 'hidden' group does not suppress a 'right' group's controls column", (fDone) =>
+		{
+			let App = makeTwoGroupApplication(
+				{ Hash: 'Students', Layout: 'Tabular', RecordSetAddress: 'Students', RecordManifest: 'StudentEditor', EditingControlsPosition: 'hidden' },
+				{ Hash: 'Grades',   Layout: 'Tabular', RecordSetAddress: 'Grades',   RecordManifest: 'GradeRowEditor', EditingControlsPosition: 'right' }
+			);
+			bootstrap(App, (_Pict) =>
+			{
+				let tmpView = _Pict.views['PictSectionForm-Class'];
+				let tmpLayout = _Pict.providers['Pict-Layout-Tabular'];
+				let tmpHidden = tmpView.sectionDefinition.Groups[0];
+				let tmpRight = tmpView.sectionDefinition.Groups[1];
+
+				// Bake in section order -- the 'hidden' group first, which is what used to
+				// poison the section by registering the view-shared empty override.
+				let tmpHiddenTemplate = tmpLayout.generateGroupLayoutTemplate(tmpView, tmpHidden);
+				let tmpRightTemplate = tmpLayout.generateGroupLayoutTemplate(tmpView, tmpRight);
+
+				// (1) ROOT-CAUSE GUARD: a hidden/left group must NOT register a section-shared
+				// empty override at the view-specific prefix (this is what shadowed the default
+				// controls template for every other group in the section).
+				Expect(tmpView.checkViewSpecificTemplate('-TabularTemplate-Row-ExtraPostfix')).to.equal(false, 'no section-shared per-row controls override registered');
+				Expect(tmpView.checkViewSpecificTemplate('-TabularTemplate-RowHeader-ExtraPostfix')).to.equal(false, 'no section-shared header controls override registered');
+
+				// (2) The 'hidden' group itself emits no right-side controls (header parity or row cell).
+				Expect(tmpHidden.SectionTabularRowVirtualTemplateHash).to.be.a('string');
+				let tmpHiddenRow = _Pict.TemplateProvider.templates[tmpHidden.SectionTabularRowVirtualTemplateHash];
+				Expect(tmpHiddenTemplate).to.not.contain('-TabularTemplate-RowHeader-ExtraPostfix', 'hidden group emits no header controls cell');
+				Expect(tmpHiddenRow).to.not.contain('-TabularTemplate-Row-ExtraPostfix', 'hidden group emits no per-row controls cell');
+
+				// (3) The 'right' sibling KEEPS its controls (header parity + per-row cell).
+				Expect(tmpRight.SectionTabularRowVirtualTemplateHash).to.be.a('string');
+				let tmpRightRow = _Pict.TemplateProvider.templates[tmpRight.SectionTabularRowVirtualTemplateHash];
+				Expect(tmpRightTemplate).to.contain('-TabularTemplate-RowHeader-ExtraPostfix', 'right group keeps its header controls cell');
+				Expect(tmpRightRow).to.contain('-TabularTemplate-Row-ExtraPostfix', 'right group keeps its per-row controls cell');
+
+				// (4) ...and that per-row reference resolves to the REAL del/up/down control
+				// (the default template is intact and reachable, not an empty override).
+				let tmpDefaultControl = _Pict.TemplateProvider.templates[tmpView.defaultTemplatePrefix + '-TabularTemplate-Row-ExtraPostfix'];
+				Expect(tmpDefaultControl).to.contain('deleteDynamicTableRow', 'default row-controls template still wired to the delete/move handlers');
+			}, fDone);
+		});
+
+		test("A lone 'right' (default) group keeps its controls column", (fDone) =>
+		{
+			let App = makeApplication({ Hash: 'Students', Layout: 'Tabular', RecordSetAddress: 'Students', RecordManifest: 'StudentEditor' });
+			bootstrap(App, (_Pict) =>
+			{
+				let tmpView = _Pict.views['PictSectionForm-Class'];
+				let tmpLayout = _Pict.providers['Pict-Layout-Tabular'];
+				let tmpGroup = tmpView.sectionDefinition.Groups[0];
+				let tmpTemplate = tmpLayout.generateGroupLayoutTemplate(tmpView, tmpGroup);
+				let tmpRow = _Pict.TemplateProvider.templates[tmpGroup.SectionTabularRowVirtualTemplateHash];
+				Expect(tmpTemplate).to.contain('-TabularTemplate-RowHeader-ExtraPostfix', 'default (right) group has its header controls cell');
+				Expect(tmpRow).to.contain('-TabularTemplate-Row-ExtraPostfix', 'default (right) group has its per-row controls cell');
+			}, fDone);
+		});
+	});
+
+	suite('Row reorder performance (move skips the full source re-render)', () =>
+	{
+		test('moveDynamicTableRowUp reorders in place without full-rendering the source view, and repaints inputs via the hook', (fDone) =>
+		{
+			let App = makeApplication({
+				Hash: 'Students',
+				Layout: 'Tabular',
+				RecordSetAddress: 'Students',
+				RecordManifest: 'StudentEditor'
+			});
+			bootstrap(App, (_Pict) =>
+			{
+				let tmpView = _Pict.views['PictSectionForm-Class'];
+				let tmpDTD = _Pict.providers.DynamicTabularData;
+
+				// A move must NOT go through the expensive full source-view render -- that path tears
+				// down and re-initializes every cell widget (each entity-selector select2 re-init is
+				// what made BatchSheetCombined take seconds per move)...
+				let tmpFullRenderCalls = 0;
+				let tmpOriginalRender = tmpDTD._renderViewsPreservingRecordSet;
+				tmpDTD._renderViewsPreservingRecordSet = function (...pArgs)
+				{
+					tmpFullRenderCalls++;
+					return tmpOriginalRender.apply(this, pArgs);
+				};
+				// ...and it MUST ask the input providers to repaint their display for the new order.
+				let tmpRepaintHookCalls = 0;
+				let tmpOriginalRun = tmpView.runInputProviderFunctions;
+				tmpView.runInputProviderFunctions = function (pFunctionName)
+				{
+					if (pFunctionName === 'onTabularRowReorderRepaint') { tmpRepaintHookCalls++; }
+					return tmpOriginalRun.apply(this, arguments);
+				};
+
+				let tmpBefore = _Pict.AppData.Students.map((pRow) => pRow.StudentName);
+				tmpDTD.moveDynamicTableRowUp(tmpView, 0, 1); // 'Bob' (index 1) moves up to index 0
+
+				let tmpAfter = _Pict.AppData.Students.map((pRow) => pRow.StudentName);
+
+				tmpDTD._renderViewsPreservingRecordSet = tmpOriginalRender;
+				tmpView.runInputProviderFunctions = tmpOriginalRun;
+
+				Expect(tmpBefore[0]).to.equal('Alice', 'sanity: row 0 started as Alice');
+				Expect(tmpAfter[0]).to.equal('Bob', 'moved row is now first in the model');
+				Expect(tmpAfter[1]).to.equal('Alice', 'displaced row shifted down');
+				Expect(tmpFullRenderCalls).to.equal(0, 'a reorder must not full-render the source view (the slow select2 teardown)');
+				Expect(tmpRepaintHookCalls).to.equal(1, 'a reorder repaints inputs in place via the onTabularRowReorderRepaint hook');
+			}, fDone);
+		});
+	});
 });