pict-section-form 1.2.2 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pict-section-form",
-    "version": "1.2.2",
+    "version": "1.2.3",
     "description": "Pict dynamic form sections",
     "main": "source/Pict-Section-Form.js",
     "directories": {
@@ -34,10 +34,10 @@
         "browser-env": "^3.3.0",
         "eslint": "^9.39.2",
         "jquery": "^4.0.0",
-        "pict": "^1.0.373",
+        "pict": "^1.0.386",
         "pict-application": "^1.0.34",
         "pict-docuserve": "^1.4.19",
-        "pict-service-commandlineutility": "^1.0.19",
+        "pict-service-commandlineutility": "^1.0.20",
         "quackage": "^1.3.0",
         "tui-grid": "^4.21.22",
         "typescript": "^5.9.3"
@@ -48,7 +48,7 @@
         "marked": "^4.3.0",
         "pict-provider": "^1.0.13",
         "pict-section-excalidraw": "^1.0.3",
-        "pict-section-markdowneditor": "^1.0.17",
+        "pict-section-markdowneditor": "^1.0.19",
         "pict-section-tuigrid": "^1.0.31",
         "pict-template": "^1.0.15",
         "pict-view": "^1.0.68"

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

@@ -318,13 +318,21 @@ class DynamicTabularData extends libPictProvider
 					this.log.error(`Dynamic View [${pView.UUID}]::[${pView.Hash}] Group ${tmpGroup.Hash} attempting to move row [${pRowIndex}] to [${pNewRowIndex}] but the index is out of bounds.`);
 					return false;
 				}
+				let tmpOriginalLength = tmpDestinationObject.length;
 				let tmpElementToBeMoved = tmpDestinationObject.splice(tmpRowIndex, 1);
 				tmpDestinationObject.splice(tmpNewRowIndex, 0, tmpElementToBeMoved[0]);
-				this.pict.providers.DynamicSolver.solveViews();
-				pView.render();
-				//pView.marshalToView();
-				// 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();
+
+				// Position-keyed DynamicColumns (KeyBy:"Position") store dependent cell data by the
+				// source row's INDEX, so a source reorder must apply the same permutation to every
+				// dependent row's positional cells -- otherwise user-entered values stay put while
+				// their column re-labels to a different source row. Must run BEFORE the dependent
+				// views re-resolve their columns below. No-op for value-keyed generators.
+				this._moveDependentPositionalColumns(tmpGroup.RecordSetAddress, tmpRowIndex, tmpNewRowIndex, tmpOriginalLength);
+
+				// 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);
 			}
 		}
 	}
@@ -353,17 +361,23 @@ class DynamicTabularData extends libPictProvider
 					this.log.error(`Dynamic View [${pView.UUID}]::[${pView.Hash}] Group ${tmpGroup.Hash} attempting to move row [${pRowIndex}] down but it's already at the bottom.`);
 					return false;
 				}
+				let tmpOriginalLength = tmpDestinationObject.length;
 				let tmpElementToBeMoved = tmpDestinationObject.splice(tmpRowIndex, 1);
-				tmpDestinationObject.splice(tmpRowIndex + 1, 0, tmpElementToBeMoved[0]);
-				// Render BEFORE solving so the solve's DOM side effects (e.g. SetGroupVisibility
-				// hiding a validation message) act on the freshly rebuilt DOM and survive. A
-				// solve-then-render order discards them, because render() rebuilds the group DOM
-				// without the solver-applied class. Matches the add/delete handlers' order.
-				pView.render();
-				this.pict.providers.DynamicSolver.solveViews();
-				//pView.marshalToView();
-				// 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();
+				let tmpNewRowIndex = tmpRowIndex + 1;
+				tmpDestinationObject.splice(tmpNewRowIndex, 0, tmpElementToBeMoved[0]);
+
+				// Position-keyed DynamicColumns (KeyBy:"Position") store dependent cell data by the
+				// source row's INDEX, so a source reorder must apply the same permutation to every
+				// dependent row's positional cells -- otherwise user-entered values stay put while
+				// their column re-labels to a different source row. Must run BEFORE the dependent
+				// views re-resolve their columns below. No-op for value-keyed generators.
+				this._moveDependentPositionalColumns(tmpGroup.RecordSetAddress, tmpRowIndex, tmpNewRowIndex, tmpOriginalLength);
+
+				// Render (source + dependent views) BEFORE solving so the solve's DOM side effects
+				// (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);
 			}
 		}
 	}
