Move more information to the tab state

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

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>

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

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)
     }
 }