Fix some state related issues

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

mediarepo-ui/src-tauri/tauri.conf.json

@@ -60,7 +60,7 @@
         },
         "windows": [
             {
-                "title": "Mediarepo",
+                "title": "mediarepo",
                 "width": 1920,
                 "height": 1080,
                 "resizable": true,

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>

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";
 

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",

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;"

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

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>

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);
+        this.newFiles.push(file);
-        if (this.files.length % 50 === 0) {  // refresh every 50 pictures
+        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;
+        }
     }
 }

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({

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";

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))
+        if (this.category === TabCategory.Files) {
-            .subscribe(async () => await this.findFiles());
+            this.filters.pipe(debounceTime(500))
-        this.sortKeys.pipe(debounceTime(100))
+                .subscribe(async () => await this.findFiles());
-            .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,
         };
     }
 }

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