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) : '')"
:is-modal="false"
:parent="0"
:allow-new="allowNew"
@showAddNewTerm="openTermCreationModal"
:taxonomy_id="taxonomyId"
:selected="!valueComponent ? [] : valueComponent"
: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' }"
class="modal-card-body tainacan-search-results-container">
<ul class="tainacan-modal-checkbox-search-results-body">
<li
class="tainacan-li-search-results"
v-for="(option, key) in searchResults"
:key="key">
<label
v-if="isCheckbox"
class="b-checkbox checkbox">
<input
<template v-if="searchResults.length">
<li
class="tainacan-li-search-results"
v-for="(option, key) in searchResults"
:key="key">
<label
v-if="isCheckbox"
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"
: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">
:native-value="option.id ? (isNaN(Number(option.id)) ? option.id : Number(option.value)) : (isNaN(Number(option.value)) ? option.value : Number(option.value))">
<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"
:native-value="option.id ? (isNaN(Number(option.id)) ? option.id : Number(option.value)) : (isNaN(Number(option.value)) ? option.value : Number(option.value))">
<span
class="checkbox-label-text"
v-html="`${ option.name ? option.name : (option.label ? (option.hierarchy_path ? renderHierarchicalPath(option.hierarchy_path, option.label) : option.label) : '') }`" />
</b-radio>
</li>
class="checkbox-label-text"
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 {