From f4ba0be045ab43cf41392da98394c093eb3a57da Mon Sep 17 00:00:00 2001
From: Trivernis <trivernis@protonmail.com>
Date: Sat, 25 Dec 2021 21:01:54 +0100
Subject: [PATCH] Fix some state related issues

Signed-off-by: Trivernis <trivernis@protonmail.com>
---
 mediarepo-ui/src-tauri/tauri.conf.json        |  2 +-
 .../app/components/core/core.component.html   |  2 +-
 .../src/app/components/core/core.component.ts |  2 +-
 .../files-tab-sidebar.component.ts            |  2 +-
 .../core/files-tab/files-tab.component.html   |  2 +-
 .../core/files-tab/files-tab.component.ts     | 11 +++++-
 .../core/import-tab/import-tab.component.html |  4 ++-
 .../core/import-tab/import-tab.component.ts   | 34 +++++++++++++++----
 .../file-search/file-search.component.ts      |  2 +-
 mediarepo-ui/src/app/models/AppState.ts       |  2 +-
 .../models/{TabState.rs.ts => TabState.ts}    | 23 ++++++++-----
 .../src/app/services/state/state.service.ts   |  3 +-
 12 files changed, 65 insertions(+), 24 deletions(-)
 rename mediarepo-ui/src/app/models/{TabState.rs.ts => TabState.ts} (79%)

