Use name in checklist input fields with slugify. Fix #243

Author: hansi90

src/fields/core/fieldChecklist.vue

@@ -21,6 +21,7 @@
 <script>
 	import {isObject, isNil, clone} from "lodash";
 	import abstractField from "../abstractField";
+	import { slugify } from "../../utils/schema";
 	
 	export default {
 		mixins: [ abstractField ],
@@ -54,7 +55,7 @@
 				if(this.schema && this.schema.inputName && this.schema.inputName.length > 0){
 					return this.schema.inputName + "_" + this.getItemValue(item);
 				}
-				return this.getItemValue(item);
+				return slugify(this.getItemValue(item));
 			},
 
 			getItemValue(item) {

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) => {