From 1120f1943ad201805104b485cc497316e92d3899 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Thu, 27 Jan 2022 11:16:42 +0800
Subject: [PATCH] fix(webui): duplicate pages filters

---
 komga-webui/src/locales/en.json               |  7 +-
 .../src/views/SettingsDuplicatePages.vue      | 82 ++++++++++++++++---
 .../komga/infrastructure/jooq/PageHashDao.kt  |  7 +-
 3 files changed, 82 insertions(+), 14 deletions(-)

diff --git a/komga-webui/src/locales/en.json b/komga-webui/src/locales/en.json
index e8f6b2589..40a93ddd9 100644
--- a/komga-webui/src/locales/en.json
+++ b/komga-webui/src/locales/en.json
@@ -535,7 +535,12 @@
     "matches_n": "No matches | 1 match | {count} matches",
     "title": "Duplicate pages",
     "unknown_size": "Unknown size",
-    "delete_to_save": "Delete to save {size}"
+    "delete_to_save": "Delete to save {size}",
+    "filter": {
+      "total_size": "Total size",
+      "size": "Size",
+      "count": "Count"
+    }
   },
   "duplicates": {
     "file_hash": "File hash",
diff --git a/komga-webui/src/views/SettingsDuplicatePages.vue b/komga-webui/src/views/SettingsDuplicatePages.vue
index c9ebd1e90..d55bba4e3 100644
--- a/komga-webui/src/views/SettingsDuplicatePages.vue
+++ b/komga-webui/src/views/SettingsDuplicatePages.vue
@@ -1,12 +1,39 @@
 <template>
   <v-container fluid class="pa-6">
-    <v-pagination
-      v-if="totalPages > 1"
-      v-model="page"
-      :total-visible="paginationVisible"
-      :length="totalPages"
-      class="mb-2"
-    />
+    <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-spacer/>
+
+      <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)"
+        >
+          {{ 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-row>
 
     <v-row>
       <v-card
@@ -60,6 +87,17 @@
 
     </v-row>
 
+    <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-dialog v-model="dialogImage">
       <v-card>
         <v-card-text>
@@ -107,6 +145,7 @@ export default Vue.extend({
       totalElements: 0,
       page: 1,
       totalPages: 1,
+      sortActive: {key: 'totalSize', order: 'desc'} as SortActive,
       dialogImage: false,
       dialogMatches: false,
       dialogImagePageHash: {} as PageHashUnknownDto,
@@ -115,14 +154,24 @@ export default Vue.extend({
     }
   },
   async mounted() {
-    await this.loadData(this.page)
+    await this.loadData(this.page, this.sortActive)
   },
   watch: {
     page(val) {
-      this.loadData(val)
+      this.loadData(val, this.sortActive)
+    },
+    sortActive(val) {
+      this.loadData(this.page, val)
     },
   },
   computed: {
+    sortOptions(): SortOption[] {
+      return [
+        {name: this.$t('duplicate_pages.filter.total_size').toString(), key: 'totalSize'},
+        {name: this.$t('duplicate_pages.filter.size').toString(), key: 'size'},
+        {name: this.$t('duplicate_pages.filter.count').toString(), key: 'matchCount'},
+      ]
+    },
     paginationVisible(): number {
       switch (this.$vuetify.breakpoint.name) {
         case 'xs':
@@ -138,10 +187,10 @@ export default Vue.extend({
     },
   },
   methods: {
-    async loadData(page: number) {
+    async loadData(page: number, sort: SortActive) {
       const pageRequest = {
         page: page - 1,
-        sort: ['matchCount,desc'],
+        sort: [`${sort.key},${sort.order}`],
       } as PageRequest
 
       const itemsPage = await this.$komgaPageHashes.getUnknownHashes(pageRequest)
@@ -149,6 +198,17 @@ export default Vue.extend({
       this.totalPages = itemsPage.totalPages
       this.elements = itemsPage.content
     },
+    setSort(key: string) {
+      if (this.sortActive.key === key) {
+        if (this.sortActive.order === 'desc') {
+          this.sortActive = {key: key, order: 'asc'}
+        } else {
+          this.sortActive = {key: key, order: 'desc'}
+        }
+      } else {
+        this.sortActive = {key: key, order: 'desc'}
+      }
+    },
     showDialogImage(pageHash: PageHashUnknownDto) {
       this.dialogImagePageHash = pageHash
       this.dialogImage = true
diff --git a/komga/src/main/kotlin/org/gotson/komga/infrastructure/jooq/PageHashDao.kt b/komga/src/main/kotlin/org/gotson/komga/infrastructure/jooq/PageHashDao.kt
index 241d1032f..43f3e8582 100644
--- a/komga/src/main/kotlin/org/gotson/komga/infrastructure/jooq/PageHashDao.kt
+++ b/komga/src/main/kotlin/org/gotson/komga/infrastructure/jooq/PageHashDao.kt
@@ -26,8 +26,9 @@ class PageHashDao(
   private val sorts = mapOf(
     "hash" to p.FILE_HASH,
     "mediatype" to p.MEDIA_TYPE,
-    "size" to DSL.field("size"),
+    "size" to p.FILE_SIZE,
     "matchCount" to DSL.field("count"),
+    "totalSize" to DSL.field("totalSize"),
     "url" to b.URL,
     "bookId" to b.ID,
     "pageNumber" to p.NUMBER,
@@ -38,11 +39,13 @@ class PageHashDao(
   }
 
   override fun findAllUnknown(pageable: Pageable): Page<PageHashUnknown> {
+    val bookCount = DSL.count(p.BOOK_ID)
     val query = dsl.select(
       p.FILE_HASH,
       p.MEDIA_TYPE,
       p.FILE_SIZE,
-      DSL.count(p.BOOK_ID).`as`("count"),
+      bookCount.`as`("count"),
+      (bookCount * p.FILE_SIZE).`as`("totalSize"),
     )
       .from(p)
       .where(p.FILE_HASH.ne(""))