From bca3d2dfe276b19092f82676929e5a739dbd9a3e Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Wed, 11 Nov 2020 16:06:08 -0300
Subject: [PATCH] Offers new term creation from checkbox list input just like
 in taginput.

---
 .../metadata-types/taxonomy/Taxonomy.vue      |  2 +
 .../other/checkbox-radio-metadata-input.vue   | 81 ++++++++++++-------
 2 files changed, 53 insertions(+), 30 deletions(-)

diff --git a/src/views/admin/components/metadata-types/taxonomy/Taxonomy.vue b/src/views/admin/components/metadata-types/taxonomy/Taxonomy.vue
index ed511e5c3..142842cbe 100644
--- a/src/views/admin/components/metadata-types/taxonomy/Taxonomy.vue
+++ b/src/views/admin/components/metadata-types/taxonomy/Taxonomy.vue
@@ -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"
diff --git a/src/views/admin/components/other/checkbox-radio-metadata-input.vue b/src/views/admin/components/other/checkbox-radio-metadata-input.vue
index 50d0c0430..7d3f9a07b 100644
--- a/src/views/admin/components/other/checkbox-radio-metadata-input.vue
+++ b/src/views/admin/components/other/checkbox-radio-metadata-input.vue
@@ -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 {