Version 142: move customfield datatransfrom to vue

This commit is contained in:
trendschau 2020-11-20 07:18:23 +01:00
parent 3cebe0426c
commit ff76712417
4 changed files with 48 additions and 31 deletions

View file

@ -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.

View file

@ -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);
}
*/
}
}

View file

@ -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);
}

View file

@ -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);
},
},
})