Added search capability

Author: gebsl

databud/src/components/SchemaView.vue

@@ -5,6 +5,12 @@
         :isLoading="isSchemaListLoading"
         @refresh="fetchSchemas"
       >
+        <template v-slot:header-end>
+          <b-input
+            placeholder="Search ..."
+            v-model="searchText"
+          />
+        </template>
         <b-list-group-item
           v-for="item of schemaDRIs"
           :key="item.dri"
@@ -118,6 +124,7 @@ interface IData {
   isSaving: boolean,
   isExecutingAction: boolean,
   saveMessage?: string,
+  searchText: string,
 
   // charting
   selectedTabIndex: number,
@@ -138,6 +145,7 @@ export default Vue.extend({
     isSaving: false,
     isExecutingAction: false,
     saveMessage: undefined,
+    searchText: '',
 
     // charting
     selectedTabIndex: 0,
@@ -185,6 +193,7 @@ export default Vue.extend({
     },
     async fetchSchemas() {
       this.selectedSchema = undefined;
+      this.searchText = '';
       await this.$store.dispatch(ActionType.FETCH_SCHEMA_DRIS);
     },
     async fetchVaultItems(refreshObj?: RefreshObj) {
@@ -291,7 +300,12 @@ export default Vue.extend({
   },
   computed: {
     schemaDRIs(): (VaultSchema & { dri?: string })[] {
-      return [{ dri: undefined, title: 'Default' }, ...this.$store.state.schemaDRI.all];
+      let items = [{ dri: undefined, title: 'Default' }, ...this.$store.state.schemaDRI.all];
+      const search = this.searchText.trim();
+      if (search)
+        items = items.filter(x => x.title.indexOf(search) !== -1);
+
+      return items;
     },
     isSchemaListLoading(): boolean {
       return (this.$store.state as IStore).schemaDRI.state === FetchState.FETCHING;