Repeater api consistency with mm-form

Shuwen Qian · anthonykoerber · commit 1174446a5906 · 2016-03-02T14:25:14.000-06:00
diff --git a/src/mm-repeater/index.html b/src/mm-repeater/index.html
@@ -2,8 +2,8 @@
 <html>
 	<head>
 		<script language="javascript" src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
-		<link rel="import" href="../../build/strand.html" />
-		
+		<link rel="import" href="../strand.html" />
+
 		<style type="text/css">
 			body, html {
 				height: 100%;
@@ -125,45 +125,52 @@
 			</mm-repeater>
 
 			<mm-button style="margin: 10px 0;" id="validateBtn"><label>Validate!</label></mm-button>
-			
+
 		</div>
 
 		<script>
+			var acceptedNames = ['John', 'Paul', 'George', 'Ringo'];
+			var config = {
+				'name': {
+					validation: function(name) {
+						return acceptedNames.indexOf(name) < 0;
+					},
+					errorMessage: 'Name is not in the list of accepted values'
+				},
+				'firstOption': {
+					validation: function() {
+						return true;
+					}
+				},
+				'secondOption': {
+					validation: function() {
+						return true;
+					}
+				}
+			};
+
 			var data = [
 				{
 					name: "John",
 					firstOption: "Test Item 2",
-					secondOption: "Test 1",
-					validation: function(model) {
-						console.log(arguments);
-						// this.errorMessage = 'Setting error message in validation method';
-						return model.name === 'John';
-					},
-					errorMessage: "Name is not John!"
+					secondOption: "Test 1"
 				},
 				{
 					name: "Paul",
 					firstOption: "Test Item 1",
-					secondOption: "Test 2",
-					validation: function(model) {
-						return model.name === 'Paul';
-					},
-					errorMessage: "Name is not Paul!"
+					secondOption: "Test 2"
 				},
 				{
 					name: "Ringo",
 					firstOption: "Test Item 1",
-					secondOption: "Test 3",
-					validation: function(model) {
-						return model.name === 'Ringo';
-					},
-					errorMessage: "Name is not Ringo!"
+					secondOption: "Test 3"
 				}
 			];
 
 			window.addEventListener('WebComponentsReady', function(e) {
 				var wd = document.querySelector('#withData');
 				// wd.set('data', data);
+				wd.config = config;
 				wd.value = data;
 
 				document.querySelector('#validateBtn').addEventListener('click', function() {
@@ -173,8 +180,3 @@
 		</script>
 	</body>
 </html>
-
-
-
-
-
diff --git a/src/mm-repeater/mm-repeater.html b/src/mm-repeater/mm-repeater.html
@@ -9,6 +9,8 @@
 <link rel="import" href="../shared/behaviors/refable.html"/>
 <link rel="import" href="../shared/behaviors/resolvable.html"/>
 <link rel="import" href="../shared/behaviors/validatable.html"/>
+<link rel="import" href="../shared/js/validator.html"/>
+<link rel="import" href="../shared/js/datautils.html"/>
 <link rel="import" href="../mm-action/mm-action.html"/>
 <link rel="import" href="../mm-box/mm-box.html"/>
 <link rel="import" href="../mm-icon/mm-icon.html"/>
diff --git a/src/mm-repeater/mm-repeater.js b/src/mm-repeater/mm-repeater.js
@@ -6,22 +6,29 @@
 */
 (function(scope) {
 
+	var Validator = StrandLib.Validator,
+		DataUtils = StrandLib.DataUtils;
+
 	scope.Repeater = Polymer({
 		is: 'mm-repeater',
 
 		properties: {
-			template: {
+			config: {
 				type: Object,
-				value: null
+				value: {}
 			},
-
 			data: {
 				type: Array,
 				notify: true,
 				value: function() { return [{}]; },
 				observer: '_handleDataChanged'
 			},
 
+			template: {
+				type: Object,
+				value: null
+			},
+
 			added: {
 				type: Array,
 				value: []
@@ -30,6 +37,7 @@
 				type: Array,
 				value: []
 			},
+
 			_origData: {
 				type: Array,
 				value: []
@@ -127,39 +135,41 @@
 		},
 
 		validate: function() {
-			var allValid = true;
-
-			this.data.forEach(function(item, index) {
-				var valid = true;
-
-				if(typeof item.validation === 'function') {
-					// Custom validation provided: call validation, passing name:value pairs as arguments
-					var elems = item._ref.querySelectorAll('[name]'),
-						rowData = new Object();
-						Object.keys(elems).forEach(
-							function(key) {
-								var elem = elems[key];
-								rowData[elem.getAttribute('name')] = elem.value;
-							}
-						);
-					valid = item.validation.call(item, rowData);
-				} else {
-					// Default validation: call validate on each form element and fold them together
-					var fields = item._ref.querySelectorAll('[validation]');
-					valid = Object.keys(fields).reduce(function(sum, elt) {
-						return sum && (!fields[elt].validate || fields[elt].validate(fields[elt].value));
-					}, true);
-				}
+			return this.data.reduce(function(sum, row) {
+				var valid = this.validateRow(row);
+				return sum && valid;
+			}.bind(this), true);
+		},
 
-				// Reflect validation to the model for error messaging
-				this.set('data.'+index+'.error', !valid);
-				this.set('data.'+index+'.errorMessage', item.errorMessage);
+		validateRow: function(row) {
+			var keys = Object.keys(row);
+			var error = keys.reduce(function(sum, key) {
+				var validation = DataUtils.getPathValue(key+'.validation', this.config),
+					valid = true;
+
+				switch(typeof validation) {
+					case "function":
+						valid = validation.apply(this.config[key], [row[key], row, row._ref]);
+						break;
+					case "string":
+						valid = Validator.rules[item](value);
+						break;
+					default:
+						break;
+				}
+				return sum && valid;
 
-				allValid = allValid && valid;
+			}.bind(this), true);
+			var errorMessage = keys.reduce(function(sum, key) {
+				var message = DataUtils.getPathValue(key+'.errorMessage', this.config);
+				return sum + " " + (message || "");
+			}.bind(this), "");
 
-			}, this);
+			var prefix = 'data.' + this.data.indexOf(row) + '.';
+			this.set(prefix+'error', error);
+			this.set(prefix+'errorMessage', errorMessage.trim());
 
-			return allValid;
+			return error;
 		},
 
 		validation: this.validate,
