From d114b0efb277f98b0361acc413f94d384654f6f2 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Fri, 28 May 2021 16:57:13 +0800
Subject: [PATCH] fix(webui): fix combobox search value remaining after list
 selection

update vuetify
---
 komga-webui/package-lock.json                 |  22 +-
 komga-webui/package.json                      |   2 +-
 .../dialogs/TransientBookViewerDialog.vue     |   2 +-
 komga-webui/src/views/BookReader.vue          |   8 +-
 komga-webui/src/views/BrowseBook.vue          | 197 +++++++++---------
 komga-webui/src/views/BrowseSeries.vue        |  29 +--
 6 files changed, 135 insertions(+), 125 deletions(-)

diff --git a/komga-webui/package-lock.json b/komga-webui/package-lock.json
index f75ed7337..90624c7f3 100644
--- a/komga-webui/package-lock.json
+++ b/komga-webui/package-lock.json
@@ -25,7 +25,7 @@
         "vue-typed-mixins": "^0.2.0",
         "vuedraggable": "^2.24.0",
         "vuelidate": "^0.7.5",
-        "vuetify": "^2.3.7",
+        "vuetify": "^2.5.1",
         "vuex": "^3.5.1",
         "vuex-persistedstate": "^3.2.0",
         "vuex-router-sync": "^5.0.0"
