tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds min and max validation for numeric metadata. Adds maximum length validation for textarea. #276.

This commit is contained in:
mateuswetah 2023-10-23 12:07:28 -03:00
parent 2cd8859ae2
commit 23263ef26d
8 changed files with 167 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/views/admin/components/metadata-types/core-description/class-tainacan-core-description.php
View File

@ -19,11 +19,24 @@ class Core_Description extends Metadata_Type {
$this->set_core(true);
$this->set_related_mapped_prop('description');
$this->set_component('tainacan-textarea');
$this->set_form_component('tainacan-form-textarea');
$this->set_name( __('Core Description', 'tainacan') );
$this->set_description( __('The "Core Description" is a compulsory metadata automatically created for all collections by default. This is the main description displayed in items lists and where the basic research tools will do their searches.', 'tainacan') );
$this->set_sortable( false );
}
/**
* @inheritdoc
*/
public function get_form_labels(){
return [
'maxlength' => [
'title' => __( 'Maximum of characters', 'tainacan' ),
'description' => __( 'Limits the character input to a maximum value an displays a counter.', 'tainacan' ),
]
];
}
/**
* generate the metadata for this metadatum type
*/

38
src/views/admin/components/metadata-types/numeric/FormNumeric.vue
View File

@ -69,6 +69,32 @@
</button>
</div>
</b-field>
<b-field :addons="false">
<label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-numeric', 'min') }}
<help-button
:title="$i18n.getHelperTitle('tainacan-numeric', 'min')"
:message="$i18n.getHelperMessage('tainacan-numeric', 'min')" />
</label>
<b-numberinput
v-model="min"
name="min"
step="1"
@input="onUpdateMin"/>
</b-field>
<b-field :addons="false">
<label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-numeric', 'max') }}
<help-button
:title="$i18n.getHelperTitle('tainacan-numeric', 'max')"
:message="$i18n.getHelperMessage('tainacan-numeric', 'max')" />
</label>
<b-numberinput
v-model="max"
name="max"
step="1"
@input="onUpdateMax"/>
</b-field>
</section>
</template>
@ -80,15 +106,25 @@
data() {
return {
step: [Number, String],
min: [Number, null],
max: [Number, null],
showEditStepOptions: false
}
},
created() {
this.step = this.value && this.value.step ? this.value.step : 0.01;
this.min = this.value && this.value.min ? Number(this.value.min) : null;
this.max = this.value && this.value.max ? Number(this.value.max) : null;
},
methods: {
onUpdateStep(value) {
this.$emit('input', { step: value });
this.$emit('input', { step: value, min: this.min, max: this.max });
},
onUpdateMin(value) {
this.$emit('input', { step: this.step, min: value, max: this.max });
},
onUpdateMax(value) {
this.$emit('input', { step: this.step, min: this.min, max: value });
}
}
}

33
src/views/admin/components/metadata-types/numeric/Numeric.vue
View File

@ -1,15 +1,17 @@
<template>
<b-input
<b-numberinput
:disabled="disabled"
:ref="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
:value="value"
@input="onInput($event);"
@input="onInput"
@blur="onBlur"
@focus="onMobileSpecialFocus"
type="number"
lang="en"
:step="getStep"/>
:min="getMin"
:max="getMax"
:step="getStep" />
</template>
<script>
@ -25,10 +27,26 @@
return this.itemMetadatum.metadatum.metadata_type_options.step;
else
return 0.01;
},
getMin() {
if (this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.min !== null && this.itemMetadatum.metadatum.metadata_type_options.min !== undefined && this.itemMetadatum.metadatum.metadata_type_options.min !== '')
return Number(this.itemMetadatum.metadatum.metadata_type_options.min);
else
return undefined;
},
getMax() {
if (this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.max !== null && this.itemMetadatum.metadatum.metadata_type_options.max !== undefined && this.itemMetadatum.metadatum.metadata_type_options.max !== '')
return Number(this.itemMetadatum.metadatum.metadata_type_options.max);
else
return undefined;
}
},
methods: {
onInput(value) {
const inputRef = this.$refs['tainacan-item-metadatum_id-' + this.itemMetadatum.metadatum.id + (this.itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + this.itemMetadatum.parent_meta_id) : '')];
if ( inputRef && !inputRef.checkHtml5Validity())
return;
this.$emit('input', value);
},
onBlur() {
@ -40,3 +58,10 @@
}
}
</script>
<style scoped>
.b-numberinput {
border-bottom-width: 0px !important;
margin-left: 0 !important;
}
</style>

8
src/views/admin/components/metadata-types/numeric/class-tainacan-numeric.php
View File