@@ -397,17 +411,23 @@ class DynamicTabularData extends libPictProvider
 					this.log.error(`Dynamic View [${pView.UUID}]::[${pView.Hash}] Group ${tmpGroup.Hash} attempting to move row [${pRowIndex}] but the index is out of bounds.`);
 					return false;
 				}
+				let tmpOriginalLength = tmpDestinationObject.length;
 				let tmpElementToBeMoved = tmpDestinationObject.splice(tmpRowIndex, 1);
-				tmpDestinationObject.splice(tmpRowIndex - 1, 0, tmpElementToBeMoved[0]);
-				// Render BEFORE solving so the solve's DOM side effects (e.g. SetGroupVisibility
-				// hiding a validation message) act on the freshly rebuilt DOM and survive. A
-				// solve-then-render order discards them, because render() rebuilds the group DOM
-				// without the solver-applied class. Matches the add/delete handlers' order.
-				pView.render();
-				this.pict.providers.DynamicSolver.solveViews();
-				//pView.marshalToView();
-				// 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();
+				let tmpNewRowIndex = tmpRowIndex - 1;
+				tmpDestinationObject.splice(tmpNewRowIndex, 0, tmpElementToBeMoved[0]);
+
+				// Position-keyed DynamicColumns (KeyBy:"Position") store dependent cell data by the
+				// source row's INDEX, so a source reorder must apply the same permutation to every
+				// dependent row's positional cells -- otherwise user-entered values stay put while
+				// their column re-labels to a different source row. Must run BEFORE the dependent
+				// views re-resolve their columns below. No-op for value-keyed generators.
+				this._moveDependentPositionalColumns(tmpGroup.RecordSetAddress, tmpRowIndex, tmpNewRowIndex, tmpOriginalLength);
+
+				// Render (source + dependent views) BEFORE solving so the solve's DOM side effects
+				// (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);
 			}
 		}
 	}
@@ -656,6 +676,165 @@ class DynamicTabularData extends libPictProvider
 			}
 		}
 	}
