🔧 bsx gallery sort & buy now

components/rmrk/Gallery/Gallery.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="gallery container">
     <Loader :value="isLoading" />
-    <!-- TODO: Make it work with graphql -->
     <Search v-bind.sync="searchQuery" @resetPage="resetPage" hideSearchInput>
       <!-- <template v-slot:next-filter>
         <b-switch
@@ -148,13 +147,13 @@ export default class Gallery extends mixins(
 ) {
   private nfts: NFTWithCollectionMeta[] = []
   private searchQuery: SearchQuery = {
-    search: this.$route.query?.search?.toString() || '',
-    type: '',
-    listed: true,
-    owned: true,
+    search: this.$route.query?.search?.toString() ?? '',
+    type: this.$route.query?.type?.toString() ?? '',
+    sortByMultiple: this.isRmrk ? ['BLOCK_NUMBER_DESC'] : ['blockNumber_DESC'],
+    listed: this.$route.query?.listed?.toString() === 'true',
+    owned: this.$route.query?.owned?.toString() === 'true',
     priceMin: undefined,
     priceMax: undefined,
-    sortByMultiple: ['BLOCK_NUMBER_DESC'],
   }
   private isLoading = true
   // private hasPassionFeed = false
@@ -250,9 +249,7 @@ export default class Gallery extends mixins(
       client: this.urlPrefix,
       variables: {
         denyList: getDenyList(this.urlPrefix),
-        orderBy: this.isRmrk
-          ? this.searchQuery.sortByMultiple
-          : ['blockNumber_DESC'],
+        orderBy: this.searchQuery.sortByMultiple,
         search: this.buildSearchParam(),
         priceMin: this.searchQuery.priceMin,
         priceMax: this.searchQuery.priceMax,
@@ -343,9 +340,7 @@ export default class Gallery extends mixins(
           first: this.first,
           offset,
           denyList: getDenyList(this.urlPrefix),
-          orderBy: this.isRmrk
-            ? this.searchQuery.sortByMultiple
-            : ['blockNumber_DESC'],
+          orderBy: this.searchQuery.sortByMultiple,
           search: this.buildSearchParam(),
           priceMin: this.searchQuery.priceMin,
           priceMax: this.searchQuery.priceMax,
@@ -378,27 +373,30 @@ export default class Gallery extends mixins(
       })
     }
 
-    if (
-      this.searchQuery.priceMin == undefined &&
-      this.searchQuery.listed &&
-      this.isRmrk
-    ) {
-      params.push({
-        price: { greaterThan: '0' },
-      })
+    if (this.searchQuery.priceMin == undefined && this.searchQuery.listed) {
+      if (this.isRmrk) {
+        params.push({
+          price: { greaterThan: '0' },
+        })
+      } else {
+        params.push({ price_gt: '0' })
+      }
     }
 
-    if (
-      this.searchQuery.priceMin != undefined &&
-      this.searchQuery.listed &&
-      this.isRmrk
-    ) {
-      params.push({
-        price: {
-          greaterThan: this.searchQuery.priceMin,
-          lessThanOrEqualTo: this.searchQuery.priceMax,
-        },
-      })
+    if (this.searchQuery.priceMin != undefined && this.searchQuery.listed) {
+      if (this.isRmrk) {
+        params.push({
+          price: {
+            greaterThan: this.searchQuery.priceMin,
+            lessThanOrEqualTo: this.searchQuery.priceMax,
+          },
+        })
+      } else {
+        params.push({
+          price_gt: this.searchQuery.priceMin,
+          price_lte: this.searchQuery.priceMax,
+        })
+      }
     }
 
     // if (this.hasPassionFeed) {

components/rmrk/Gallery/Search/SearchBar.vue

@@ -168,7 +168,10 @@ import {
 } from '~/utils/cachingStrategy'
 import { fastExtract } from '~/utils/ipfs'
 import { convertLastEventToNft } from '@/utils/carousel'
-import { NFT_SORT_CONDITION_LIST } from '@/utils/constants'
+import {
+  NFT_SORT_CONDITION_LIST,
+  NFT_SQUID_SORT_CONDITION_LIST,
+} from '@/utils/constants'
 import { LastEvent } from '~/utils/types/types'
 
 const SearchPageRoutePathList = ['/collections', '/gallery', '/explore']
@@ -189,20 +192,25 @@ export default class SearchBar extends mixins(
 ) {
   @Prop(String) public search!: string
   @Prop(String) public type!: string
-  @Prop({ type: Array, default: () => ['BLOCK_NUMBER_DESC'] })
-  public sortByMultiple!: string[]
+  @Prop({ type: Array, default: () => [] }) public sortByMultiple!: string[]
   @Prop(String) public searchColumnClass!: string
   @Prop({ type: Boolean, default: false }) public listed!: boolean
   @Prop(Boolean) public hideFilter!: boolean
   @Prop(Boolean) public hideSearchInput!: boolean
   @Prop(Boolean) public showDefaultSuggestions!: boolean
 
   protected isVisible = false
+  // private query: SearchQuery = {
+  //   search: '',
+  //   type: '',
+  //   listed: true,
+  //   sortByMultiple: ['BLOCK_NUMBER_DESC'],
+  // }
   private query: SearchQuery = {
-    search: '',
-    type: '',
-    listed: true,
-    sortByMultiple: ['BLOCK_NUMBER_DESC'],
+    search: this.$route.query?.search?.toString() ?? '',
+    type: this.$route.query?.type?.toString() ?? '',
+    sortByMultiple: this.sortByMultiple ?? [],
+    listed: this.$route.query?.listed?.toString() === 'true',
   }
 
   private first = 30
@@ -471,8 +479,10 @@ export default class SearchBar extends mixins(
   @Emit('update:sortByMultiple')
   @Debounce(400)
   updateSortBy(value: string[] | string, $event?): string[] {
-    const final = (Array.isArray(value) ? value : [value]).filter((condition) =>
-      NFT_SORT_CONDITION_LIST.includes(condition)
+    const final = (Array.isArray(value) ? value : [value]).filter(
+      (condition) =>
+        NFT_SORT_CONDITION_LIST.includes(condition) ||
+        NFT_SQUID_SORT_CONDITION_LIST.includes(condition)
     )
     if ($event?.length > final.length || !$event) {
       this.replaceUrl(final, undefined, 'sort')
@@ -709,14 +719,18 @@ export default class SearchBar extends mixins(
 
     if (this.query.search) {
       params.push({
-        name: { likeInsensitive: `%${this.query.search}%` },
+        name: { likeInsensitive: this.query.search },
       })
     }
 
     if (this.query.listed) {
-      params.push({
-        price: { greaterThan: '0' },
-      })
+      if (this.urlPrefix === 'rmrk') {
+        params.push({
+          price: { greaterThan: '0' },
+        })
+      } else {
+        params.push({ price_gt: '0' })
+      }
     }
 
     return params

components/rmrk/Gallery/Search/SearchSortDropdown.vue

@@ -25,15 +25,23 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, VModel, Prop } from 'nuxt-property-decorator'
-import { NFT_SORT_CONDITION_LIST } from '@/utils/constants'
+import { Component, mixins, VModel, Prop } from 'nuxt-property-decorator'
+import {
+  NFT_SORT_CONDITION_LIST,
+  NFT_SQUID_SORT_CONDITION_LIST,
+} from '@/utils/constants'
+import PrefixMixin from '@/utils/mixins/prefixMixin'
+
 @Component
-export default class SearchSortDropdown extends Vue {
+export default class SearchSortDropdown extends mixins(PrefixMixin) {
   @VModel({ type: [Array, String] }) selectedAction!: string | string[]
   @Prop(Array) public sortOption?: string[]
   @Prop(Boolean) public multipleSelect!: boolean
 
-  private sort: string[] = NFT_SORT_CONDITION_LIST
+  private sort: string[] =
+    this.urlPrefix === 'rmrk'
+      ? NFT_SORT_CONDITION_LIST
+      : NFT_SQUID_SORT_CONDITION_LIST
 
   get actions(): string[] {
     return this.sortOption || this.sort

components/rmrk/Gallery/Search/types.ts

@@ -15,7 +15,7 @@ export type SearchQuery = {
   owned?: boolean | null
   priceMin?: number
   priceMax?: number
-  sortByMultiple?: any
+  sortByMultiple?: string[]
 }
 
 export type SearchSuggestion = {

utils/constants.ts

@@ -52,4 +52,15 @@ export const NFT_SORT_CONDITION_LIST: string[] = [
   'UPDATED_AT_ASC',
   'PRICE_DESC',
   'PRICE_ASC',
+  'SN_ASC',
+]
+
+export const NFT_SQUID_SORT_CONDITION_LIST: string[] = [
+  'blockNumber_DESC',
+  'blockNumber_ASC',
+  'updatedAt_DESC',
+  'updatedAt_ASC',
+  'price_DESC',
+  'price_ASC',
+  'sn_ASC',
 ]