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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/admin/components/metadata-types/taxonomy/Taxonomy.vue
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) : '')" :id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
:is-modal="false" :is-modal="false"
:parent="0" :parent="0"
:allow-new="allowNew"
@showAddNewTerm="openTermCreationModal"
:taxonomy_id="taxonomyId" :taxonomy_id="taxonomyId"
:selected="!valueComponent ? [] : valueComponent" :selected="!valueComponent ? [] : valueComponent"
:metadatum-id="itemMetadatum.metadatum.id" :metadatum-id="itemMetadatum.metadatum.id"

81
src/views/admin/components/other/checkbox-radio-metadata-input.vue
View File

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