Fix performance issues with rendering on import

Signed-off-by: trivernis <trivernis@protonmail.com>

mediarepo-ui/src/app/models/AddFileOptions.ts

@@ -1,5 +1,5 @@
 export class AddFileOptions {
-  public read_tags_from_txt = false;
+  public read_tags_from_txt = true;
   public delete_after_import = false;
 
   constructor() {

mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/filesystem-import/filesystem-import.component.ts

@@ -13,6 +13,7 @@ import {File} from "../../../../../models/File";
 export class FilesystemImportComponent {
 
   @Output() fileImported = new EventEmitter<File>();
+  @Output() importFinished = new EventEmitter<void>();
 
   public fileCount: number = 0;
   public files: FileOsMetadata[] = [];
@@ -41,17 +42,22 @@ export class FilesystemImportComponent {
     this.importing = true;
 
     this.importingProgress = 0;
+    let count = 0;
+
     for (const file of this.files) {
       try {
-        const resultFile = await this.importService.addLocalFile(file, this.importOptions);
+        const resultFile = await this.importService.addLocalFile(file,
+          this.importOptions);
         this.fileImported.emit(resultFile);
       } catch (err) {
         console.log(err);
         this.errorBroker.showError(err);
       }
-        this.importingProgress++;
+      count++;
+      this.importingProgress = (count / this.fileCount) * 100;
     }
 
     this.importing = false;
+    this.importFinished.emit();
   }
 }

mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.html

@@ -12,7 +12,7 @@
           <mat-divider></mat-divider>
         </div>
         <div class="import-configuration" fxFlex fxFlexFill>
-          <app-filesystem-import (fileImported)="this.fileImported.emit($event)"></app-filesystem-import>
+          <app-filesystem-import (fileImported)="this.fileImported.emit($event)" (importFinished)="importFinished.emit()"></app-filesystem-import>
         </div>
       </div>
     </mat-tab>

mediarepo-ui/src/app/pages/home/import-tab/import-tab-sidebar/import-tab-sidebar.component.ts

@@ -16,5 +16,7 @@ import {File} from "../../../../models/File";
 export class ImportTabSidebarComponent {
 
   @Output() fileImported = new EventEmitter<File>();
+  @Output() importFinished = new EventEmitter<void>();
+
   constructor() { }
 }

mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.html

@@ -1,6 +1,6 @@
 <mat-drawer-container>
   <mat-drawer disableClose="true" mode="side" opened>
-    <app-import-tab-sidebar (fileImported)="this.addFileFromImport($event)"></app-import-tab-sidebar>
+    <app-import-tab-sidebar (fileImported)="this.addFileFromImport($event)" (importFinished)="this.refreshFileView()"></app-import-tab-sidebar>
   </mat-drawer>
   <mat-drawer-content>
     <app-file-grid [files]="this.files" ></app-file-grid>

mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import {Component} from '@angular/core';
 import {File} from "../../../models/File";
+import {FileService} from "../../../services/file/file.service";
 
 @Component({
   selector: 'app-import-tab',
@@ -10,11 +11,26 @@ export class ImportTabComponent {
 
   public files: File[] = [];
 
-  constructor() { }
+  constructor(private fileService: FileService) {
+  }
 
-  public addFileFromImport(file: File) {
+  /**
+   * Adds an imported file to the list of imported files
+   * @param {File} file
+   * @returns {Promise<void>}
+   */
+  public async addFileFromImport(file: File) {
     this.files.push(file);
-    this.files = [...this.files];
+    if (this.files.length % 50 === 0) {  // refresh every 50 pictures
+      this.refreshFileView();
+    }
   }
 
+  /**
+   * Refreshes the file view
+   * @returns {Promise<void>}
+   */
+  public refreshFileView() {
+    this.files = [...this.files];
+  }
 }