Add mode and selected file to state

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

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

@@ -12,8 +12,10 @@
                     </button>
                 </div>
             </ng-template>
-            <app-files-tab *ngIf="tab.category === 'Files'" [state]="tab"></app-files-tab>
-            <app-import-tab *ngIf="tab.category === 'Import'" [state]="tab"></app-import-tab>
+            <ng-template matTabContent>
+                <app-files-tab *ngIf="tab.category === 'Files'" [state]="tab"></app-files-tab>
+                <app-import-tab *ngIf="tab.category === 'Import'" [state]="tab"></app-import-tab>
+            </ng-template>
         </mat-tab>
         <mat-tab *ngIf="this.newTab" label="New Tab">
             <div class="new-tab-content">

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

@@ -6,7 +6,7 @@
     </mat-drawer>
     <mat-drawer-content>
         <app-busy-indicator [blurBackground]="true" [busy]="contentLoading">
-            <app-file-multiview (fileSelectEvent)="this.onFileSelect($event)" [files]="this.files"></app-file-multiview>
+            <app-file-multiview [mode]="state.mode.value" (modeChangeEvent)="state.mode.next($event)" (fileSelectEvent)="this.onFileSelect($event)" [files]="this.files" [preselectedFile]="this.getStateSelectedFile()"></app-file-multiview>
         </app-busy-indicator>
     </mat-drawer-content>
 </mat-drawer-container>

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;
+        }
     }
 }

mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.html

@@ -5,7 +5,7 @@
     <div (dblclick)="this.selectedFile? this.fileDblClickEvent.emit(this.selectedFile.data) : null"
          class="file-full-view"
          fxFlex="80%">
-        <app-content-viewer
+        <app-content-viewer *ngIf="this.selectedFile"
             (contextmenu)="this.selectedFile && fileContextMenu.onContextMenu($event, this.selectedFile!.data)"
             [file]="this.selectedFile!.data"></app-content-viewer>
     </div>

mediarepo-ui/src/app/components/shared/file/file-multiview/file-multiview.component.html

@@ -1,7 +1,7 @@
 <app-file-grid #fileGrid (fileOpenEvent)="this.onFileOpen($event)" (fileSelectEvent)="this.onFileSelect($event)"
                *ngIf="this.mode === 'grid'"
                [files]="this.files" [preselectedFile]="this.preselectedFile"></app-file-grid>
-<app-file-gallery #fileGallery (closeEvent)="this.mode = 'grid'" (fileSelectEvent)="this.onSinglefileSelect($event)"
+<app-file-gallery #fileGallery (closeEvent)="this.setMode('grid')" (fileSelectEvent)="this.onSingleFileSelect($event)"
                   *ngIf="this.mode === 'gallery'"
                   [files]="this.files"
                   [preselectedFile]="this.preselectedFile"></app-file-gallery>

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

@@ -22,12 +22,13 @@ export class FileMultiviewComponent {
 
     @Output() fileOpenEvent = new EventEmitter<File>();
     @Output() fileSelectEvent = new EventEmitter<File[]>();
+    @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);
+    }
 }

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<string | undefined>(undefined);
+
     public files = new BehaviorSubject<File[]>([]);
     public filters = new BehaviorSubject<FilterExpression[]>([]);
     public sortKeys = new BehaviorSubject<SortKey[]>(
@@ -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
         };
     }
 }

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()))
     }
 
     /**