From b1fd257a149682a16b3505e48a550524abd7d829 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Tue, 25 Jan 2022 16:57:21 +0800
Subject: [PATCH] feat(webui): delete book from duplicate view

closes #764
---
 komga-webui/src/views/SettingsDuplicates.vue | 27 ++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/komga-webui/src/views/SettingsDuplicates.vue b/komga-webui/src/views/SettingsDuplicates.vue
index 3e73c093..0f7e542e 100644
--- a/komga-webui/src/views/SettingsDuplicates.vue
+++ b/komga-webui/src/views/SettingsDuplicates.vue
@@ -18,6 +18,28 @@
       <template v-slot:item.url="{ item }">
         <router-link :to="{name:'browse-book', params: {bookId: item.id}}">{{ item.url }}</router-link>
       </template>
+
+      <template v-slot:item.deleted="{ item }">
+        <v-chip
+          v-if="item.deleted"
+          label small color="error">
+          {{ $t('common.unavailable') }}
+        </v-chip>
+      </template>
+
+      <template v-slot:item.id="{ item }">
+        <v-btn
+          icon
+          color="error"
+          @click="promptDeleteBook(item)"
+        >
+          <v-icon>mdi-trash-can-outline</v-icon>
+        </v-btn>
+      </template>
+
+      <template v-slot:footer.prepend>
+        <v-btn icon @click="loadBooks"><v-icon>mdi-refresh</v-icon></v-btn>
+      </template>
     </v-data-table>
   </v-container>
 </template>
@@ -50,6 +72,8 @@ export default Vue.extend({
         {text: this.$i18n.t('duplicates.file_hash').toString(), value: 'fileHash'},
         {text: this.$i18n.t('duplicates.url').toString(), value: 'url', groupable: false},
         {text: this.$i18n.t('duplicates.size').toString(), value: 'size', groupable: false},
+        {text: '', value: 'deleted', groupable: false, sortable: false},
+        {text: this.$i18n.t('menu.delete').toString(), value: 'id', groupable: false},
       ]
     },
   },
@@ -78,6 +102,9 @@ export default Vue.extend({
 
       this.loading = false
     },
+    promptDeleteBook(book: BookDto) {
+      this.$store.dispatch('dialogDeleteBook', book)
+    },
   },
 })
 </script>