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