Improve notifications for import / index

Signed-off-by: Michael Mayer <michael@liquidbytes.net>

assets/resources/templates/index.tmpl

@@ -64,6 +64,8 @@
   </div>
 </div>
 
+<div id="p-busy-overlay"></div>
+
 <script src="/static/build/app.js?{{ .jsHash }}"></script>
 </body>
 </html>

frontend/src/common/notify.js

@@ -18,6 +18,20 @@ const Notify = {
     },
     ajaxEnd: function() {
         Event.publish("ajax.end");
+    },
+    blockUI: function() {
+        const el = document.getElementById('p-busy-overlay');
+
+        if(el) {
+            el.style.display = 'block';
+        }
+    },
+    unblockUI: function() {
+        const el = document.getElementById('p-busy-overlay');
+
+        if(el) {
+            el.style.display = 'none';
+        }
     }
 };
 

frontend/src/component/p-loading-bar.vue

@@ -57,10 +57,6 @@
         },
 
         mounted () {
-            const overlay = document.createElement("div");
-            overlay.id = 'p-busy-overlay';
-            document.body.appendChild(overlay);
-
             let stackSize = 0;
 
             this.$event.subscribe('ajax.start', function () {
@@ -68,7 +64,6 @@
 
                 if(stackSize === 1) {
                     this.start();
-                    document.getElementById('p-busy-overlay').style.display = 'block';
                 }
             }.bind(this));
 
@@ -77,7 +72,6 @@
 
                 if (stackSize === 0) {
                     this.done();
-                    document.getElementById('p-busy-overlay').style.display = 'none';
                 }
             }.bind(this));
         },

frontend/src/pages/library/import.vue

@@ -3,7 +3,7 @@
         <v-form ref="form" class="p-photo-import" lazy-validation @submit.prevent="submit" dense>
             <v-container fluid>
                 <p class="subheading">
-                    <span v-if="fileName">Indexed {{ fileName}}...</span>
+                    <span v-if="fileName">Importing {{ fileName }}...</span>
                     <span v-else-if="busy">Importing files from directory...</span>
                     <span v-else-if="completed">Done.</span>
                     <span v-else>Press button to import photos from directory...</span>
@@ -71,7 +71,7 @@
                     case 'file':
                         this.busy = true;
                         this.completed = 0;
-                        this.fileName = data.fileName;
+                        this.fileName = data.baseName;
                         break;
                     case 'completed':
                         this.busy = false;

frontend/src/pages/library/upload.vue

@@ -68,7 +68,7 @@
                 }
 
                 Notify.info("Uploading photos...");
-                Notify.ajaxStart();
+                Notify.blockUI();
 
                 async function performUpload(ctx) {
                     for (let i = 0; i < ctx.selected.length; i++) {
@@ -99,16 +99,16 @@
                     const ctx = this;
 
                     Api.post('import/upload/' + this.started).then(function () {
+                        Notify.unblockUI();
                         Notify.success("Upload complete");
                         ctx.busy = false;
                         ctx.indexing = false;
                     }).catch(function () {
+                        Notify.unblockUI();
                         Notify.error("Failure while importing uploaded files");
                         ctx.busy = false;
                         ctx.indexing = false;
                     });
-
-                    Notify.ajaxEnd();
                 });
             },
         }

internal/api/import.go

@@ -58,6 +58,7 @@ func Import(router *gin.RouterGroup, conf *config.Config) {
 
 		event.Success(fmt.Sprintf("import completed in %d s", elapsed))
 		event.Publish("import.completed", event.Data{"path": path, "seconds": elapsed})
+		event.Publish("index.completed", event.Data{"path": path, "seconds": elapsed})
 		event.Publish("config.updated", event.Data(conf.ClientConfig()))
 
 		c.JSON(http.StatusOK, gin.H{"message": fmt.Sprintf("import completed in %d s", elapsed)})

internal/photoprism/importer.go

@@ -86,6 +86,7 @@ func (i *Importer) ImportPhotosFromDirectory(importPath string) {
 
 		event.Publish("import.file", event.Data{
 			"fileName": mainFile.Filename(),
+			"baseName": filepath.Base(mainFile.Filename()),
 		})
 
 		for _, relatedMediaFile := range relatedFiles {

internal/photoprism/indexer.go

@@ -344,6 +344,7 @@ func (i *Indexer) indexMediaFile(mediaFile *MediaFile) string {
 		"filePrimary": file.FilePrimary,
 		"fileMissing":  file.FileMissing,
 		"fileName": file.FileName,
+		"baseName": filepath.Base(file.FileName),
 		"fileHash": file.FileHash,
 		"fileType": file.FileType,
 		"fileMime": file.FileMime,