Version 142: move customfield datatransfrom to vue

content/00-welcome/02-get-help.md

@@ -4,12 +4,6 @@ If you need any help, then please read the [documentation on typemill.net](https
 
 If you found a bug or if you have a question, then please open a new issue on [GitHub](https://github.com/typemill/typemill/issues).
 
-Test
-: my Term
-
-Second
-: My new
-
 Do you need professional help, an individual theme or a special plugin? You can hire us at [Trendschau Digital](https://trendschau.net/typemill-development).
 
 [Contributions](https://github.com/typemill/typemill#contributors--supporters), [donations](https://www.paypal.me/typemill) and [feedback](https://github.com/typemill/typemill/issues) for this open source project are always welcome.

system/Controllers/MetaApiController.php

@@ -127,6 +127,7 @@ class MetaApiController extends ContentController
 				$metascheme[$tabname][$fieldname] = true;
 				$metadata[$tabname][$fieldname] = isset($pagemeta[$tabname][$fieldname]) ? $pagemeta[$tabname][$fieldname] : null;
 
+				/*
 				# special treatment for customfields
 				if(isset($fielddefinitions['type']) && ($fielddefinitions['type'] == 'customfields' ) && $metadata[$tabname][$fieldname] )
 				{
@@ -134,6 +135,7 @@ class MetaApiController extends ContentController
 					$metadata[$tabname][$fieldname] = $this->customfieldsPrepareForEdit($metadata[$tabname][$fieldname]);
 
 				}
+				*/
 			}
 		}
 
@@ -221,6 +223,7 @@ class MetaApiController extends ContentController
 					$errors[$tab][$fieldName] = $result[$fieldName][0];
 				}
 
+				/*
 				# special treatment for customfields 
 				if($fieldDefinition && isset($fieldDefinition['type']) && ($fieldDefinition['type'] == 'customfields' ) )
 				{
@@ -232,6 +235,7 @@ class MetaApiController extends ContentController
 
 					$metaInput[$fieldName] = $this->customfieldsPrepareForSave($metaInput[$fieldName], $arrayFeatureOn);
 				}
+				*/
 			}
 		}
 

system/Models/Validation.php

@@ -63,16 +63,20 @@ class Validation
 			return true;
 		}, 'contains one or more invalid ip-adress.');
 