@ -34,6 +34,14 @@ class Numeric extends Metadata_Type {
'step' => [
'title' => __( 'Step', 'tainacan' ),
'description' => __( 'The amount to be increased or decreased when clicking on the metadatum control buttons. This also defines whether the input accepts decimal numbers.', 'tainacan' ),
],
'min' => [
'title' => __( 'Minimum', 'tainacan' ),
'description' => __( 'The minimum value that the input will accept.', 'tainacan' ),
],
'max' => [
'title' => __( 'Maximum', 'tainacan' ),
'description' => __( 'The maximum value that the input will accept.', 'tainacan' ),
]
];
}

50
src/views/admin/components/metadata-types/textarea/FormTextarea.vue Normal file
View File

@ -0,0 +1,50 @@
<template>
<section>
<b-field :addons="false">
<label class="label is-inline">
{{ $i18n.getHelperTitle('tainacan-textarea', 'maxlength') }}
<help-button
:title="$i18n.getHelperTitle('tainacan-textarea', 'maxlength')"
:message="$i18n.getHelperMessage('tainacan-textarea', 'maxlength')" />
</label>
<b-numberinput
v-model="maxlength"
name="maxlength"
step="1"
min="0"
@input="onUpdateMaxlength"/>
</b-field>
</section>
</template>
<script>
export default {
props: {
value: [ String, Object, Array ]
},
data() {
return {
maxlength: [Number, null]
}
},
created() {
this.maxlength = this.value && this.value.maxlength ? Number(this.value.maxlength) : null;
},
methods: {
onUpdateMaxlength(value) {
if (value == 0) value = null;
this.$emit('input', { maxlength: value });
}
}
}
</script>
<style scoped>
section{
margin-bottom: 10px;
}
.tainacan-help-tooltip-trigger {
font-size: 1em;
}
</style>

16
src/views/admin/components/metadata-types/textarea/Textarea.vue
View File

@ -1,13 +1,15 @@
<template>
<b-input
:disabled="disabled"
:ref="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
:value="value"
@input="onInput($event)"
@blur="onBlur"
type="textarea"
@focus="onMobileSpecialFocus" />
@focus="onMobileSpecialFocus"
:maxlength="getMaxlength" />
</template>
<script>
@ -17,8 +19,20 @@
value: [String, Number, Array],
disabled: false
},
computed: {
getMaxlength() {
if (this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.maxlength !== null && this.itemMetadatum.metadatum.metadata_type_options.maxlength !== undefined && this.itemMetadatum.metadatum.metadata_type_options.maxlength !== '')
return Number(this.itemMetadatum.metadatum.metadata_type_options.maxlength);
else
return undefined;
}
},
methods: {
onInput(value) {
const inputRef = this.$refs['tainacan-item-metadatum_id-' + this.itemMetadatum.metadatum.id + (this.itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + this.itemMetadatum.parent_meta_id) : '')];
if ( inputRef && this.getMaxlength && !inputRef.checkHtml5Validity() )
return;
this.$emit('input', value);
},
onBlur() {

13
src/views/admin/components/metadata-types/textarea/class-tainacan-textarea.php
View File

@ -15,6 +15,7 @@ class Textarea extends Metadata_Type {
parent::__construct();
$this->set_primitive_type('long_string');
$this->set_component('tainacan-textarea');
$this->set_form_component('tainacan-form-textarea');
$this->set_name( __('Textarea', 'tainacan') );
$this->set_description( __('A textarea with multiple lines', 'tainacan') );
$this->set_preview_template('
@ -26,6 +27,18 @@ class Textarea extends Metadata_Type {
');
}
/**
* @inheritdoc
*/
public function get_form_labels(){
return [
'maxlength' => [
'title' => __( 'Maximum of characters', 'tainacan' ),
'description' => __( 'Limits the character input to a maximum value an displays a counter.', 'tainacan' ),
]
];
}
public function get_multivalue_prefix() {
return '<p>';

2
src/views/admin/js/admin-main.js
View File

@ -48,6 +48,7 @@ import User from '../components/metadata-types/user/User.vue';
import GeoCoordinate from '../components/metadata-types/geocoordinate/GeoCoordinate.vue'
import FormText from '../components/metadata-types/text/FormText.vue';
import FormTextarea from '../components/metadata-types/textarea/FormTextarea.vue';
import FormRelationship from '../components/metadata-types/relationship/FormRelationship.vue';
import FormTaxonomy from '../components/metadata-types/taxonomy/FormTaxonomy.vue';
import FormSelectbox from '../components/metadata-types/selectbox/FormSelectbox.vue';
@ -202,6 +203,7 @@ export default (element) => {
/* Metadata Option forms */
Vue.component('tainacan-form-text', FormText);
Vue.component('tainacan-form-textarea', FormTextarea);
Vue.component('tainacan-form-relationship', FormRelationship);
Vue.component('tainacan-form-taxonomy', FormTaxonomy);
Vue.component('tainacan-form-selectbox', FormSelectbox);