Changed data for customfields, fixed empty image in image component, fixed validation checkboxlist

content/01-cyanine-theme/00-landingpage.yaml

@@ -6,3 +6,8 @@ meta:
     time: 20-05-35
     navtitle: landingpage
     modified: '2020-06-11'
+seo:
+    seoimage: ''
+    seoimagealt: null
+    Checkbox: null
+    mycfiel: {  }

system/Controllers/MetaApiController.php

@@ -124,18 +124,11 @@ class MetaApiController extends ContentController
 				$metadata[$tabname][$fieldname] = isset($pagemeta[$tabname][$fieldname]) ? $pagemeta[$tabname][$fieldname] : null;
 
 				# special treatment for customfields
-				if(isset($fielddefinitions['type']) && ($fielddefinitions['type'] == 'customfields' ) && isset($metadata[$tabname][$fieldname]) )
+				if(isset($fielddefinitions['type']) && ($fielddefinitions['type'] == 'customfields' ) && $metadata[$tabname][$fieldname] )
 				{
-					# loop through the customdata
-					foreach($metadata[$tabname][$fieldname] as $key => $value)
-					{
-						# and make sure that arrays are transformed back into strings
-						if(isset($value['value']) && is_array($value['value']))
-						{
-							$valuestring = implode(PHP_EOL . '- ', $value['value']);
-							$metadata[$tabname][$fieldname][$key]['value'] = '- ' . $valuestring;
-						}
-					}
+
+					$metadata[$tabname][$fieldname] = $this->customfieldsPrepareForEdit($metadata[$tabname][$fieldname]);
+
 				}
 			}
 		}
@@ -224,21 +217,16 @@ class MetaApiController extends ContentController
 					$errors[$tab][$fieldName] = $result[$fieldName][0];
 				}
 
-				# special treatment for customfields: if data is array, then lists wil transformed into array. 
-				if($fieldDefinition && isset($fieldDefinition['type']) && ($fieldDefinition['type'] == 'customfields' ) && isset($fieldDefinition['data']) && ($fieldDefinition['data'] == 'array' )  )
+				# special treatment for customfields 
+				if($fieldDefinition && isset($fieldDefinition['type']) && ($fieldDefinition['type'] == 'customfields' ) )
 				{
-					foreach($fieldValue as $key => $valuePair)
+					$arrayFeatureOn = false;
+					if(isset($fieldDefinition['data']) && ($fieldDefinition['data'] == 'array'))
 					{
-						if(isset($valuePair['value']))
-						{
-							$arrayValues = explode(PHP_EOL . '- ',$valuePair['value']);
-							if(count($arrayValues) > 1)
-							{
-								$arrayValues = array_map(function($item) { return trim($item, '- '); }, $arrayValues);
-								$metaInput[$fieldName][$key]['value'] = $arrayValues;
-							}
-						}
+						$arrayFeatureOn = true;
 					}
+
+					$metaInput[$fieldName] = $this->customfieldsPrepareForSave($metaInput[$fieldName], $arrayFeatureOn);
 				}
 			}
 		}
@@ -356,6 +344,67 @@ class MetaApiController extends ContentController
 		return $response->withJson(array('metadata' => $metaInput, 'structure' => $structure, 'item' => $this->item, 'errors' => false));
 	}
 
