Merge pull request #3819 from preschian/refactor-carousels

refactor: Carousel - Move from rmrk folder

components/bsx/Gallery/Item/GalleryItem.vue

@@ -217,6 +217,8 @@ import { mapToId } from '@/utils/mappers'
     OfferList: () => import('@/components/bsx/Offer/OfferList.vue'),
     History: () => import('@/components/rmrk/Gallery/History.vue'),
     Navigation: () => import('@/components/rmrk/Gallery/Item/Navigation.vue'),
+    GalleryItemCarousel: () =>
+      import('@/components/carousel/GalleryItemCarousel.vue'),
   },
   directives: {
     orientation: Orientation,

components/base/CarouselCardList.vue → components/carousel/CarouselCardList.vue

@@ -85,7 +85,7 @@ import { Component, Prop, mixins } from 'nuxt-property-decorator'
 import AuthMixin from '@/utils/mixins/authMixin'
 import PrefixMixin from '@/utils/mixins/prefixMixin'
 
-import type { CarouselNFT } from './types'
+import type { CarouselNFT } from '@/components/base/types'
 
 const components = {
   Money: () => import('@/components/shared/format/Money.vue'),

components/rmrk/Gallery/GalleryItemCarousel.vue → components/carousel/GalleryItemCarousel.vue

@@ -1,17 +1,17 @@
 <template>
   <div>
-    <div class="my-5" v-if="showCarousel">
+    <div v-if="showCarousel" class="my-5">
       <p class="subtitle is-size-4">{{ $t(`nft.${type}`) }}</p>
       <CarouselCardList :nfts="nfts" />
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, mixins, Prop } from 'nuxt-property-decorator'
-import { formatNFT } from '~/utils/carousel'
-import { visitedNFT } from '~/utils/localStorage'
-import { MIN_CAROUSEL_NFT } from '~/utils/constants'
+import { Component, Prop, mixins } from 'nuxt-property-decorator'
+import { formatNFT } from '@/utils/carousel'
+import { visitedNFT } from '@/utils/localStorage'
+import { MIN_CAROUSEL_NFT } from '@/utils/constants'
 import PrefixMixin from '@/utils/mixins/prefixMixin'
 
 import collectionEntityById from '@/queries/rmrk/subsquid/collectionEntityById.graphql'
@@ -21,7 +21,8 @@ import { CarouselNFT } from '@/components/base/types'
 
 @Component({
   components: {
-    CarouselCardList: () => import('@/components/base/CarouselCardList.vue'),
+    CarouselCardList: () =>
+      import('@/components/carousel/CarouselCardList.vue'),
   },
 })
 /**

components/rmrk/Gallery/LatestSales.vue → components/carousel/LatestSales.vue

@@ -27,20 +27,20 @@
 import { Component, mixins } from 'nuxt-property-decorator'
 import { formatDistanceToNow } from 'date-fns'
 
-import { LastEvent } from '~/utils/types/types'
+import { LastEvent } from '@/utils/types/types'
 
 import { convertLastEventToNft, fallbackMetaByNftEvent } from '@/utils/carousel'
 import {
   getCloudflareImageLinks,
   getProperImageLink,
-} from '~/utils/cachingStrategy'
+} from '@/utils/cachingStrategy'
 import lastNftListByEvent from '@/queries/rmrk/subsquid/lastNftListByEvent.graphql'
 
 import AuthMixin from '@/utils/mixins/authMixin'
-import PrefixMixin from '~/utils/mixins/prefixMixin'
+import PrefixMixin from '@/utils/mixins/prefixMixin'
 
 const components = {
-  CarouselCardList: () => import('@/components/base/CarouselCardList.vue'),
+  CarouselCardList: () => import('@/components/carousel/CarouselCardList.vue'),
   Pagination: () => import('@/components/rmrk/Gallery/Pagination.vue'),
   Loader: () => import('@/components/shared/Loader.vue'),
 }
@@ -60,7 +60,7 @@ export default class LatestSales extends mixins(PrefixMixin, AuthMixin) {
     return false
   }
 
-  async fetch() {
+  fetch() {
     this.fetchData()
   }
 

components/rmrk/Gallery/NewestList.vue → components/carousel/NewestList.vue

@@ -28,15 +28,15 @@ import { Component, mixins } from 'nuxt-property-decorator'
 import {
   getCloudflareImageLinks,
   getProperImageLink,
-} from '~/utils/cachingStrategy'
+} from '@/utils/cachingStrategy'
 import { formatDistanceToNow } from 'date-fns'
 import lastNftListByEvent from '@/queries/rmrk/subsquid/lastNftListByEvent.graphql'
-import { fallbackMetaByNftEvent, convertLastEventToNft } from '@/utils/carousel'
-import PrefixMixin from '~/utils/mixins/prefixMixin'
+import { convertLastEventToNft, fallbackMetaByNftEvent } from '@/utils/carousel'
+import PrefixMixin from '@/utils/mixins/prefixMixin'
 import AuthMixin from '@/utils/mixins/authMixin'
 
 const components = {
-  CarouselCardList: () => import('@/components/base/CarouselCardList.vue'),
+  CarouselCardList: () => import('@/components/carousel/CarouselCardList.vue'),
   Loader: () => import('@/components/shared/Loader.vue'),
 }
 

components/rmrk/Gallery/PopularCollections.vue → components/carousel/PopularCollections.vue

@@ -13,11 +13,11 @@
       </div>
       <div class="column has-text-right">
         <Pagination
-          simple
-          preserveScroll
           v-model="currentValue"
+          simple
+          preserve-scroll
           :total="total"
-          :perPage="1" />
+          :per-page="1" />
       </div>
     </div>
 
@@ -27,13 +27,13 @@
 
 <script lang="ts">
 import { Component, mixins } from 'nuxt-property-decorator'
-import PrefixMixin from '~/utils/mixins/prefixMixin'
+import PrefixMixin from '@/utils/mixins/prefixMixin'
 import popularCollectionList from '@/queries/rmrk/subsquid/popularCollectionList.graphql'
-import { RowSeries } from '~/components/series/types'
-import { sanitizeIpfsUrl } from '../utils'
+import { RowSeries } from '@/components/series/types'
+import { sanitizeIpfsUrl } from '@/components/rmrk/utils'
 
 const components = {
-  CarouselCardList: () => import('@/components/base/CarouselCardList.vue'),
+  CarouselCardList: () => import('@/components/carousel/CarouselCardList.vue'),
   Pagination: () => import('@/components/rmrk/Gallery/Pagination.vue'),
   Loader: () => import('@/components/shared/Loader.vue'),
 }
@@ -50,7 +50,7 @@ export default class PopularCollections extends mixins(PrefixMixin) {
     return false
   }
 
-  async created() {
+  created() {
     this.handleResult()
   }
 

components/landing/Landing.vue

@@ -69,11 +69,11 @@
         </div>
       </div>
       <div v-if="prefix === 'rmrk' || prefix === 'bsx'">
-        <LazyGalleryLatestSales class="my-5" />
+        <LazyCarouselLatestSales class="my-5" />
         <span v-if="prefix === 'rmrk'">
-          <LazyGalleryPopularCollections class="my-5" />
+          <LazyCarouselPopularCollections class="my-5" />
         </span>
-        <LazyGalleryNewestList class="my-5" />
+        <LazyCarouselNewestList class="my-5" />
       </div>
     </div>
   </section>

components/rmrk/Gallery/GalleryItem.vue

@@ -199,7 +199,8 @@ import AvailableActions from './AvailableActions.vue'
     Detail: () => import('@/components/unique/Gallery/Item/Detail.vue'),
     BaseGalleryItem: () =>
       import('@/components/shared/gallery/BaseGalleryItem.vue'),
-    GalleryItemCarousel: () => import('./GalleryItemCarousel.vue'),
+    GalleryItemCarousel: () =>
+      import('@/components/carousel/GalleryItemCarousel.vue'),
   },
   directives: {
     orientation: Orientation,

components/rmrk/Gallery/Pagination.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    class="is-align-self-flex-end is-flex is-justify-content-flex-end"
-    v-if="total > perPage">
+    v-if="total > perPage"
+    class="is-align-self-flex-end is-flex is-justify-content-flex-end">
     <b-pagination
       :total="total"
       :current.sync="current"
@@ -18,9 +18,9 @@
     </b-pagination>
     <b-tooltip :label="$t('tooltip.random') + ' (g+r)'">
       <b-button
+        v-if="hasMagicBtn"
         class="ml-2 magicBtn is-bordered-light share-button"
         title="Go to random page"
-        v-if="hasMagicBtn"
         type="is-primary"
         icon-left="dice"
         @click="goToRandomPage">
@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, mixins, Watch } from 'nuxt-property-decorator'
+import { Component, Prop, Watch, mixins } from 'nuxt-property-decorator'
 import { Debounce } from 'vue-debounce-decorator'
 import { getRandomIntInRange } from '../utils'
 import KeyboardEventsMixin from '~/utils/mixins/keyboardEventsMixin'