Merge pull request #5851 from Jarsen136/issue-5333

Search items on top of collections

components/gallery/GalleryItem.vue

@@ -155,7 +155,7 @@ import GalleryItemTabsPanel from './GalleryItemTabsPanel/GalleryItemTabsPanel.vu
 import GalleryItemAction from './GalleryItemAction/GalleryItemAction.vue'
 import GalleryItemPreviewer from './GalleryItemPreviewer.vue'
 
-import { exist } from '@/components/search/exist'
+import { exist } from '@/utils/exist'
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
 import { generateNftImage } from '@/utils/seoImageGenerator'
 import { formatBalanceEmptyOnZero } from '@/utils/format/balance'

components/items/ItemsGrid/utils/useSearchParams.ts

@@ -80,6 +80,14 @@ function useSearchByCollections() {
             },
           },
         ]
+      } else if (route.query.collectionId) {
+        return [
+          {
+            collection: {
+              id_eq: route.query.collectionId,
+            },
+          },
+        ]
       }
       return []
     }),

components/rmrk/Gallery/History.vue

@@ -124,7 +124,7 @@ import { Debounce } from 'vue-debounce-decorator'
 import { Interaction } from '@kodadot1/minimark/v1'
 import { formatDistanceToNow } from 'date-fns'
 
-import { exist } from '@/components/search/exist'
+import { exist } from '@/utils/exist'
 
 import ChainMixin from '@/utils/mixins/chainMixin'
 import KeyboardEventsMixin from '@/utils/mixins/keyboardEventsMixin'

components/rmrk/Profile/ProfileDetail.vue

@@ -275,7 +275,7 @@ import offerListUser from '@/queries/subsquid/bsx/offerListUser.graphql'
 import recentSalesForCreator from '@/queries/rmrk/subsquid/recentSalesForCreator.graphql'
 
 import { NftHolderEvent } from '../Gallery/Holder/Holder.vue'
-import { exist } from '@/components/search/exist'
+import { exist } from '@/utils/exist'
 
 const tabNameWithoutCollections = ['holdings', 'gains']
 

components/rmrk/Profile/Sales.vue

@@ -78,7 +78,7 @@ import { Debounce } from 'vue-debounce-decorator'
 import { DocumentNode } from 'graphql'
 import { formatDistanceToNow } from 'date-fns'
 
-import { exist } from '@/components/search/exist'
+import { exist } from '@/utils/exist'
 
 import ChainMixin from '@/utils/mixins/chainMixin'
 import KeyboardEventsMixin from '@/utils/mixins/keyboardEventsMixin'

components/search/Search.vue

@@ -78,14 +78,14 @@ import {
   mixins,
 } from 'nuxt-property-decorator'
 import { Debounce } from 'vue-debounce-decorator'
-import { exist, existArray } from './exist'
+import { exist, existArray } from '@/utils/exist'
 import { SearchQuery } from './types'
 import PrefixMixin from '~/utils/mixins/prefixMixin'
 import KeyboardEventsMixin from '~/utils/mixins/keyboardEventsMixin'
 import { NFT_SQUID_SORT_CONDITION_LIST } from '@/utils/constants'
 import ChainMixin from '~/utils/mixins/chainMixin'
 import { usePreferencesStore } from '@/stores/preferences'
