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

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

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