separate search div from main tree, show search div when search value is present, else show main tree (#2512)

This commit is contained in:
Deep Tailor 2019-10-10 12:48:50 -07:00 committed by Andrew Henry
parent 2ecff75da5
commit c13b07e648

View File

@ -13,16 +13,31 @@
v-if="isLoading"></div>
<!-- end loading -->
<div class="c-tree-and-search__no-results" v-if="treeItems.length === 0">
<div class="c-tree-and-search__no-results"
v-if="(allTreeItems.length === 0) || (searchValue && filteredTreeItems.length === 0)">
No results found
</div>
<!-- main tree -->
<ul class="c-tree-and-search__tree c-tree"
v-if="!isLoading">
<tree-item v-for="treeItem in treeItems"
v-if="!isLoading"
v-show="!searchValue">
<tree-item v-for="treeItem in allTreeItems"
:key="treeItem.id"
:node="treeItem">
</tree-item>
</ul>
<!-- end main tree -->
<!-- search tree -->
<ul class="c-tree-and-search__tree c-tree"
v-if="searchValue">
<tree-item v-for="treeItem in filteredTreeItems"
:key="treeItem.id"
:node="treeItem">
</tree-item>
</ul>
<!-- end search tree -->
</div>
</template>
@ -188,15 +203,6 @@
isLoading: false
}
},
computed: {
treeItems() {
if (this.searchValue === '') {
return this.allTreeItems;
} else {
return this.filteredTreeItems;
}
}
},
methods: {
getAllChildren() {
this.isLoading = true;