Filter by nft attributes in collection

components/collection/CollectionGrid.vue

@@ -71,6 +71,7 @@ const searchQuery = reactive<SearchQuery>({
   type: route.query?.type?.toString() ?? '',
   sortBy: sortBy.value ?? undefined,
   listed: route.query?.listed?.toString() === 'true',
+  moreThanItems: route.query?.moreThanItems || 0,
 })
 
 const resetPage = useDebounceFn(() => {
@@ -89,6 +90,18 @@ const buildSearchParam = (): Record<string, unknown>[] => {
     params.push({ nfts_some: { price_gt: '0' } })
   }
 
+  if (!!searchQuery.moreThanItems) {
+    params.push({ nftCount_gt: Number(searchQuery.moreThanItems) })
+  }
+
+  if (!!searchQuery.priceMin) {
+    params.push({ volume_gte: Number(searchQuery.priceMin) })
+  }
+
+  if (!!searchQuery.priceMax) {
+    params.push({ volume_lte: Number(searchQuery.priceMax) })
+  }
+
   return params
 }
 
@@ -208,6 +221,46 @@ watch(
   },
 )
 
+watch(
+  () => route.query.moreThanItems,
+  (val, oldVal) => {
+    if (!isEqual(val, oldVal)) {
+      resetPage()
+      searchQuery.moreThanItems = Number(val) || 0
+    }
+  },
+)
+
+watch(
+  () => route.query.listed,
+  (val, oldVal) => {
+    if (!isEqual(val, oldVal)) {
+      resetPage()
+      searchQuery.listed = val
+    }
+  },
+)
+
+watch(
+  () => route.query.min,
+  (val, oldVal) => {
+    if (!isEqual(val, oldVal)) {
+      resetPage()
+      searchQuery.priceMin = val
+    }
+  },
+)
+
+watch(
+  () => route.query.max,
+  (val, oldVal) => {
+    if (!isEqual(val, oldVal)) {
+      resetPage()
+      searchQuery.priceMax = val
+    }
+  },
+)
+
 watch(
   () => searchQuery,
   () => {

components/explore/FilterMenuButton.vue

@@ -29,6 +29,7 @@ const disabled = computed(() => {
     'prefix-explore-items',
     'prefix-collection-id',
     'prefix-collection-id-activity',
+    'prefix-explore-collectibles',
   ]
 
   return !allowedList.includes(route.name || '')

components/search/types.ts

@@ -18,6 +18,7 @@ export type SearchQuery = {
   priceMin?: number
   priceMax?: number
   sortByMultiple?: string[]
+  moreThanItems?: number
 }
 
 export type SearchSuggestion = Record<

components/shared/filters/MobileFilter.vue

@@ -187,13 +187,21 @@ const applyFilters = () => {
   const priceRangeFilter = exploreFiltersStore.getPriceRange
   const eventTypeFilter = activityFiltersStore.getEventTypeFilters
 
+  console.log(
+    'isactivitytab',
+    isCollectionActivityTab.value,
+    'restfilters',
+    restStatusFilters,
+  )
   // apply to URL
   if (isCollectionActivityTab.value) {
+    console.log('here1')
     replaceUrl({ ...eventTypeFilter, ...priceRangeFilter })
   } else {
+    console.log('here2', restStatusFilters.moreThanItems)
     replaceUrl({ art_view: artView, ...restStatusFilters, ...priceRangeFilter })
   }
-  emit('resetPage')
+  // emit('resetPage')
   closeFilterModal()
 }
 

components/shared/filters/SidebarFilter.vue

@@ -5,14 +5,14 @@
         <EventTypeFilter expanded fluid-padding />
         <IdentityVerficationFilter expanded fluid-padding />
       </template>
-      <StatusFilter v-else expanded fluid-padding />
+      <StatusFilter v-if="!isCollectionActivityTab" expanded fluid-padding />
       <PriceFilter
         v-if="!isCollectionActivityTab"
         fluid-padding
         data-testid="sidebar-price-filter" />
       <PopularCollections v-if="isExploreItems" expanded fluid-padding />
       <AdvancedFilter
-        v-if="!isCollectionActivityTab"
+        v-if="!isCollectionActivityTab && !isCollectibles"
         fluid-padding
         data-testid="sidebar-advanced-filter" />
     </NeoSidebar>
@@ -34,6 +34,9 @@ const open = computed(() => preferencesStore.getsidebarFilterCollapse)
 const isCollectionActivityTab = computed(
   () => route.name === 'prefix-collection-id-activity',
 )
+const isCollectibles = computed(
+  () => route.name === 'prefix-explore-collectibles',
+)
 const isExploreItems = computed(() => route.name === 'prefix-explore-items')
 </script>
 

components/shared/filters/modules/PriceFilter.vue

@@ -7,7 +7,7 @@
     <template #trigger="{ open }">
       <div class="flex" role="button" :aria-expanded="open">
         <p class="card-header-title font-normal">
-          {{ $t('tabs.tabActivity.price') }}
+          {{ isCollectibles ? 'Volume' : $t('tabs.tabActivity.price') }}
         </p>
         <a class="card-header-icon">
           <NeoIcon :icon="open ? 'minus' : 'plus'" />
@@ -154,6 +154,10 @@ const inputFocused = ref(false)
 const toggleInputFocused = (): void => {
   inputFocused.value = !inputFocused.value
 }
+
+const isCollectibles = computed(
+  () => route.name === 'prefix-explore-collectibles',
+)
 </script>
 
 <style lang="scss">

components/shared/filters/modules/StatusFilter.vue

@@ -20,25 +20,43 @@
           {{ $t(ListedOrBuynow) }}</NeoCheckbox
         >
       </NeoField>
-      <NeoField>
+      <NeoField v-if="!isCollectibles">
         <NeoCheckbox v-model="owned" :disabled="!accountId">
           {{ $t('sort.own') }}
         </NeoCheckbox>
       </NeoField>
+      <NeoField v-if="isCollectibles">
+        <div>More than {{ moreThanItems }} nfts</div>
+        <NeoInput
+          v-model="moreThanItems"
+          type="number"
+          min="0"
+          step="any"
+          placeholder="0" />
+      </NeoField>
     </div>
   </NeoCollapse>
 </template>
 
 <script lang="ts" setup>
 import { useExploreFiltersStore } from '@/stores/exploreFilters'
-import { NeoCheckbox, NeoCollapse, NeoField, NeoIcon } from '@kodadot1/brick'
+import {
+  NeoCheckbox,
+  NeoCollapse,
+  NeoField,
+  NeoIcon,
+  NeoInput,
+} from '@kodadot1/brick'
 
 const exploreFiltersStore = useExploreFiltersStore()
 const route = useRoute()
 const { accountId } = useAuth()
 const { replaceUrl: replaceURL } = useReplaceUrl()
 const { urlPrefix } = usePrefix()
 const { isRemark } = useIsChain(urlPrefix)
+const isCollectibles = computed(
+  () => route.name === 'prefix-explore-collectibles',
+)
 
 type DataModel = 'query' | 'store'
 
@@ -83,6 +101,17 @@ const owned =
         set: (value) => exploreFiltersStore.setOwned(value),
       })
 
+const moreThanItems =
+  props.dataModel === 'query'
+    ? computed({
+        get: () => route.query?.moreThanItems,
+        set: (value) => applyToUrl({ moreThanItems: value }),
+      })
+    : computed({
+        get: () => exploreFiltersStore.moreThanItems,
+        set: (value) => exploreFiltersStore.setMoreThanItems(value),
+      })
+
 const applyToUrl = (queryCondition: { [key: string]: any }) => {
   replaceURL(queryCondition)
   emit('resetPage')

pages/[prefix]/explore/collectibles.vue

@@ -1,6 +1,9 @@
 <template>
-  <div class="container is-fluid">
-    <CollectionGridWithBreadcrumbs />
+  <div class="flex">
+    <SidebarFilter />
+    <div class="container is-fluid">
+      <CollectionGridWithBreadcrumbs />
+    </div>
   </div>
 </template>
 

stores/exploreFilters.ts

@@ -5,6 +5,7 @@ interface State {
   listed: boolean
   owned: boolean
   artView: boolean
+  moreThanItems: number
   // price
   min: number | undefined
   max: number | undefined
@@ -19,13 +20,15 @@ export const useExploreFiltersStore = defineStore('exploreFilters', {
     max: undefined,
     artView: false,
     collections: undefined,
+    moreThanItems: 0,
   }),
   getters: {
     getStatusFilters: (state) => ({
       listed: state.listed,
       owned: state.owned,
       artView: state.artView,
       collections: state.collections?.toString(),
+      moreThanItems: state.moreThanItems,
     }),
     getPriceRange: (state) => ({ min: state.min, max: state.max }),
   },
@@ -52,5 +55,8 @@ export const useExploreFiltersStore = defineStore('exploreFilters', {
     setCollections(payload) {
       this.collections = payload
     },
+    setMoreThanItems(payload) {
+      this.moreThanItems = payload
+    },
   },
 })