fix(webui): use pagination for browsing screens

closes gotson#91

komga-webui/src/components/ItemBrowser.vue

@@ -1,31 +1,24 @@
 <template>
   <v-item-group multiple v-model="selectedItems">
     <v-row justify="start" ref="content" v-resize="onResize" v-if="hasItems">
-      <v-skeleton-loader v-for="(item, index) in items"
-                         :key="index"
-                         :width="itemWidth"
-                         :height="itemHeight"
-                         justify-self="start"
-                         :loading="item === null"
-                         type="card, text"
-                         class="ma-3 mx-2"
-                         :data-index="index"
-                         v-intersect="onElementIntersect"
-
+      <v-item
+        v-for="(item, index) in items"
+        :key="index"
+        class="my-3 mx-2"
+        v-slot:default="{ toggle, active }" :value="$_.get(item, 'id', 0)"
       >
-        <v-item v-slot:default="{ toggle, active }" :value="$_.get(item, 'id', 0)">
-          <slot name="item" v-bind:data="{ toggle, active, item, index, itemWidth, preselect: shouldPreselect(), editItem }">
-            <item-card
-              :item="item"
-              :width="itemWidth"
-              :selected="active"
-              :preselect="shouldPreselect()"
-              :onEdit="editItem"
-              :onSelected="toggle"
-            ></item-card>
-          </slot>
-        </v-item>
-      </v-skeleton-loader>
+        <slot name="item"
+              v-bind:data="{ toggle, active, item, index, itemWidth, preselect: shouldPreselect(), editItem }">
+          <item-card
+            :item="item"
+            :width="itemWidth"
+            :selected="active"
+            :preselect="shouldPreselect()"
+            :onEdit="editItem"
+            :onSelected="toggle"
+          ></item-card>
+        </slot>
+      </v-item>
     </v-row>
     <v-row v-else justify="center">
       <slot name="empty"></slot>
@@ -34,13 +27,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
-import { computeCardWidth } from '@/functions/grid-utilities'
 import ItemCard from '@/components/ItemCard.vue'
-import mixins from 'vue-typed-mixins'
-import VisibleElements from '@/mixins/VisibleElements'
+import { computeCardWidth } from '@/functions/grid-utilities'
+import Vue from 'vue'
 
-export default mixins(VisibleElements).extend({
+export default Vue.extend({
   name: 'ItemBrowser',
   components: { ItemCard },
   props: {
@@ -66,12 +57,6 @@ export default mixins(VisibleElements).extend({
     }
   },
   watch: {
-    series: {
-      handler () {
-        this.visibleElements = []
-      },
-      immediate: true,
-    },
     selectedItems: {
       handler () {
         this.$emit('update:selected', this.selectedItems)

komga-webui/src/components/PageSizeSelect.vue

@@ -0,0 +1,57 @@
+<template>
+  <v-menu offset-y>
+    <template v-slot:activator="{on}">
+      <v-btn icon v-on="on">
+        <v-icon>mdi-view-grid-plus</v-icon>
+      </v-btn>
+    </template>
+    <v-list>
+      <v-list-item-group v-model="selection">
+
+        <v-list-item v-for="(item, index) in items"
+                     :key="index"
+                     @click="setPageSize(item)"
+        >
+          <v-list-item-title>{{ item }}</v-list-item-title>
+        </v-list-item>
+      </v-list-item-group>
+    </v-list>
+  </v-menu>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'PageSizeSelect',
+  data: () => {
+    return {
+      selection: 0,
+    }
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => [20, 50, 100, 200, 500],
+    },
+    value: {
+      type: Number,
+      required: true,
+    },
+  },
+  watch: {
+    value (val) {
+      this.selection = this.items.findIndex(x => x === val)
+    },
+  },
+  methods: {
+    setPageSize (size: number) {
+      this.$emit('input', size)
+    },
+  },
+})
+</script>
+
+<style scoped>
+
+</style>

komga-webui/src/router.ts

@@ -5,13 +5,19 @@ import store from './store'
 
 Vue.use(Router)
 
-const lStore = store
+const lStore = store as any
 
 const adminGuard = (to: any, from: any, next: any) => {
   if (!lStore.getters.meAdmin) next({ name: 'home' })
   else next()
 }
 
+const noLibraryGuard = (to: any, from: any, next: any) => {
+  if (lStore.state.komgaLibraries.libraries.length === 0) {
+    next({ name: 'welcome' })
+  } else next()
+}
+
 const router = new Router({
   mode: 'history',
   base: urls.base,
@@ -36,6 +42,7 @@ const router = new Router({
         {
           path: '/dashboard',
           name: 'dashboard',
+          beforeEnter: noLibraryGuard,
           component: () => import(/* webpackChunkName: "dashboard" */ './views/Dashboard.vue'),
         },
         {
@@ -71,13 +78,14 @@ const router = new Router({
           component: () => import(/* webpackChunkName: "account" */ './views/AccountSettings.vue'),
         },
         {
-          path: '/libraries/:libraryId/:index?',
+          path: '/libraries/:libraryId',
           name: 'browse-libraries',
+          beforeEnter: noLibraryGuard,
           component: () => import(/* webpackChunkName: "browse-libraries" */ './views/BrowseLibraries.vue'),
           props: (route) => ({ libraryId: Number(route.params.libraryId) }),
         },
         {
-          path: '/series/:seriesId/:index?',
+          path: '/series/:seriesId',
           name: 'browse-series',
           component: () => import(/* webpackChunkName: "browse-series" */ './views/BrowseSeries.vue'),
           props: (route) => ({ seriesId: Number(route.params.seriesId) }),