pict-section-form 1.3.2 → 1.3.3

package/example_applications/gradebook/Gradebook-Application.js

@@ -8,10 +8,20 @@
 	  4. The column chooser via Group.ColumnChooser — a "Columns" menu of
 	     checkboxes above the table; the hidden set lives in the form data
 	     (<GroupHash>_HiddenColumns) so it survives a save/reload.
+	  5. ONE record set, many tabular projections. The Students roster, the Grade
+	     Book, the Performance breakdown and the Commentary grid ALL bind the same
+	     "Students" array (each tab is just a different column projection of it via
+	     its own RecordManifest). Because pict-section-form re-renders every tabular
+	     group that shares a RecordSetAddress when a row is added / removed / moved,
+	     adding a student on the roster tab makes that student appear on every other
+	     tab automatically — no glue code, no sync solver. This is the "tabular rows
+	     automatically map to a shared array" behavior. Per-assignment grades live at
+	     Students[i].Grades.<IDAssignment> and notes at Students[i].Notes.<IDAssignment>,
+	     so the dynamic Assignment columns hang off the same row object.
 
 	The host code itself does nothing interesting — it just wires a TabSectionSelector
-	for navigation, then defines four tabular sections. All the new behavior comes
-	from the manifest JSON below.
+	for navigation, then defines five tabular sections. All the behavior comes from
+	the manifest JSON below.
 */
 
 const libPictSectionForm = require('../../source/Pict-Section-Form.js');
