pict-section-form 1.0.10 → 1.0.13

package/source/{Pict-Section-Form-Provider-Templates-DefaultFormTemplates.js → providers/Pict-Provider-DynamicTemplates-DefaultFormTemplates.js}

@@ -1,39 +1,36 @@
 module.exports = (
 {
 	"TemplatePrefix": "Pict-Forms-Basic",
-
-	"Templates":[
+	"Templates":
+	[
 		/*
-		*
-		* [ Metacontroller Templates ]
-		*
-		*/
-		// -Form-Container-Header
+		 *
+		 * [ Metacontroller Templates ]
+		 *
+		 */
+		// the form "Header", rendered once before the dynamic views, after which come the section(s), then their group(s)
 		{
 			"HashPostfix": "-Template-Form-Container-Header",
 			"Template": /*HTML*/`
-<!-- 
-Pict Form Metacontroller container Header
+<!-- Pict Form Metacontroller container Header
 
   ;,//;,    ,;/
  o:::::::;;///
 >::::::::;;\\\
   ''\\\\\'" ';\
 
-Glug glug glug Oo...
--->
+Glug glug glug Oo... -->
 <div id="Pict-{~D:Context[0].UUID~}-FormContainer" class="pict-form">`
 		},
-
-		// -Form-Container-Wrap-Prefix
+		// 
 		{
 			"HashPostfix": "-Template-Form-Container-Wrap-Prefix",
 			"Template": /*HTML*/`
 <!-- Pict Form Metacontroller container [{~D:Context[0].UUID~}] -->
-<div id="Pict-{~D:Context[0].UUID~}-FormContainer" class="pict-form">`
+<div id="Pict-{~D:Context[0].UUID~}-{~D:Record.options.Hash~}-Wrap" class="pict-form">`
 		},
-		// -Form-Container
-		// This is the DIV each section (view) renders into.
+		// the container div into which the actual view renders.
+		// if you overwrite this template, make sure this ID is available on a container somewhere or auto rendering won't work
 		{
 			"HashPostfix": "-Template-Form-Container",
 			"Template": /*HTML*/`
@@ -53,27 +50,24 @@ Glug glug glug Oo...
 
 
 		/*
-		*
-		* [ Section Wrap Templates ]
-		*
-		*/
-		// -Form-Template-Wrap-Prefix
+		 *
+		 * [ Basic Form Templates START ]
+		 *
+		 */
+		// the wrapping container for a view which is a collection of form section(s)...
 		{
 			"HashPostfix": "-Template-Wrap-Prefix",
 			"Template": /*HTML*/`
 	<!-- Pict Form Wrap Prefix [{~D:Context[0].UUID~}]::[{~D:Context[0].Hash~}] -->
 `
 		},
-		// -Form-Template-Wrap-Postfix
 		{
 			"HashPostfix": "-Template-Wrap-Postfix",
 			"Template": /*HTML*/`
 	<!-- Pict Form Wrap Postfix [{~D:Context[0].UUID~}]::[{~D:Context[0].Hash~}] -->
 `
 		},
-
-
-		// -Form-Template-Section-Prefix
+		// the wrapping container for each specific section in a form... for legends and the like
 		{
 			"HashPostfix": "-Template-Section-Prefix",
 			"Template": /*HTML*/`
@@ -91,13 +85,10 @@ Glug glug glug Oo...
 `
 		},
 
-
 		/*
-		*
-		* [ Group and Row Templates (default) ]
-		*
-		*/
-		// -Form-Template-Group-Prefix
+		 * BEGIN Group and Row Templates (default)
+		 */
+		// a "group" is a cluster of inputs that are further categorized into row(s)
 		{
 			"HashPostfix": "-Template-Group-Prefix",
 			"Template": /*HTML*/`
@@ -106,7 +97,8 @@ Glug glug glug Oo...
 			<div>
 `
 		},
-		// -Form-Template-Row-Prefix
+		// row(s) are useful when our form has multiple inputs on some lines and a single on another...
+		// like city, state and zip all in the same "row" of an address form
 		{
 			"HashPostfix": "-Template-Row-Prefix",
 			"Template": /*HTML*/`
@@ -114,7 +106,6 @@ Glug glug glug Oo...
 				<div>
 `
 		},
-		// -Form-Template-Row-Postfix
 		{
 			"HashPostfix": "-Template-Row-Postfix",
 			"Template": /*HTML*/`
@@ -122,7 +113,6 @@ Glug glug glug Oo...
 				<!-- Form Template Row Postfix [{~D:Context[0].UUID~}]::[{~D:Context[0].Hash~}] {~D:Record.Hash~}::{~D:Record.Name~} -->
 `
 		},
-		// -Form-Template-Group-Postfix
 		{
 			"HashPostfix": "-Template-Group-Postfix",
 			"Template": /*HTML*/`
@@ -130,14 +120,13 @@ Glug glug glug Oo...
 			<!-- Form Template Group Prefix [{~D:Context[0].UUID~}]::[{~D:Context[0].Hash~}] {~D:Record.Hash~}::{~D:Record.Name~} -->
 `
 		},
-
+		/*
+		 * END Group and Row Templates (default)
+		 */
 
 		/*
-		*
-		* [ Input Templates (Default) ]
-		*
-		*/
-		// -Form-Template-Input
+		 * BEGIN Input Templates (default)
+		 */
 		{
 			"HashPostfix": "-Template-Input",
 			"Template": /*HTML*/`
@@ -145,7 +134,6 @@ Glug glug glug Oo...
 					<span>{~D:Record.Name~}:</span> <input type="text" {~D:Record.Macro.InputFullProperties~} {~D:Record.Macro.InputChangeHandler~} value="">
 `
 		},
-		// -Form-Template-Input-DataType-String
 		{
 			"HashPostfix": "-Template-Input-DataType-String",
 			"Template": /*HTML*/`
@@ -153,7 +141,6 @@ Glug glug glug Oo...
 					<span>{~D:Record.Name~}:</span> <input type="text" {~D:Record.Macro.InputFullProperties~} {~D:Record.Macro.InputChangeHandler~} value="">
 `
 		},
-		// -Form-Template-Input-DataType-Number
 		{
 			"HashPostfix": "-Template-Input-DataType-Number",
 			"Template": /*HTML*/`
@@ -161,7 +148,6 @@ Glug glug glug Oo...
 					<span>{~D:Record.Name~}:</span> <input type="Number" {~D:Record.Macro.InputFullProperties~} {~D:Record.Macro.InputChangeHandler~} value="">
 `
 		},
-		// -Form-Template-Input-InputType-TextArea
 		{
 			"HashPostfix": "-Template-Input-InputType-TextArea",
 			"Template": /*HTML*/`
@@ -169,46 +155,77 @@ Glug glug glug Oo...
 					<span>{~D:Record.Name~}:</span> <textarea {~D:Record.Macro.InputFullProperties~} {~D:Record.Macro.InputChangeHandler~}></textarea>
 `
 		},
+		/*
+		 * END Input Templates (default)
+		 */
+		/*
+		 *
+		 * [ Basic Form Templates END ]
+		 *
+		 */
+
 
 
 		/*
-		*
-		* [ Tabular Templates ]
-		*
-		*/
+		 *
+		 * [ Tabular Templates START ]
+		 *
+		 */
 		{
 			"HashPostfix": "-TabularTemplate-Group-Prefix",
 			"Template": /*HTML*/`
 			<div>
 			<table>
 					<tbody>
-			<!-- Form Template Group Prefix [{~D:Context[0].UUID~}]::[{~D:Context[0].Hash~}] {~D:Record.Hash~}::{~D:Record.Name~} -->
+			<!-- Form Tabular Template Group Prefix [{~D:Context[0].UUID~}]::[{~D:Context[0].Hash~}] {~D:Record.Hash~}::{~D:Record.Name~} -->
+`
+		},
+		{
+			"HashPostfix": "-TabularTemplate-Group-Postfix",
+			"Template": /*HTML*/`
+				</tbody>
+			</table>
+			<div><a href="#" onclick="{~D:Record.Macro.TabularCreateRowFunctionCall~}">create</a></div>
+			</div>
+			<!-- Form Tabular Template Group Prefix [{~D:Context[0].UUID~}]::[{~D:Context[0].Hash~}] {~D:Record.Hash~}::{~D:Record.Name~} -->
 `
 		},
 
-
-		// These templates are meant to be an easily overridable "add buttons to the row" template.
+		/*
+		 * BEGIN Tabular Template "Extra" Columns
+		 * these are meant to be easy ways to add controls to the left or right side of a record column
+		 */
 		{
 			"HashPostfix": "-TabularTemplate-RowHeader-ExtraPrefix",
 			"Template": /*HTML*/`<!-- TabularTemplateRowHeader-ExtraPrefix -->`
 		},
-		{
-			"HashPostfix": "-TabularTemplate-Row-ExtraPrefix",
-			"Template": /*HTML*/`<!-- TabularTemplateRow-ExtraPrefix -->`
-		},
+		// because the row extension template below adds an extra column, we need to make our header have parity
 		{
 			"HashPostfix": "-TabularTemplate-RowHeader-ExtraPostfix",
 			"Template": /*HTML*/`<!-- TabularTemplateRowHeader-ExtraPostfix -->
-						<th></th>
+						<th style="min-width:100px;"></th>
 `
 		},
+		{
+			"HashPostfix": "-TabularTemplate-Row-ExtraPrefix",
+			"Template": /*HTML*/`<!-- TabularTemplateRow-ExtraPrefix -->`
+		},
+		// by default PICT puts a "delete row" button on the right side of a tabular templateset
 		{
 			"HashPostfix": "-TabularTemplate-Row-ExtraPostfix",
 			"Template": /*HTML*/`<!-- TabularTemplateRow-ExtraPostfix-->
-					<td><a href="#" onClick="_Pict.views['{~D:Context[0].Hash~}'].deleteDynamicTableRow({~D:Record.Group~},'{~D:Record.Key~}')">PICT.del</a></td>
+					<td><a href="#" onClick="_Pict.views['{~D:Context[0].Hash~}'].deleteDynamicTableRow({~D:Record.Group~},'{~D:Record.Key~}')">del</a>
+					<a href="#" onClick="_Pict.views['{~D:Context[0].Hash~}'].moveDynamicTableRowUp({~D:Record.Group~},'{~D:Record.Key~}')">up</a>
+					<a href="#" onClick="_Pict.views['{~D:Context[0].Hash~}'].moveDynamicTableRowDown({~D:Record.Group~},'{~D:Record.Key~}')">down</a></td>
 `
 		},
+		/*
+		 * END Tabular Template "Extra" Columns
+		 */
 
+		/*
+		 * BEGIN Tabular Template Header Columns
+		 */
 		{
 			"HashPostfix": "-TabularTemplate-RowHeader-Prefix",
 			"Template": /*HTML*/`
@@ -231,12 +248,13 @@ Glug glug glug Oo...
 				<tbody>
 `
 		},
-
+		/*
+		 * END Tabular Template Header Columns
+		 */
 
 		/*
-		 *
-		 * BEGINNING of the  Tabular TemplateSet metatemplate entries
-		 * 
+		 * BEGIN Tabular TemplateSet Templates (row and cell prefix/postfix ... tr/td)
+		 * (these are repeated for each "row" which is a record, and then wrap each "cell" which is a columnar input)
 		 */
 		{
 			"HashPostfix": "-TabularTemplate-Row-Prefix",
@@ -262,27 +280,12 @@ Glug glug glug Oo...
 					{~T:TabularTemplateRow-ExtraPostfix~}</tr>`
 		},
 		/*
-		 *
-		 * END of the above Tabular TemplateSet metatemplate entries
-		 * 
+		 * END Tabular TemplateSet Templates
 		 */
 
 
-		{
-			"HashPostfix": "-TabularTemplate-Group-Postfix",
-			"Template": /*HTML*/`
-				</tbody>
-			</table>
-			<div><a href="#" onclick="{~D:Record.Macro.TabularCreateRowFunctionCall~}">PICT.create</a></div>
-			</div>
-			<!-- Form Template Group Prefix [{~D:Context[0].UUID~}]::[{~D:Context[0].Hash~}] {~D:Record.Hash~}::{~D:Record.Name~} -->
-`
-		},
-
 		/*
-		 *
-		 * Input Templates (tabular)
-		 *
+		 * BEGIN Tabular Input Templates
 		 */
 		{
 			"HashPostfix": "-TabularTemplate-Begin-Input",
@@ -328,6 +331,14 @@ Glug glug glug Oo...
 			"Template": /*HTML*/` {~D:Record.Macro.InputChangeHandler~}></textarea>
 `
 		}
+		/*
+		 * END Tabular Input Templates
+		 */
+		/*
+		 *
+		 * [ Tabular Templates END ]
+		 *
+		 */
 
 	]
 });

package/source/{Pict-Section-Form-Provider-Templates.js → providers/Pict-Provider-DynamicTemplates.js}

@@ -1,6 +1,7 @@
 const libPictProvider = require('pict-provider');
 
-const _DefaultFormTemplates = require('./Pict-Section-Form-Provider-Templates-DefaultFormTemplates.js');
+const _DefaultFormTemplates = require('./Pict-Provider-DynamicTemplates-DefaultFormTemplates.js');
+
 const _DefaultProviderConfiguration = (
 {
 	"ProviderIdentifier": "Pict-Section-Form-Provider-Templates-Basic",
@@ -80,6 +81,8 @@ class PictSectionFormTemplateProvider extends libPictProvider
 		{
 			this.pict.TemplateProvider.addTemplate(this.formsTemplateSet[tmpTemplateList[i]].Hash, this.formsTemplateSet[tmpTemplateList[i]].Template);
 		}
+
+		this.pict.addTemplate(require(`../templates/Pict-Template-Metacontroller-ValueSetWithGroup.js`));
 	}
 }
 

package/source/{Pict-Service-Informary.js → providers/Pict-Provider-Informary.js}

@@ -25,7 +25,7 @@ class PictServiceInformary extends libPictProvider
 	getFormElements(pFormHash)
 	{
 		let tmpSelector = `[data-i-form="${pFormHash}"]`;
-		this.log.trace(`Getting form elements for form hash selector: ${tmpSelector}`);
+		//this.log.trace(`Getting form elements for form hash selector: ${tmpSelector}`);
 		return this.pict.ContentAssignment.getElement(tmpSelector);
 	}
 
@@ -63,7 +63,10 @@ class PictServiceInformary extends libPictProvider
 
 			let tmpBrowserValue = this.pict.ContentAssignment.readContent(this.getContentBrowserAddress(pFormHash, tmpDatumAddress, tmpContainerAddress, tmpIndex));
 
-			this.log.trace(`Informary marshalling BrowserForm Data ${tmpBrowserValue} from form element [${tmpDatumAddress}] in container [${tmpContainerAddress}] at index [${tmpIndex}] to the datum address [${tmpDatumAddress}].`);
+			if (this.pict.LogNoisiness > 3)
+			{
+				this.log.trace(`Informary marshalling BrowserForm Data ${tmpBrowserValue} from form element [${tmpDatumAddress}] in container [${tmpContainerAddress}] at index [${tmpIndex}] to the datum address [${tmpDatumAddress}].`);
+			}
 
 			if (typeof(tmpBrowserValue) === 'undefined')
 			{
@@ -99,7 +102,10 @@ class PictServiceInformary extends libPictProvider
 			{
 				let tmpAppStateValue = tmpManifest.getValueAtAddress(pAppStateData, tmpDatumAddress);
 
-				this.log.trace(`Informary marshalling App State data ${tmpAppStateValue} to Browser Form element [${tmpDatumAddress}] in container [${tmpContainerAddress}] at index [${tmpIndex}].`);
+				if (this.pict.LogNoisiness > 3)
+				{
+					this.log.trace(`Informary marshalling App State data ${tmpAppStateValue} to Browser Form element [${tmpDatumAddress}] in container [${tmpContainerAddress}] at index [${tmpIndex}].`);
+				}
 
 				if (typeof(tmpAppStateValue) !== 'undefined')
 				{
@@ -110,7 +116,10 @@ class PictServiceInformary extends libPictProvider
 			{
 				let tmpAppStateValue = tmpManifest.getValueAtAddress(pAppStateData, this.getComposedContainerAddress(tmpContainerAddress, tmpIndex, tmpDatumAddress));
 
-				this.log.trace(`Informary marshalling App State data ${tmpAppStateValue} to Browser Form element [${tmpDatumAddress}] in container [${tmpContainerAddress}] at index [${tmpIndex}].`);
+				if (this.pict.LogNoisiness > 3)
+				{
+					this.log.trace(`Informary marshalling App State data ${tmpAppStateValue} to Browser Form element [${tmpDatumAddress}] in container [${tmpContainerAddress}] at index [${tmpIndex}].`);
+				}
 
 				if (typeof(tmpAppStateValue) !== 'undefined')
 				{

package/source/templates/Pict-Template-Base.js

@@ -0,0 +1,87 @@
+const libFableServiceBase = require('fable-serviceproviderbase');
+
+// TODO: Separate this out into its own module so we can use it without copying it around.
+class PictTemplateProvider extends libFableServiceBase
+{
+	/**
+	 * @param {Object} pFable - The Fable Framework instance
+	 * @param {Object} pOptions - The options for the service
+	 * @param {String} pServiceHash - The hash of the service
+	 */
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+
+		this.pict = this.fable;
+
+		this.serviceType = 'PictTemplate';
+	}
+
+	/**
+	 * Render a template expression, returning a string with the resulting content.
+	 *
+	 * @param {string} pTemplateHash - The hash contents of the template (what's between the template start and stop tags)
+	 * @param {object} pRecord - The json object to be used as the Record for the template render
+	 * @param {array} pContextArray - An array of context objects accessible from the template; safe to leave empty
+	 *
+	 * @return {string} The rendered template
+	 */
+	render(pTemplateHash, pRecord, pContextArray)
+	{
+		return '';
+	}
+
+	/**
+	 * Render a template expression, deliver a string with the resulting content to a callback function.
+	 *
+	 * @param {string} pTemplateHash - The hash contents of the template (what's between the template start and stop tags)
+	 * @param {object} pRecord - The json object to be used as the Record for the template render
+	 * @param {array} pContextArray - An array of context objects accessible from the template; safe to leave empty
+	 * @param {(error: Error?, content: String?) => void} fCallback - callback function invoked with the rendered template, or an error
+	 *
+	 * @return {void}
+	 */
+	renderAsync(pTemplateHash, pRecord, fCallback, pContextArray)
+	{
+		return fCallback(null, this.render(pTemplateHash, pRecord, pContextArray));
+	}
+
+	/**
+	 * Provide a match criteria for a template expression.  Anything between these two values is returned as the template hash.
+	 *
+	 * @param {string} pMatchStart - The string pattern to start a match in the template trie
+	 * @param {string} pMatchEnd  - The string pattern to stop a match in the trie acyclic graph
+	 *
+	 * @return {void}
+	 */
+	addPattern(pMatchStart, pMatchEnd)
+	{
+		return this.pict.MetaTemplate.addPatternBoth(pMatchStart, pMatchEnd, this.render, this.renderAsync, this);
+	}
+
+	/**
+	 * Read a value from a nested object using a dot notation string.
+	 *
+	 * @param {string} pAddress - The address to resolve
+	 * @param {object} pRecord - The record to resolve
+	 * @param {Array<any>} pContextArray - The context array to resolve (optional)
+	 *
+	 * @return {any} The value at the given address, or undefined
+	 */
+	resolveStateFromAddress(pAddress, pRecord, pContextArray)
+	{
+		let tmpContextArray = (Array.isArray(pContextArray)) ? pContextArray : [this.pict];
+
+		return this.pict.manifest.getValueByHash(
+			{
+				Pict:this.pict,
+				AppData:this.pict.AppData,
+				Bundle:this.pict.Bundle,
+				Context:tmpContextArray,
+				Record:pRecord
+			}, pAddress);
+	}
+}
+
+module.exports = PictTemplateProvider;
+module.exports.template_hash = 'Default';

package/source/{Pict-Template-MetacontrollerValueSetWithGroup.js → templates/Pict-Template-Metacontroller-ValueSetWithGroup.js}

@@ -1,4 +1,4 @@
-const libPictTemplate = require('pict').PictTemplateClass;
+const libPictTemplate = require('./Pict-Template-Base.js');
 
 class PictTemplateMetacontrollerValueSet extends libPictTemplate
 {

package/source/{Pict-Section-Form-View-DefaultConfiguration.json → views/Pict-View-DynamicForm-DefaultConfiguration.json}

@@ -1,5 +1,6 @@
 {
 	"AutoRender": false,
+	"AutoSolveWithApp": false,
 
 	"DefaultRenderable": "Form-Main",
 	"DefaultDestinationAddress": "#Pict-Form-Container",