Merge pull request #1044 from prachi00/feat-random-page

#1036 Taking to random pages in pagination component

Author: yangwao

src/components/rmrk/Gallery/Collections.vue

@@ -3,7 +3,7 @@
     <Loader :value="isLoading" />
     <!-- TODO: Make it work with graphql -->
     <b-field class="column">
-      <Pagination simple :total="total" v-model="currentValue" :perPage="perPage" replace class="is-right" />
+      <Pagination hasMagicBtn simple :total="total" v-model="currentValue" :perPage="perPage" replace class="is-right" />
     </b-field>
 
     <div>

src/components/rmrk/Gallery/Gallery.vue

@@ -4,7 +4,7 @@
     <!-- TODO: Make it work with graphql -->
     <Search v-bind.sync="searchQuery">
       <b-field class="column">
-        <Pagination simple :total="total" v-model="currentValue" :perPage=12 replace class="is-right" />
+        <Pagination hasMagicBtn simple :total="total" v-model="currentValue" :perPage=12 replace class="is-right" />
       </b-field>
     </Search>
     <!-- <b-button @click="first += 1">Show {{ first }}</b-button> -->

src/components/rmrk/Gallery/Pagination.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="is-flex is-justify-content-flex-end">
   <b-pagination
     :total="total"
     :current.sync="current"
@@ -15,12 +16,23 @@
     @change="onPageChange"
   >
   </b-pagination>
+    <b-button
+      class="ml-2 magicBtn"
+      title="Go to random page"
+      v-if="hasMagicBtn"
+      type="is-primary"
+      icon-left="magic"
+      @click="goToRandomPage"
+    >
+    </b-button>
+  </div>
 </template>
 
 <script lang="ts" >
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import { exist } from './Search/exist'
 import { Debounce } from 'vue-debounce-decorator'
+import { getRandomIntInRange } from '../utils'
 
 @Component({})
 export default class Pagination extends Vue {
@@ -30,6 +42,7 @@ export default class Pagination extends Vue {
   @Prop({ default: 20 }) public perPage!: number
   @Prop(Boolean) replace!: boolean
   @Prop(Boolean) preserveScroll!: boolean
+  @Prop(Boolean) hasMagicBtn!: boolean;
 
   public mounted() {
     exist(this.$route.query.page, (val) => {
@@ -50,6 +63,13 @@ export default class Pagination extends Vue {
     }
   }
 
+  public goToRandomPage() {
+    this.onPageChange()
+    const pageSize = Math.floor(this.total / this.perPage)
+    let randomNumber = getRandomIntInRange(1, pageSize)
+    this.current = randomNumber
+  }
+
   public scrollTop() {
     window.scrollTo({
       top: 0,
@@ -66,7 +86,6 @@ export default class Pagination extends Vue {
     this.replace && this.replaceUrl(String(value))
   }
 
-
   @Debounce(100)
   replaceUrl(value: string, key = 'page') {
     this.$router
@@ -78,3 +97,10 @@ export default class Pagination extends Vue {
   }
 }
 </script>
+<style lang="scss">
+
+ .magicBtn {
+  border-width: 1px;
+ }
+
+</style>

src/components/rmrk/utils.ts

@@ -316,3 +316,9 @@ export const isJsonGltf = (value: any): boolean => {
     return false
   }
 }
+
+export const getRandomIntInRange = (min: number, max: number): number => {
+  min = Math.ceil(min)
+  max = Math.floor(max)
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}