feat: optional top pagination #539

src/actions/Torrents.js

@@ -14,7 +14,6 @@ export class Torrents {
       }
     }
 
-    console.log(data)
     // update torrents
     store.state.torrents = data.map(t => new Torrent(t))
 

src/components/Settings/Tabs/VueTorrent/VGeneral.vue

@@ -52,6 +52,13 @@
         </v-col>
       </v-row>
     </v-list-item>
+    <v-list-item>
+      <v-row dense>
+        <v-col>
+          <v-switch v-model="topPagination" class="v-input--reverse pa-0 ma-0" hide-details inset :label="$t('modals.settings.pageVueTorrent.pageGeneral.topPagination')" />
+        </v-col>
+      </v-row>
+    </v-list-item>
     <v-list-item>
       <v-row dense>
         <v-col cols="8" sm="8" md="10">
@@ -195,6 +202,14 @@ export default {
         this.webuiSettings.rightDrawer = val
       }
     },
+    topPagination: {
+      get() {
+        return this.webuiSettings.topPagination
+      },
+      set(val) {
+        this.webuiSettings.topPagination = val
+      }
+    },
     paginationSize: {
       get() {
         return this.webuiSettings.paginationSize

src/lang/en.js

@@ -140,6 +140,7 @@ const locale = {
           freeSpace: 'Show Free Space',
           trackerFilter: 'Show Tracker Filter',
           rightDrawer: 'Right Drawer',
+          topPagination: 'Place the pagination at the top of the screen',
           language: 'Language:',
           paginationSize: 'Pagination size:',
           vueTorrentTitle: 'VueTorrent title:',

src/store/index.js

@@ -66,6 +66,7 @@ export default new Vuex.Store({
       deleteWithFiles: false,
       title: 'Default',
       rightDrawer: false,
+      topPagination: false,
       paginationSize: 15,
       busyTorrentProperties: [
         { name: 'Size', active: true },

src/views/Dashboard.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="px-1 px-sm-5 pt-4 background noselect" @click.self="resetSelected">
     <v-row class="ma-0 pa-0" @click.self="resetSelected">
+        <v-col v-if="topPagination && isMobile" cols="12" class="align-center justify-center pa-0">
+          <div class="text-center">
+            <v-pagination v-if="pageCount > 1 && !hasSearchFilter" v-model="pageNumber" :length="pageCount" :total-visible="7" @input="toTop" />
+          </div>
+        </v-col>
       <v-expand-x-transition>
         <v-card v-show="searchFilterEnabled" id="searchFilter" flat xs7 md3 class="ma-0 pa-0 mt-1 transparent">
           <v-text-field
@@ -51,7 +56,11 @@
           </template>
           <span>Sort Torrents</span>
         </v-tooltip>
-
+        <v-col v-if="topPagination && !isMobile" cols="8" class="align-center justify-center pa-0">
+          <div class="text-center">
+            <v-pagination v-if="pageCount > 1 && !hasSearchFilter" v-model="pageNumber" :length="pageCount" :total-visible="7" @input="toTop" />
+          </div>
+        </v-col>
         <v-col class="align-center justify-center">
           <span style="float: right; font-size: 0.8em" class="mr-2 text-uppercase">
             {{ torrentCountString }}
@@ -108,7 +117,7 @@
           </template>
         </v-list-item>
       </v-list>
-      <div class="text-center mb-5">
+      <div v-if="!topPagination" class="text-center mb-5">
         <v-pagination v-if="pageCount > 1 && !hasSearchFilter" v-model="pageNumber" :length="pageCount" :total-visible="7" @input="toTop" />
       </div>
     </div>
@@ -174,6 +183,9 @@ export default {
 
       return fuse.search(this.input).map(el => el.item)
     },
+    topPagination() {
+      return this.getWebuiSettings().topPagination
+    },
     paginationSize() {
       return this.getWebuiSettings().paginationSize
     },

tests/unit/__snapshots__/General.spec.ts.snap

@@ -52,6 +52,13 @@ exports[`General > render correctly 1`] = `
       </vuecomponent-stub>
     </vuecomponent-stub>
   </vuecomponent-stub>
+  <vuecomponent-stub data-v-7da6d3e2=\\"\\" activeclass=\\"\\" tag=\\"div\\">
+    <vuecomponent-stub data-v-7da6d3e2=\\"\\" tag=\\"div\\" dense=\\"true\\">
+      <vuecomponent-stub data-v-7da6d3e2=\\"\\" tag=\\"div\\">
+        <vuecomponent-stub data-v-7da6d3e2=\\"\\" errorcount=\\"1\\" errormessages=\\"\\" messages=\\"\\" rules=\\"\\" successmessages=\\"\\" backgroundcolor=\\"\\" hidedetails=\\"true\\" ripple=\\"true\\" valuecomparator=\\"[Function]\\" inset=\\"true\\" class=\\"v-input--reverse pa-0 ma-0\\"></vuecomponent-stub>
+      </vuecomponent-stub>
+    </vuecomponent-stub>
+  </vuecomponent-stub>
   <vuecomponent-stub data-v-7da6d3e2=\\"\\" activeclass=\\"\\" tag=\\"div\\">
     <vuecomponent-stub data-v-7da6d3e2=\\"\\" tag=\\"div\\" dense=\\"true\\">
       <vuecomponent-stub data-v-7da6d3e2=\\"\\" cols=\\"8\\" sm=\\"8\\" md=\\"10\\" tag=\\"div\\">