+
+	/**
+	 * For position-keyed DynamicColumns (KeyBy: "Position") sourced from
+	 * pSourceRecordSetAddress, REORDER each dependent row's positional cells to
+	 * mirror a source row that moved from pOldIndex to pNewIndex. The source array
+	 * was already spliced (remove at pOldIndex, insert at pNewIndex); this applies
+	 * the identical permutation to every dependent row's positional cell VALUES so
+	 * the data stays attached to its column when the columns re-resolve to the new
+	 * source order. Without it, a reorder leaves user-entered cells under the wrong
+	 * (renamed) column. Solver-filled rows re-derive on the next solve regardless;
+	 * applying the move to them too is harmless (the solve overwrites them). No-op
+	 * for value-keyed generators (their data stays attached to the stable value).
+	 *
+	 * Must run AFTER the source splice and BEFORE the dependent views re-resolve +
+	 * the marshal repaints them. Symmetric with _spliceDependentPositionalColumns.
+	 *
+	 * @param {string} pSourceRecordSetAddress - RecordSetAddress of the moved-within source.
+	 * @param {number} pOldIndex - Source row's index before the move.
+	 * @param {number} pNewIndex - Source row's index after the move.
+	 * @param {number} pLength - Source row count (unchanged by a move).
+	 */
+	_moveDependentPositionalColumns(pSourceRecordSetAddress, pOldIndex, pNewIndex, pLength)
+	{
+		if ((typeof pSourceRecordSetAddress !== 'string') || (pSourceRecordSetAddress.length < 1))
+		{
+			return;
+		}
+		if (pOldIndex === pNewIndex)
+		{
+			return;
+		}
+		if (!this.pict.views.PictFormMetacontroller)
+		{
+			return;
+		}
+		let tmpManifestFactory = this.fable.ManifestFactory;
+		if (!tmpManifestFactory || (typeof tmpManifestFactory._parseDynamicColumnTemplate !== 'function'))
+		{
+			return;
+		}
+		let tmpViews = this.pict.views.PictFormMetacontroller.filterViews((pViewToTest) => { return pViewToTest.isPictSectionForm; });
+		for (let v = 0; v < tmpViews.length; v++)
+		{
+			let tmpView = tmpViews[v];
+			let tmpGroups = tmpView.getGroups();
+			for (let g = 0; g < tmpGroups.length; g++)
+			{
+				let tmpGroup = tmpGroups[g];
+				if (!Array.isArray(tmpGroup.DynamicColumns) || (tmpGroup.DynamicColumns.length < 1))
+				{
+					continue;
+				}
+				let tmpDependentRows = tmpView.sectionManifest.getValueByHash(tmpView.getMarshalDestinationObject(), tmpGroup.RecordSetAddress);
+				if (!Array.isArray(tmpDependentRows) || (tmpDependentRows.length < 1))
+				{
+					continue;
+				}
+				for (let c = 0; c < tmpGroup.DynamicColumns.length; c++)
+				{
+					let tmpGenerator = tmpGroup.DynamicColumns[c];
+					if (!tmpGenerator || (tmpGenerator.SourceAddress !== pSourceRecordSetAddress))
+					{
+						continue;
+					}
+					// Only position-keyed generators store data by index; value-keyed columns keep
+					// their data attached to the (stable) value, so they need no reordering.
+					if (tmpGenerator.KeyBy !== 'Position')
+					{
+						continue;
+					}
+					if (typeof tmpGenerator.InformaryDataAddressTemplate !== 'string')
+					{
+						continue;
+					}
+					// Resolve the positional cell address for each column index once.
+					let tmpAddresses = [];
+					for (let k = 0; k < pLength; k++)
+					{
+						tmpAddresses[k] = tmpManifestFactory._parseDynamicColumnTemplate(tmpGenerator.InformaryDataAddressTemplate, { __Index: k, __RowNumber: k + 1 });
+					}
+					for (let r = 0; r < tmpDependentRows.length; r++)
+					{
+						let tmpRow = tmpDependentRows[r];
+						if (!tmpRow || (typeof tmpRow !== 'object'))
+						{
+							continue;
+						}
+						// Read the current positional cell values, apply the identical
+						// remove-at-old / insert-at-new permutation, then write them back.
+						let tmpValues = [];
+						for (let k = 0; k < pLength; k++)
+						{
+							tmpValues[k] = tmpAddresses[k] ? tmpView.sectionManifest.getValueByHash(tmpRow, tmpAddresses[k]) : undefined;
+						}
+						let tmpMoved = tmpValues.splice(pOldIndex, 1);
+						tmpValues.splice(pNewIndex, 0, tmpMoved[0]);
+						for (let k = 0; k < pLength; k++)
+						{
+							if (tmpAddresses[k])
+							{
+								tmpView.sectionManifest.setValueByHash(tmpRow, tmpAddresses[k], tmpValues[k]);
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	/**
+	 * Shared tail for the row-reorder handlers (move up / move down / set index).
+	 * Repaints the moved source table and every dependent view, in the RENDER phase
+	 * BEFORE solving + marshaling, then solves and marshals. Mirrors what the add /
+	 * delete handlers do so a reorder doesn't blank dependent DynamicColumns tables
+	 * (or the rest of their section) until the next edit. Render happens before the
+	 * solve so the solve's DOM side effects (e.g. SetGroupVisibility) land on the
+	 * freshly rebuilt DOM and survive.
+	 *
+	 * @param {Object} pGroup - The reordered group (its RecordSetAddress drives dependents).
+	 */
+	_repaintAfterRowReorder(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;
+			});
+		for (let i = 0; i < tmpViewsToRender.length; i++)
+		{
+			tmpViewsToRender[i].render();
+		}
+
+		// 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.
+		this._rebuildDependentDynamicColumnViews(pGroup.RecordSetAddress);
+
+		// Run the solver
+		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();
+	}
 }
 
 module.exports = DynamicTabularData;

package/test/PictSectionForm-Tabular-Features_tests.js

@@ -569,6 +569,96 @@ suite('PictSectionForm Tabular Features', () =>
 			}, fDone);
 		});
 
+		test('Moving a source row reorders dependent position-keyed cells (data follows the column)', (fDone) =>
+		{
+			let App = makeApplication({
+				Hash: 'Grades',
+				Layout: 'Tabular',
+				RecordSetAddress: 'Grades',
+				RecordManifest: 'GradeRowEditor',
+				DynamicColumns:
+				[
+					{
+						SourceAddress: 'Assignments',
+						KeyBy: 'Position',
+						HashTemplate: 'PassingCol_{~D:Record.__Index~}',
+						NameTemplate: '{~D:Record.Title~}',
+						InformaryDataAddressTemplate: 'PassingCol_{~D:Record.__Index~}',
+						DataType: 'String',
+						PictForm: { InputType: 'Text' }
+					}
+				]
+			},
+			{
+				// Each dependent row carries user-entered positional cells (one per source column).
+				Grades:
+				[
+					{ Section: 'A', StudentName: 'Alice', PassingCol_0: 'a0', PassingCol_1: 'a1', PassingCol_2: 'a2' },
+					{ Section: 'A', StudentName: 'Bob',   PassingCol_0: 'b0', PassingCol_1: 'b1', PassingCol_2: 'b2' }
+				]
+			});
+			bootstrap(App, (_Pict) =>
+			{
+				// Source order is [Addition(0), Photosynthesis(1), Reading 1(2)]. Move row 0 -> 2,
+				// the way moveDynamicTableRowDown twice / setDynamicTableRowIndex(0,2) would, then
+				// apply the SAME permutation to every dependent row's positional cells.
+				_Pict.providers.DynamicTabularData._moveDependentPositionalColumns('Assignments', 0, 2, 3);
+
+				let tmpRow0 = _Pict.AppData.Grades[0];
+				let tmpRow1 = _Pict.AppData.Grades[1];
+				// [a0,a1,a2] with source 0->2 becomes [a1,a2,a0] -- the value under each column
+				// moved with its source position, so data stays attached to its column.
+				Expect(tmpRow0.PassingCol_0).to.equal('a1', 'row 0 col 0 took the value from old position 1');
+				Expect(tmpRow0.PassingCol_1).to.equal('a2', 'row 0 col 1 took the value from old position 2');
+				Expect(tmpRow0.PassingCol_2).to.equal('a0', 'row 0 col 2 took the moved value from old position 0');
+				Expect(tmpRow1.PassingCol_0).to.equal('b1', 'row 1 permuted identically');
+				Expect(tmpRow1.PassingCol_1).to.equal('b2', 'row 1 permuted identically');
+				Expect(tmpRow1.PassingCol_2).to.equal('b0', 'row 1 permuted identically');
+			}, fDone);
+		});
+
+		test('Reordering a source row re-labels dependent columns in the render phase (no blank-out on move)', (fDone) =>
+		{
+			let App = makeApplication({
+				Hash: 'Grades',
+				Layout: 'Tabular',
+				RecordSetAddress: 'Grades',
+				RecordManifest: 'GradeRowEditor',
+				DynamicColumns:
+				[
+					{
+						SourceAddress: 'Assignments',
+						KeyBy: 'Position',
+						HashTemplate: 'PassingCol_{~D:Record.__Index~}',
+						NameTemplate: '{~D:Record.Title~}',
+						InformaryDataAddressTemplate: 'PassingCol_{~D:Record.__Index~}',
+						DataType: 'String',
+						PictForm: { InputType: 'Text' }
+					}
+				]
+			});
+			bootstrap(App, (_Pict) =>
+			{
+				let tmpView = _Pict.views['PictSectionForm-Class'];
+				let tmpGroup = tmpView.sectionDefinition.Groups[0];
+				Expect(tmpGroup.supportingManifest.elementDescriptors['PassingCol_0'].Name).to.equal('Addition', 'col 0 header before move');
+				Expect(tmpGroup.supportingManifest.elementDescriptors['PassingCol_2'].Name).to.equal('Reading 1', 'col 2 header before move');
+
+				// Reorder the source the way the move handler splices it (move index 0 -> 2), then
+				// run the render-phase rebuild the move handler now performs BEFORE marshaling.
+				let tmpMoved = _Pict.AppData.Assignments.splice(0, 1);
+				_Pict.AppData.Assignments.splice(2, 0, tmpMoved[0]);
+				_Pict.providers.DynamicTabularData._rebuildDependentDynamicColumnViews('Assignments');
+
+				// Column hashes are position-keyed (stable), but their labels must re-resolve to the
+				// NEW source order here in the render phase -- not mid-marshal, which would blank the
+				// freshly filled cells until the next edit.
+				Expect(tmpGroup.supportingManifest.elementDescriptors['PassingCol_0'].Name).to.equal('Photosynthesis', 'col 0 re-labeled to new position 0');
+				Expect(tmpGroup.supportingManifest.elementDescriptors['PassingCol_1'].Name).to.equal('Reading 1', 'col 1 re-labeled to new position 1');
+				Expect(tmpGroup.supportingManifest.elementDescriptors['PassingCol_2'].Name).to.equal('Addition', 'col 2 re-labeled to the moved row');
+			}, fDone);
+		});
+
 		test('Renaming a source row reports namesChanged and refreshes the column header in place', (fDone) =>
 		{
 			let App = makeApplication({