diff --git a/mediarepo-ui/src/app/components/core/core.component.html b/mediarepo-ui/src/app/components/core/core.component.html index a5330f1..3b84d6d 100644 --- a/mediarepo-ui/src/app/components/core/core.component.html +++ b/mediarepo-ui/src/app/components/core/core.component.html @@ -12,8 +12,10 @@ - - + + + +
diff --git a/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.html b/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.html index e32d9e9..ae84d3d 100644 --- a/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.html +++ b/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.html @@ -6,7 +6,7 @@ - + diff --git a/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.ts b/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.ts index 628670f..8d8d89e 100644 --- a/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.ts +++ b/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.ts @@ -24,5 +24,20 @@ export class FilesTabComponent implements OnInit { async onFileSelect(files: File[]) { this.selectedFiles = files; + if (files.length === 1) { + this.state.selectedFileHash.next(files[0].hash); + } else { + this.state.selectedFileHash.next(undefined); + } + } + + public getStateSelectedFile(): File | undefined { + const hash = this.state.selectedFileHash.value; + + if (hash) { + return this.files.find(f => f.hash === hash); + } else { + return undefined; + } } } diff --git a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.html b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.html index d12f2ee..ca0ec50 100644 --- a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.html +++ b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.html @@ -5,7 +5,7 @@
-
diff --git a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-multiview.component.html b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-multiview.component.html index a2be8f0..031048b 100644 --- a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-multiview.component.html +++ b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-multiview.component.html @@ -1,7 +1,7 @@ - diff --git a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-multiview.component.ts b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-multiview.component.ts index e6d046f..c5f65e2 100644 --- a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-multiview.component.ts +++ b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-multiview.component.ts @@ -22,12 +22,13 @@ export class FileMultiviewComponent { @Output() fileOpenEvent = new EventEmitter(); @Output() fileSelectEvent = new EventEmitter(); + @Output() modeChangeEvent = new EventEmitter<"grid"|"gallery">(); @ViewChild(FileGalleryComponent) fileGallery!: FileGalleryComponent; @ViewChild(FileGridComponent) fileGrid!: FileGridComponent; public selectedFiles: File[] = []; - public preselectedFile: File | undefined; + @Input() public preselectedFile: File | undefined; constructor() { } @@ -38,7 +39,7 @@ export class FileMultiviewComponent { this.fileSelectEvent.emit(this.selectedFiles); } - public onSinglefileSelect(file: File | undefined): void { + public onSingleFileSelect(file: File | undefined): void { if (file) { this.selectedFiles = [file]; this.preselectedFile = file; @@ -50,7 +51,12 @@ export class FileMultiviewComponent { public onFileOpen(file: File): void { this.preselectedFile = file; - this.mode = "gallery"; + this.setMode("gallery") this.fileOpenEvent.emit(file); } + + public setMode(mode: "grid" | "gallery") { + this.mode = mode; + this.modeChangeEvent.emit(mode); + } } diff --git a/mediarepo-ui/src/app/models/TabState.rs.ts b/mediarepo-ui/src/app/models/TabState.rs.ts index 0105ddf..0286b40 100644 --- a/mediarepo-ui/src/app/models/TabState.rs.ts +++ b/mediarepo-ui/src/app/models/TabState.rs.ts @@ -14,6 +14,9 @@ import {TagQuery} from "./TagQuery"; export class TabState { public uuid: number; public category: TabCategory; + public mode = new BehaviorSubject<"grid" | "gallery">("grid"); + public selectedFileHash = new BehaviorSubject(undefined); + public files = new BehaviorSubject([]); public filters = new BehaviorSubject([]); public sortKeys = new BehaviorSubject( @@ -60,6 +63,8 @@ export class TabState { ); state.filters.next(filters); state.sortKeys.next(sortKeys); + state.mode.next(dto.mode ?? "grid"); + state.selectedFileHash.next(dto.selectedFileHash) return state } @@ -70,6 +75,8 @@ export class TabState { category: this.category, filters: this.filters.value, sortKeys: this.sortKeys.value, + mode: this.mode.value, + selectedFileHash: this.selectedFileHash.value }; } } diff --git a/mediarepo-ui/src/app/services/state/state.service.ts b/mediarepo-ui/src/app/services/state/state.service.ts index d6816f1..8ea1457 100644 --- a/mediarepo-ui/src/app/services/state/state.service.ts +++ b/mediarepo-ui/src/app/services/state/state.service.ts @@ -29,7 +29,8 @@ export class StateService { this.state.next(state); } }); - this.stateChange.pipe(debounceTime(1000)).subscribe(async () => this.saveState()); + this.stateChange.pipe(debounceTime(1000)) + .subscribe(async () => this.saveState()); } /** @@ -63,6 +64,10 @@ export class StateService { .subscribe(() => this.stateChange.next())); this.tabSubscriptions.push(tab.sortKeys .subscribe(() => this.stateChange.next())); + this.tabSubscriptions.push( + tab.selectedFileHash.subscribe(() => this.stateChange.next())); + this.tabSubscriptions.push( + tab.mode.subscribe(() => this.stateChange.next())) } /**