From 6090e3f0c5ac9dffa7768fd5f3948c23c6a5f8a9 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Fri, 30 Jul 2021 10:43:27 +0800
Subject: [PATCH] feat(webui): show and edit total book count for series

closes #298
---
 .../components/dialogs/EditSeriesDialog.vue   | 44 ++++++++++++++++++-
 komga-webui/src/locales/en.json               |  3 ++
 komga-webui/src/types/komga-series.ts         | 14 +++---
 komga-webui/src/views/BrowseSeries.vue        | 13 +++++-
 4 files changed, 66 insertions(+), 8 deletions(-)

diff --git a/komga-webui/src/components/dialogs/EditSeriesDialog.vue b/komga-webui/src/components/dialogs/EditSeriesDialog.vue
index 4774331c..ad324de8 100644
--- a/komga-webui/src/components/dialogs/EditSeriesDialog.vue
+++ b/komga-webui/src/components/dialogs/EditSeriesDialog.vue
@@ -217,6 +217,31 @@
                   </v-col>
                 </v-row>
 
+                <v-row v-if="single">
+                  <!--  Total book count  -->
+                  <v-col cols="6">
+                    <v-text-field v-model="form.totalBookCount"
+                                  :label="$t('dialog.edit_series.field_total_book_count')"
+                                  clearable
+                                  filled
+                                  dense
+                                  type="number"
+                                  :error-messages="totalBookCountErrors"
+                                  @input="$v.form.totalBookCount.$touch()"
+                                  @blur="$v.form.totalBookCount.$touch()"
+                                  @change="form.totalBookCountLock = true"
+                    >
+                      <template v-slot:prepend>
+                        <v-icon :color="form.totalBookCountLock ? 'secondary' : ''"
+                                @click="form.totalBookCountLock = !form.totalBookCountLock"
+                        >
+                          {{ form.totalBookCountLock ? 'mdi-lock' : 'mdi-lock-open' }}
+                        </v-icon>
+                      </template>
+                    </v-text-field>
+                  </v-col>
+                </v-row>
+
               </v-container>
             </v-card>
           </v-tab-item>
