From 34ba4eb474e11b66ee7763ddf720bfe0994deb7b Mon Sep 17 00:00:00 2001
From: Anthony Koerber <akoerber@mediamath.com>
Date: Thu, 21 Jan 2016 18:07:15 -0600
Subject: [PATCH] Exploration of validate if logic working via config

---
 src/mm-form/mm-form.js                       | 154 ++++++++++++-------
 src/mm-test-form-view/index.html             |   2 +-
 src/mm-test-form-view/mm-test-form-view.html |  30 +++-
 src/mm-test-form-view/mm-test-form-view.js   |  90 +++++------
 4 files changed, 166 insertions(+), 110 deletions(-)

diff --git a/src/mm-form/mm-form.js b/src/mm-form/mm-form.js
index 3b848ef3..fe253523 100644
--- a/src/mm-form/mm-form.js
+++ b/src/mm-form/mm-form.js
@@ -18,6 +18,9 @@
 		],
 
 		properties: {
+			view: {
+				type: Object
+			},
 			unsaved: {
 				type: Boolean,
 				value: true,
@@ -82,6 +85,7 @@
 				type: Boolean,
 				computed: '_displayMessage(_showFooterMessage, showFooterMessages)'
 			},
+
 			// config/initial data & settings:
 			config: {
 				type: Object,
@@ -90,7 +94,8 @@
 			},
 			data: {
 				type: Object,
-				observer: '_dataChanged'
+				observer: '_dataChanged',
+				value: function() { return {}; }
 			}
 		},
 
@@ -104,66 +109,60 @@
 
 		_dataChanged: function(newVal, oldVal) {
 			console.log('_dataChanged:', newVal);
-			this.debounce('init', this._initForm);
+			// this.debounce('init', this._initForm);
+			this._initData();
 		},
 
 		_configChanged: function(newVal, oldVal) {
 			console.log('_configChanged:', newVal);
-			this.debounce('init', this._initForm);
+			// this.debounce('init', this._initForm);
+			this._initConfig();
 		},
 
