feat(webui): add library option to choose series cover

closes #312

komga-webui/src/components/Dialogs.vue

@@ -81,6 +81,7 @@ import {BookDto} from '@/types/komga-books'
 import {SeriesDto} from '@/types/komga-series'
 import {ERROR} from '@/types/events'
 import ConfirmationDialog from '@/components/dialogs/ConfirmationDialog.vue'
+import {LibraryDto} from '@/types/komga-libraries'
 
 export default Vue.extend({
   name: 'Dialogs',

komga-webui/src/components/dialogs/CollectionEditDialog.vue

@@ -47,6 +47,7 @@
 import {UserRoles} from '@/types/enum-users'
 import Vue from 'vue'
 import {ERROR} from '@/types/events'
+import {LibraryDto} from '@/types/komga-libraries'
 
 export default Vue.extend({
   name: 'CollectionEditDialog',

komga-webui/src/components/dialogs/LibraryEditDialog.vue

@@ -136,6 +136,17 @@
                       />
                     </v-col>
                   </v-row>
+                  <v-row>
+                    <v-col>
+                      <span class="text-subtitle-1 text--primary">{{ $t('dialog.edit_library.label_series_cover') }}</span>
+                      <v-select :items="seriesCover"
+                                v-model="form.seriesCover"
+                                :label="$t('dialog.edit_library.field_series_cover')"
+                                solo
+                                flat
+                      />
+                    </v-col>
+                  </v-row>
 
                 </v-container>
               </v-card>
@@ -274,6 +285,8 @@ import FileBrowserDialog from '@/components/dialogs/FileBrowserDialog.vue'
 import Vue from 'vue'
 import {required} from 'vuelidate/lib/validators'
 import {ERROR} from '@/types/events'
+import {SeriesCoverDto} from '@/types/enum-libraries'
+import {LibraryDto} from '@/types/komga-libraries'
 
 export default Vue.extend({
   name: 'LibraryEditDialog',
@@ -300,6 +313,7 @@ export default Vue.extend({
         repairExtensions: false,
         convertToCbz: false,
         emptyTrashAfterScan: false,
+        seriesCover: SeriesCoverDto.FIRST as SeriesCoverDto,
       },
       validationFieldNames: new Map([]),
     }
@@ -314,6 +328,12 @@ export default Vue.extend({
     showNext(): boolean {
       return !this.library && this.tab !== 2
     },
+    seriesCover(): any[] {
+      return Object.keys(SeriesCoverDto).map(x => ({
+        text: this.$t(`enums.series_cover.${x}`),
+        value: x,
+      }))
+    },
 
     importComicInfo: {
       get: function (): number {
@@ -421,6 +441,7 @@ export default Vue.extend({
       this.form.repairExtensions = library ? library.repairExtensions : false
       this.form.convertToCbz = library ? library.convertToCbz : false
       this.form.emptyTrashAfterScan = library ? library.emptyTrashAfterScan : false
+      this.form.seriesCover = library ? library.seriesCover : SeriesCoverDto.FIRST
       this.$v.$reset()
     },
     validateLibrary() {
@@ -444,6 +465,7 @@ export default Vue.extend({
           repairExtensions: this.form.repairExtensions,
           convertToCbz: this.form.convertToCbz,
           emptyTrashAfterScan: this.form.emptyTrashAfterScan,
+          seriesCover: this.form.seriesCover,
         }
       }
       return null

komga-webui/src/components/dialogs/ReadListEditDialog.vue

@@ -36,6 +36,7 @@
 import {UserRoles} from '@/types/enum-users'
 import Vue from 'vue'
 import {ERROR} from '@/types/events'
+import {LibraryDto} from '@/types/komga-libraries'
 
 export default Vue.extend({
   name: 'ReadListEditDialog',

komga-webui/src/components/dialogs/UserEditDialog.vue

@@ -55,6 +55,7 @@
 import {UserRoles} from '@/types/enum-users'
 import Vue from 'vue'
 import {ERROR} from '@/types/events'
+import {LibraryDto} from '@/types/komga-libraries'
 
 export default Vue.extend({
   name: 'UserEditDialog',

komga-webui/src/components/dialogs/UserSharedLibrariesEditDialog.vue

@@ -56,6 +56,7 @@
 <script lang="ts">
 import Vue from 'vue'
 import {ERROR} from '@/types/events'
+import {LibraryDto} from '@/types/komga-libraries'
 
 export default Vue.extend({
   name: 'UserSharedLibrariesEditDialog',

komga-webui/src/components/menus/LibraryActionsMenu.vue

@@ -57,6 +57,7 @@
 <script lang="ts">
 import Vue from 'vue'
 import ConfirmationDialog from '@/components/dialogs/ConfirmationDialog.vue'
+import {LibraryDto} from '@/types/komga-libraries'
 
 export default Vue.extend({
   name: 'LibraryActionsMenu',

komga-webui/src/locales/en.json

@@ -344,6 +344,7 @@
       "field_scanner_deep_scan": "Deep scan",
       "field_scanner_empty_trash_after_scan": "Empty trash automatically after every scan",
       "field_scanner_force_directory_modified_time": "Force directory modified time",
+      "field_series_cover": "Series cover",
       "file_browser_dialog_button_confirm": "Choose",
       "file_browser_dialog_title": "Library's root folder",
       "label_file_management": "File management",
@@ -353,6 +354,7 @@
       "label_import_local": "Import local media assets",
       "label_import_mylar": "Import metadata generated by Mylar",
       "label_scanner": "Scanner",
+      "label_series_cover": "Series cover",
       "tab_general": "General",
       "tab_metadata": "Metadata",
       "tab_options": "Options"
@@ -489,6 +491,12 @@
       "VERTICAL": "Vertical",
       "WEBTOON": "Webtoon"
     },
+    "series_cover": {
+      "FIRST": "First",
+      "FIRST_UNREAD_OR_FIRST": "First unread else first",
+      "FIRST_UNREAD_OR_LAST": "First unread else last",
+      "LAST": "Last"
+    },
     "series_status": {
       "ABANDONED": "Abandoned",
       "ENDED": "Ended",

komga-webui/src/plugins/komga-libraries.plugin.ts

@@ -2,6 +2,7 @@ import KomgaLibrariesService from '@/services/komga-libraries.service'
 import {AxiosInstance} from 'axios'
 import _Vue from 'vue'
 import {Module} from 'vuex/types'
+import {LibraryDto} from '@/types/komga-libraries'
 
 let service: KomgaLibrariesService
 

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

@@ -1,4 +1,5 @@
 import {AxiosInstance} from 'axios'
+import {LibraryCreationDto, LibraryDto, LibraryUpdateDto} from '@/types/komga-libraries'
 
 const API_LIBRARIES = '/api/v1/libraries'
 

komga-webui/src/store.ts

@@ -4,6 +4,7 @@ import {BookDto} from '@/types/komga-books'
 import {SeriesDto} from '@/types/komga-series'
 import createPersistedState from 'vuex-persistedstate'
 import {persistedModule} from './plugins/persisted-state'
+import {LibraryDto} from '@/types/komga-libraries'
 
 Vue.use(Vuex)
 

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

@@ -0,0 +1,6 @@
+export enum SeriesCoverDto {
+  FIRST = 'FIRST',
+  FIRST_UNREAD_OR_FIRST = 'FIRST_UNREAD_OR_FIRST',
+  FIRST_UNREAD_OR_LAST = 'FIRST_UNREAD_OR_LAST',
+  LAST = 'LAST',
+}

komga-webui/src/types/komga-libraries.ts

@@ -1,4 +1,6 @@
-interface LibraryCreationDto {
+import {SeriesCoverDto} from '@/types/enum-libraries'
+
+export interface LibraryCreationDto {
   name: string,
   root: string,
   importComicInfoBook: boolean,
@@ -15,9 +17,10 @@ interface LibraryCreationDto {
   repairExtensions: boolean,
   convertToCbz: boolean,
   emptyTrashAfterScan: boolean,
+  seriesCover: SeriesCoverDto,
 }
 
-interface LibraryUpdateDto {
+export interface LibraryUpdateDto {
   name: string,
   root: string,
   importComicInfoBook: boolean,
@@ -34,9 +37,10 @@ interface LibraryUpdateDto {
   repairExtensions: boolean,
   convertToCbz: boolean,
   emptyTrashAfterScan: boolean,
+  seriesCover: SeriesCoverDto,
 }
 
-interface LibraryDto {
+export interface LibraryDto {
   id: string,
   name: string,
   root: string,
@@ -54,4 +58,5 @@ interface LibraryDto {
   repairExtensions: boolean,
   convertToCbz: boolean,
   emptyTrashAfterScan: boolean,
+  seriesCover: SeriesCoverDto,
 }

komga-webui/src/views/BrowseCollection.vue

@@ -141,6 +141,7 @@ import {authorRoles} from '@/types/author-roles'
 import {AuthorDto} from '@/types/komga-books'
 import {CollectionSseDto, ReadProgressSeriesSseDto, SeriesSseDto} from '@/types/komga-sse'
 import {throttle} from 'lodash'
+import {LibraryDto} from '@/types/komga-libraries'
 
 export default Vue.extend({
   name: 'BrowseCollection',

komga-webui/src/views/BrowseCollections.vue

@@ -70,6 +70,7 @@ import {Location} from 'vue-router'
 import {LIBRARIES_ALL, LIBRARY_ROUTE} from '@/types/library'
 import {LibrarySseDto} from '@/types/komga-sse'
 import MultiSelectBar from '@/components/bars/MultiSelectBar.vue'
+import {LibraryDto} from '@/types/komga-libraries'
 
 export default Vue.extend({
   name: 'BrowseCollections',

komga-webui/src/views/BrowseLibraries.vue

@@ -153,6 +153,7 @@ import {authorRoles} from '@/types/author-roles'
 import {LibrarySseDto, ReadProgressSeriesSseDto, SeriesSseDto} from '@/types/komga-sse'
 import {throttle} from 'lodash'
 import AlphabeticalNavigation from '@/components/AlphabeticalNavigation.vue'
+import {LibraryDto} from '@/types/komga-libraries'
 
 export default Vue.extend({
   name: 'BrowseLibraries',

komga-webui/src/views/BrowseReadLists.vue

@@ -70,6 +70,7 @@ import {Location} from 'vue-router'
 import {LIBRARIES_ALL, LIBRARY_ROUTE} from '@/types/library'
 import {LibrarySseDto} from '@/types/komga-sse'
 import MultiSelectBar from '@/components/bars/MultiSelectBar.vue'
+import {LibraryDto} from '@/types/komga-libraries'
 
 export default Vue.extend({
   name: 'BrowseReadLists',

komga-webui/src/views/Dashboard.vue

@@ -167,6 +167,7 @@ import {LIBRARIES_ALL, LIBRARY_ROUTE} from '@/types/library'
 import {throttle} from 'lodash'
 import {subMonths} from 'date-fns'
 import {BookSseDto, ReadProgressSseDto, SeriesSseDto} from '@/types/komga-sse'
+import {LibraryDto} from '@/types/komga-libraries'
 
 export default Vue.extend({
   name: 'Dashboard',

komga-webui/src/views/Home.vue

@@ -191,6 +191,7 @@ import Vue from 'vue'
 import {LIBRARIES_ALL} from '@/types/library'
 import Toaster from '@/components/Toaster.vue'
 import {MediaStatus} from '@/types/enum-books'
+import {LibraryDto} from '@/types/komga-libraries'
 
 export default Vue.extend({
   name: 'home',