Fix import tab aborting when tab is changed

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

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

@@ -1,8 +1,8 @@
 <div class="import-tab-inner">
     <mat-tab-group headerPosition="below">
         <mat-tab label="Import">
-            <app-file-import (fileImported)="fileImported.emit($event)"
+            <app-file-import
-                             (importFinished)="importFinished.emit($event)"></app-file-import>
+                [state]="this.state"></app-file-import>
         </mat-tab>
         <mat-tab *ngIf="selectedFiles.length > 0" label="Edit Tags">
             <app-tag-edit [files]="selectedFiles"></app-tag-edit>

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

@@ -1,5 +1,6 @@
 import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from "@angular/core";
 import {File} from "../../../../../api/models/File";
+import {ImportTabState} from "../../../../models/state/ImportTabState";
 
 @Component({
     selector: "app-import-tab-sidebar",
@@ -9,6 +10,7 @@ import {File} from "../../../../../api/models/File";
 })
 export class ImportTabSidebarComponent {
 
+    @Input() state!: ImportTabState;
     @Input() selectedFiles: File[] = [];
     @Output() fileImported = new EventEmitter<File>();
     @Output() importFinished = new EventEmitter<void>();

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

@@ -1,8 +1,8 @@
 <app-drawer-page>
     <app-drawer-page-side>
-        <app-import-tab-sidebar (fileImported)="this.addFileFromImport($event)"
+        <app-import-tab-sidebar
-                                (importFinished)="this.refreshFileView()"
+            [selectedFiles]="selectedFiles"
-                                [selectedFiles]="selectedFiles"></app-import-tab-sidebar>
+            [state]="this.state"></app-import-tab-sidebar>
     </app-drawer-page-side>
     <app-drawer-page-content>
         <app-file-multiview (fileSelectEvent)="this.onFileSelect($event)"

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

@@ -22,15 +22,6 @@ export class ImportTabComponent implements OnInit {
         this.state.files.subscribe(files => files ? this.files = files : undefined);
     }
 
-    /**
-     * Adds an imported file to the list of imported files
-     * @param {File} file
-     * @returns {Promise<void>}
-     */
-    public async addFileFromImport(file: File) {
-        this.state.files.next([...this.state.files.value, file]);
-        this.changeDetector.markForCheck();
-    }
 
     public onFileSelect(files: File[]) {
         this.selectedFiles = files;
@@ -50,8 +41,4 @@ 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.html

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

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

@@ -1,5 +1,5 @@
-import {ChangeDetectionStrategy, Component, EventEmitter, Output} from "@angular/core";
+import {ChangeDetectionStrategy, Component, Input} from "@angular/core";
-import {File} from "../../../../../api/models/File";
+import {ImportTabState} from "../../../../models/state/ImportTabState";
 
 @Component({
     selector: "app-file-import",
@@ -9,8 +9,7 @@ import {File} from "../../../../../api/models/File";
 })
 export class FileImportComponent {
 
-    @Output() fileImported = new EventEmitter<File>();
+    @Input() state!: ImportTabState;
-    @Output() importFinished = new EventEmitter<void>();
 
     constructor() {
     }

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

@@ -1,10 +1,10 @@
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Output} from "@angular/core";
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit} from "@angular/core";
 import {ImportService} from "../../../../../services/import/import.service";
 import {LoggingService} from "../../../../../services/logging/logging.service";
 import {AddFileOptions} from "../../../../../models/AddFileOptions";
-import {File} from "../../../../../../api/models/File";
 import {DialogFilter} from "@tauri-apps/api/dialog";
 import {FileOsMetadata} from "../../../../../../api/api-types/files";
+import {ImportTabState} from "../../../../../models/state/ImportTabState";
 
 @Component({
     selector: "app-filesystem-import",
@@ -12,10 +12,9 @@ import {FileOsMetadata} from "../../../../../../api/api-types/files";
     styleUrls: ["./filesystem-import.component.scss"],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class FilesystemImportComponent {
+export class FilesystemImportComponent implements OnInit {
 
-    @Output() fileImported = new EventEmitter<File>();
+    @Input() state!: ImportTabState;
-    @Output() importFinished = new EventEmitter<void>();
 
     public fileCount: number = 0;
     public files: FileOsMetadata[] = [];
@@ -45,12 +44,30 @@ export class FilesystemImportComponent {
     ) {
     }
 
+    public ngOnInit(): void {
+        this.state.selectedPaths.subscribe(paths => {
+            this.files = paths;
+            this.fileCount = paths.length;
+        });
+        this.state.importing.subscribe(importing => {
+            this.importing = importing;
+            this.changeDetector.markForCheck();
+        });
+        this.state.importedCount.subscribe(count => {
+            this.importingProgressTotal = count;
+        });
+        this.state.importingProgress.subscribe(prog => {
+            this.importingProgress = prog;
+            this.changeDetector.markForCheck();
+        });
+    }
+
     public async setSelectedPaths(paths: string[]) {
         this.changeDetector.markForCheck();
         this.resolving = true;
         try {
-            this.files = await this.importService.resolvePathsToFiles(paths);
+            const selectedPaths = await this.importService.resolvePathsToFiles(paths);
-            this.fileCount = this.files.length;
+            this.state.selectedPaths.next(selectedPaths);
         } catch (err: any) {
             console.log(err);
             this.errorBroker.error(err);
@@ -60,7 +77,7 @@ export class FilesystemImportComponent {
     }
 
     public async import() {
-        this.importing = true;
+        this.state.importing.next(true);
 
         this.importingProgress = 0;
         let count = 0;
@@ -71,17 +88,17 @@ export class FilesystemImportComponent {
                     file,
                     this.importOptions
                 );
-                this.fileImported.emit(resultFile);
+                this.state.addImportedFile(resultFile);
             } catch (err: any) {
                 console.log(err);
                 this.errorBroker.error(err);
             }
             count++;
-            this.importingProgress = (count / this.fileCount) * 100;
+            this.state.importedCount.next(count);
-            this.importingProgressTotal = count;
+            this.state.importingProgress.next((count / this.fileCount) * 100);
         }
 
-        this.importing = false;
+        this.state.importing.next(false);
-        this.importFinished.emit();
+        this.state.selectedPaths.next([]);
     }
 }

mediarepo-ui/src/app/models/state/ImportTabState.ts

@@ -4,12 +4,13 @@ import {StateServices} from "./StateServices";
 import {TabCategory} from "./TabCategory";
 import {BehaviorSubject} from "rxjs";
 import {File} from "../../../api/models/File";
-import {FileBasicData} from "../../../api/api-types/files";
+import {FileBasicData, FileOsMetadata} from "../../../api/api-types/files";
 import {mapNew} from "../../../api/models/adaptors";
 
 export type ImportTabSaveState = {
     selectedCd: string | undefined,
     mode: "grid" | "gallery",
+    selectedPaths: FileOsMetadata[],
     files: FileBasicData[],
 } & TabSaveState;
 
@@ -18,16 +19,27 @@ export class ImportTabState extends TabState implements SaveState<ImportTabSaveS
     public mode = new BehaviorSubject<"grid" | "gallery">("grid");
     public selectedCD = new BehaviorSubject<string | undefined>(undefined);
     public files = new BehaviorSubject<File[]>([]);
+    public selectedPaths = new BehaviorSubject<FileOsMetadata[]>([]);
+
+    // used when files are being imported
+    public importing = new BehaviorSubject<boolean>(false);
+    public importingProgress = new BehaviorSubject<number>(0);
+    public importedCount = new BehaviorSubject<number>(0);
 
     constructor(uuid: number, services: StateServices) {
         super(uuid, TabCategory.Import, services);
     }
 
+    public addImportedFile(file: File) {
+        this.files.next([...this.files.value, file]);
+    }
+
     public restoreSaveState(state: ImportTabSaveState) {
         super.restoreSaveState(state);
         this.selectedCD = new BehaviorSubject<string | undefined>(state.selectedCd);
-        this.files = new BehaviorSubject<File[]>(state.files.map(mapNew(File)));
+        this.files = new BehaviorSubject<File[]>(state.files.map(mapNew(File)) ?? []);
-        this.mode = new BehaviorSubject<"grid" | "gallery">(state.mode);
+        this.mode = new BehaviorSubject<"grid" | "gallery">(state.mode ?? "grid");
+        this.selectedPaths = new BehaviorSubject<FileOsMetadata[]>(state.selectedPaths ?? []);
 
         return self;
     }
@@ -38,7 +50,8 @@ export class ImportTabState extends TabState implements SaveState<ImportTabSaveS
             category: this.category,
             selectedCd: this.selectedCD.value,
             files: this.files.value.map(f => f.rawData),
-            mode: this.mode.value
+            mode: this.mode.value,
+            selectedPaths: this.selectedPaths.value,
         };
     }
 }

mediarepo-ui/src/app/services/state/state.service.ts

@@ -79,6 +79,7 @@ export class StateService {
             tabs.forEach((tab) => this.subscribeToTab(tab));
             this.stateChange.next();
         });
+        state.selectedTab.subscribe(() => this.stateChange.next());
     }
 
     private subscribeToTab(tab: TabState) {