diff --git a/mediarepo-ui/src-tauri/tauri.conf.json b/mediarepo-ui/src-tauri/tauri.conf.json
index 1a861e8..c2aff7c 100644
--- a/mediarepo-ui/src-tauri/tauri.conf.json
+++ b/mediarepo-ui/src-tauri/tauri.conf.json
@@ -60,7 +60,7 @@
         },
         "windows": [
             {
-                "title": "Mediarepo",
+                "title": "mediarepo",
                 "width": 1920,
                 "height": 1080,
                 "resizable": true,
diff --git a/mediarepo-ui/src/app/components/core/core.component.html b/mediarepo-ui/src/app/components/core/core.component.html
index 3b84d6d..551b53a 100644
--- a/mediarepo-ui/src/app/components/core/core.component.html
+++ b/mediarepo-ui/src/app/components/core/core.component.html
@@ -1,5 +1,5 @@
 <div id="content">
-    <mat-tab-group #tabGroup (selectedTabChange)="this.onTabSelectionChange($event)" class="main-tab-group">
+    <mat-tab-group #tabGroup (selectedTabChange)="this.onTabSelectionChange($event)" class="main-tab-group" animationDuration="0">
         <mat-tab label="Repositories">
             <app-repositories-tab></app-repositories-tab>
         </mat-tab>
diff --git a/mediarepo-ui/src/app/components/core/core.component.ts b/mediarepo-ui/src/app/components/core/core.component.ts
index a6036b9..4379138 100644
--- a/mediarepo-ui/src/app/components/core/core.component.ts
+++ b/mediarepo-ui/src/app/components/core/core.component.ts
@@ -5,7 +5,7 @@ import {MatTabChangeEvent, MatTabGroup} from "@angular/material/tabs";
 import {TagService} from "../../services/tag/tag.service";
 import {TabService} from "../../services/tab/tab.service";
 import {TabCategory} from "../../models/TabCategory";
-import {TabState} from "../../models/TabState.rs";
+import {TabState} from "../../models/TabState";
 import {AppState} from "../../models/AppState";
 import {StateService} from "../../services/state/state.service";
 
diff --git a/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.ts b/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.ts
index 3b32c30..c9577ec 100644
--- a/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.ts
+++ b/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.ts
@@ -20,7 +20,7 @@ import {
 import {
     TagEditComponent
 } from "../../../shared/sidebar/tag-edit/tag-edit.component";
-import {TabState} from "../../../../models/TabState.rs";
+import {TabState} from "../../../../models/TabState";
 
 @Component({
     selector: "app-files-tab-sidebar",
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 ae84d3d..b058cac 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
@@ -1,4 +1,4 @@
-<mat-drawer-container autosize>
+<mat-drawer-container autosize appInputReceiver (keyDownEvent)="this.onKeydown($event)">
     <mat-drawer disableClose mode="side" opened>
         <app-files-tab-sidebar [state]="this.state" (searchEndEvent)="this.contentLoading = false;"
                                (searchStartEvent)="this.contentLoading = true;"
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 8d8d89e..73e3e34 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
@@ -1,6 +1,6 @@
 import {Component, Input, OnInit} from "@angular/core";
 import {File} from "../../../models/File";
-import {TabState} from "../../../models/TabState.rs";
+import {TabState} from "../../../models/TabState";
 
 @Component({
     selector: "app-files-tab",
@@ -20,6 +20,7 @@ export class FilesTabComponent implements OnInit {
 
     async ngOnInit() {
         this.state.files.subscribe(files => this.files = files);
+        this.state.loading.subscribe(loading => this.contentLoading = loading);
     }
 
     async onFileSelect(files: File[]) {
@@ -40,4 +41,12 @@ export class FilesTabComponent implements OnInit {
             return undefined;
         }
     }
+
+    public async onKeydown(event: KeyboardEvent) {
+        switch (event.key) {
+            case "F5":
+                await this.state.findFiles()
+                break;
+        }
+    }
 }
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 ce69129..5349bc8 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
@@ -4,6 +4,8 @@
                                 (importFinished)="this.refreshFileView()"></app-import-tab-sidebar>
     </mat-drawer>
     <mat-drawer-content>
-        <app-file-multiview (fileSelectEvent)="this.onFileSelect($event)" [files]="this.files"></app-file-multiview>
+        <app-file-multiview [mode]="this.state.mode.value" (modeChangeEvent)="this.state.mode.next($event)"
+                            [preselectedFile]="this.getSelectedFileFromState()"
+                            (fileSelectEvent)="this.onFileSelect($event)" [files]="this.files"></app-file-multiview>
     </mat-drawer-content>
 </mat-drawer-container>
diff --git a/mediarepo-ui/src/app/components/core/import-tab/import-tab.component.ts b/mediarepo-ui/src/app/components/core/import-tab/import-tab.component.ts
index b7fddb0..1f74164 100644
--- a/mediarepo-ui/src/app/components/core/import-tab/import-tab.component.ts
+++ b/mediarepo-ui/src/app/components/core/import-tab/import-tab.component.ts
@@ -1,30 +1,36 @@
-import {Component, Input} from "@angular/core";
+import {Component, Input, OnInit} from "@angular/core";
 import {File} from "../../../models/File";
-import {TabState} from "../../../models/TabState.rs";
+import {TabState} from "../../../models/TabState";
 
 @Component({
     selector: "app-import-tab",
     templateUrl: "./import-tab.component.html",
     styleUrls: ["./import-tab.component.scss"]
 })
-export class ImportTabComponent {
+export class ImportTabComponent implements OnInit {
 
     @Input() state!: TabState;
 
     public files: File[] = [];
     public selectedFiles: File[] = [];
 
+    private newFiles: File[] = [];
+
     constructor() {
     }
 
+    public ngOnInit(): void {
+        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.files.push(file);
-        if (this.files.length % 50 === 0) {  // refresh every 50 pictures
+        this.newFiles.push(file);
+        if (this.newFiles.length % 50 === 0) {  // refresh every 50 pictures
             this.refreshFileView();
         }
     }
@@ -34,10 +40,26 @@ export class ImportTabComponent {
      * @returns {Promise<void>}
      */
     public refreshFileView() {
-        this.files = [...this.files];
+        this.state.files.next([...this.state.files.value, ...this.newFiles]);
+        this.newFiles = [];
     }
 
     public onFileSelect(files: File[]) {
         this.selectedFiles = files;
+        if (files.length === 1) {
+            this.state.selectedFileHash.next(files[0].hash);
+        } else {
+            this.state.selectedFileHash.next(undefined);
+        }
+    }
+
+    public getSelectedFileFromState(): File | undefined {
+        const selectedHash = this.state.selectedFileHash.value;
+
+        if (selectedHash && this.files) {
+            return this.files.find(f => f.hash === selectedHash);
+        } else {
+            return undefined;
+        }
     }
 }
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.ts b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.ts
index decc5d8..a5609a0 100644
--- a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.ts
+++ b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.ts
@@ -22,7 +22,7 @@ import {
 import {FilterDialogComponent} from "./filter-dialog/filter-dialog.component";
 import {Tag} from "../../../../models/Tag";
 import {clipboard} from "@tauri-apps/api";
-import {TabState} from "../../../../models/TabState.rs";
+import {TabState} from "../../../../models/TabState";
 
 
 @Component({
diff --git a/mediarepo-ui/src/app/models/AppState.ts b/mediarepo-ui/src/app/models/AppState.ts
index d7d3b56..a9d3fd7 100644
--- a/mediarepo-ui/src/app/models/AppState.ts
+++ b/mediarepo-ui/src/app/models/AppState.ts
@@ -1,4 +1,4 @@
-import {TabState} from "./TabState.rs";
+import {TabState} from "./TabState";
 import {FileService} from "../services/file/file.service";
 import {BehaviorSubject} from "rxjs";
 import {TabCategory} from "./TabCategory";
diff --git a/mediarepo-ui/src/app/models/TabState.rs.ts b/mediarepo-ui/src/app/models/TabState.ts
similarity index 79%
rename from mediarepo-ui/src/app/models/TabState.rs.ts
rename to mediarepo-ui/src/app/models/TabState.ts
index 0286b40..1fbf9ca 100644
--- a/mediarepo-ui/src/app/models/TabState.rs.ts
+++ b/mediarepo-ui/src/app/models/TabState.ts
@@ -8,14 +8,15 @@ import {
     SingleFilterExpression
 } from "./FilterExpression";
 import {SortKey} from "./SortKey";
-import {debounceTime} from "rxjs/operators";
 import {TagQuery} from "./TagQuery";
+import {debounceTime} from "rxjs/operators";
 
 export class TabState {
     public uuid: number;
     public category: TabCategory;
     public mode = new BehaviorSubject<"grid" | "gallery">("grid");
     public selectedFileHash = new BehaviorSubject<string | undefined>(undefined);
+    public loading = new BehaviorSubject<boolean>(false);
 
     public files = new BehaviorSubject<File[]>([]);
     public filters = new BehaviorSubject<FilterExpression[]>([]);
@@ -29,16 +30,20 @@ export class TabState {
         this.category = category;
         this.uuid = uuid;
         this.fileService = fileService;
-        this.filters.pipe(debounceTime(500))
-            .subscribe(async () => await this.findFiles());
-        this.sortKeys.pipe(debounceTime(100))
-            .subscribe(async () => await this.findFiles());
+        if (this.category === TabCategory.Files) {
+            this.filters.pipe(debounceTime(500))
+                .subscribe(async () => await this.findFiles());
+            this.sortKeys.pipe(debounceTime(100))
+                .subscribe(async () => await this.findFiles());
+        }
     }
 
     public async findFiles() {
+        this.loading.next(true);
         const files = await this.fileService.findFiles(this.filters.value,
             this.sortKeys.value);
         this.files.next(files);
+        this.loading.next(false);
     }
 
     public setFilters(filters: FilterExpression[]) {
@@ -46,7 +51,7 @@ export class TabState {
     }
 
     public setSortKeys(keys: SortKey[]) {
-        this.sortKeys.next(keys)
+        this.sortKeys.next(keys);
     }
 
     public static fromDTO(dto: any, fileService: FileService): TabState {
@@ -64,7 +69,8 @@ export class TabState {
         state.filters.next(filters);
         state.sortKeys.next(sortKeys);
         state.mode.next(dto.mode ?? "grid");
-        state.selectedFileHash.next(dto.selectedFileHash)
+        state.selectedFileHash.next(dto.selectedFileHash);
+        state.files.next(dto.files);
 
         return state
     }
@@ -76,7 +82,8 @@ export class TabState {
             filters: this.filters.value,
             sortKeys: this.sortKeys.value,
             mode: this.mode.value,
-            selectedFileHash: this.selectedFileHash.value
+            selectedFileHash: this.selectedFileHash.value,
+            files: this.files.value,
         };
     }
 }
diff --git a/mediarepo-ui/src/app/services/state/state.service.ts b/mediarepo-ui/src/app/services/state/state.service.ts
index 8ea1457..b5aba8d 100644
--- a/mediarepo-ui/src/app/services/state/state.service.ts
+++ b/mediarepo-ui/src/app/services/state/state.service.ts
@@ -4,7 +4,7 @@ import {AppState} from "../../models/AppState";
 import {invoke} from "@tauri-apps/api/tauri";
 import {FileService} from "../file/file.service";
 import {RepositoryService} from "../repository/repository.service";
-import {TabState} from "../../models/TabState.rs";
+import {TabState} from "../../models/TabState";
 import {debounceTime} from "rxjs/operators";
 
 @Injectable({
@@ -68,6 +68,7 @@ export class StateService {
             tab.selectedFileHash.subscribe(() => this.stateChange.next()));
         this.tabSubscriptions.push(
             tab.mode.subscribe(() => this.stateChange.next()))
+        this.tabSubscriptions.push(tab.files.subscribe(() => this.stateChange.next()))
     }
 
     /**