Merge pull request #222 from kodadot/201-group-by

201 same images are grouped

Author: yangwao

dashboard/src/components/rmrk/Create/CreateCollection.vue

@@ -39,7 +39,7 @@
         <b-field :label="$i18n.t('Description')">
           <b-input
             v-model="meta.description"
-            maxlength="200"
+            maxlength="500"
             type="textarea"
           ></b-input>
         </b-field>

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

@@ -29,7 +29,7 @@
                 <b-image
                   v-if="!isLoading"
                   :src="nft.image"
-                  :src-fallback="require('@/utils/placeholder.png')"
+                  :src-fallback="require('@/assets/kodadot_logo_v1_transparent_400px.png')"
                   alt="Simple image"
                   ratio="1by1"
                 ></b-image>
@@ -47,9 +47,12 @@
                 <p
                   v-if="!isLoading"
                   class="title is-4 has-text-centered">
-                  <router-link :to="{ name: 'nftDetail', params: { id: nft.id }}">
+                  <router-link v-if="nft.count < 2" :to="{ name: 'nftDetail', params: { id: nft.id }}">
                     {{ nft.name }}
                   </router-link>
+                  <router-link v-else :to="{ name: 'collectionDetail', params: { id: nft.collection }}">
+                    {{ nft.name }} 「{{ nft.count }}」
+                  </router-link>
                 </p>
                 <b-skeleton
                   :active="isLoading">
@@ -70,7 +73,7 @@ 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'
+import { basicFilter, basicAggQuery } from './Search/query'
 
 type NFTType = NFTWithMeta;
 const components = { GalleryCardList, Search }
@@ -102,10 +105,10 @@ export default class Gallery extends Vue {
 
   get results() {
     if (this.searchQuery) {
-      return basicFilter(this.searchQuery, this.nfts)
+      return basicAggQuery(basicFilter(this.searchQuery, this.nfts))
     }
 
-    return this.nfts
+    return basicAggQuery(this.nfts)
   }
 
 }

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

@@ -28,7 +28,7 @@
                 <b-image
                   v-if="!isLoading"
                   :src="nft.image"
-                  :src-fallback="require('@/utils/placeholder.png')"
+                  :src-fallback="require('@/assets/kodadot_logo_v1_transparent_400px.png')"
                   alt="NFT multimedia craft"
                   ratio="1by1"
                 ></b-image>

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

@@ -1,6 +1,8 @@
-import M, { Query } from 'mingo'
+import M, { Query, Aggregator } from 'mingo'
+import { Collection as Aggregation } from 'mingo/core'
 import { NFTWithMeta } from '../../service/scheme'
 
+
 type QueryType = Record<string, unknown>
 
 export const basicFilterQuery = (value: string): Query => {
@@ -20,9 +22,32 @@ export const basicFilterQuery = (value: string): Query => {
   return new Query(criteria)
 }
 
+export const basicAggregation = (): Aggregator => {
+  const agg: Aggregation = [
+    {
+      $group: {
+        _id: '$image',
+        ids: { $push: '$id' },
+        collection: { $first: '$collection' },
+        name: { $first: '$name' },
+        id: { $first: '$id' },
+        image: { $first: '$image' },
+        count: { $sum: 1 }
+      }
+    }
+  ]
+
+  return new Aggregator(agg);
+}
+
 export const basicFilter = (value: string, ntfs: NFTWithMeta[]): any[] => {
   const query = basicFilterQuery(value)
   return query.find(ntfs).all()
 }
 
 
+export const basicAggQuery = (ntfs: NFTWithMeta[]) => {
+  const query = basicAggregation()
+  return query.run(ntfs)
+}
+

dashboard/src/main.ts

@@ -26,6 +26,15 @@ import i18n from './i18n'
 import mingo from 'mingo'
 import api from './fetch'
 
+import { useOperators, OperatorType } from 'mingo/core'
+import { $match, $group, $project } from 'mingo/operators/pipeline'
+import { $sum, $first, $push } from 'mingo/operators/accumulator'
+
+// ensure the required operators are preloaded prior to using them.
+type OperatorMap = Record<string, any> ;
+useOperators(OperatorType.PIPELINE, { $match, $group, $project } as OperatorMap)
+useOperators(OperatorType.ACCUMULATOR, { $sum, $first, $push } as OperatorMap)
+
 Vue.filter('shortAddress', shortAddress);
 
 (window as any).C = Connector;