feat(webui): allow CBL import with partial matching

Closes: #1086
gotson · Mar 14, 2023 · 3a7d305 · 3a7d305
1 parent 6a90e10
commit 3a7d305
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 7 deletions.
diff --git a/komga-webui/src/locales/en.json b/komga-webui/src/locales/en.json
@@ -258,6 +258,11 @@
     "button_import": "Import",
     "button_match": "Match",
     "comicrack_preambule_html": "You can import existing ComicRack Reading Lists in <code>.cbl</code> format.<br/>Komga will try to match the provided series and book number with series and books in your libraries.",
+    "dialog_confirmation": {
+      "body": "{unmatched} / {total} books are unmatched",
+      "create": "Create anyway",
+      "title": "Some books are not matched"
+    },
     "field_file_label": "ComicRack Reading List (.cbl)",
     "field_files_label": "ComicRack Reading Lists (.cbl)",
     "import_read_lists": "Import Read Lists",

diff --git a/komga-webui/src/views/ImportReadList.vue b/komga-webui/src/views/ImportReadList.vue
@@ -86,7 +86,7 @@
 
           <v-col cols="auto">
             <v-btn :color="creationFinished ? 'success': 'primary'"
-                   @click="create"
+                   @click="create(false)"
                    :disabled="$v.$invalid"
             >
               <v-icon left v-if="creationFinished">mdi-check</v-icon>
@@ -95,6 +95,12 @@
           </v-col>
         </v-row>
       </form>
+      <confirmation-dialog :title="$t('data_import.dialog_confirmation.title')"
+                           :button-confirm="$t('data_import.dialog_confirmation.create')"
+                           :body="missingDialogText"
+                           v-model="modalConfirmation"
+                           @confirm="create(true)"
+      />
     </template>
   </v-container>
 </template>
@@ -111,9 +117,11 @@ import {
 import ReadListMatchRow from '@/components/ReadListMatchRow.vue'
 import {ERROR, NOTIFICATION, NotificationEvent} from '@/types/events'
 import {helpers, required} from 'vuelidate/lib/validators'
+import ConfirmationDialog from '@/components/dialogs/ConfirmationDialog.vue'
 
-function validBookIds(this: any, value: any[]) {
-  return value.filter(Boolean).length === this.result.requests.length && value.filter(Boolean).length === [...new Set(value)].length
+function duplicateBooks(this: any, value: any[]) {
+  const ids = value.filter(Boolean).map(b => b.bookId)
+  return ids.length === [...new Set(ids)].length
 }
 
 function validName(this: any, value: string) {
@@ -122,7 +130,7 @@ function validName(this: any, value: string) {
 
 export default Vue.extend({
   name: 'ImportReadLists',
-  components: {ReadListMatchRow},
+  components: {ConfirmationDialog, ReadListMatchRow},
   data: () => ({
     file: undefined,
     result: undefined as unknown as ReadListRequestMatchDto | undefined,
@@ -138,16 +146,23 @@ export default Vue.extend({
     readLists: [] as ReadListDto[],
     creationFinished: false,
     matching: false,
+    modalConfirmation: false,
   }),
   validations: {
     form: {
       name: {required, validName},
       ordered: {},
       summary: {},
-      books: {validBookIds},
+      books: {duplicateBooks},
     },
   },
   computed: {
+    missingDialogText(): string {
+      const total = this.result!!.requests.length
+      const matched = this.form.books.filter(Boolean).length
+      const unmatched = total - matched
+      return this.$t('data_import.dialog_confirmation.body', {unmatched: unmatched, total: total}).toString()
+    },
     importRules(): any {
       return [
         (value: any) => {
@@ -166,7 +181,6 @@ export default Vue.extend({
   async mounted() {
     this.readLists = (await this.$komgaReadLists.getReadLists(undefined, {unpaged: true} as PageRequest)).content
   },
-  watch: {},
   methods: {
     isDuplicateBook(book: ReadListRequestBookMatchBookDto): boolean {
       return this.form.books.filter((b) => b?.bookId === book?.bookId).length > 1
@@ -201,8 +215,12 @@ export default Vue.extend({
         summary: this.form.summary,
       }
     },
-    async create() {
+    async create(bypassMissing: boolean) {
       if (!this.creationFinished) {
+        if (!bypassMissing && this.form.books.filter(Boolean).length !== this.result?.requests.length) {
+          this.modalConfirmation = true
+          return
+        }
         const toCreate = this.validateForm()
         if (!toCreate) return