@@ -329,7 +354,7 @@ export default Vue.extend({
         readingDirectionLock: false,
         publisher: '',
         publisherLock: false,
-        ageRating: undefined as unknown as number,
+        ageRating: undefined as number | undefined,
         ageRatingLock: false,
         language: '',
         languageLock: false,
@@ -337,6 +362,8 @@ export default Vue.extend({
         genresLock: false,
         tags: [],
         tagsLock: false,
+        totalBookCount: undefined as number | undefined,
+        totalBookCountLock: false,
       },
       mixed: {
         status: false,
@@ -393,6 +420,7 @@ export default Vue.extend({
       ageRating: {minValue: minValue(0)},
       readingDirection: {},
       publisher: {},
+      totalBookCount: {minValue: minValue(1)},
     },
   },
   async created() {
@@ -423,6 +451,12 @@ export default Vue.extend({
       !this.$v?.form?.ageRating?.minValue && errors.push(this.$t('dialog.edit_series.field_age_rating_error').toString())
       return errors
     },
+    totalBookCountErrors(): string[] {
+      const errors = [] as string[]
+      if (!this.$v.form?.totalBookCount?.$dirty) return errors
+      !this.$v?.form?.totalBookCount?.minValue && errors.push(this.$t('dialog.edit_series.field_total_book_count_error').toString())
+      return errors
+    },
     languageErrors(): string[] {
       if (!this.$v.form?.language?.$dirty) return []
       if (!this.$v?.form?.language?.validLanguage) return tags(this.form.language).errors().map((x: any) => x.message)
@@ -462,7 +496,7 @@ export default Vue.extend({
         this.form.readingDirectionLock = readingDirectionLock.length > 1 ? false : readingDirectionLock[0]
 
         const ageRating = this.$_.uniq(series.map(x => x.metadata.ageRating))
-        this.form.ageRating = ageRating.length > 1 ? undefined as unknown as number : ageRating[0]
+        this.form.ageRating = ageRating.length > 1 ? undefined : ageRating[0]
         this.mixed.ageRating = ageRating.length > 1
 
         const ageRatingLock = this.$_.uniq(series.map(x => x.metadata.ageRatingLock))
@@ -516,6 +550,7 @@ export default Vue.extend({
           languageLock: this.form.languageLock,
           genresLock: this.form.genresLock,
           tagsLock: this.form.tagsLock,
+          totalBookCountLock: this.form.totalBookCountLock,
         }
 
         if (this.$v.form?.status?.$dirty) {
@@ -551,6 +586,7 @@ export default Vue.extend({
             titleLock: this.form.titleLock,
             titleSortLock: this.form.titleSortLock,
             summaryLock: this.form.summaryLock,
+            totalBookCountLock: this.form.totalBookCountLock,
           })
 
           if (this.$v.form?.title?.$dirty) {
@@ -564,6 +600,10 @@ export default Vue.extend({
           if (this.$v.form?.summary?.$dirty) {
             this.$_.merge(metadata, {summary: this.form.summary})
           }
+
+          if (this.$v.form?.totalBookCount?.$dirty) {
+            this.$_.merge(metadata, {totalBookCount: this.form.totalBookCount})
+          }
         }
 
         return metadata
diff --git a/komga-webui/src/locales/en.json b/komga-webui/src/locales/en.json
index a4fbb9e6..cbb0af7e 100644
--- a/komga-webui/src/locales/en.json
+++ b/komga-webui/src/locales/en.json
@@ -174,6 +174,7 @@
     "all_libraries": "All Libraries",
     "books": "Books",
     "books_n": "No book | 1 book | {count} books",
+    "books_total": "{count} / {total} books",
     "cancel": "Cancel",
     "close": "Close",
     "collections": "Collections",
@@ -373,6 +374,8 @@
       "dialog_title_single": "Edit {series}",
       "field_age_rating": "Age Rating",
       "field_age_rating_error": "Age rating must be 0 or more",
+      "field_total_book_count": "Total Book Count",
+      "field_total_book_count_error": "Total book count must be 1 or more",
       "field_genres": "Genres",
       "field_language": "Language",
       "field_language_hint": "IETF BCP 47 language tag",
diff --git a/komga-webui/src/types/komga-series.ts b/komga-webui/src/types/komga-series.ts
index 9d02ee24..eaf8a416 100644
--- a/komga-webui/src/types/komga-series.ts
+++ b/komga-webui/src/types/komga-series.ts
@@ -30,14 +30,16 @@ export interface SeriesMetadataDto {
   readingDirectionLock: boolean,
   publisher: string,
   publisherLock: boolean,
-  ageRating: number,
+  ageRating?: number,
   ageRatingLock: boolean,
   language: string,
   languageLock: boolean,
   genres: string[],
   genresLock: boolean,
-  tags: String[],
-  tagsLock: boolean
+  tags: string[],
+  tagsLock: boolean,
+  totalBookCount?: number,
+  totalBookCountLock: boolean,
 }
 
 export interface SeriesBooksMetadataDto {
@@ -68,8 +70,10 @@ export interface SeriesMetadataUpdateDto {
   languageLock?: boolean,
   genres?: string[],
   genresLock?: boolean,
-  tags?: String[],
-  tagsLock?: boolean
+  tags?: string[],
+  tagsLock?: boolean,
+  totalBookCount?: number,
+  totalBookCountLock: boolean,
 }
 
 export interface GroupCountDto {
diff --git a/komga-webui/src/views/BrowseSeries.vue b/komga-webui/src/views/BrowseSeries.vue
index 58f52f9d..1524c6e9 100644
--- a/komga-webui/src/views/BrowseSeries.vue
+++ b/komga-webui/src/views/BrowseSeries.vue
@@ -133,7 +133,8 @@
                   {{ languageDisplay }}
                 </v-chip>
               </v-col>
-              <v-col :class="'py-1 ' + ($vuetify.rtl ? 'pl-0' : 'pr-0')" cols="auto" v-if="series.metadata.readingDirection">
+              <v-col :class="'py-1 ' + ($vuetify.rtl ? 'pl-0' : 'pr-0')" cols="auto"
+                     v-if="series.metadata.readingDirection">
                 <v-chip label small>
                   {{ $t(`enums.reading_direction.${series.metadata.readingDirection}`) }}
                 </v-chip>
@@ -145,6 +146,16 @@
               </v-col>
             </v-row>
 
+            <v-row class="text-caption" align="center">
+              <v-col cols="auto" v-if="series.metadata.totalBookCount">
+                {{ $t('common.books_total', {count: series.booksCount, total: series.metadata.totalBookCount}) }}
+              </v-col>
+
+              <v-col cols="auto" v-else>
+                {{ $tc('common.books_n', series.booksCount) }}
+              </v-col>
+            </v-row>
+
             <template v-if="$vuetify.breakpoint.smAndUp">
               <v-row class="align-center">
                 <v-col cols="auto">