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

Fixes to value update logic in text-based metadata inputs.

This commit is contained in:
mateuswetah 2024-09-10 11:14:20 -03:00
parent 7f900ccc9e
commit b12849abde
3 changed files with 26 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/views/admin/components/metadata-types/text/TainacanText.vue
View File

@ -8,7 +8,7 @@
v-imask="getMask"
class="input"
:disabled="disabled"
:value="value"
:value="localValue"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
:maxlength="getMaxlength"
@focus="onMobileSpecialFocus"
@ -16,17 +16,17 @@
@input="($event) => getMask ? null : onInput($event.target.value)"
@blur="onBlur">
<small
v-if="value && getMaxlength"
v-if="localValue && getMaxlength"
class="help counter"
:class="{ 'is-invisible': !isInputFocused }">
{{ value.length }} / {{ getMaxlength }}
{{ localValue.length }} / {{ getMaxlength }}
</small>
</div>
<b-autocomplete
v-else
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:disabled="disabled"
:model-value="value"
:model-value="localValue"
:data="options"
:loading="isLoadingOptions"
field="label"
@ -80,6 +80,7 @@
],
data() {
return {
localValue: '',
selected:'',
options: [],
label: '',
@ -120,6 +121,7 @@
// These values are set to allow the usage of the getValuesPlainText function from the DynamicFilterTypeMixin
this.currentCollectionId = this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.collection_id ? this.itemMetadatum.metadatum.collection_id : null;
this.filter = { collection_id: this.currentCollectionId };
this.localValue = this.value ? JSON.parse(JSON.stringify(this.value)) : '';
},
methods: {
onInput(value) {
@ -127,6 +129,7 @@
if ( inputRef && this.getMaxlength && !inputRef.checkHtml5Validity() )
return;
this.localValue = value;
this.changeValue(value);
},
changeValue: _.debounce(function(value) {

11
src/views/admin/components/metadata-types/textarea/TainacanTextarea.vue
View File

@ -4,7 +4,7 @@
:ref="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:disabled="disabled"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
:model-value="value"
:model-value="localValue"
type="textarea"
:maxlength="getMaxlength"
@update:model-value="onInput($event)"
@ -24,6 +24,11 @@
'blur',
'mobile-special-focus'
],
data() {
return {
localValue: ''
}
},
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 !== '' )
@ -32,12 +37,16 @@
return undefined;
}
},
created() {
this.localValue = this.value ? JSON.parse(JSON.stringify(this.value)) : '';
},
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.localValue = value;
this.changeValue(value);
},
changeValue: _.debounce(function(value) {

13
src/views/admin/components/metadata-types/url/TainacanUrl.vue
View File

@ -3,7 +3,7 @@
<b-input
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:disabled="disabled"
:model-value="value"
:model-value="localValue"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : '[link](https://url.com)'"
@update:model-value="($event) => onInput($event)"
@blur="onBlur" />
@ -11,7 +11,7 @@
v-if="itemMetadatum.item.id"
class="add-new-term">
<a
v-if="value"
v-if="localValue"
class="add-link"
@click="previewHtml">
<span class="icon">
@ -39,15 +39,20 @@ export default {
emits: [ 'update:value', 'blur' ],
data() {
return {
localValue: '',
isPreviewingHtml: false,
singleHTMLPreview: ''
}
},
created() {
this.localValue = this.value ? JSON.parse(JSON.stringify(this.value)) : '';
},
methods: {
onInput(value) {
this.isPreviewingHtml = false;
this.singleHTMLPreview = '';
this.localValue = value;
this.changeValue(value);
},
changeValue: _.debounce(function(value) {
@ -63,7 +68,7 @@ export default {
},
previewHtml() {
// If we are going to display preview, renders it
if (!this.isPreviewingHtml) {
if ( !this.isPreviewingHtml ) {
// Multivalued metadata need to be split as the values_as_html shows every value
if (this.itemMetadatum.metadatum.multiple == 'yes') {
@ -71,7 +76,7 @@ export default {
const valuesAsHtml = this.createElementFromHTML(this.itemMetadatum.value_as_html);
const valuesAsArray = Object.values(valuesAsHtml.children).filter((aValue) => aValue.outerHTML != '<span class="multivalue-separator"> | </span>');
const singleValueIndex = this.itemMetadatum.value.findIndex((aValue) => aValue == this.value);
const singleValueIndex = this.itemMetadatum.value.findIndex((aValue) => aValue == this.localValue);
if (singleValueIndex >= 0)
this.singleHTMLPreview = valuesAsArray[singleValueIndex].outerHTML;