@@ -108,7 +118,7 @@ module.exports.default_configuration.pict_configuration = (
 				 *   - Extra header row (the "Assignments" banner) above the auto super-header.
 				 *   - Dynamic columns: one column per row of `Assignments`, with each
 				 *     descriptor's Name = the assignment title and the data stored at
-				 *     `Grades[rowIndex].Grades.<IDAssignment>` (preserved on hide).
+				 *     `Students[rowIndex].Grades.<IDAssignment>` (preserved on hide).
 				 *   - HeaderGroupTemplate auto-extends Headers with a topic super-header
 				 *     row clustering consecutive same-topic columns.
 				 *   - RowSelection / ColumnSelection: check a row and/or a column to
@@ -131,11 +141,12 @@ module.exports.default_configuration.pict_configuration = (
 							"Hash": "GradebookGrid",
 							"Name": "Grade Book",
 							"Layout": "Tabular",
-							"RecordSetAddress": "Grades",
+							"RecordSetAddress": "Students",
 							"RecordManifest": "GradeRowEditor",
 							"RowSelection": true,
 							"ColumnSelection": true,
 							"ColumnChooser": true,
+							"ColumnSorting": true,
 							"Headers":
 							[
 								[
@@ -179,7 +190,7 @@ module.exports.default_configuration.pict_configuration = (
 							"Hash": "PerformanceGrid",
 							"Name": "Student Performance Breakdown",
 							"Layout": "Tabular",
-							"RecordSetAddress": "Grades",
+							"RecordSetAddress": "Students",
 							"RecordManifest": "GradeRowEditor",
 							"EditingControlsPosition": "hidden",
 							// Recomputes each row's average across its grade values whenever
@@ -217,9 +228,13 @@ module.exports.default_configuration.pict_configuration = (
 					/*
 					 * One colortabularrow() call per student row. Each reads the row's
 					 * `Average` and maps it to a band color: >=85 green, >=75 amber,
-					 * else red. The expressions cover the eight seeded students; adding
-					 * students would need matching rows here (a real app would generate
-					 * these, but an example keeps them explicit so the mechanism is clear).
+					 * else red. These presentational solvers are keyed by row index and
+					 * cover the eight seeded students. Adding a student still makes the
+					 * new row appear on every tab (the shared "Students" record set does
+					 * that automatically) — it just won't be color-banded until a matching
+					 * row-index solver exists. A real app would generate one per row; the
+					 * example keeps them explicit so the mechanism stays visible. Out-of-
+					 * range solvers are a safe no-op, so extra rows simply render unbanded.
 					 */
 					"Solvers":
 					[
@@ -235,9 +250,11 @@ module.exports.default_configuration.pict_configuration = (
 				},
 
 				/*
-				 * Tab 5 — Teacher commentary. Tabular grid where the data store is
-				 * `Commentary[].Notes[<IDAssignment>]`. Same DynamicColumns shape,
-				 * different InformaryDataAddress so the data path doesn't collide.
+				 * Tab 5 — Teacher commentary. Another projection of the shared
+				 * `Students` array; the data store is `Students[].Notes[<IDAssignment>]`.
+				 * Same DynamicColumns shape as the Grade Book, different
+				 * InformaryDataAddress (Notes vs Grades) so the two grids hang their
+				 * per-assignment cells off the same row object without colliding.
 				 */
 				{
 					"Hash": "Commentary",
@@ -248,7 +265,7 @@ module.exports.default_configuration.pict_configuration = (
 							"Hash": "CommentaryGrid",
 							"Name": "Teacher Commentary",
 							"Layout": "Tabular",
-							"RecordSetAddress": "Commentary",
+							"RecordSetAddress": "Students",
 							"RecordManifest": "CommentaryRowEditor",
 							"Headers":
 							[

package/example_applications/gradebook/GradebookData.json

@@ -3,14 +3,14 @@
 		"GradebookTab": "Gradebook"
 	},
 	"Students": [
-		{ "Section": "A", "StudentName": "Alice Carter",   "StudentID": "S-001" },
-		{ "Section": "A", "StudentName": "Brian Diaz",     "StudentID": "S-002" },
-		{ "Section": "A", "StudentName": "Carla Edwards",  "StudentID": "S-003" },
-		{ "Section": "B", "StudentName": "Devon Fox",      "StudentID": "S-004" },
-		{ "Section": "B", "StudentName": "Erika Gomez",    "StudentID": "S-005" },
-		{ "Section": "B", "StudentName": "Felix Hayes",    "StudentID": "S-006" },
-		{ "Section": "C", "StudentName": "Gabriela Ingram","StudentID": "S-007" },
-		{ "Section": "C", "StudentName": "Henry Jensen",   "StudentID": "S-008" }
+		{ "Section": "A", "StudentName": "Alice Carter",    "StudentID": "S-001", "Average": 89.43, "Grades": { "1": 95, "2": 88, "3": 91, "4": 84, "5": 76, "6": 100, "7": 92 }, "Notes": { "1": "Strong start", "3": "Great essay" } },
+		{ "Section": "A", "StudentName": "Brian Diaz",      "StudentID": "S-002", "Average": 77.57, "Grades": { "1": 72, "2": 80, "3": 65, "4": 78, "5": 88, "6": 90,  "7": 70 }, "Notes": { "5": "Needs practice on plot summary" } },
+		{ "Section": "A", "StudentName": "Carla Edwards",   "StudentID": "S-003", "Average": 88.71, "Grades": { "1": 88, "2": 85, "3": 92, "4": 90, "5": 95, "6": 85,  "7": 86 }, "Notes": {} },
+		{ "Section": "B", "StudentName": "Devon Fox",       "StudentID": "S-004", "Average": 70.00, "Grades": { "1": 60, "2": 68, "3": 70, "4": 72, "5": 65, "6": 80,  "7": 75 }, "Notes": { "1": "Borderline; offer extra worksheets" } },
+		{ "Section": "B", "StudentName": "Erika Gomez",     "StudentID": "S-005", "Average": 89.57, "Grades": { "1": 90, "2": 92, "3": 85, "4": 88, "5": 89, "6": 95,  "7": 88 }, "Notes": {} },
+		{ "Section": "B", "StudentName": "Felix Hayes",     "StudentID": "S-006", "Average": 77.14, "Grades": { "1": 75, "2": 78, "3": 80, "4": 76, "5": 82, "6": 70,  "7": 79 }, "Notes": {} },
+		{ "Section": "C", "StudentName": "Gabriela Ingram", "StudentID": "S-007", "Average": 87.43, "Grades": { "1": 82, "2": 90, "3": 88, "4": 85, "5": 91, "6": 92,  "7": 84 }, "Notes": { "6": "Beautiful color work" } },
+		{ "Section": "C", "StudentName": "Henry Jensen",    "StudentID": "S-008", "Average": 68.86, "Grades": { "1": 70, "2": 65, "3": 60, "4": 72, "5": 68, "6": 75,  "7": 72 }, "Notes": { "3": "Struggling; schedule one-on-one" } }
 	],
 	"Assignments": [
 		{ "IDAssignment": 1, "Title": "Addition",        "Topic": "Math",    "Points": 100, "Weight": 1.0 },
@@ -20,25 +20,5 @@
 		{ "IDAssignment": 5, "Title": "Reading: A Wrinkle in Time", "Topic": "Reading", "Points": 100, "Weight": 1.0 },
 		{ "IDAssignment": 6, "Title": "Watercolor Practice", "Topic": "Art", "Points": 100, "Weight": 0.5 },
 		{ "IDAssignment": 7, "Title": "Short Essay",     "Topic": "Writing", "Points": 100, "Weight": 1.5 }
-	],
-	"Grades": [
-		{ "Section": "A", "StudentName": "Alice Carter",    "Average": 89.43, "Grades": { "1": 95, "2": 88, "3": 91, "4": 84, "5": 76, "6": 100, "7": 92 } },
-		{ "Section": "A", "StudentName": "Brian Diaz",      "Average": 77.57, "Grades": { "1": 72, "2": 80, "3": 65, "4": 78, "5": 88, "6": 90,  "7": 70 } },
-		{ "Section": "A", "StudentName": "Carla Edwards",   "Average": 88.71, "Grades": { "1": 88, "2": 85, "3": 92, "4": 90, "5": 95, "6": 85,  "7": 86 } },
-		{ "Section": "B", "StudentName": "Devon Fox",       "Average": 70.00, "Grades": { "1": 60, "2": 68, "3": 70, "4": 72, "5": 65, "6": 80,  "7": 75 } },
-		{ "Section": "B", "StudentName": "Erika Gomez",     "Average": 89.57, "Grades": { "1": 90, "2": 92, "3": 85, "4": 88, "5": 89, "6": 95,  "7": 88 } },
-		{ "Section": "B", "StudentName": "Felix Hayes",     "Average": 77.14, "Grades": { "1": 75, "2": 78, "3": 80, "4": 76, "5": 82, "6": 70,  "7": 79 } },
-		{ "Section": "C", "StudentName": "Gabriela Ingram", "Average": 87.43, "Grades": { "1": 82, "2": 90, "3": 88, "4": 85, "5": 91, "6": 92,  "7": 84 } },
-		{ "Section": "C", "StudentName": "Henry Jensen",    "Average": 68.86, "Grades": { "1": 70, "2": 65, "3": 60, "4": 72, "5": 68, "6": 75,  "7": 72 } }
-	],
-	"Commentary": [
-		{ "Section": "A", "StudentName": "Alice Carter",    "Notes": { "1": "Strong start",   "3": "Great essay" } },
-		{ "Section": "A", "StudentName": "Brian Diaz",      "Notes": { "5": "Needs practice on plot summary" } },
-		{ "Section": "A", "StudentName": "Carla Edwards",   "Notes": {} },
-		{ "Section": "B", "StudentName": "Devon Fox",       "Notes": { "1": "Borderline; offer extra worksheets" } },
-		{ "Section": "B", "StudentName": "Erika Gomez",     "Notes": {} },
-		{ "Section": "B", "StudentName": "Felix Hayes",     "Notes": {} },
-		{ "Section": "C", "StudentName": "Gabriela Ingram", "Notes": { "6": "Beautiful color work" } },
-		{ "Section": "C", "StudentName": "Henry Jensen",    "Notes": { "3": "Struggling; schedule one-on-one" } }
 	]
 }

package/package.json

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

package/source/providers/dynamictemplates/Pict-DynamicTemplates-DefaultFormTemplates.js

@@ -858,6 +858,16 @@ Glug glug glug Oo... -->
 						<th data-tabular-column-index="{~D:Record.PictForm.InputIndex~}">{~D:Record.Name~}</th>
 `
 		},
+		{
+			// The column label only (no <th> wrapper). Used by the ColumnSorting
+			// header cell so the label resolves dynamically on every render -- the
+			// same way the default HeaderCell above does -- instead of being baked
+			// as a static string when the template is built. This lets DynamicColumns
+			// name changes (e.g. via refreshtabularsection) update the visible header
+			// without a full rebuildCustomTemplate.
+			"HashPostfix": "-TabularTemplate-HeaderCellLabel",
+			"Template": /*HTML*/`{~D:Record.Name~}`
+		},
 		{
 			"HashPostfix": "-TabularTemplate-RowHeader-Postfix",
 			"Template": /*HTML*/`

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

@@ -98,8 +98,14 @@ class TabularLayout extends libPictSectionGroupLayout
 			tmpStateClass = 'pict-tabular-sort-desc';
 		}
 		let tmpGlyph = (typeof this.pict.icon === 'function') ? this.pict.icon(tmpIconName) : '';
-		let tmpName = this._escapeHTML((pDescriptor && pDescriptor.Name != null) ? String(pDescriptor.Name) : '');
-		return `\n\t\t\t\t\t\t<th data-tabular-column-index="${pColumnIndex}">${tmpName} `
+		// Resolve the column label through a metatemplate reference (not a baked
+		// literal) so it re-resolves on every render -- this keeps the sortable
+		// header in lock-step with the descriptor Name the same way the default
+		// (non-sorting) header does. The sort-control glyph/state below is baked,
+		// which is fine: it only changes on a sort click, which rebuilds anyway.
+		let tmpLabelReference = this.pict.providers.MetatemplateGenerator.getMetatemplateTemplateReference(
+			pView, `-TabularTemplate-HeaderCellLabel`, `getTabularRecordInput("${pGroup.GroupIndex}","${pColumnIndex}")`);
+		return `\n\t\t\t\t\t\t<th data-tabular-column-index="${pColumnIndex}">${tmpLabelReference} `
 			+ `<span class="pict-tabular-sort-control ${tmpStateClass}" `
 			+ `onclick="_Pict.providers['Pict-Layout-Tabular'].sortTabularColumn('${pView.Hash}', ${pGroup.GroupIndex}, ${pColumnIndex})">`
 			+ `${tmpGlyph}</span></th>\n`;

package/test/PictSectionForm-Tabular-Features_tests.js

@@ -1288,6 +1288,111 @@ suite('PictSectionForm Tabular Features', () =>
 				Expect(tmpLayout._compareTabularValues(null, 'a')).to.be.lessThan(0);
 			}, fDone);
 		});
+
+		// Regression: a ColumnSorting header must keep its label in lock-step with the
+		// descriptor Name. Before the fix, _buildSortableHeaderCell baked the resolved
+		// Name as a static string, so a label change applied by a render-only refresh
+		// (e.g. DynamicColumns recomputed via refreshtabularsection) never reached the
+		// visible header -- only a full rebuildCustomTemplate would. The label is now a
+		// metatemplate reference that re-resolves on every render, matching the default
+		// (non-sorting) header.
+		test('ColumnSorting header label is a dynamic metatemplate reference, not a baked literal', (fDone) =>
+		{
+			let App = makeApplication({
+				Hash: 'Students',
+				Layout: 'Tabular',
+				RecordSetAddress: 'Students',
+				RecordManifest: 'StudentEditor',
+				ColumnSorting: true
+			});
+			bootstrap(App, (_Pict) =>
+			{
+				let tmpView = _Pict.views['PictSectionForm-Class'];
+				let tmpGroup = tmpView.sectionDefinition.Groups[0];
+				let tmpLayout = _Pict.providers['Pict-Layout-Tabular'];
+				let tmpNameIndex = tmpGroup.supportingManifest.elementAddresses.indexOf('StudentName');
+				let tmpDescriptor = tmpGroup.supportingManifest.elementDescriptors['StudentName'];
+				Expect(tmpDescriptor.Name).to.equal('Student', 'baseline descriptor name');
+
+				let tmpHeaderHTML = tmpLayout._buildSortableHeaderCell(tmpView, tmpGroup, tmpDescriptor, tmpNameIndex);
+				// The label is emitted as a metatemplate reference bound to the live descriptor...
+				Expect(tmpHeaderHTML).to.contain('-TabularTemplate-HeaderCellLabel', 'label rendered via the dynamic label template');
+				Expect(tmpHeaderHTML).to.contain(`getTabularRecordInput("${tmpGroup.GroupIndex}","${tmpNameIndex}")`, 'reference bound to this column descriptor');
+				// ...NOT baked as the literal name (which is what caused the stale header).
+				Expect(tmpHeaderHTML).to.not.contain('>Student ', 'descriptor name is not inlined as a static literal');
+				// The sort control is still baked (it only changes on a sort click, which rebuilds).
+				Expect(tmpHeaderHTML).to.contain('pict-tabular-sort-control', 'sort control still present');
+				Expect(tmpHeaderHTML).to.contain('sortTabularColumn', 'sort click handler still wired');
+			}, fDone);
+		});
+
+		test('-TabularTemplate-HeaderCellLabel is registered and resolves the descriptor Name (parity with the default header)', (fDone) =>
+		{
+			let App = makeApplication({
+				Hash: 'Students',
+				Layout: 'Tabular',
+				RecordSetAddress: 'Students',
+				RecordManifest: 'StudentEditor',
+				ColumnSorting: true
+			});
+			bootstrap(App, (_Pict) =>
+			{
+				let tmpView = _Pict.views['PictSectionForm-Class'];
+				// The label template exists under the view's theme prefix and resolves the
+				// same {~D:Record.Name~} data tag the default (non-sorting) HeaderCell uses.
+				let tmpTemplateHash = tmpView.getThemeSpecificTemplateHash('-TabularTemplate-HeaderCellLabel');
+				Expect(tmpTemplateHash in _Pict.TemplateProvider.templates).to.equal(true, 'label template registered');
+				// Template entries are stored as raw template strings.
+				Expect(_Pict.TemplateProvider.templates[tmpTemplateHash]).to.contain('{~D:Record.Name~}', 'label resolves the descriptor Name dynamically');
+			}, fDone);
+		});
+
+		test('ColumnSorting header reflects a descriptor Name change on render() without a rebuildCustomTemplate', (fDone) =>
+		{
+			let App = makeApplication({
+				Hash: 'Students',
+				Layout: 'Tabular',
+				RecordSetAddress: 'Students',
+				RecordManifest: 'StudentEditor',
+				ColumnSorting: true
+			});
+			bootstrap(App, (_Pict) =>
+			{
+				let tmpView = _Pict.views['PictSectionForm-Class'];
+				let tmpGroup = tmpView.sectionDefinition.Groups[0];
+				// Target the StudentName column specifically (the StudentEditor manifest
+				// also has a Section column at index 0).
+				let tmpNameIndex = tmpGroup.supportingManifest.elementAddresses.indexOf('StudentName');
+				let tmpHeaderSelector = `th[data-tabular-column-index="${tmpNameIndex}"]`;
+
+				// Render the section into its real destination so we can read the baked header.
+				let tmpContainerId = String(tmpView.sectionDefinition.DefaultDestinationAddress || '').replace('#', '');
+				let tmpContainer = window.document.createElement('div');
+				tmpContainer.id = tmpContainerId;
+				window.document.body.appendChild(tmpContainer);
+				try
+				{
+					tmpView.render();
+					let tmpHeader = tmpContainer.querySelector(tmpHeaderSelector);
+					Expect(tmpHeader).to.not.equal(null, 'a sortable header cell rendered');
+					Expect(tmpHeader.textContent).to.contain('Student', 'header shows the original descriptor name');
+
+					// Simulate what a render-only refresh (refreshtabularsection / DynamicColumns
+					// name recompute) does: the live descriptor's Name changes, then render() runs
+					// WITHOUT rebuildCustomTemplate(). The header must follow.
+					tmpGroup.supportingManifest.elementDescriptors['StudentName'].Name = 'Aggregate Base';
+					tmpView.render();
+
+					let tmpHeaderAfter = tmpContainer.querySelector(tmpHeaderSelector);
+					Expect(tmpHeaderAfter.textContent).to.contain('Aggregate Base', 'header updated to the new name on render alone');
+					Expect(tmpHeaderAfter.textContent).to.not.contain('Student', 'stale label no longer shown');
+				}
+				finally
+				{
+					window.document.body.removeChild(tmpContainer);
+				}
+			}, fDone);
+		});
 	});
 
 	suite('Tabular column chooser (ColumnChooser)', () =>