-		_selectEle: function(ele, parent) {
+		_select: function(ele, parent) {
 			var scope = this || parent;
 			return Polymer.dom(scope).querySelector(ele);
 		},
 
-		_initForm: function() {
-			if (!this.data) return;
-
-			for (var key in this.data) {
-				var cfgKey = this.config[key] ? this.config[key] : null,
-					field = this._selectEle('[name='+key+']'),
-					validation = null,
-					label = null,
-					errorMsg = null,
-					errorMsgEle = null,
-					parentEle = null,
-					value = this.data[key] || null;
+		_initConfig: function() {
+			for (var key in this.config) {
+				var cfg 			= this.config[key] ? this.config[key] : null,
+					field 			= this._select('[name='+key+']'),
+					validation 		= null,
+					validateIf 		= null,
+					label 			= null,
+					errorMsg 		= null,
+					errorMsgEle 	= null,
+					parentEle 		= null;
 
 				if (!field) {
-					throw 'There must be a corresponding DOM element for data[\''+key+'\']';
+					throw 'There must be a corresponding DOM element for config[\''+key+'\']';
 				}
 
 				// a config was or was not supplied - if one was supplied,
 				// use it, if not create one
-				if (cfgKey) {
-					validation = cfgKey.validation ? cfgKey.validation : null,
-					label = cfgKey.label ? cfgKey.label : null,
-					errorMsg = cfgKey.errorMsg ? cfgKey.errorMsg : null,
-					errorMsgEle	= cfgKey.errorMsgEle ? this._selectEle('#'+cfgKey.errorMsgEle) : null,
-					parentEle = cfgKey.parentEle ? this._selectEle('#'+cfgKey.parentEle) : Polymer.dom(field).parentNode;
+				if (cfg) {
+					validation 			= cfg.validation ? cfg.validation : null;
+					validateIf 			= cfg.validateIf ? cfg.validateIf : null;
+					label 				= cfg.label ? cfg.label : null;
+					errorMsg 			= cfg.errorMsg ? cfg.errorMsg : null;
+					errorMsgEle			= cfg.errorMsgEle ? this._select('#'+cfg.errorMsgEle) : null;
+					parentEle 			= cfg.parentEle ? this._select('#'+cfg.parentEle) : Polymer.dom(field).parentNode;
+					exclude				= cfg.exclude ? cfg.exclude : false;
 				} else {
-					this.config[key] = {};
-				}
-
-				// If there was an initial value set in markup, use that
-				// However, values set in the config will always 'win'
-				if (field.value && value === null) {
-					value = field.value;
+					this.config[key] 	= {};
 				}
 
 				// Store everything for reference later, assumes it's possible
 				// to have a config which didn't include ALL of these items
-				this.config[key].field = field;
-				this.config[key].validation = validation; 
-				this.config[key].label = label; 		
-				this.config[key].errorMsg = errorMsg;
-				this.config[key].errorMsgEle = errorMsgEle;
-				this.config[key].parentEle = parentEle;
-
-				// update data and DOM
-				this._updateData(key, value);
-				this._initialData[key] = value;
+				this.config[key].field 			= field;
+				this.config[key].validation 	= validation; 
+				this.config[key].validateIf 	= validateIf; 
+				this.config[key].label 			= label; 		
+				this.config[key].errorMsg 		= errorMsg;
+				this.config[key].errorMsgEle 	= errorMsgEle;
+				this.config[key].parentEle 		= parentEle;
+				this.config[key].exclude 		= exclude;
 
 				if (errorMsg && !errorMsgEle) { 
 					this._createErrorMsg(key, errorMsg, errorMsgEle, parentEle);
@@ -172,6 +171,28 @@
 				}
 
 				if (label) this._createLabel(key, label, field, parentEle);
+			}
+		},
+
+		_initData: function() {
+			for (var key in this.config) {
+				var field 			= this._select('[name='+key+']'),
+					exclude			= this.config[key].exclude,
+					value 			= this.data[key] || null;
+
+				if (!field) {
+					throw 'There must be a corresponding DOM element for data[\''+key+'\']';
+				}
+				
+				// If there was an initial value set in markup, use that
+				// However, values set in the config will always 'win'
+				if (field.value && value === null) {
+					value = field.value;
+				}
+
+				// update data and DOM
+				if (!exclude) this._updateData(key, value);
+				this._initialData[key] = value;
 
 				// Populate the fields if necessary
 				if (value && field.value !== value) {
@@ -181,7 +202,7 @@
 		},
 
 		_createErrorMsg:function(key, errorMsg, errorMsgEle, parentEle) {
-			var existingMsgEle = this._selectEle('._'+key+'-error-msg') || null;
+			var existingMsgEle = this._select('._'+key+'-error-msg') || null;
 
 			if (!existingMsgEle) {
 				// create one:
@@ -200,9 +221,9 @@
 		},
 
 		_createLabel:function(key, label, field, parentEle) {
-			var existingLblEle = this._selectEle('._'+key+'-label') || null,
-				formLabel = null, 
-				labelTxt = null;
+			var existingLblEle 	= this._select('._'+key+'-label') || null,
+				formLabel 		= null, 
+				labelTxt 		= null;
 
 			if (!existingLblEle) {
 				// create one:
@@ -228,18 +249,22 @@
 
 		// handle changes within the form
 		_handleChanged: function(e) {
-			var field = e.target,
-				key = field.getAttribute('name'),
-				value = null,
-				validation = null,
-				isFormElement = this.data.hasOwnProperty(key);
+			var field 			= e.target,
+				key				= field.getAttribute('name'),
+				value 			= null,
+				validation 		= null,
+				exclude			= null,
+				isFormElement 	= this.config.hasOwnProperty(key);
 
 			if (isFormElement) {
-				value = e.detail.value;
-				validation = this.config[key].validation;
+				exclude 		= this.config[key].exclude ? this.config[key].exclude : false;
+				value 			= e.detail.value;
+				validation 		= this.config[key].validation;
 
-				this._updateData(key, value);
-				this.unsaved = this._diffData();
+				if (!exclude) {
+					this._updateData(key, value);
+					this.unsaved = this._diffData();
+				}
 
 				if (validation) this._validateField(key, value);
 
@@ -271,12 +296,13 @@
 			this._invalidFields = [];
 			this._validFields = [];
 
-			for (var key in this.data) {
+			for (var key in this.config) {
 				var value 		= this.data[key],
 					validation 	= this.config[key].validation,
+					validateIf 	= this.config[key].validateIf ? this.config[key].validateIf(key, value, this.data, this.view) : null,
 					valid 		= false;
 				
-				if (validation) {
+				if (validation && (validateIf === null || validateIf === true)) {
 					valid = this._validateField(key, value);
 
 					// Store valid and invalid for this validation pass
@@ -285,6 +311,9 @@
 					} else {
 						this._invalidFields.push(key);
 					}
+				} else if (validation && (validateIf !== null || validateIf === false)) {
+					// clean up prior validations if they were there
+					this.resetFieldValidation(key);
 				}
 				
 				// show messaging in the footer
@@ -319,9 +348,10 @@
 		// },
 
 		_validateField: function(key, value) {
-			var valid 			= false,
+			var valid 			= null,
 				field 			= this.config[key].field,
 				validation 		= this.config[key].validation,
+				errorMsg 		= this.config[key].errorMsg,
 				errorMsgEle 	= this.config[key].errorMsgEle;
 
 			if (typeof(validation) === 'string') {
@@ -336,15 +366,23 @@
 
 				valid = result.length === testSet.length;
 			} else if (typeof(validation) === 'function') {
-				valid = validation(key, value, this.data);
+				valid = validation(key, value, this.data, this.view);
 			}
 			
 			// show or hide messaging in the ui
+			errorMsgEle.message = errorMsg;
 			field.error = errorMsgEle.visible = !valid;
-			
+
 			return valid;
 		},
 
+		resetFieldValidation: function(key) {
+			var field 			= this.config[key].field,
+				errorMsgEle 	= this.config[key].errorMsgEle;
+
+			field.error = errorMsgEle.visible = false;
+		},
+
 		serializeForm: function() {
 			this.validateFields();
 
diff --git a/src/mm-test-form-view/index.html b/src/mm-test-form-view/index.html
index 1fbba6cd..406097d0 100644
--- a/src/mm-test-form-view/index.html
+++ b/src/mm-test-form-view/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 	<head>
-	<script language="javascript" src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
+		<script language="javascript" src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
 		<link rel="import" href="mm-test-form-view.html"/>
 	</head>
 	<body>
diff --git a/src/mm-test-form-view/mm-test-form-view.html b/src/mm-test-form-view/mm-test-form-view.html
index 46b5f011..d2a0dbd9 100644
--- a/src/mm-test-form-view/mm-test-form-view.html
+++ b/src/mm-test-form-view/mm-test-form-view.html
@@ -5,6 +5,7 @@
 
 -->
 <link rel="import" href="../../bower_components/polymer/polymer.html"/>
+<link rel="import" href="../shared/behaviors/refable.html"/>
 <link rel="import" href="../mm-dropdown/mm-dropdown.html"/>
 <link rel="import" href="../mm-list-item/mm-list-item.html"/>
 <link rel="import" href="../mm-group/mm-group.html"/>
@@ -15,7 +16,7 @@
 <dom-module id="mm-test-form-view">
 	<link rel="import" type="css" href="mm-test-form-view.css"/>
 	<template>
-		<mm-form id="testForm" config="{{formConfig}}" data="{{formData}}">
+		<mm-form id="testForm" config="{{formConfig}}" data="{{formData}}" view={{ref}}>
 			<!-- row 1 -->
 			<div class="col" span="1">
 				<mm-input fitparent name="input" placeholder="Type a Number"></mm-input>
@@ -45,41 +46,56 @@
 			</div>
 
 			<!-- row 2 -->
-			<div class="col" span="2">
+			<div id="customItemWrapper" class="col" span="2">
 				<mm-header size="medium">Dimensions</mm-header>
+				
 				<div id="customItem">
+
 					<mm-radio 
 						id="standardSize" 
-						group="sizes" 
+						group="sizes"
 						checked
-						on-selected="_handleRadioSelected"></mm-radio>
+						on-selected="_sizeRadioSelected"></mm-radio>
+
 					<mm-dropdown 
 						id="standardSizeDdl" 
-						disabled$="{{!isStandard}}" 
+						disabled$="{{!standardSize}}"
+						name="widthHeight"
 						on-changed="_standardSizeChanged" 
 						placeholder="Select One">
 						<mm-list-item>160x600</mm-list-item>
 						<mm-list-item>728x90</mm-list-item>
 						<mm-list-item>300x250</mm-list-item>
 					</mm-dropdown>
+
+					<!-- validate-if$="{{standardSize}}" -->
+					
 					<mm-radio 
 						id="nonStandardSize" 
 						group="sizes"
-						on-selected="_handleRadioSelected"></mm-radio>
+						on-selected="_sizeRadioSelected"></mm-radio>
+
 					<mm-group 
 						id="nonStandardSizeGroup" 
-						disabled$="{{isStandard}}" 
+						disabled$="{{standardSize}}" 
 						fitparent>
+
 						<mm-input 
 							name="width"
 							placeholder="Width" 
+							validate-if="{{!standardSize}}"
 							value="{{width}}"></mm-input>
+
 						<mm-input 
 							name="height"
 							placeholder="Height" 
+							validate-if="{{!standardSize}}"
 							value="{{height}}"></mm-input>
+
 					</mm-group>
+
 				</div>
+
 				<mm-form-message 
 					id="heightWidthError" 
 					type="error" 
diff --git a/src/mm-test-form-view/mm-test-form-view.js b/src/mm-test-form-view/mm-test-form-view.js
index ab29d567..48da605a 100644
--- a/src/mm-test-form-view/mm-test-form-view.js
+++ b/src/mm-test-form-view/mm-test-form-view.js
@@ -10,12 +10,15 @@
 	scope.TestFormView = Polymer({
 		is: "mm-test-form-view",
 
-		behaviors: [],
+		behaviors: [
+			StrandTraits.Refable
+		],
 
 		properties: {
 			// custom form items:
-			isStandard: {
-				type: Boolean
+			standardSize: {
+				type: Boolean,
+				value: true
 			},
 
 			width: {
@@ -43,69 +46,68 @@
 						label: 'Select an Item'
 					},
 					'radio' : {
-						validation: function(name, value, data) {
+						validation: function(name, value, data, view) {
 							return data[name] === 'Red' && value === 'Red';
 						},
 						errorMsg: 'You need to select \'Red\'',
 						label: 'Select a Color'
 					},
+					'widthHeight' : {
+						validation: 'empty',
+						validateIf: function(name, value, data, view) {
+							return view.standardSize;
+						},
+						errorMsg: 'You need to select a standard size',
+						errorMsgEle: 'heightWidthError',
+						exclude: true
+					},
 					'width' : {
-						validation: function(name, value, data) {
+						validation: function(name, value, data, view) {
 							return parseInt(value) >= 0;
 						},
-						errorMsgEle: 'heightWidthError'
+						validateIf: function(name, value, data, view) {
+							return !view.standardSize;
+						},
+						errorMsg: 'Enter a width',
+						parentEle: 'customItemWrapper'
 					},
 					'height' : {
-						validation: function(name, value, data) {
+						validation: function(name, value, data, view) {
 							return parseInt(value) >= 0;
 						},
-						errorMsgEle: 'heightWidthError'
+						validateIf: function(name, value, data, view) {
+							return !view.standardSize;
+						},
+						errorMsg: 'Enter a height',
+						parentEle: 'customItemWrapper'
 					}
 				}
 			},
 			formData: {
 				type: Object,
-				value: {
-					'input' : null,
-					'dropdown' : null,
-					'radio' : null,
-					'width' : null,
-					'height' : null
-				}
+				notify: true
 			}
 		},
 
-		_handleRadioSelected: function(e) {
-			switch (e.detail.item.id) {
-				case 'standardSize':
-					this.isStandard = true;
-					break;
-				case 'nonStandardSize':
-					this.isStandard = false;
-					break;
-				default:
-					return;	
-			}
+		// custom form item interactions:
+		_sizeRadioSelected: function(e) {
+			this.async(function(){
+				switch (e.detail.item.id) {
+					case 'standardSize':
+						this.standardSize = true;
+						this.$.testForm.resetFieldValidation('width');
+						this.$.testForm.resetFieldValidation('height');
+						break;
+					case 'nonStandardSize':
+						this.standardSize = false;
+						this.$.testForm.resetFieldValidation('widthHeight');
+						break;
+					default:
+						return;	
+				}
+			});
 		},
 
-		// _valueChanged: function(newVal, oldVal) {
-		// 	if (newVal) {
-		// 		this.fire('changed', { value: newVal });
-
-		// 		// set the dropdown if needed
-		// 		if (!this.nonStandardSize) {
-		// 			if (!this.$.standardSizeDdl.value) {
-		// 				this.$.standardSizeDdl.value = String(
-		// 					this.value.width + 'x' + this.value.height
-		// 				);
-		// 			} 
-		// 		} else {
-		// 			this.$.width.value = this.value.width;
-		// 			this.$.height.value = this.value.height;
-		// 		}
-		// 	}
-		// },
-
 		_standardSizeChanged: function(e) {
 			var dimensions = e.detail.value.split('x'),
 				width = parseInt(dimensions[0]),