using prod as local preview

dashboard/src/components/rmrk/Gallery/Gallery.vue

@@ -11,11 +11,12 @@
         </option>
       </b-select>
     </b-field> -->
+    <Search :query.sync="searchQuery" />
     <div>
       <div class="columns is-multiline">
         <div
           class="column is-4"
-          v-for="nft in nfts"
+          v-for="nft in results"
           :key="nft.id"
         >
           <div class="card nft-card">
@@ -68,14 +69,17 @@ import { getInstance } from '@/components/rmrk/service/RmrkService';
 import { NFTWithMeta, NFT } from '../service/scheme';
 import { defaultSortBy, sanitizeObjectArray } from '../utils';
 import GalleryCardList from './GalleryCardList.vue'
+import Search from './Search/SearchBar.vue'
+import { basicFilter } from './Search/query'
 
-type NFTType = NFT | NFTWithMeta;
-const components = { GalleryCardList }
+type NFTType = NFTWithMeta;
+const components = { GalleryCardList, Search }
 
 @Component({ components })
 export default class Gallery extends Vue {
   private nfts: NFTType[] = [];
   private isLoading: boolean = true;
+  private searchQuery = ''
 
   public async mounted() {
     const rmrkService = getInstance();
@@ -96,6 +100,14 @@ export default class Gallery extends Vue {
     this.isLoading = false;
   }
 
+  get results() {
+    if (this.searchQuery) {
+      return basicFilter(this.searchQuery, this.nfts)
+    }
+
+    return this.nfts
+  }
+
 }
 </script>
 

dashboard/src/components/rmrk/Gallery/Search/SearchBar.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="card mb-3 mt-5">
+    <div class="card-content">
+      <b-field >
+        <b-input expanded placeholder="Search..." type="search" v-model="searchQuery" icon="search">
+        </b-input>
+      </b-field>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" >
+import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
+import { Debounce } from 'vue-debounce-decorator';
+
+@Component({})
+export default class SearchBar extends Vue {
+  @Prop() public query!: string;
+
+
+  get searchQuery() {
+    return this.query
+  }
+
+  set searchQuery(value: string) {
+    this.update(value)
+  }
+
+  @Emit('update:query')
+  @Debounce(400)
+  update(value: string) {
+    console.log('Debounced', value)
+    return value
+  }
+
+}
+</script>

dashboard/src/components/rmrk/Gallery/Search/query.ts

@@ -0,0 +1,28 @@
+import M, { Query } from 'mingo'
+import { NFTWithMeta } from '../../service/scheme'
+
+type QueryType = Record<string, unknown>
+
+export const basicFilterQuery = (value: string): Query => {
+  const rr: RegExp = new RegExp(value, 'i')
+  const criteria: QueryType = {
+    $or: [
+      { name: { $regex: rr} },
+      { instance: { $regex: rr} },
+      { currentOwner: { $regex: rr} },
+      { description: { $regex: rr} },
+      { collection: { $regex: rr} },
+    ]
+
+
+  }
+
+  return new Query(criteria)
+}
+
+export const basicFilter = (value: string, ntfs: NFTWithMeta[]): any[] => {
+  const query = basicFilterQuery(value)
+  return query.find(ntfs).all()
+}
+
+

dashboard/src/main.ts

@@ -23,6 +23,7 @@ import { web3FromAddress } from '@polkadot/extension-dapp';
 import { getPrefixByStoreUrl } from '@/utils/chain'
 import 'setimmediate';
 import i18n from './i18n'
+import mingo from 'mingo'
 
 Vue.filter('shortAddress', shortAddress);
 
@@ -31,6 +32,7 @@ Vue.filter('shortAddress', shortAddress);
 (window as any).T = client;
 (window as any).R = getInstance;
 (window as any).W = web3FromAddress;
+(window as any).mingo = mingo;
 // (window as any).migrateCollection = migrateCollection;
 // (window as any).migrateNFT = migrateNFT;