diff --git a/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.html b/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.html index 8d5025a..1e8e1c8 100644 --- a/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.html +++ b/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.html @@ -1,8 +1,8 @@
- + diff --git a/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.ts b/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.ts index 9aa7ef8..5b07abe 100644 --- a/mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.ts +++ b/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(); @Output() importFinished = new EventEmitter(); diff --git a/mediarepo-ui/src/app/components/core/import-tab/import-tab.component.html b/mediarepo-ui/src/app/components/core/import-tab/import-tab.component.html index 45693c7..bd12781 100644 --- a/mediarepo-ui/src/app/components/core/import-tab/import-tab.component.html +++ b/mediarepo-ui/src/app/components/core/import-tab/import-tab.component.html @@ -1,8 +1,8 @@ - + files ? this.files = files : undefined); } - /** - * Adds an imported file to the list of imported files - * @param {File} file - * @returns {Promise} - */ - 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(); - } } diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-import/file-import.component.html b/mediarepo-ui/src/app/components/shared/sidebar/file-import/file-import.component.html index 39a6bad..a6dd918 100644 --- a/mediarepo-ui/src/app/components/shared/sidebar/file-import/file-import.component.html +++ b/mediarepo-ui/src/app/components/shared/sidebar/file-import/file-import.component.html @@ -9,7 +9,7 @@
- +
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-import/file-import.component.ts b/mediarepo-ui/src/app/components/shared/sidebar/file-import/file-import.component.ts index 7534118..cee7ddc 100644 --- a/mediarepo-ui/src/app/components/shared/sidebar/file-import/file-import.component.ts +++ b/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 {File} from "../../../../../api/models/File"; +import {ChangeDetectionStrategy, Component, Input} from "@angular/core"; +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(); - @Output() importFinished = new EventEmitter(); + @Input() state!: ImportTabState; constructor() { } diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-import/filesystem-import/filesystem-import.component.ts b/mediarepo-ui/src/app/components/shared/sidebar/file-import/filesystem-import/filesystem-import.component.ts index 4cb950b..59bef6c 100644 --- a/mediarepo-ui/src/app/components/shared/sidebar/file-import/filesystem-import/filesystem-import.component.ts +++ b/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(); - @Output() importFinished = new EventEmitter(); + @Input() state!: ImportTabState; 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); - this.fileCount = this.files.length; + const selectedPaths = await this.importService.resolvePathsToFiles(paths); + 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.importingProgressTotal = count; + this.state.importedCount.next(count); + this.state.importingProgress.next((count / this.fileCount) * 100); } - this.importing = false; - this.importFinished.emit(); + this.state.importing.next(false); + this.state.selectedPaths.next([]); } } diff --git a/mediarepo-ui/src/app/models/state/ImportTabState.ts b/mediarepo-ui/src/app/models/state/ImportTabState.ts index dcda802..61bfe7f 100644 --- a/mediarepo-ui/src/app/models/state/ImportTabState.ts +++ b/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("grid"); public selectedCD = new BehaviorSubject(undefined); public files = new BehaviorSubject([]); + public selectedPaths = new BehaviorSubject([]); + + // used when files are being imported + public importing = new BehaviorSubject(false); + public importingProgress = new BehaviorSubject(0); + public importedCount = new BehaviorSubject(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(state.selectedCd); - this.files = new BehaviorSubject(state.files.map(mapNew(File))); - this.mode = new BehaviorSubject<"grid" | "gallery">(state.mode); + this.files = new BehaviorSubject(state.files.map(mapNew(File)) ?? []); + this.mode = new BehaviorSubject<"grid" | "gallery">(state.mode ?? "grid"); + this.selectedPaths = new BehaviorSubject(state.selectedPaths ?? []); return self; } @@ -38,7 +50,8 @@ export class ImportTabState extends TabState implements SaveState f.rawData), - mode: this.mode.value + mode: this.mode.value, + selectedPaths: this.selectedPaths.value, }; } } diff --git a/mediarepo-ui/src/app/services/state/state.service.ts b/mediarepo-ui/src/app/services/state/state.service.ts index a11ae49..36b2f32 100644 --- a/mediarepo-ui/src/app/services/state/state.service.ts +++ b/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) {