feat(webui): add button to ignore all remaining duplicate pages at once

Closes: #1136

komga-webui/src/locales/en.json

@@ -583,8 +583,10 @@
     "action_delete_manual": "Manual delete",
     "action_delete_matches": "Delete matches",
     "action_ignore": "Ignore",
+    "action_ignore_remaining": "Ignore remaining ({count})",
     "delete_to_save": "Delete to save {size}",
     "deleted_count": "Deleted {count} times",
+    "empty_title": "No duplicate pages found",
     "filter": {
       "count": "Count",
       "delete_count": "Deletion count",

komga-webui/src/views/DuplicatePagesUnknown.vue

@@ -4,72 +4,89 @@
       <div>{{ $t('duplicate_pages.info') }}</div>
     </v-alert>
 
-    <v-row align="center">
-      <v-col cols="auto">
-        <v-pagination
-          v-if="totalPages > 1"
-          v-model="page"
-          :total-visible="paginationVisible"
-          :length="totalPages"
-        />
-      </v-col>
+    <empty-state
+      v-if="totalPages === 0"
+      :title="$t('duplicate_pages.empty_title')"
+      icon="mdi-check"
+      icon-color="success"
+    />
 
-      <v-spacer/>
+    <template v-else>
+      <v-row align="center">
+        <v-col cols="auto">
+          <v-pagination
+            v-if="totalPages > 1"
+            v-model="page"
+            :total-visible="paginationVisible"
+            :length="totalPages"
+          />
+        </v-col>
 
-      <v-col
-        v-for="sortOption in sortOptions"
-        :key="sortOption.key"
-        cols="auto"
-      >
-        <v-btn
-          rounded
-          small
-          :color="sortActive.key === sortOption.key ? 'primary' : ''"
-          @click="setSort(sortOption.key)"
+        <v-spacer/>
+
+        <v-col
+          v-for="sortOption in sortOptions"
+          :key="sortOption.key"
+          cols="auto"
         >
-          {{ sortOption.name }}
-          <v-icon
-            v-if="sortActive.key === sortOption.key"
-            class="ms-2"
+          <v-btn
+            rounded
+            small
+            :color="sortActive.key === sortOption.key ? 'primary' : ''"
+            @click="setSort(sortOption.key)"
           >
-            {{ sortActive.order === 'desc' ? 'mdi-sort-variant' : 'mdi-sort-reverse-variant' }}
-          </v-icon>
-        </v-btn>
-      </v-col>
+            {{ sortOption.name }}
+            <v-icon
+              v-if="sortActive.key === sortOption.key"
+              class="ms-2"
+            >
+              {{ sortActive.order === 'desc' ? 'mdi-sort-variant' : 'mdi-sort-reverse-variant' }}
+            </v-icon>
+          </v-btn>
+        </v-col>
 
-      <v-col>
-        <page-size-select v-model="pageSize" :items="[1, 2, 5, 10, 20]"/>
-      </v-col>
+        <v-col>
+          <page-size-select v-model="pageSize" :items="[1, 2, 5, 10, 20, 50]"/>
+        </v-col>
+      </v-row>
 
-    </v-row>
+      <v-row>
+        <v-slide-x-transition
+          v-for="(element, i) in elements"
+          :key="i"
+        >
+          <page-hash-unknown-card
+            v-show="!hiddenElements.includes(element)"
+            class="ma-2"
+            :hash="element"
+            @image-clicked="showDialogImage(element)"
+            @matches-clicked="showDialogMatches(element)"
+            @created="pageHashCreated(element)"
+          />
+        </v-slide-x-transition>
 
-    <v-row>
-      <v-slide-x-transition
-        v-for="(element, i) in elements"
-        :key="i"
-      >
-        <page-hash-unknown-card
-          v-show="!hiddenElements.includes(element)"
-          class="ma-2"
-          :hash="element"
-          @image-clicked="showDialogImage(element)"
-          @matches-clicked="showDialogMatches(element)"
-          @created="pageHashCreated(element)"
-        />
-      </v-slide-x-transition>
+      </v-row>
 
-    </v-row>
+      <v-row align="center">
+        <v-col cols="auto">
+          <v-pagination
+            v-if="totalPages > 1"
+            v-model="page"
+            :total-visible="paginationVisible"
+            :length="totalPages"
+          />
+        </v-col>
 
-    <v-row>
-      <v-col cols="12">
-        <v-pagination
-          v-if="totalPages > 1"
-          v-model="page"
-          :total-visible="paginationVisible"
-          :length="totalPages"
-        />
-      </v-col>
-    </v-row>
+        <v-spacer/>
+
+        <v-col>
+          <v-btn @click="ignoreRemaining"
+                 :disabled="remainingCount < 1"
+          >{{ $t('duplicate_pages.action_ignore_remaining', {count: remainingCount}) }}
+          </v-btn>
+        </v-col>
+      </v-row>
+    </template>
 
     <v-dialog v-model="dialogImage">
       <v-card>
@@ -110,10 +127,12 @@ import {pageHashUnknownThumbnailUrl} from '@/functions/urls'
 import PageHashMatchesTable from '@/components/PageHashMatchesTable.vue'
 import PageHashUnknownCard from '@/components/PageHashUnknownCard.vue'
 import PageSizeSelect from '@/components/PageSizeSelect.vue'
+import {PageHashAction} from '@/types/enum-pagehashes'
+import EmptyState from '@/components/EmptyState.vue'
 
 export default Vue.extend({
   name: 'DuplicatePagesUnknown',
-  components: {PageHashUnknownCard, PageHashMatchesTable, PageSizeSelect},
+  components: {EmptyState, PageHashUnknownCard, PageHashMatchesTable, PageSizeSelect},
   data: function () {
     return {
       elements: [] as PageHashUnknownDto[],
@@ -170,6 +189,9 @@ export default Vue.extend({
         this.loadData(this.page, this.sortActive)
       },
     },
+    remainingCount(): number {
+      return this.elements.length - this.hiddenElements.length
+    },
   },
   methods: {
     async loadData(page: number, sort: SortActive) {
@@ -183,6 +205,7 @@ export default Vue.extend({
       this.totalElements = itemsPage.totalElements
       this.totalPages = itemsPage.totalPages
       this.elements = itemsPage.content
+      this.hiddenElements = []
       if (this.page > this.totalPages) this.page = this.totalPages
     },
     setSort(key: string) {
@@ -210,6 +233,17 @@ export default Vue.extend({
         this.loadData(this.page, this.sortActive)
       }
     },
+    async ignoreRemaining() {
+      for (const h of this.elements) {
+        if (!this.hiddenElements.includes(h)) {
+          this.$komgaPageHashes.createOrUpdatePageHash({
+            hash: h.hash,
+            size: h.size,
+            action: PageHashAction.IGNORE,
+          }).then(value => this.pageHashCreated(h))
+        }
+      }
+    },
   },
 })
 </script>