Merge pull request #310 from hansi90/inputs_name

Use `name` in checklist input fields.

Author: icebob

dev/checklist/app.vue

@@ -23,6 +23,7 @@ export default {
 						label: "Skills",
 						model: "skills",
 						required: true,
+						inputName:"skill",
 						min: 2,
 						listBox: true,
 						values: ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"],

src/fields/core/fieldChecklist.vue

@@ -3,7 +3,7 @@
 		.listbox.form-control(v-if="schema.listBox", :disabled="disabled")
 			.list-row(v-for="item in items", :class="{'is-checked': isItemChecked(item)}")
 				label
-					input(type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @change="onChanged($event, item)")
+					input(type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @change="onChanged($event, item)", :name="getInputName(item)")
 					| {{ getItemName(item) }}
 
 		.combobox.form-control(v-if="!schema.listBox", :disabled="disabled")
@@ -14,13 +14,14 @@
 			.dropList
 				.list-row(v-if="comboExpanded", v-for="item in items", :class="{'is-checked': isItemChecked(item)}")
 					label
-						input(type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @change="onChanged($event, item)")
+						input(type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @change="onChanged($event, item)", :name="getInputName(item)")
 						| {{ getItemName(item) }}
 </template>
 
 <script>
 	import {isObject, isNil, clone} from "lodash";
 	import abstractField from "../abstractField";
+	import { slugify } from "../../utils/schema";
 	
 	export default {
 		mixins: [ abstractField ],
@@ -45,10 +46,18 @@
 					return this.value.length;
 
 				return 0;
-			}   
+			}
 		},
 
 		methods: {
+
+			getInputName(item){
+				if(this.schema && this.schema.inputName && this.schema.inputName.length > 0){
+					return slugify(this.schema.inputName + "_" + this.getItemValue(item));
+				}
+				return slugify(this.getItemValue(item));
+			},
+
 			getItemValue(item) {
 				if (isObject(item)){
 					if (typeof this.schema["checklistOptions"] !== "undefined" && typeof this.schema["checklistOptions"]["value"] !== "undefined") {

src/utils/schema.js

@@ -1,7 +1,7 @@
-import {get, set, each, isObject, isArray, isFunction, cloneDeep} from "lodash";
+import { get, set, each, isObject, isArray, isFunction, cloneDeep } from "lodash";
 
 // Create a new model by schema default values
-module.exports.createDefaultObject = function (schema, obj = {}){
+module.exports.createDefaultObject = function (schema, obj = {}) {
 	each(schema.fields, (field) => {
 		if (get(obj, field.model) === undefined && field.default !== undefined) {
 			if (isFunction(field.default)) {
@@ -16,18 +16,18 @@ module.exports.createDefaultObject = function (schema, obj = {}){
 };
 
 // Get a new model which contains only properties of multi-edit fields
-module.exports.getMultipleFields = function(schema) {
+module.exports.getMultipleFields = function (schema) {
 	let res = [];
 	each(schema.fields, (field) => {
-		if (field.multi === true) 
+		if (field.multi === true)
 			res.push(field);
 	});
 
 	return res;
 };
 
 // Merge many models to one 'work model' by schema
-module.exports.mergeMultiObjectFields = function(schema, objs) {
+module.exports.mergeMultiObjectFields = function (schema, objs) {
 	let model = {};
 
 	let fields = module.exports.getMultipleFields(schema);
@@ -54,7 +54,7 @@ module.exports.mergeMultiObjectFields = function(schema, objs) {
 	return model;
 };
 
-module.exports.slugifyFormID = function(schema, prefix = "") {
+module.exports.slugifyFormID = function (schema, prefix = "") {
 	// Try to get a reasonable default id from the schema,
 	// then slugify it.
 	if (typeof schema.id !== "undefined") {
@@ -78,3 +78,21 @@ module.exports.slugifyFormID = function(schema, prefix = "") {
 			.replace(/([^a-zA-Z0-9-]+)/g, "");
 	}
 };
+
+module.exports.slugify = function (name = "") {
+	// Return the slugified version of either:
+	return name
+		// NB: This is a very simple, conservative, slugify function,
+		// avoiding extra dependencies.
+		.toString()
+		.trim()
+		//.toLowerCase()
+		// Spaces & underscores to dashes
+		.replace(/ /g, "-")
+		// Multiple dashes to one
+		.replace(/-{2,}/g, "-")
+		// Remove leading & trailing dashes
+		.replace(/^-+|-+$/g, "")
+		// Remove anything that isn't a (English/ASCII) letter, number or dash.
+		.replace(/([^a-zA-Z0-9-_/./:]+)/g, "");
+};

test/unit/specs/fields/fieldChecklist.spec.js

@@ -398,6 +398,7 @@ describe("fieldChecklist.vue", function() {
 				type: "checklist",
 				label: "Skills",
 				model: "skills",
+				inputName:"",
 				listBox: true,
 				values() {
 					return [
@@ -441,6 +442,40 @@ describe("fieldChecklist.vue", function() {
 				expect(isChecked(6)).to.be.true;
 			});
 
+						
+			it("should contain input name field withouth inputName", (done) => {
+				
+				checkboxes = listbox.querySelectorAll("input[type=checkbox]");
+				expect(checkboxes[0].name).to.be.equal("1");
+				expect(checkboxes[1].name).to.be.equal("2");
+				expect(checkboxes[2].name).to.be.equal("3");
+				expect(checkboxes[3].name).to.be.equal("4");
+				expect(checkboxes[4].name).to.be.equal("5");
+				expect(checkboxes[5].name).to.be.equal("6");
+				expect(checkboxes[6].name).to.be.equal("7");
+				
+				done();
+				
+			});
+
+			it("should contain input name field with inputName", (done) => {
+				
+				schema.inputName="skill";
+
+				vm.$nextTick( () => {
+					checkboxes = listbox.querySelectorAll("input[type=checkbox]");
+					expect(checkboxes[0].name).to.be.equal("skill_1");
+					expect(checkboxes[1].name).to.be.equal("skill_2");
+					expect(checkboxes[2].name).to.be.equal("skill_3");
+					expect(checkboxes[3].name).to.be.equal("skill_4");
+					expect(checkboxes[4].name).to.be.equal("skill_5");
+					expect(checkboxes[5].name).to.be.equal("skill_6");
+					expect(checkboxes[6].name).to.be.equal("skill_7");
+					
+					done();
+				});
+			});
+
 			describe("test values reactivity to changes", () => {
 
 				it("listbox value should be the model value after changed", (done) => {
@@ -524,6 +559,7 @@ describe("fieldChecklist.vue", function() {
 				type: "checklist",
 				label: "Skills",
 				model: "skills",
+				inputName:"",
 				values: [
 					"HTML5",
 					"Javascript",
@@ -581,6 +617,39 @@ describe("fieldChecklist.vue", function() {
 					done();
 				});
 			});
+			
+			it("should contain input name field withouth inputName", (done) => {
+				
+				checkboxes = dropList.querySelectorAll("input[type=checkbox]");
+				expect(checkboxes[0].name).to.be.equal("HTML5");
+				expect(checkboxes[1].name).to.be.equal("Javascript");
+				expect(checkboxes[2].name).to.be.equal("CSS3");
+				expect(checkboxes[3].name).to.be.equal("CoffeeScript");
+				expect(checkboxes[4].name).to.be.equal("AngularJS");
+				expect(checkboxes[5].name).to.be.equal("ReactJS");
+				expect(checkboxes[6].name).to.be.equal("VueJS");
+				
+				done();
+				
+			});
+
+			it("should contain input name field with inputName", (done) => {
+				
+				schema.inputName="skill";
+
+				vm.$nextTick( () => {
+					checkboxes = dropList.querySelectorAll("input[type=checkbox]");
+					expect(checkboxes[0].name).to.be.equal("skill_HTML5");
+					expect(checkboxes[1].name).to.be.equal("skill_Javascript");
+					expect(checkboxes[2].name).to.be.equal("skill_CSS3");
+					expect(checkboxes[3].name).to.be.equal("skill_CoffeeScript");
+					expect(checkboxes[4].name).to.be.equal("skill_AngularJS");
+					expect(checkboxes[5].name).to.be.equal("skill_ReactJS");
+					expect(checkboxes[6].name).to.be.equal("skill_VueJS");
+					
+					done();
+				});
+			});
 
 			it("should checked the values", () => {
 				expect(isChecked(0)).to.be.false;