+	private function customfieldsPrepareForEdit($customfields)
+	{
+		# to edit fields in vue we have to transform the arrays in yaml into an array of objects like [{key: abc, value: xyz}{...}]
+
+		$customfieldsForEdit = [];
+
+		foreach($customfields as $key => $value)
+		{
+			$valuestring = $value;
+
+			# and make sure that arrays are transformed back into strings
+			if(isset($value) && is_array($value))
+			{
+				$valuestring = '- ' . implode(PHP_EOL . '- ', $value);
+			}
+
+			$customfieldsForEdit[] = ['key' => $key, 'value' => $valuestring];
+		}
+
+		return $customfieldsForEdit;
+	}
+
+	private function customfieldsPrepareForSave($customfields, $arrayFeatureOn)
+	{
+		# we have to convert the incoming array of objects from vue [{key: abc, value: xyz}{...}] into key-value arrays for yaml. 
+
+		$customfieldsForSave = [];
+
+		foreach($customfields as $valuePair)
+		{
+			# doupbe check, not really needed because it is validated already
+			if(!isset($valuePair['key']) OR ($valuePair['key'] == ''))
+			{
+				# do not use data without valid keys
+				continue;
+			}
+
+			$key 	= $valuePair['key'];
+			$value 	= '';
+
+			if(isset($valuePair['value']))
+			{
+				$value = $valuePair['value'];
+
+				# check if value is formatted as a list, then transform it into an array
+				if($arrayFeatureOn)
+				{
+					$arrayValues = explode(PHP_EOL . '- ',$valuePair['value']);
+					if(count($arrayValues) > 1)
+					{
+						$value = array_map(function($item) { return trim($item, '- '); }, $arrayValues);
+					}
+				}
+			}
+
+			$customfieldsForSave[$key] = $value;
+		}
+
+		return $customfieldsForSave;
+	}
+
 	protected function hasChanged($input, $page, $field)
 	{
 		if(isset($input[$field]) && isset($page[$field]) && $input[$field] == $page[$field])

system/Models/Validation.php

@@ -419,13 +419,17 @@ class Validation
 				$v->rule('in', $fieldName, $fieldDefinitions['options']);
 				break;
 			case "checkboxlist":				
-				/* create array with option keys as value */
-				$options = array();
-				foreach($fieldDefinitions['options'] as $key => $value){ $options[] = $key; }
-				/* loop over input values and check, if the options of the field definitions (options for checkboxlist) contains the key (input from user, key is used as value, value is used as label) */
-				foreach($fieldValue as $key => $value)
+				if(isset($fieldValue) && is_array($fieldValue))
 				{
-					$v->rule('in', $key, $options);
+					/* create array with option keys as value */
+					$options = array();
+					foreach($fieldDefinitions['options'] as $key => $value){ $options[] = $key; }
+
+					/* loop over input values and check, if the options of the field definitions (options for checkboxlist) contains the key (input from user, key is used as value, value is used as label) */
+					foreach($fieldValue as $key => $value)
+					{
+						$v->rule('in', $key, $options);
+					}
 				}
 				break;
 			case "color":

system/author/js/vue-meta.js

@@ -399,7 +399,7 @@ Vue.component('component-customfields', {
 				'<button :disabled="disableaddbutton" class="bg-tm-green white bn br1 pa2 f6" @click.prevent="addField()"><svg class="icon icon-plus f7"><use xlink:href="#icon-plus"></use></svg> Add Fields</button>' +
 			  '</div>',
 	mounted: function(){
-		if(this.value === null)
+		if(this.value === null || this.value.length == 0)
 		{
 			this.value = [{}];
 			this.disableaddbutton = 'disabled';

system/author/js/vue-shared.js

@@ -5,7 +5,7 @@ Vue.component('component-image', {
 				'<div class="flex flex-wrap item-start">' +
 					'<div class="w-50">' +
 						'<div class="w6 h6 bg-black-40 dtc v-mid bg-chess">' +
-							'<img :src="imgpreview" class="mw6 max-h6 dt center">' +
+							'<img v-if="imgpreview" :src="imgpreview" class="mw6 max-h6 dt center">' +
 						'</div>' +
 					'</div>' +
 					'<div class="w-50 ph3 lh-copy f6 relative">' +
@@ -52,7 +52,10 @@ Vue.component('component-image', {
 		}
 	},
 	mounted: function(){
-		this.imgpreview = myaxios.defaults.baseURL + '/' + this.value;
+		if(this.value !== null && this.value !== '')
+		{
+			this.imgpreview = myaxios.defaults.baseURL + '/' + this.value;
+		}
 	},
 	methods: {
 		update: function(value)
@@ -527,7 +530,7 @@ const medialib = Vue.component('medialib', {
 				var imgmarkdown = {target: {value: '![alt]('+ file.url +')' }};
 
 				this.$parent.imgfile = file.url;
-				this.$parent.imgpreview = file.url;
+				this.$parent.imgpreview = this.baseurl + '/' + file.url;
 				this.$parent.imgmeta = true;
 
 				this.$parent.showmedialib = false;