checklist field now support array of string or array of objects (wi…

…th `name` and `value` properties instead of `name` and `id`) by default. If `checklistOptions` is defined, these key can be replaced by other name. Little change to the error message in `radios` fields. Both fields are harmonized.
vue-generators · Mar 10, 2017 · be09146 · be09146
1 parent 0f48c30
commit be09146
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 20 deletions.
diff --git a/src/fields/core/fieldChecklist.vue b/src/fields/core/fieldChecklist.vue
@@ -1,9 +1,9 @@
 <template lang="pug">
 	.wrapper
 		.listbox.form-control(v-if="schema.listBox", :disabled="disabled")
-			.list-row(v-for="item in items", :class="{'is-checked': getItemIsChecked(item)}")
+			.list-row(v-for="item in items", :class="{'is-checked': isItemChecked(item)}")
 				label
-					input(type="checkbox", :checked="getItemIsChecked(item)", :disabled="disabled", @input="onChanged($event, item)")
+					input(type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @input="onChanged($event, item)")
 					| {{ getItemName(item) }}
 
 		.combobox.form-control(v-if="!schema.listBox", :disabled="disabled")
@@ -12,9 +12,9 @@
 				.arrow
 
 			.dropList
-				.list-row(v-if="comboExpanded", v-for="item in items", :class="{'is-checked': getItemIsChecked(item)}")
+				.list-row(v-if="comboExpanded", v-for="item in items", :class="{'is-checked': isItemChecked(item)}")
 					label
-						input(type="checkbox", :checked="getItemIsChecked(item)", :disabled="disabled", @input="onChanged($event, item)")
+						input(type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @input="onChanged($event, item)")
 						| {{ getItemName(item) }}
 </template>
 
@@ -49,22 +49,39 @@
 		},
 
 		methods: {
-			getItemID(item) {
-				if (isObject(item) && item.id)
-					return item.id;
-
-				return item;
+			getItemValue(item) {
+				if (isObject(item)){
+					if (typeof this.schema["checklistOptions"] !== "undefined" && typeof this.schema["checklistOptions"]["value"] !== "undefined") {
+						return item[this.schema.checklistOptions.value];
+					} else {
+						if (typeof item["value"] !== "undefined") {
+							return item.value
+						} else {
+							throw "value is not defined. If you want to use another key name, add a `value` property under `checklistOptions` in the schema. https://icebob.gitbooks.io/vueformgenerator/content/fields/checklist.html#checklist-field-with-object-values";
+						}
+					}
+				} else {
+					return item;
+				}
 			},
-
 			getItemName(item) {
-				if (isObject(item) && item.name)
-					return item.name;
-
-				return item;
+				if (isObject(item)){
+					if (typeof this.schema["checklistOptions"] !== "undefined" && typeof this.schema["checklistOptions"]["name"] !== "undefined") {
+						return item[this.schema.checklistOptions.name];
+					} else {
+						if (typeof item["name"] !== "undefined") {
+							return item.name
+						} else {
+							throw "name is not defined. If you want to use another key name, add a `name` property under `checklistOptions` in the schema. https://icebob.gitbooks.io/vueformgenerator/content/fields/checklist.html#checklist-field-with-object-values";
+						}
+					}
+				} else {
+					return item;
+				}
 			},
 
-			getItemIsChecked(item) {
-				return (this.value && this.value.indexOf(this.getItemID(item)) != -1);
+			isItemChecked(item) {
+				return (this.value && this.value.indexOf(this.getItemValue(item)) != -1);
 			},
 
 			onChanged(event, item) {
@@ -73,9 +90,9 @@
 				}
 
 				if (event.target.checked) {
-					this.value.push(this.getItemID(item));
+					this.value.push(this.getItemValue(item));
 				} else {
-					this.value.splice(this.value.indexOf(this.getItemID(item)), 1);
+					this.value.splice(this.value.indexOf(this.getItemValue(item)), 1);
 				}
 			},
 

diff --git a/src/fields/core/fieldRadios.vue b/src/fields/core/fieldRadios.vue
@@ -36,7 +36,7 @@
 						if (typeof item["value"] !== "undefined") {
 							return item.value
 						} else {
-							throw "value is not defined.\r If you want to use another key name, add a `value` property under `radiosOptions` in the schema.\r  https://icebob.gitbooks.io/vueformgenerator/content/fields/radios.html#radios-field-with-object-values";
+							throw "value is not defined. If you want to use another key name, add a `value` property under `radiosOptions` in the schema. https://icebob.gitbooks.io/vueformgenerator/content/fields/radios.html#radios-field-with-object-values";
 						}
 					}
 				} else {
@@ -51,7 +51,7 @@
 						if (typeof item["name"] !== "undefined") {
 							return item.name
 						} else {
-							throw "name is not defined.\r If you want to use another key name, add a `name` property under `radiosOptions` in the schema.\r  https://icebob.gitbooks.io/vueformgenerator/content/fields/radios.html#radios-field-with-object-values";
+							throw "name is not defined. If you want to use another key name, add a `name` property under `radiosOptions` in the schema. https://icebob.gitbooks.io/vueformgenerator/content/fields/radios.html#radios-field-with-object-values";
 						}
 					}
 				} else {