-		Validator::addRule('customfields', function($field, $value, array $params, array $fields) use ($user)
+		Validator::addRule('customfields', function($field, $customfields, array $params, array $fields) use ($user)
 		{
-			foreach($value as $customfield)
+			if(empty($customfields))
 			{
-				if(!isset($customfield['key']) OR empty($customfield['key']) OR (preg_match('/^([a-z0-9])+$/i', $customfield['key']) == false) )
+				return true;
+			}
+			foreach($customfields as $key => $value)
+			{
+				if(!isset($key) OR empty($key) OR (preg_match('/^([a-z0-9])+$/i', $key) == false) )
 				{
 		        	return false;
 		        }
 
-				if (!isset($customfield['value']) OR empty($customfield['value']) OR ( $customfield['value'] != strip_tags($customfield['value']) ) )
+				if (!isset($value) OR empty($value) OR ( $value != strip_tags($value) ) )
 				{
 					return false;
 				}
@@ -134,7 +138,7 @@ class Validation
 	}
 
 	# return valitron standard object
-	public function returnValitron(array $params)
+	public function returnValidator(array $params)
 	{
 		return new Validator($params);
 	}

system/author/js/vue-shared.js

@@ -368,6 +368,7 @@ Vue.component('component-customfields', {
 			fielderrors: false,
 			fielddetails: {},
 			disableaddbutton: false,
+			cfvalue: [{}]
 		 }
 	},
 	template: '<div class="large">' +
@@ -376,7 +377,7 @@ Vue.component('component-customfields', {
 			  	'<div v-if="errors[name]" class="error mb2 f7">{{ errors[name] }}</div>' +
 			  	'<transition name="fade"><div v-if="fielderrors" class="error mb2 f7">{{ fielderrors }}</div></transition>' +
 	  			'<transition-group name="fade" tag="div">' + 
-	  				'<div class="customrow flex items-start mb3" v-for="(pairobject, pairindex) in value" :key="pairindex">' +
+	  				'<div class="customrow flex items-start mb3" v-for="(pairobject, pairindex) in cfvalue" :key="pairindex">' +
 						'<input type="text" placeholder="key" class="customkey" :class="pairobject.keyerror" :value="pairobject.key" @input="updatePairKey(pairindex,$event)">' +
 				  		'<div class="mt3"><svg class="icon icon-dots-two-vertical"><use xlink:href="#icon-dots-two-vertical"></use></svg></div>' + 
 		  			  	'<textarea placeholder="value" class="customvalue pa3" :class="pairobject.valueerror" v-html="pairobject.value" @input="updatePairValue(pairindex,$event)"></textarea>' +
@@ -388,48 +389,62 @@ Vue.component('component-customfields', {
 	mounted: function(){
 		if(typeof this.value === 'undefined' || this.value === null || this.value.length == 0)
 		{
-			var initialvalue = [{}];
-			this.update(initialvalue, this.name);
+			// this.cfvalue = [{}];
+			// this.update(this.cfvalue, this.name);
 			this.disableaddbutton = 'disabled';
 		}
+		else
+		{
+			/* turn object { key:value, key:value } into array [[key,value][key,value]] */
+			this.cfvalue = Object.entries(this.value);
+			/* and back into array of objects [ {key: key, value: value}{key:key, value: value }] */
+			this.cfvalue = this.cfvalue.map(function(item){ return { 'key': item[0], 'value': item[1] } });
+		}
 	},
 	methods: {
 		update: function(value, name)
 		{
 			this.fielderrors = false;
 			this.errors = false;
-			FormBus.$emit('forminput', {'name': name, 'value': value});
+
+			/* transform array of objects [{key:mykey, value:myvalue}] into array [[mykey,myvalue]] */
+			var storedvalue = value.map(function(item){ return [item.key, item.value]; });
+
+			/* transform array [[mykey,myvalue]] into object { mykey:myvalue } */
+			storedvalue = Object.fromEntries(storedvalue);
+						
+			FormBus.$emit('forminput', {'name': name, 'value': storedvalue});
 		},
 		updatePairKey: function(index,event)
 		{
-			this.value[index].key = event.target.value;
+			this.cfvalue[index].key = event.target.value;
 
 			var regex = /^[a-z0-9]+$/i;
 
 			if(!this.keyIsUnique(event.target.value,index))
 			{
-				this.value[index].keyerror = 'red';
+				this.cfvalue[index].keyerror = 'red';
 				this.fielderrors = 'Error: The key already exists';
 				this.disableaddbutton = 'disabled';
 				return;
 			}
 			else if(!regex.test(event.target.value))
 			{
-				this.value[index].keyerror = 'red';
+				this.cfvalue[index].keyerror = 'red';
 				this.fielderrors = 'Error: Only alphanumeric for keys allowed';
 				this.disableaddbutton = 'disabled';
 				return;
 			}
 
-			delete this.value[index].keyerror;
+			delete this.cfvalue[index].keyerror;
 			this.disableaddbutton = false;
-			this.update(this.value,this.name);
+			this.update(this.cfvalue,this.name);
 		},
 		keyIsUnique: function(keystring, index)
 		{
-			for(obj in this.value)
+			for(obj in this.cfvalue)
 			{
-				if( (obj != index) && (this.value[obj].key == keystring) )
+				if( (obj != index) && (this.cfvalue[obj].key == keystring) )
 				{
 					return false;
 				}
@@ -438,37 +453,37 @@ Vue.component('component-customfields', {
 		},
 		updatePairValue: function(index, event)
 		{
-			this.value[index].value = event.target.value;
+			this.cfvalue[index].value = event.target.value;
 			
 			var regex = /<.*(?=>)/gm;
 			if(event.target.value == '' || regex.test(event.target.value))
 			{
-				this.value[index].valueerror = 'red';
+				this.cfvalue[index].valueerror = 'red';
 				this.fielderrors = 'Error: No empty values or html tags are allowed';				
 			}
 			else
 			{
-				delete this.value[index].valueerror;
-				this.update(this.value,this.name);
+				delete this.cfvalue[index].valueerror;
+				this.update(this.cfvalue,this.name);
 			}
 		},
 		addField: function()
 		{
-			for(object in this.value)
+			for(object in this.cfvalue)
 			{
-				if(Object.keys(this.value[object]).length === 0)
+				if(Object.keys(this.cfvalue[object]).length === 0)
 				{
 					return;
 				}
 			}
-			this.value.push({});
+			this.cfvalue.push({});
 			this.disableaddbutton = 'disabled';
 		},
 		deleteField: function(index)
 		{
-			this.value.splice(index,1);
+			this.cfvalue.splice(index,1);
 			this.disableaddbutton = false;
-			this.update(this.value,this.name);
+			this.update(this.cfvalue,this.name);
 		},
 	},
 })