Offers new term creation from checkbox list input just like in taginput.

This commit is contained in:
mateuswetah 2020-11-11 16:06:08 -03:00
parent 0b1208ba12
commit bca3d2dfe2
2 changed files with 53 additions and 30 deletions

View File

@ -17,6 +17,8 @@
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:is-modal="false"
:parent="0"
:allow-new="allowNew"
@showAddNewTerm="openTermCreationModal"
:taxonomy_id="taxonomyId"
:selected="!valueComponent ? [] : valueComponent"
:metadatum-id="itemMetadatum.metadatum.id"

View File

@ -188,6 +188,7 @@
:style="{ height: expandResultsSection ? 'auto' : '0px' }"
class="modal-card-body tainacan-search-results-container">
<ul class="tainacan-modal-checkbox-search-results-body">
<template v-if="searchResults.length">
<li
class="tainacan-li-search-results"
v-for="(option, key) in searchResults"
@ -219,6 +220,19 @@
v-html="`${ option.name ? option.name : (option.label ? (option.hierarchy_path ? renderHierarchicalPath(option.hierarchy_path, option.label) : option.label) : '') }`" />
</b-radio>
</li>
</template>
<template v-if="!searchResults.length">
<li class="tainacan-li-search-results result-info">
{{ $i18n.get('info_no_terms_found') }}
</li>
</template>
<template v-if="allowNew && !searchResults.length">
<li class="tainacan-li-search-results result-info">
<a @click="$emit('showAddNewTerm', { name: optionName })">
{{ $i18n.get('label_new_term') + ' "' + optionName + '"' }}
</a>
</li>
</template>
<b-loading
:is-full-page="false"
:active.sync="isLoadingSearch"/>
@ -294,6 +308,7 @@
metadatumId: Number,
metadatum: Object,
selected: Array,
allowNew: Boolean,
isTaxonomy: {
type: Boolean,
default: false,
@ -359,6 +374,7 @@
this.$parent.$on('update-taxonomy-inputs', ($event) => {
if ($event.taxonomyId == this.taxonomy_id && $event.metadatumId == this.metadatumId) {
this.finderColumns = [];
this.optionName = '';
this.hierarchicalPath = [];
this.isSearching = false;
this.searchResults = [];
@ -793,9 +809,14 @@
}
}
&:hover {
&:hover:not(.result-info) {
background-color: var(--tainacan-gray1);
}
&.result-info {
width: 100%;
column-span: all;
font-size: 0.75em;
}
}
.tainacan-li-checkbox-modal {