feat(webui): keep reading section in dashboard

related to #131

komga-webui/src/components/ItemCard.vue

@@ -90,7 +90,7 @@
 
 <script lang="ts">
 import { getReadProgress, getReadProgressPercentage } from '@/functions/book-progress'
-import { ReadProgress } from '@/types/enum-books'
+import { ReadStatus } from '@/types/enum-books'
 import { createItem, Item } from '@/types/items'
 import Vue from 'vue'
 
@@ -165,11 +165,11 @@ export default Vue.extend({
       return this.computedItem.body()
     },
     isInProgress (): boolean {
-      if ('seriesId' in this.item) return getReadProgress(this.item) === ReadProgress.IN_PROGRESS
+      if ('seriesId' in this.item) return getReadProgress(this.item) === ReadStatus.IN_PROGRESS
       return false
     },
     isUnread (): boolean {
-      if ('seriesId' in this.item) return getReadProgress(this.item) === ReadProgress.UNREAD
+      if ('seriesId' in this.item) return getReadProgress(this.item) === ReadStatus.UNREAD
       return false
     },
     unreadCount (): number | undefined {

komga-webui/src/functions/book-progress.ts

@@ -1,9 +1,9 @@
-import { ReadProgress } from '@/types/enum-books'
+import { ReadStatus } from '@/types/enum-books'
 
-export function getReadProgress (book: BookDto): ReadProgress {
-  if (book.readProgress?.completed) return ReadProgress.READ
-  if (book.readProgress?.completed === false) return ReadProgress.IN_PROGRESS
-  return ReadProgress.UNREAD
+export function getReadProgress (book: BookDto): ReadStatus {
+  if (book.readProgress?.completed) return ReadStatus.READ
+  if (book.readProgress?.completed === false) return ReadStatus.IN_PROGRESS
+  return ReadStatus.UNREAD
 }
 
 export function getReadProgressPercentage (book: BookDto): number {

komga-webui/src/services/komga-books.service.ts

@@ -11,7 +11,7 @@ export default class KomgaBooksService {
     this.http = http
   }
 
-  async getBooks (libraryId?: number, pageRequest?: PageRequest, search?: string, mediaStatus?: string[]): Promise<Page<BookDto>> {
+  async getBooks (libraryId?: number, pageRequest?: PageRequest, search?: string, mediaStatus?: string[], readStatus?: string[]): Promise<Page<BookDto>> {
     try {
       const params = { ...pageRequest } as any
       if (libraryId) {
@@ -23,6 +23,9 @@ export default class KomgaBooksService {
       if (mediaStatus) {
         params.media_status = mediaStatus
       }
+      if (readStatus) {
+        params.read_status = readStatus
+      }
       return (await this.http.get(API_BOOKS, {
         params: params,
         paramsSerializer: params => qs.stringify(params, { indices: false }),

komga-webui/src/services/komga-series.service.ts

@@ -58,7 +58,7 @@ export default class KomgaSeriesService {
         params: params,
       })).data
     } catch (e) {
-      let msg = 'An error occurred while trying to retrieve new series'
+      let msg = 'An error occurred while trying to retrieve updated series'
       if (e.response.data.message) {
         msg += `: ${e.response.data.message}`
       }

komga-webui/src/types/enum-books.ts

@@ -13,7 +13,7 @@ export enum MediaStatus {
   OUTDATED = 'OUTDATED'
 }
 
-export enum ReadProgress {
+export enum ReadStatus {
   UNREAD = 'UNREAD',
   READ = 'READ',
   IN_PROGRESS = 'IN_PROGRESS'

komga-webui/src/views/BrowseBook.vue

@@ -175,7 +175,7 @@ import { getBookFormatFromMediaType } from '@/functions/book-format'
 import { getReadProgress, getReadProgressPercentage } from '@/functions/book-progress'
 import { getBookTitleCompact } from '@/functions/book-title'
 import { bookFileUrl, bookThumbnailUrl } from '@/functions/urls'
-import { ReadProgress } from '@/types/enum-books'
+import { ReadStatus } from '@/types/enum-books'
 import Vue from 'vue'
 
 export default Vue.extend({
@@ -229,13 +229,13 @@ export default Vue.extend({
       return groupAuthorsByRolePlural(this.book.metadata.authors)
     },
     isRead (): boolean {
-      return getReadProgress(this.book) === ReadProgress.READ
+      return getReadProgress(this.book) === ReadStatus.READ
     },
     isUnread (): boolean {
-      return getReadProgress(this.book) === ReadProgress.UNREAD
+      return getReadProgress(this.book) === ReadStatus.UNREAD
     },
     isInProgress (): boolean {
-      return getReadProgress(this.book) === ReadProgress.IN_PROGRESS
+      return getReadProgress(this.book) === ReadStatus.IN_PROGRESS
     },
     readProgressPercentage (): number {
       return getReadProgressPercentage(this.book)

komga-webui/src/views/Dashboard.vue

@@ -9,64 +9,65 @@
                        :books.sync="editBookSingle"
     />
 
-    <horizontal-scroller>
+    <empty-state v-if="allEmpty"
+                 title="Nothing to show"
+                 icon="mdi-help-circle"
+                 icon-color="secondary"
+    >
+    </empty-state>
+
+    <horizontal-scroller v-if="inProgressBooks.length !== 0">
+      <template v-slot:prepend>
+        <div class="title">Keep Reading</div>
+      </template>
+      <template v-slot:content>
+        <div v-for="(b, i) in inProgressBooks"
+             :key="i"
+        >
+          <item-card class="ma-2 card" :item="b" :on-edit="singleEditBook"/>
+        </div>
+      </template>
+    </horizontal-scroller>
+
+    <br>
+
+    <horizontal-scroller v-if="newSeries.length !== 0">
       <template v-slot:prepend>
         <div class="title">Recently Added Series</div>
       </template>
       <template v-slot:content>
         <div v-for="(s, i) in newSeries"
              :key="i">
-          <v-skeleton-loader v-if="s === null"
-                             :loading="s === null"
-                             type="card, text"
-                             width="150"
-                             height="306.14"
-                             class="ma-2 card"
-          />
-          <item-card v-else class="ma-2 card" :item="s" :on-edit="singleEditSeries"/>
+          <item-card class="ma-2 card" :item="s" :on-edit="singleEditSeries"/>
         </div>
       </template>
     </horizontal-scroller>
 
     <br>
 
-    <horizontal-scroller>
+    <horizontal-scroller v-if="updatedSeries.length !== 0">
       <template v-slot:prepend>
         <div class="title">Recently Updated Series</div>
       </template>
       <template v-slot:content>
         <div v-for="(s, i) in updatedSeries"
              :key="i">
-          <v-skeleton-loader v-if="s === null"
-                             :loading="s === null"
-                             type="card, text"
-                             width="150"
-                             height="306.14"
-                             class="ma-2 card"
-          />
-          <item-card v-else class="ma-2 card" :item="s" :on-edit="singleEditSeries"/>
+          <item-card class="ma-2 card" :item="s" :on-edit="singleEditSeries"/>
         </div>
       </template>
     </horizontal-scroller>
 
     <br>
 
-    <horizontal-scroller>
+    <horizontal-scroller v-if="latestBooks.length !== 0">
       <template v-slot:prepend>
         <div class="title">Recently Added Books</div>
       </template>
       <template v-slot:content>
-        <div v-for="(b, i) in books"
+        <div v-for="(b, i) in latestBooks"
              :key="i"
         >
-          <v-skeleton-loader v-if="b === null"
-                             :loading="b === null"
-                             type="card, text"
-                             width="150"
-                             height="328.13"
-                             class="ma-2 card"
-          />
-          <item-card v-else class="ma-2 card" :item="b" :on-edit="singleEditBook"/>
+          <item-card class="ma-2 card" :item="b" :on-edit="singleEditBook"/>
         </div>
       </template>
     </horizontal-scroller>
@@ -77,20 +78,21 @@
 <script lang="ts">
 import EditBooksDialog from '@/components/EditBooksDialog.vue'
 import EditSeriesDialog from '@/components/EditSeriesDialog.vue'
+import EmptyState from '@/components/EmptyState.vue'
 import HorizontalScroller from '@/components/HorizontalScroller.vue'
 import ItemCard from '@/components/ItemCard.vue'
+import { ReadStatus } from '@/types/enum-books'
 import Vue from 'vue'
 
 export default Vue.extend({
   name: 'Dashboard',
-  components: { ItemCard, HorizontalScroller, EditSeriesDialog, EditBooksDialog },
+  components: { ItemCard, HorizontalScroller, EditSeriesDialog, EditBooksDialog, EmptyState },
   data: () => {
-    const pageSize = 20
     return {
-      newSeries: Array(pageSize).fill(null) as SeriesDto[],
-      updatedSeries: Array(pageSize).fill(null) as SeriesDto[],
-      books: Array(pageSize).fill(null) as BookDto[],
-      pageSize: pageSize,
+      newSeries: [] as SeriesDto[],
+      updatedSeries: [] as SeriesDto[],
+      latestBooks: [] as BookDto[],
+      inProgressBooks: [] as BookDto[],
       editSeriesSingle: {} as SeriesDto,
       dialogEditSeriesSingle: false,
       editBookSingle: {} as BookDto,
@@ -101,6 +103,7 @@ export default Vue.extend({
     this.loadNewSeries()
     this.loadUpdatedSeries()
     this.loadLatestBooks()
+    this.loadInProgressBooks()
   },
   watch: {
     editSeriesSingle (val: SeriesDto) {
@@ -114,10 +117,22 @@ export default Vue.extend({
       }
     },
     editBookSingle (val: BookDto) {
-      let index = this.books.findIndex(x => x.id === val.id)
+      let index = this.latestBooks.findIndex(x => x.id === val.id)
       if (index !== -1) {
-        this.books.splice(index, 1, val)
+        this.latestBooks.splice(index, 1, val)
       }
+      index = this.inProgressBooks.findIndex(x => x.id === val.id)
+      if (index !== -1) {
+        this.inProgressBooks.splice(index, 1, val)
+      }
+    },
+  },
+  computed: {
+    allEmpty (): boolean {
+      return this.newSeries.length === 0 &&
+        this.updatedSeries.length === 0 &&
+        this.latestBooks.length === 0 &&
+        this.inProgressBooks.length === 0
     },
   },
   methods: {
@@ -129,11 +144,17 @@ export default Vue.extend({
     },
     async loadLatestBooks () {
       const pageRequest = {
-        size: this.pageSize,
         sort: ['createdDate,desc'],
       } as PageRequest
 
-      this.books = (await this.$komgaBooks.getBooks(undefined, pageRequest)).content
+      this.latestBooks = (await this.$komgaBooks.getBooks(undefined, pageRequest)).content
+    },
+    async loadInProgressBooks () {
+      const pageRequest = {
+        sort: ['readProgress.lastModified,desc'],
+      } as PageRequest
+
+      this.inProgressBooks = (await this.$komgaBooks.getBooks(undefined, pageRequest, undefined, undefined, [ReadStatus.IN_PROGRESS])).content
     },
     singleEditSeries (series: SeriesDto) {
       this.editSeriesSingle = series