Merge pull request #875 from roiLeo/feature/collection/sort

feat(collection): filter & search

Author: yangwao

src/components/rmrk/Gallery/CollectionItem.vue

@@ -49,6 +49,8 @@
       </div>
     </div>
 
+    <Search v-bind.sync="searchQuery" />
+
     <GalleryCardList :items="collection.nfts" />
 
   </div>
@@ -63,12 +65,17 @@ import { sanitizeIpfsUrl, fetchCollectionMetadata } from '../utils'
 import isShareMode from '@/utils/isShareMode'
 import collectionById from '@/queries/collectionById.graphql'
 import { CollectionMetadata } from '../types'
+import { NFT } from '@/components/rmrk/service/scheme'
+import { SearchQuery } from './Search/types'
+
+
 const components = {
   GalleryCardList: () => import('@/components/rmrk/Gallery/GalleryCardList.vue'),
   CollectionActivity: () => import('@/components/rmrk/Gallery/CollectionActivity.vue'),
   Sharing: () => import('@/components/rmrk/Gallery/Item/Sharing.vue'),
   ProfileLink: () => import('@/components/rmrk/Profile/ProfileLink.vue'),
   VueMarkdown: () => import('vue-markdown-render'),
+  Search: () => import('./Search/SearchBarCollection.vue'),
 }
 @Component<CollectionItem>({
   metaInfo() {
@@ -94,45 +101,73 @@ export default class CollectionItem extends Vue {
   private collection: CollectionWithMeta = emptyObject<CollectionWithMeta>();
   private isLoading = false;
   public meta: CollectionMetadata = emptyObject<CollectionMetadata>();
-
-  get image() {
+  private searchQuery: SearchQuery = {
+    search: '',
+    type: '',
+    sortBy: 'BLOCK_NUMBER_DESC',
+    listed: false,
+  };
+
+  get image(): string {
     return this.meta.image || ''
   }
 
-  get description() {
+  get description(): string {
     return this.meta.description || ''
   }
 
-  get name() {
+  get name(): string {
     return this.collection.name || this.id
   }
 
-  get nfts() {
+  get nfts(): NFT[] {
     return this.collection.nfts || []
   }
 
-  get issuer() {
+  get issuer(): string {
     return this.collection.issuer || ''
   }
 
-  get owner() {
+  get owner(): string {
     return this.collection.issuer === (this.collection as any).currentOwner ? '' : (this.collection as any).currentOwner
   }
 
-  get sharingVisible() {
+  get sharingVisible(): boolean {
     return !isShareMode
   }
 
+  private buildSearchParam(): Record<string, unknown>[] {
+    const params = []
+
+    if (this.searchQuery.search) {
+      params.push({
+        name: { likeInsensitive: `%${this.searchQuery.search}%` }
+      })
+    }
+
+    if (this.searchQuery.listed) {
+      params.push({
+        price: { greaterThan: '0' }
+      })
+    }
+
+    return params
+  }
+
   public created() {
     this.isLoading = true
     this.checkId()
-    this.$apollo.addSmartQuery('collection',{
+    this.$apollo.addSmartQuery('collection', {
       query: collectionById,
-      variables: {
-        id: this.id
+      variables: () => {
+        return {
+          id: this.id,
+          orderBy: this.searchQuery.sortBy,
+          search: this.buildSearchParam()
+        }
       },
       update: ({ collectionEntity }) => { return { ...collectionEntity, nfts: collectionEntity.nfts.nodes } },
-      result: () => this.fetchMetadata()
+      result: () => this.fetchMetadata(),
     })
     this.isLoading = false
   }

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

@@ -122,7 +122,7 @@ export default class SearchBar extends Vue {
   replaceUrl(value: string, key = 'search'): void {
     this.$router
       .replace({
-        name: 'nft',
+        name: String(this.$route.name),
         query: { ...this.$route.query, search: this.searchQuery, [key]: value }
       })
       .catch(console.warn /*Navigation Duplicate err fix later */)

src/components/rmrk/Gallery/Search/SearchBarCollection.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="box mb-3 mt-5">
+    <b-field grouped>
+      <b-field>
+        <b-button
+          aria-controls="contentIdForA11y1"
+          label="Filter"
+          icon-left="filter"
+          type="is-primary"
+          expanded
+          @click="isVisible = !isVisible"
+        />
+      </b-field>
+      <b-field expanded>
+        <b-input
+          placeholder="Search..."
+          type="search"
+          v-model="searchQuery"
+          icon="search"
+          expanded
+        >
+        </b-input>
+      </b-field>
+      <BasicSwitch
+        class="is-flex"
+        v-model="vListed"
+        label="sort.listed"
+        size="is-medium"
+      />
+    </b-field>
+    <slot />
+
+    <transition name="fade">
+      <div v-if="isVisible">
+        <Sort
+          :value="sortBy"
+          @input="updateSortBy"
+        />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script lang="ts" >
+import { Component, Prop, Vue, Emit } from 'vue-property-decorator'
+import { Debounce } from 'vue-debounce-decorator'
+import shouldUpdate from '@/utils/shouldUpdate'
+import { exist } from './exist'
+
+@Component({
+  components: {
+    Sort: () => import('./SearchSortDropdown.vue'),
+    TypeTagInput: () => import('./TypeTagInput.vue'),
+    Pagination: () => import('@/components/rmrk/Gallery/Pagination.vue'),
+    BasicSwitch: () => import('@/components/shared/form/BasicSwitch.vue'),
+  },
+})
+export default class SearchBar extends Vue {
+  @Prop(String) public search!: string
+  @Prop(String) public type!: string
+  @Prop(String) public sortBy!: string
+  @Prop(Boolean) public listed!: boolean
+
+  protected isVisible = false
+
+  public mounted(): void {
+    exist(this.$route.query.search, this.updateSearch)
+    exist(this.$route.query.type, this.updateType)
+    exist(this.$route.query.sort, this.updateSortBy)
+    exist(this.$route.query.listed, this.updateListed)
+  }
+
+  get vListed(): boolean {
+    return this.listed
+  }
+
+  set vListed(listed: boolean) {
+    this.updateListed(listed)
+  }
+
+  get searchQuery(): string {
+    return this.search
+  }
+
+  set searchQuery(value: string) {
+    this.updateSearch(value)
+  }
+
+  get typeQuery(): string {
+    return this.type
+  }
+
+  set typeQuery(value: string) {
+    this.updateType(value)
+  }
+
+  @Emit('update:listed')
+  @Debounce(50)
+  updateListed(value: string | boolean): boolean {
+    const v = String(value)
+    this.replaceUrl(v, 'listed')
+    return v === 'true'
+  }
+
+  @Emit('update:type')
+  @Debounce(50)
+  updateType(value: string): string {
+    this.replaceUrl(value, 'type')
+    return value
+  }
+
+  @Emit('update:sortBy')
+  @Debounce(400)
+  updateSortBy(value: string): string {
+    this.replaceUrl(value, 'sort')
+    return value
+  }
+
+  @Emit('update:search')
+  @Debounce(400)
+  updateSearch(value: string): string {
+    shouldUpdate(value, this.searchQuery) && this.replaceUrl(value)
+    return value
+  }
+
+  @Debounce(100)
+  replaceUrl(value: string, key = 'search'): void {
+    this.$router
+      .replace({
+        name: String(this.$route.name),
+        query: {
+          ...this.$route.query,
+          search: this.searchQuery,
+          [key]: value,
+        },
+      })
+      .catch(console.warn /*Navigation Duplicate err fix later */)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/variables';
+
+.card {
+  box-shadow: 0px 0px 5px 0.5px $primary;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

src/icons.ts

@@ -19,7 +19,7 @@ import {
   faArrowsAlt, faCompressAlt, faCompressArrowsAlt,
   faAngleLeft, faAngleRight, faReply,
   faExternalLinkSquareAlt, faGift,
-  faEyeSlash, faArrowUp, faUser, faGlobe, faExclamationCircle,
+  faEyeSlash, faArrowUp, faUser, faGlobe, faExclamationCircle, faFilter,
 
 } from '@fortawesome/free-solid-svg-icons'
 
@@ -58,7 +58,7 @@ library.add(
   faExclamationTriangle, faCalculator,
   faArrowsAlt, faCompressAlt, faCompressArrowsAlt,
   faEyeSlash, faArrowUp, faUser, faGlobe,
-  faExclamationCircle, faGift,
+  faExclamationCircle, faFilter, faGift,
 
   // Social
   faTwitter, faTelegram, faFacebook,

src/locales/en.json

@@ -187,7 +187,7 @@
     "UPDATED_AT_ASC": "Long time no interaction",
     "PRICE_DESC": "From most expensive",
     "PRICE_ASC": "From cheaper",
-    "listed": "Buy now"
+    "listed": "BUY NOW"
   },
   "mint": {
     "submit": "Click to create NFT(s)",

src/queries/collectionById.graphql

@@ -1,9 +1,19 @@
 #import "./collection.graphql"
 
-query collectionById($id: String!) {
+query collectionById(
+  $id: String!
+  $search: [NFTEntityFilter!]
+  $orderBy: NftEntitiesOrderBy = BLOCK_NUMBER_DESC
+) {
   collectionEntity(id: $id) {
     ...collection
-    nfts(filter: { burned: { distinctFrom: true } }) {
+    nfts(
+      orderBy: [$orderBy, BLOCK_NUMBER_DESC]
+      filter: {
+	  	burned: { distinctFrom: true }
+		and: $search
+	  }
+    ) {
       nodes {
         id
         metadata