@@ -19870,9 +19870,16 @@
       }
     },
     "node_modules/vuetify": {
-      "version": "2.3.7",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.3.7.tgz",
-      "integrity": "sha512-9PNorMNNcn0okT78ZpN86qL5Zx4xu0yzcO2w1IdN3ECdbAP00rHe8CEYCThakwXGUuTZ8Iv7gAMDqH6zfxSMtA=="
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.5.1.tgz",
+      "integrity": "sha512-L7bn8yVMXbt1QeTGaLTeyKE/tvhRUtGm5aQdCzUGu6lsGgEm7H707I4fjHftGNGNmmrUr3pmjpVrtqx65BMpUw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/johnleider"
+      },
+      "peerDependencies": {
+        "vue": "^2.6.4"
+      }
     },
     "node_modules/vuetify-loader": {
       "version": "1.6.0",
@@ -37680,9 +37687,10 @@
       "integrity": "sha512-GAAG8QAFVp7BFeQlNaThpTbimq3+HypBPNwdkCkHZZeVaD5zmXXfhp357dcUJXHXTZjSln0PvP6wiwLZXkFTwg=="
     },
     "vuetify": {
-      "version": "2.3.7",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.3.7.tgz",
-      "integrity": "sha512-9PNorMNNcn0okT78ZpN86qL5Zx4xu0yzcO2w1IdN3ECdbAP00rHe8CEYCThakwXGUuTZ8Iv7gAMDqH6zfxSMtA=="
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.5.1.tgz",
+      "integrity": "sha512-L7bn8yVMXbt1QeTGaLTeyKE/tvhRUtGm5aQdCzUGu6lsGgEm7H707I4fjHftGNGNmmrUr3pmjpVrtqx65BMpUw==",
+      "requires": {}
     },
     "vuetify-loader": {
       "version": "1.6.0",
diff --git a/komga-webui/package.json b/komga-webui/package.json
index 64a9b0d75..a31378fdd 100644
--- a/komga-webui/package.json
+++ b/komga-webui/package.json
@@ -28,7 +28,7 @@
     "vue-typed-mixins": "^0.2.0",
     "vuedraggable": "^2.24.0",
     "vuelidate": "^0.7.5",
-    "vuetify": "^2.3.7",
+    "vuetify": "^2.5.1",
     "vuex": "^3.5.1",
     "vuex-persistedstate": "^3.2.0",
     "vuex-router-sync": "^5.0.0"
diff --git a/komga-webui/src/components/dialogs/TransientBookViewerDialog.vue b/komga-webui/src/components/dialogs/TransientBookViewerDialog.vue
index 824d5d0d0..87faca4a5 100644
--- a/komga-webui/src/components/dialogs/TransientBookViewerDialog.vue
+++ b/komga-webui/src/components/dialogs/TransientBookViewerDialog.vue
@@ -14,7 +14,7 @@
         <v-divider/>
 
         <v-card-text style="height: 50%">
-          <v-container fluid class="pa-0">
+          <v-container fluid class="">
 
             <v-row justify="space-around" v-if="!single">
               <v-col cols="auto" class="pa-1">{{ $t('dialog.transient_book_viewer.label_candidate') }}</v-col>
diff --git a/komga-webui/src/views/BookReader.vue b/komga-webui/src/views/BookReader.vue
index b355ed415..d8fb6bca1 100644
--- a/komga-webui/src/views/BookReader.vue
+++ b/komga-webui/src/views/BookReader.vue
@@ -185,7 +185,7 @@
               </settings-select>
             </v-list-item>
 
-            <div v-if="continuousReader">
+            <template v-if="continuousReader">
               <v-subheader class="font-weight-black text-h6">{{ $t('bookreader.settings.webtoon') }}</v-subheader>
               <v-list-item>
                 <settings-select
@@ -201,9 +201,9 @@
                   :label="$t('bookreader.settings.side_padding')"
                 />
               </v-list-item>
-            </div>
+            </template>
 
-            <div v-if="!continuousReader">
+            <template v-if="!continuousReader">
               <v-subheader class="font-weight-black text-h6">{{ $t('bookreader.settings.paged') }}</v-subheader>
               <v-list-item>
                 <settings-select
@@ -220,7 +220,7 @@
                   :label="$t('bookreader.settings.page_layout')"
                 />
               </v-list-item>
-            </div>
+            </template>
 
 
           </v-list>
diff --git a/komga-webui/src/views/BrowseBook.vue b/komga-webui/src/views/BrowseBook.vue
index 71b45c3b5..9ef992cbb 100644
--- a/komga-webui/src/views/BrowseBook.vue
+++ b/komga-webui/src/views/BrowseBook.vue
@@ -84,7 +84,7 @@
       </v-btn>
     </toolbar-sticky>
 
-    <v-container fluid class="px-6">
+    <v-container fluid class="pa-6">
       <v-row>
         <v-col cols="4" sm="4" md="auto" lg="auto" xl="auto">
           <item-card
@@ -98,77 +98,79 @@
         </v-col>
 
         <v-col cols="8">
-          <v-row>
-            <v-col class="py-1">
-              <router-link :to="{name:'browse-series', params: {seriesId: book.seriesId}}" class="link-underline">
-                <span class="text-h5" v-if="!$_.isEmpty(series)">{{ series.metadata.title }}</span>
-              </router-link>
-            </v-col>
-          </v-row>
-          <v-row>
-            <v-col class="py-1">
-              <div class="text-h6">{{ book.metadata.title }}</div>
-            </v-col>
-          </v-row>
-
-          <v-row class="text-caption">
-            <v-col cols="auto">
-              {{ book.metadata.number }} · {{ book.media.pagesCount }} {{ $t('common.pages') }}
-            </v-col>
-            <v-col cols="auto" v-if="book.metadata.releaseDate">
-              {{
-                new Intl.DateTimeFormat($i18n.locale, {dateStyle: 'long'}).format(new Date(book.metadata.releaseDate))
-              }}
-            </v-col>
-          </v-row>
-
-
-          <div class="hidden-xs-only">
-            <v-row class="align-center">
-              <v-col cols="auto">
-                <v-btn color="accent"
-                       small
-                       :title="$t('browse_book.read_book')"
-                       :to="{name: 'read-book', params: { bookId: bookId}, query: { context: context.origin, contextId: context.id}}"
-                       :disabled="book.media.status !== 'READY' || !canReadPages"
-                >
-                  <v-icon left small>mdi-book-open-page-variant</v-icon>
-                  {{ $t('common.read') }}
-                </v-btn>
+          <v-container>
+            <v-row>
+              <v-col class="py-1">
+                <router-link :to="{name:'browse-series', params: {seriesId: book.seriesId}}" class="link-underline">
+                  <span class="text-h5" v-if="!$_.isEmpty(series)">{{ series.metadata.title }}</span>
+                </router-link>
               </v-col>
-
-              <v-col cols="auto">
-                <v-btn small
-                       :title="$t('browse_book.read_incognito')"
-                       :to="{name: 'read-book', params: { bookId: bookId}, query: { context: context.origin, contextId: context.id, incognito: true}}"
-                       :disabled="book.media.status !== 'READY' || !canReadPages"
-                >
-                  <v-icon left small>mdi-incognito</v-icon>
-                  {{ $t('common.read') }}
-                </v-btn>
-              </v-col>
-
-              <v-col cols="auto">
-                <v-btn :title="$t('browse_book.download_file')"
-                       small
-                       :disabled="!canDownload"
-                       :href="fileUrl">
-                  <v-icon left small>mdi-file-download</v-icon>
-                  {{ $t('common.download') }}
-                </v-btn>
+            </v-row>
+            <v-row>
+              <v-col class="py-1">
+                <div class="text-h6">{{ book.metadata.title }}</div>
               </v-col>
             </v-row>
 
-            <v-row v-if="book.metadata.summary">
-              <v-col>
-                <read-more>{{ book.metadata.summary }}</read-more>
+            <v-row class="text-caption">
+              <v-col cols="auto">
+                {{ book.metadata.number }} · {{ book.media.pagesCount }} {{ $t('common.pages') }}
+              </v-col>
+              <v-col cols="auto" v-if="book.metadata.releaseDate">
+                {{
+                  new Intl.DateTimeFormat($i18n.locale, {dateStyle: 'long'}).format(new Date(book.metadata.releaseDate))
+                }}
               </v-col>
             </v-row>
-          </div>
+
+
+            <template v-if="$vuetify.breakpoint.smAndUp">
+              <v-row class="align-center">
+                <v-col cols="auto">
+                  <v-btn color="accent"
+                         small
+                         :title="$t('browse_book.read_book')"
+                         :to="{name: 'read-book', params: { bookId: bookId}, query: { context: context.origin, contextId: context.id}}"
+                         :disabled="book.media.status !== 'READY' || !canReadPages"
+                  >
+                    <v-icon left small>mdi-book-open-page-variant</v-icon>
+                    {{ $t('common.read') }}
+                  </v-btn>
+                </v-col>
+
+                <v-col cols="auto">
+                  <v-btn small
+                         :title="$t('browse_book.read_incognito')"
+                         :to="{name: 'read-book', params: { bookId: bookId}, query: { context: context.origin, contextId: context.id, incognito: true}}"
+                         :disabled="book.media.status !== 'READY' || !canReadPages"
+                  >
+                    <v-icon left small>mdi-incognito</v-icon>
+                    {{ $t('common.read') }}
+                  </v-btn>
+                </v-col>
+
+                <v-col cols="auto">
+                  <v-btn :title="$t('browse_book.download_file')"
+                         small
+                         :disabled="!canDownload"
+                         :href="fileUrl">
+                    <v-icon left small>mdi-file-download</v-icon>
+                    {{ $t('common.download') }}
+                  </v-btn>
+                </v-col>
+              </v-row>
+
+              <v-row v-if="book.metadata.summary">
+                <v-col>
+                  <read-more>{{ book.metadata.summary }}</read-more>
+                </v-col>
+              </v-row>
+            </template>
+          </v-container>
         </v-col>
       </v-row>
 
-      <div class="hidden-sm-and-up">
+      <template v-if="$vuetify.breakpoint.xsOnly">
         <v-row class="align-center">
           <v-col cols="auto">
             <v-btn color="accent"
@@ -209,43 +211,40 @@
             <read-more>{{ book.metadata.summary }}</read-more>
           </v-col>
         </v-row>
-      </div>
+      </template>
 
-      <div v-for="role in authorRoles"
-           :key="role"
+      <v-row v-for="role in displayedRoles"
+             :key="role"
+             class="align-center text-caption"
       >
-        <v-row class="align-center text-caption"
-               v-if="authorsByRole[role]"
-        >
-          <v-col cols="4" sm="3" md="2" xl="1" class="py-1 text-uppercase">{{ $t(`author_roles.${role}`) }}</v-col>
-          <v-col cols="8" sm="9" md="10" xl="11" class="py-1">
-            <vue-horizontal>
-              <template v-slot:btn-prev>
-                <v-btn icon small>
-                  <v-icon>mdi-chevron-left</v-icon>
-                </v-btn>
-              </template>
+        <v-col cols="4" sm="3" md="2" xl="1" class="py-1 text-uppercase">{{ $t(`author_roles.${role}`) }}</v-col>
+        <v-col cols="8" sm="9" md="10" xl="11" class="py-1">
+          <vue-horizontal>
+            <template v-slot:btn-prev>
+              <v-btn icon small>
+                <v-icon>mdi-chevron-left</v-icon>
+              </v-btn>
+            </template>
 
-              <template v-slot:btn-next>
-                <v-btn icon small>
-                  <v-icon>mdi-chevron-right</v-icon>
-                </v-btn>
-              </template>
-              <v-chip v-for="(name, i) in authorsByRole[role]"
-                      :key="i"
-                      :class="$vuetify.rtl ? 'ml-2' : 'mr-2'"
-                      :title="name"
-                      :to="{name:'browse-series', params: {seriesId: book.seriesId }, query: {[role]: name}}"
-                      label
-                      small
-                      outlined
-                      link
-              >{{ name }}
-              </v-chip>
-            </vue-horizontal>
-          </v-col>
-        </v-row>
-      </div>
+            <template v-slot:btn-next>
+              <v-btn icon small>
+                <v-icon>mdi-chevron-right</v-icon>
+              </v-btn>
+            </template>
+            <v-chip v-for="(name, i) in authorsByRole[role]"
+                    :key="i"
+                    :class="$vuetify.rtl ? 'ml-2' : 'mr-2'"
+                    :title="name"
+                    :to="{name:'browse-series', params: {seriesId: book.seriesId }, query: {[role]: name}}"
+                    label
+                    small
+                    outlined
+                    link
+            >{{ name }}
+            </v-chip>
+          </vue-horizontal>
+        </v-col>
+      </v-row>
 
       <v-row v-if="book.metadata.tags.length > 0" class="align-center text-caption">
         <v-col cols="4" sm="3" md="2" xl="1" class="py-1">TAGS</v-col>
@@ -340,7 +339,6 @@ export default Vue.extend({
   components: {ReadMore, ToolbarSticky, ItemCard, BookActionsMenu, ReadListsExpansionPanels, VueHorizontal, RtlIcon},
   data: () => {
     return {
-      authorRoles,
       book: {} as BookDto,
       series: {} as SeriesDto,
       context: {} as Context,
@@ -431,6 +429,9 @@ export default Vue.extend({
           route: {name: 'browse-series', params: {seriesId: this.book.seriesId}},
         }
     },
+    displayedRoles(): string[] {
+      return authorRoles.filter(x => this.authorsByRole[x])
+    },
   },
   methods: {
     libraryDeleted(event: EventLibraryDeleted) {
diff --git a/komga-webui/src/views/BrowseSeries.vue b/komga-webui/src/views/BrowseSeries.vue
index bf4381551..4ff4ed74e 100644
--- a/komga-webui/src/views/BrowseSeries.vue
+++ b/komga-webui/src/views/BrowseSeries.vue
@@ -71,7 +71,7 @@
       </template>
     </filter-drawer>
 
-    <v-container fluid class="px-6">
+    <v-container fluid class="pa-6">
       <v-row>
         <v-col cols="4" sm="4" md="auto" lg="auto" xl="auto">
           <item-card
@@ -85,6 +85,7 @@
         </v-col>
 
         <v-col cols="8">
+          <v-container>
           <v-row>
             <v-col class="py-1">
               <div class="text-h5" v-if="$_.get(series, 'metadata.title')">{{ series.metadata.title }}</div>
@@ -133,7 +134,7 @@
             </v-col>
           </v-row>
 
-          <div class="hidden-xs-only">
+          <template v-if="$vuetify.breakpoint.smAndUp">
             <v-row class="align-center">
               <v-col cols="auto">
                 <v-btn :title="$t('menu.download_series')"
@@ -165,12 +166,12 @@
                 <read-more>{{ series.booksMetadata.summary }}</read-more>
               </v-col>
             </v-row>
-          </div>
-
+          </template>
+          </v-container>
         </v-col>
       </v-row>
 
-      <div class="hidden-sm-and-up">
+      <template v-if="$vuetify.breakpoint.xsOnly">
         <!--   Download button     -->
         <v-row class="align-center">
           <v-col cols="auto">
@@ -205,9 +206,9 @@
             <read-more>{{ series.booksMetadata.summary }}</read-more>
           </v-col>
         </v-row>
-      </div>
+      </template>
 
-      <!--  Pubisher    -->
+      <!--  Publisher    -->
       <v-row v-if="series.metadata.publisher" class="align-center text-caption">
         <v-col cols="4" sm="3" md="2" xl="1" class="py-1 text-uppercase">{{ $t('common.publisher') }}</v-col>
         <v-col cols="8" sm="9" md="10" xl="11" class="py-1">
@@ -286,11 +287,10 @@
         </v-col>
       </v-row>
 
-      <v-divider v-if="series.booksMetadata.authors.length > 0"/>
-      <div v-for="role in authorRolesSeries"
-           :key="role">
+      <v-divider v-if="series.booksMetadata.authors.length > 0" class="my-3"/>
         <v-row class="align-center text-caption"
-               v-if="authorsByRole[role]"
+               v-for="role in displayedRoles"
+               :key="role"
         >
           <v-col cols="4" sm="3" md="2" xl="1" class="py-1 text-uppercase">{{ $t(`author_roles.${role}`) }}</v-col>
           <v-col cols="8" sm="9" md="10" xl="11" class="py-1">
@@ -321,7 +321,6 @@
             </vue-horizontal>
           </v-col>
         </v-row>
-      </div>
 
       <v-row>
         <v-col>
@@ -329,7 +328,7 @@
         </v-col>
       </v-row>
 
-      <v-divider class="my-1"/>
+      <v-divider class="mt-4 mb-1"/>
 
       <empty-state
         v-if="totalPages === 0"
@@ -418,7 +417,6 @@ export default Vue.extend({
   },
   data: function () {
     return {
-      authorRolesSeries,
       series: {} as SeriesDto,
       books: [] as BookDto[],
       selectedBooks: [] as BookDto[],
@@ -510,6 +508,9 @@ export default Vue.extend({
     authorsByRole(): any {
       return groupAuthorsByRole(this.series.booksMetadata.authors)
     },
+    displayedRoles(): string[] {
+      return authorRolesSeries.filter(x => this.authorsByRole[x])
+    },
   },
   props: {
     seriesId: {