Add file count to importing progress

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

mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.ts

@@ -1,10 +1,11 @@
-import {Component, EventEmitter, Input, Output} from "@angular/core";
+import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from "@angular/core";
 import {File} from "../../../../../api/models/File";
 
 @Component({
     selector: "app-import-tab-sidebar",
     templateUrl: "./import-tab-sidebar.component.html",
-    styleUrls: ["./import-tab-sidebar.component.scss"]
+    styleUrls: ["./import-tab-sidebar.component.scss"],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ImportTabSidebarComponent {
 

mediarepo-ui/src/app/components/core/import-tab/import-tab.component.ts

@@ -1,11 +1,12 @@
-import {Component, Input, OnInit} from "@angular/core";
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit} from "@angular/core";
 import {File} from "../../../../api/models/File";
 import {TabState} from "../../../models/TabState";
 
 @Component({
     selector: "app-import-tab",
     templateUrl: "./import-tab.component.html",
-    styleUrls: ["./import-tab.component.scss"]
+    styleUrls: ["./import-tab.component.scss"],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ImportTabComponent implements OnInit {
 
@@ -16,7 +17,7 @@ export class ImportTabComponent implements OnInit {
 
     private newFiles: File[] = [];
 
-    constructor() {
+    constructor(private changeDetector: ChangeDetectorRef) {
     }
 
     public ngOnInit(): void {
@@ -29,19 +30,8 @@ export class ImportTabComponent implements OnInit {
      * @returns {Promise<void>}
      */
     public async addFileFromImport(file: File) {
-        this.newFiles.push(file);
+        this.state.files.next([...this.state.files.value, file]);
-        if (this.newFiles.length % 50 === 0) {  // refresh every 50 pictures
+        this.changeDetector.markForCheck();
-            this.refreshFileView();
-        }
-    }
-
-    /**
-     * Refreshes the file view
-     * @returns {Promise<void>}
-     */
-    public refreshFileView() {
-        this.state.files.next([...this.state.files.value, ...this.newFiles]);
-        this.newFiles = [];
     }
 
     public onFileSelect(files: File[]) {
@@ -62,4 +52,8 @@ export class ImportTabComponent implements OnInit {
             return undefined;
         }
     }
+
+    public refreshFileView(): void {
+        this.changeDetector.markForCheck();
+    }
 }

mediarepo-ui/src/app/components/shared/sidebar/file-import/file-import.component.ts

@@ -1,10 +1,11 @@
-import {Component, EventEmitter, Output} from "@angular/core";
+import {ChangeDetectionStrategy, Component, EventEmitter, Output} from "@angular/core";
 import {File} from "../../../../../api/models/File";
 
 @Component({
     selector: "app-file-import",
     templateUrl: "./file-import.component.html",
-    styleUrls: ["./file-import.component.scss"]
+    styleUrls: ["./file-import.component.scss"],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FileImportComponent {
 

mediarepo-ui/src/app/components/shared/sidebar/file-import/filesystem-import/filesystem-import.component.html

@@ -29,7 +29,7 @@
 
 <button (click)="import()" [disabled]="importing || this.fileCount === 0" class="import-button" color="primary"
         mat-flat-button>
-    {{importing ? "Importing..." : "Import"}}
+    {{importing ? "Importing... (" + this.importingProgressTotal + "/" + this.fileCount + ")" : "Import"}}
 </button>
 <mat-progress-bar *ngIf="importing" [value]="this.importingProgress" color="primary"
                   mode="determinate"></mat-progress-bar>

mediarepo-ui/src/app/components/shared/sidebar/file-import/filesystem-import/filesystem-import.component.ts

@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Output} from "@angular/core";
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Output} from "@angular/core";
 import {ImportService} from "../../../../../services/import/import.service";
 import {LoggingService} from "../../../../../services/logging/logging.service";
 import {AddFileOptions} from "../../../../../models/AddFileOptions";
@@ -9,7 +9,8 @@ import {FileOsMetadata} from "../../../../../../api/api-types/files";
 @Component({
     selector: "app-filesystem-import",
     templateUrl: "./filesystem-import.component.html",
-    styleUrls: ["./filesystem-import.component.scss"]
+    styleUrls: ["./filesystem-import.component.scss"],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FilesystemImportComponent {
 
@@ -35,11 +36,17 @@ export class FilesystemImportComponent {
     public resolving = false;
     public importing = false;
     public importingProgress = 0;
+    public importingProgressTotal = 0;
 
-    constructor(private errorBroker: LoggingService, private importService: ImportService) {
+    constructor(
+        private changeDetector: ChangeDetectorRef,
+        private errorBroker: LoggingService,
+        private importService: ImportService
+    ) {
     }
 
     public async setSelectedPaths(paths: string[]) {
+        this.changeDetector.markForCheck();
         this.resolving = true;
         try {
             this.files = await this.importService.resolvePathsToFiles(paths);
@@ -49,6 +56,7 @@ export class FilesystemImportComponent {
             this.errorBroker.error(err);
         }
         this.resolving = false;
+        this.changeDetector.markForCheck();
     }
 
     public async import() {
@@ -70,6 +78,7 @@ export class FilesystemImportComponent {
             }
             count++;
             this.importingProgress = (count / this.fileCount) * 100;
+            this.importingProgressTotal = count;
         }
 
         this.importing = false;