-
+import { useCollectionSearch } from '@/components/search/utils/useCollectionSearch'
 const SearchPageRoutePathList = ['collectibles', 'items']
 
 @Component({
@@ -327,7 +327,8 @@ export default class Search extends mixins(
   }
 
   redirectToGalleryPageIfNeed(params?: Record<string, string>) {
-    if (!this.isExplorePage) {
+    const { isCollectionSearchMode } = useCollectionSearch()
+    if (!this.isExplorePage && !isCollectionSearchMode.value) {
       this.$router.push({
         path: `/${this.urlPrefix}/explore/items`,
         query: {

components/search/SearchBar.vue

@@ -4,16 +4,20 @@
       ref="searchRef"
       v-model="name"
       class="gallery-search"
+      :class="{ 'is-collection-search': isSearchInCollectionMode }"
       :placeholder="placeholderContent"
       icon="search"
       :open-on-focus="showDefaultSuggestions"
       dropdown-position="bottom"
       expanded
       @blur="onInputBlur"
       @focus="onInputFocus"
+      @keydown.native.delete="exitCollectionSearch"
+      @keydown.native.backSpace="exitCollectionSearch"
       @keydown.native.enter="onEnter">
       <template #header>
         <SearchSuggestion
+          v-if="!isSearchInCollectionMode"
           ref="searchSuggestionRef"
           :name="name"
           :show-default-suggestions="showDefaultSuggestions"
@@ -24,6 +28,23 @@
       </template>
     </b-autocomplete>
     <div class="search-bar-bg"></div>
+    <div
+      v-if="isSearchInCollectionMode"
+      class="search-bar-collection-search is-flex is-align-items-center">
+      <span class="is-flex is-align-items-center">{{
+        $t('search.searchCollection')
+      }}</span>
+      <svg
+        width="7"
+        height="14"
+        viewBox="0 0 7 14"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M6.544 0.32L1.648 13.12H0.448L5.344 0.32H6.544Z"
+          fill="#999999" />
+      </svg>
+    </div>
     <img
       class="search-bar-keyboard-icon"
       :class="{ 'is-invisible': name || inputFocused }"
@@ -42,11 +63,13 @@ import {
   Prop,
   Ref,
   VModel,
+  Watch,
   mixins,
 } from 'nuxt-property-decorator'
 import { SearchQuery } from './types'
 import PrefixMixin from '~/utils/mixins/prefixMixin'
 import KeyboardEventsMixin from '~/utils/mixins/keyboardEventsMixin'
+import { useWindowSize } from '@vueuse/core'
 
 @Component({
   components: {
@@ -61,7 +84,7 @@ export default class SearchBar extends mixins(
   @VModel({ type: String }) name!: string
   @Ref('searchRef') readonly searchRef
   @Ref('searchSuggestionRef') readonly searchSuggestionRef
-
+  private enableSearchInCollection = true
   public inputFocused = false
 
   public created() {
@@ -70,8 +93,34 @@ export default class SearchBar extends mixins(
     })
   }
 
+  get isMobile() {
+    return useWindowSize().width.value < 1024
+  }
+
+  get isCollectionPage() {
+    return this.$route.name === 'prefix-collection-id'
+  }
+
+  get isSearchInCollectionMode() {
+    return (
+      this.enableSearchInCollection && this.isCollectionPage && !this.isMobile
+    )
+  }
+
   get placeholderContent() {
-    return this.inputFocused ? '' : this.$t('general.searchPlaceholder')
+    return this.inputFocused || this.isSearchInCollectionMode
+      ? ''
+      : this.$t('general.searchPlaceholder')
+  }
+
+  get showDefaultSuggestions() {
+    return this.urlPrefix === 'rmrk' || this.urlPrefix === 'bsx'
+  }
+
+  public exitCollectionSearch() {
+    if (this.isSearchInCollectionMode && !this.name) {
+      this.enableSearchInCollection = false
+    }
   }
 
   @Emit('enter')
@@ -94,6 +143,9 @@ export default class SearchBar extends mixins(
   public onInputBlur(): void {
     this.$emit('blur')
     this.inputFocused = false
+    if (!this.name) {
+      this.enableSearchInCollection = true
+    }
   }
 
   private bindSearchEvents(event) {
@@ -110,8 +162,14 @@ export default class SearchBar extends mixins(
     this.searchRef.isActive = false
   }
 
-  get showDefaultSuggestions() {
-    return this.urlPrefix === 'rmrk' || this.urlPrefix === 'bsx'
+  @Watch('isSearchInCollectionMode', { immediate: true })
+  private onSearchInCollectionModeChanged() {
+    const { replaceUrl } = useReplaceUrl()
+    replaceUrl({
+      collectionId: this.isSearchInCollectionMode
+        ? this.$route.params.id
+        : undefined,
+    })
   }
 }
 </script>

components/search/SearchCollection.vue

@@ -48,15 +48,13 @@
 <script lang="ts">
 import { Component, Emit, Prop, mixins } from 'nuxt-property-decorator'
 import { Debounce } from 'vue-debounce-decorator'
-import { exist } from './exist'
+import { exist } from '@/utils/exist'
 import KeyboardEventsMixin from '~/utils/mixins/keyboardEventsMixin'
 import { usePreferencesStore } from '@/stores/preferences'
 
 @Component({
   components: {
     Sort: () => import('./SearchSortDropdown.vue'),
-    TypeTagInput: () => import('./TypeTagInput.vue'),
-    Pagination: () => import('@/components/rmrk/Gallery/Pagination.vue'),
     BasicSwitch: () => import('@/components/shared/form/BasicSwitch.vue'),
   },
 })

components/search/utils/useCollectionSearch.ts

@@ -0,0 +1,16 @@
+import { readParam } from '@/composables/useReplaceUrl'
+
+export const useCollectionSearch = () => {
+  const query = useRoute().query
+  const route = useRoute()
+
+  const collectionId = readParam(query?.collectionId)
+
+  const isCollectionSearchMode = computed(() => {
+    return route.name === 'prefix-collection-id' && collectionId
+  })
+
+  return {
+    isCollectionSearchMode,
+  }
+}

components/series/SeriesTable.vue

@@ -346,7 +346,7 @@
 import { Component, Watch, mixins } from 'nuxt-property-decorator'
 
 import { Collection, NFTMetadata } from '@/components/rmrk/service/scheme'
-import { exist } from '@/components/search/exist'
+import { exist } from '@/utils/exist'
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
 
 import AuthMixin from '@/utils/mixins/authMixin'

components/shared/BreadcrumbsFilter.vue

@@ -5,6 +5,7 @@
         v-if="key === 'search'"
         :key="key"
         class="control"
+        :is-blue-tag="isCollectionSearchMode"
         @close="removeBread('search')">
         {{ `${$t('general.search')}: ${value}` }}
       </NeoTag>
@@ -59,6 +60,7 @@ import {
   collectionArray,
 } from '@/components/shared/filters/modules/usePopularCollections'
 import useActiveRouterFilters from '@/composables/useActiveRouterFilters'
+import { useCollectionSearch } from '../search/utils/useCollectionSearch'
 
 const route = useRoute()
 const isCollectionActivityTab = computed(
@@ -82,6 +84,7 @@ const collections = computed<Collection[]>(() =>
   )
 )
 
+const { isCollectionSearchMode } = useCollectionSearch()
 const removeCollection = (id: string) => {
   const ids = collections.value
     .filter((collection) => collection.id !== id)

components/shared/gallery/NeoTag.vue

@@ -4,13 +4,20 @@
     attached
     closable
     class="neo-tag pl-3 pr-1"
+    :class="{
+      'is-blue-tag': isBlueTag,
+    }"
     aria-close-label="clear filter"
     @close="onClose">
     <slot></slot>
   </b-tag>
 </template>
 
 <script lang="ts" setup>
+defineProps<{
+  isBlueTag?: boolean
+}>()
+
 const emit = defineEmits(['close'])
 const onClose = () => {
   emit('close')
@@ -30,6 +37,16 @@ const onClose = () => {
     }
   }
 
+  &.is-blue-tag {
+    @include ktheme() {
+      border: 1px solid theme('k-blue');
+
+      &:hover {
+        background-color: theme('blue-light-hover-color');
+      }
+    }
+  }
+
   .tag {
     margin-bottom: 0;
     padding: 0;

components/spotlight/SpotlightTable.vue

@@ -196,7 +196,7 @@ import {
   today,
 } from '@/components/series/utils'
 import { SortType } from '@/components/series/types'
-import { exist } from '@/components/search/exist'
+import { exist } from '@/utils/exist'
 import { getRandomIntInRange } from '@/components/rmrk/utils'
 
 import KeyboardEventsMixin from '@/utils/mixins/keyboardEventsMixin'

locales/en.json

@@ -69,6 +69,7 @@
   "showLess": "Show Less",
   "dropUpload": "Drop your file here or click to select.",
   "search": {
+    "searchCollection": "Search Collection",
     "seeAll": "See All",
     "rankings": "Rankings",
     "units": "Units",

pages/transform.vue

@@ -32,7 +32,7 @@
 <script lang="ts">
 import { Component, Vue } from 'nuxt-property-decorator'
 import transform from '@/utils/urlTransformer'
-import { exist } from '@/components/search/exist'
+import { exist } from '@/utils/exist'
 
 @Component({
   components: {

styles/abstracts/_theme.scss

@@ -30,6 +30,8 @@ $themes: (
     'primary-shadow': 4px 4px black,
     'disabled': #f3f3f3,
     'card-border-color': #999999,
+    'blue-accent-bg-color': #B6CBFF,
+    'blue-light-hover-color': #E8EDFB,
     'card-hover-opacity': 0.85
   ),
   'dark-mode': (
@@ -63,6 +65,8 @@ $themes: (
     'primary-shadow': 4px 4px white,
     'disabled': #191718,
     'card-border-color': #6b6b6b,
+    'blue-accent-bg-color': #363234,
+    'blue-light-hover-color': #363234,
     'card-hover-opacity': 0.8,
   ),
 );