pict-section-form 1.0.21 → 1.0.22

package/example_applications/postcard_example/Pict-Application-Postcard.js

@@ -4,8 +4,11 @@ const libPictSectionForm = require('../../source/Pict-Section-Form.js');
 
 const libProviderDynamicSection = require('./providers/PictProvider-Dynamic-Sections.js');
 
+const libProviderInputExtension = require('./providers/PictProvider-PostKardInputExtension.js');
+
 const libMainApplicationView = require('./views/PictView-Postcard-MainApplication.js')
 
+
 class PostcardApplication extends libPictApplication
 {
 	constructor(pFable, pOptions, pServiceHash)
@@ -15,6 +18,8 @@ class PostcardApplication extends libPictApplication
 		this.pict.addProvider('Postcard-DynamicSection-Provider', libProviderDynamicSection.default_configuration, libProviderDynamicSection);
 		this.pict.addProvider('Postcard-Default-Theme-Provider', {}, require('./providers/PictProvider-BestPostcardTheme.js'));
 
+		this.pict.addProvider('PostKardInputExtension', libProviderInputExtension.default_configuration, libProviderInputExtension);
+
 		this.pict.addView('PostcardNavigation', require('./views/PictView-Postcard-Navigation.json'));
 		this.pict.addView('PostcardAbout', require('./views/PictView-Postcard-Content-About.json'));
 		this.pict.addView('PostcardLegal', require('./views/PictView-Postcard-Content-Legal.json'));

package/example_applications/postcard_example/providers/PictProvider-BestPostcardTheme.js

@@ -106,6 +106,17 @@ Glug glug CUSTOMIZED glug Oo... -->
 				<textarea {~D:Record.Macro.HTMLID~} {~D:Record.Macro.InputFullProperties~} class="pure-u-23-24"></textarea>
             </div>
 
+	`
+			},
+			{
+				"HashPostfix": "-Template-Input-InputType-PostKardSignature",
+				"Template": /*HTML*/`
+            <div class="pure-u-1 pure-u-md-1-3">
+                <label {~D:Record.Macro.HTMLForID~}><em>{~D:Record.Name~}:</em></label>
+				<input type="text" {~D:Record.Macro.HTMLID~} {~D:Record.Macro.InputFullProperties~} class="pure-u-23-24" />
+				<a href="#" onclick="_Pict.views['{~D:Context[0].Hash~}'].inputEvent('{~D:Record.Hash~}', 'BestEventEvarrrr')" class="pure-button">Sign</a>
+            </div>
+
 	`
 			}
 		]});

package/example_applications/postcard_example/providers/PictProvider-Dynamic-Sections-MockServerResponse.json

@@ -78,7 +78,7 @@
 					"Hash":"SignatureLine",
 					"Description":"How you would like your card signed.",
 					"DataType":"String"
-					,"PictForm": { "Section":"Postcard", "Group":"Content", "Row":4, "Width":12 }
+					,"PictForm": { "InputType":"PostKardSignature", "Section":"Postcard", "Group":"Content", "Row":4, "Width":12, "Providers": ["PostKardInputExtension"] }
 				},
 			"DeliveryDestination.StreetAddress1": 
 				{

package/example_applications/postcard_example/providers/PictProvider-PostKardInputExtension.js

@@ -0,0 +1,23 @@
+const libPictFormSection = require('../../../source/Pict-Section-Form.js');
+
+class CustomInputHandler extends libPictFormSection.PictInputExtensionProvider
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+
+	onEvent(pView, pInput, pValue, pHTMLSelector, pEvent)
+	{
+		console.log(`Alert alert event happened for ${pInput}: ${pEvent}`);
+		return super.onEvent(pView, pInput, pValue, pHTMLSelector, pEvent);
+	}
+
+	onEventTabular(pView, pInput, pValue, pHTMLSelector, pRowIndex, pEvent)
+	{
+		console.log(`Alert alert event happened for ${pInput} row ${pRowIndex}: ${pEvent}`);
+		return super.onEventTabular(pView, pInput, pValue, pHTMLSelector, pRowIndex, pEvent);
+	}
+}
+
+module.exports = CustomInputHandler;

package/package.json

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

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

@@ -152,6 +152,38 @@ class PictInputExtensionProvider extends libPictProvider
 	{
 		return true;
 	}
+
+
+	/**
+	 * Handles events for the Pict-Provider-InputExtension.
+	 *
+	 * @param {Object} pView - The view object.
+	 * @param {Object} pInput - The input object.
+	 * @param {string} pValue - The value from AppData.
+	 * @param {string} pHTMLSelector - The HTML selector.
+	 * @param {string} pEvent - The event hash that is expected to be triggered.
+	 * @returns {boolean} - Returns true.
+	 */
+	onEvent(pView, pInput, pValue, pHTMLSelector, pEvent)
+	{
+		return true;
+	}
+
+	/**
+	 * Handles events for the Pict-Provider-InputExtension.
+	 *
+	 * @param {Object} pView - The view object.
+	 * @param {Object} pInput - The input object.
+	 * @param {string} pValue - The value from AppData.
+	 * @param {string} pHTMLSelector - The HTML selector.
+	 * @param {number} pRowIndex - The row index of the tabular data.
+	 * @param {string} pEvent - The event hash that is expected to be triggered.
+	 * @returns {boolean} - Returns true.
+	 */
+	onEventTabular(pView, pInput, pValue, pHTMLSelector, pRowIndex, pEvent)
+	{
+		return true;
+	}
 }
 
 module.exports = PictInputExtensionProvider;

package/source/views/Pict-View-DynamicForm.js

@@ -1245,6 +1245,42 @@ class PictViewDynamicForm extends libPictViewClass
 		}
 	}
 
+	inputEvent(pInputHash, pEvent)
+	{
+		let tmpInput = this.getInputFromHash(pInputHash);
+		if (pInputHash)
+		{
+			let tmpHashAddress = this.sectionManifest.resolveHashAddress(pInputHash);
+			try
+			{
+				let tmpMarshalDestinationObject = this.getMarshalDestinationObject();
+				if (tmpInput && tmpInput.PictForm && ('Providers' in tmpInput.PictForm) && Array.isArray(tmpInput.PictForm.Providers))
+				{
+					let tmpValue = this.sectionManifest.getValueByHash(tmpMarshalDestinationObject, tmpHashAddress);
+					for (let i = 0; i < tmpInput.PictForm.Providers.length; i++)
+					{
+						if (this.pict.providers[tmpInput.PictForm.Providers[i]])
+						{
+							this.pict.providers[tmpInput.PictForm.Providers[i]].onEvent(this, tmpInput, tmpValue, tmpInput.Macro.HTMLSelector, pEvent);
+						}
+						else
+						{
+							this.log.error(`Dynamic form [${this.Hash}]::[${this.UUID}] inputEvent ${pEvent} cannot find provider [${tmpInput.PictForm.Providers[i]}] for input [${tmpInput.Hash}].`);
+						}
+					}
+				}
+			}
+			catch (pError)
+			{
+				this.log.error(`Dynamic form [${this.Hash}]::[${this.UUID}] gross error running inputEvent ${pEvent} specific (${pInputHash}) data from view in dataChanged event: ${pError}`);
+			}
+		}
+		else
+		{
+			this.log.error(`Dynamic form [${this.Hash}]::[${this.UUID}] cannot find input hash [${pInputHash}] for inputEvent ${pEvent} event.`);
+		}
+	}
+
 	inputDataRequestTabular(pGroupIndex, pInputIndex, pRowIndex)
 	{
 		let tmpInput = this.getTabularRecordInput(pGroupIndex, pInputIndex);
@@ -1288,6 +1324,49 @@ class PictViewDynamicForm extends libPictViewClass
 		this.marshalToView();
 	}
 
+	inputEventTabular(pGroupIndex, pInputIndex, pRowIndex, pEvent)
+	{
+		let tmpInput = this.getTabularRecordInput(pGroupIndex, pInputIndex);
+		if (pGroupIndex && pInputIndex && pRowIndex && tmpInput)
+		{
+			try
+			{
+				let tmpMarshalDestinationObject = this.getMarshalDestinationObject();
+				if (tmpInput && tmpInput.PictForm && ('Providers' in tmpInput.PictForm) && Array.isArray(tmpInput.PictForm.Providers))
+				{
+					// TODO: Can we simplify this?
+					let tmpValueAddress = this.pict.providers.Informary.getComposedContainerAddress(tmpInput.PictForm.InformaryContainerAddress, pRowIndex, tmpInput.PictForm.InformaryDataAddress);
+					let tmpValue = this.sectionManifest.getValueByHash(tmpMarshalDestinationObject, tmpValueAddress);
+
+					let tmpVirtualInformaryHTMLSelector = tmpInput.Macro.HTMLSelectorTabular+`[data-i-index="${pRowIndex}"]`;
+					for (let i = 0; i < tmpInput.PictForm.Providers.length; i++)
+					{
+						if (this.pict.providers[tmpInput.PictForm.Providers[i]])
+						{
+							this.pict.providers[tmpInput.PictForm.Providers[i]].onEventTabular(this, tmpInput, tmpValue, tmpVirtualInformaryHTMLSelector, pRowIndex, pEvent);
+						}
+						else
+						{
+							this.log.error(`Dynamic form [${this.Hash}]::[${this.UUID}] cannot find provider [${tmpInput.PictForm.Providers[i]}] for input [${tmpInput.Hash}] row ${pRowIndex} calling inputEvent ${pEvent}.`);
+						}
+					}
+				}
+			}
+			catch (pError)
+			{
+				this.log.error(`Dynamic form [${this.Hash}]::[${this.UUID}] gross error marshaling specific (${pInputHash}) tabular data for group ${pGroupIndex} row ${pRowIndex} from view in calling inputEvent ${pEvent}: ${pError}`);
+			}
+		}
+		else
+		{
+			// This is what is called whenever a hash is changed.  We could marshal from view, solve and remarshal to view.
+			this.marshalFromView();
+		}
+		// Run any dynamic input providers for the input hash.
+		this.pict.PictApplication.solve();
+		this.marshalToView();
+	}
+
 	get isPictSectionForm()
 	{
 		return true;