From 02c013a1c31c010254df741baa6e834c56da1e08 Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Sun, 12 Dec 2021 13:34:08 +0100
Subject: [PATCH] Move more information to the tab state

Signed-off-by: trivernis <trivernis@protonmail.com>
---
 .../file-search/file-search.component.html    |  2 +-
 .../file-search/file-search.component.ts      | 21 ++++++++---------
 mediarepo-ui/src/app/models/TabState.rs.ts    | 23 +++++++++++++++----
 3 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.html b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.html
index de2bb3c..7c67b14 100644
--- a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.html
+++ b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.html
@@ -33,7 +33,7 @@
 
     <div class="file-tag-list" fxFlex fxFlexAlign="start" fxFlexFill>
         <cdk-virtual-scroll-viewport itemSize="50" maxBufferPx="4000" minBufferPx="500">
-            <div (click)="addSearchTagAndSearch(tag.getNormalizedOutput())"
+            <div (click)="addSearchTag(tag.getNormalizedOutput())"
                  (contextmenu)="contextMenuTag = tag; contextMenu.onContextMenu($event)"
                  *cdkVirtualFor="let tag of contextTags" class="selectable-tag">
                 <app-tag-item [tag]="tag"></app-tag-item>
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 73ccae2..decc5d8 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
@@ -31,8 +31,7 @@ import {TabState} from "../../../../models/TabState.rs";
     styleUrls: ["./file-search.component.scss"]
 })
 export class FileSearchComponent implements AfterViewChecked, OnInit {
-    public sortExpression: SortKey[] = [new SortKey("FileImportedTime",
-        "Ascending", undefined)];
+    public sortExpression: SortKey[] = [];
     public filters: FilterExpression[] = [];
 
     @Input() availableTags: Tag[] = [];
@@ -54,6 +53,8 @@ export class FileSearchComponent implements AfterViewChecked, OnInit {
     }
 
     public async ngOnInit() {
+        this.state.filters.subscribe(f => this.filters = f);
+        this.state.sortKeys.subscribe(s => this.sortExpression = s);
         await this.searchForFiles();
     }
 
@@ -64,7 +65,7 @@ export class FileSearchComponent implements AfterViewChecked, OnInit {
     public async searchForFiles() {
         this.searchStartEvent.emit();
         try {
-            await this.state.findFiles(this.filters, this.sortExpression);
+            await this.state.findFiles();
         } catch (err) {
             this.errorBroker.showError(err);
         }
@@ -79,11 +80,7 @@ export class FileSearchComponent implements AfterViewChecked, OnInit {
             const index = this.filters.findIndex(t => t.partiallyEq(tag));
             this.filters.splice(index, 1);
         }
-    }
-
-    public async addSearchTagAndSearch(tag: string) {
-        this.addSearchTag(tag);
-        await this.searchForFiles();
+        this.state.setFilters(this.filters);
     }
 
     public getValidSearchTags(): Tag[] {
@@ -93,7 +90,7 @@ export class FileSearchComponent implements AfterViewChecked, OnInit {
 
     public async removeAllSearchTags() {
         this.filters = [];
-        await this.searchForFiles();
+        this.state.setFilters([]);
     }
 
     public async removeFilterExpression(expr: FilterExpression) {
@@ -101,7 +98,7 @@ export class FileSearchComponent implements AfterViewChecked, OnInit {
         if (index >= 0) {
             this.filters.splice(index, 1);
         }
-        await this.searchForFiles();
+        this.state.setFilters(this.filters);
     }
 
     public openSortDialog() {
@@ -119,7 +116,7 @@ export class FileSearchComponent implements AfterViewChecked, OnInit {
         openedDialog.afterClosed().subscribe(async (sortExpression) => {
             if (sortExpression) {
                 this.sortExpression = sortExpression;
-                await this.searchForFiles();
+                this.state.setSortKeys(this.sortExpression);
             }
         });
     }
@@ -138,7 +135,7 @@ export class FileSearchComponent implements AfterViewChecked, OnInit {
         filterDialog.afterClosed().subscribe(async (filterExpression) => {
             if (filterExpression !== undefined || filterExpression?.length > 0) {
                 this.filters = filterExpression;
-                await this.searchForFiles();
+                this.state.setFilters(this.filters);
             }
         });
     }
diff --git a/mediarepo-ui/src/app/models/TabState.rs.ts b/mediarepo-ui/src/app/models/TabState.rs.ts
index 99c52eb..b8e679b 100644
--- a/mediarepo-ui/src/app/models/TabState.rs.ts
+++ b/mediarepo-ui/src/app/models/TabState.rs.ts
@@ -4,11 +4,16 @@ import {FileService} from "../services/file/file.service";
 import {File} from "./File";
 import {FilterExpression} from "./FilterExpression";
 import {SortKey} from "./SortKey";
+import {debounceTime} from "rxjs/operators";
 
 export class TabState {
     public uuid: number;
     public category: TabCategory;
     public files = new BehaviorSubject<File[]>([]);
+    public filters = new BehaviorSubject<FilterExpression[]>([]);
+    public sortKeys = new BehaviorSubject<SortKey[]>(
+        [new SortKey("FileImportedTime",
+            "Ascending", undefined)]);
 
     private fileService: FileService;
 
@@ -16,15 +21,23 @@ 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());
     }
 
-    public async loadAllFiles() {
-        const files = await this.fileService.getAllFiles();
+    public async findFiles() {
+        const files = await this.fileService.findFiles(this.filters.value,
+            this.sortKeys.value);
         this.files.next(files);
     }
 
-    public async findFiles(filters: FilterExpression[], sortBy: SortKey[]) {
-        const files = await this.fileService.findFiles(filters, sortBy);
-        this.files.next(files);
+    public setFilters(filters: FilterExpression[]) {
+        this.filters.next(filters);
+    }
+
+    public setSortKeys(keys: SortKey[]) {
+        this.sortKeys.next(keys)
     }
 }