From 7ddbac95be63a3867d0d544e3d722b257cf1d19e Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Mon, 5 Jul 2021 10:14:59 +0800
Subject: [PATCH] fix(webui): show empty state if there's not books to import

---
 komga-webui/src/locales/en.json      |  4 +++-
 komga-webui/src/views/BookImport.vue | 14 +++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/komga-webui/src/locales/en.json b/komga-webui/src/locales/en.json
index d1d75d7c5..7993fe14e 100644
--- a/komga-webui/src/locales/en.json
+++ b/komga-webui/src/locales/en.json
@@ -51,6 +51,7 @@
     "field_import_path": "Import from folder",
     "info_part1": "This screen lets you import files that are outside your existing libraries. You can only import files into existing Series, in which case Komga will move or copy the files into the directory of the chosen Series.",
     "info_part2": "If you choose a number for a book, and a book already exists with that number, then you will be able to compare the 2 books. If you decide to import the book, Komga will upgrade the existing book with the new one, effectively replacing the old file with the new.",
+    "no_files_found": "No files found",
     "notification": {
       "go_to_book": "Go to book",
       "import_failure": "Failed to import book: {file}",
@@ -69,7 +70,8 @@
       "number": "Number",
       "series": "Series"
     },
-    "title": "Import"
+    "title": "Import",
+    "try_another_directory": "Try searching another directory"
   },
   "bookreader": {
     "beginning_of_book": "You're at the beginning of the book.",
diff --git a/komga-webui/src/views/BookImport.vue b/komga-webui/src/views/BookImport.vue
index 92e7431b6..7c51928e9 100644
--- a/komga-webui/src/views/BookImport.vue
+++ b/komga-webui/src/views/BookImport.vue
@@ -32,6 +32,14 @@
       </v-col>
     </v-row>
 
+    <empty-state
+      v-if="scanned && transientBooks.length === 0"
+      :title="$t('book_import.no_files_found')"
+      :sub-title="$t('book_import.try_another_directory')"
+      icon-color="secondary"
+      icon="mdi-book-search"
+      />
+
     <template v-if="transientBooks.length > 0">
       <v-divider/>
 
@@ -104,10 +112,11 @@ import {BookImportBatchDto, BookImportDto} from "@/types/komga-books";
 import {CopyMode} from "@/types/enum-books";
 import {convertErrorCodes} from "@/functions/error-codes";
 import {ERROR} from "@/types/events";
+import EmptyState from "@/components/EmptyState.vue";
 
 export default Vue.extend({
   name: 'BookImport',
-  components: {FileBrowserDialog, FileImportRow, SeriesPickerDialog},
+  components: {EmptyState, FileBrowserDialog, FileImportRow, SeriesPickerDialog},
   data: () => ({
     modalFileBrowser: false,
     modalSeriesPicker: false,
@@ -115,6 +124,7 @@ export default Vue.extend({
     selectedSeries: undefined as SeriesDto | undefined,
     payloads: [] as BookImportDto[],
     transientBooks: [] as TransientBookDto[],
+    scanned: false,
     copyMode: CopyMode.HARDLINK,
     importFinished: false,
   }),
@@ -161,8 +171,10 @@ export default Vue.extend({
   methods: {
     async scanBooks() {
       this.transientBooks = []
+      this.scanned = false
       try {
         this.transientBooks = await this.$komgaTransientBooks.scanForTransientBooks(this.importPath)
+        this.scanned = true
       } catch (e) {
         this.$eventHub.$emit(ERROR, {message: convertErrorCodes(e.message)} as ErrorEvent)
       }