Remove status filters from simple filter display

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

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

@@ -13,7 +13,7 @@
                 <div class="tag-input-list-inner">
                     <div (click)="removeFilterExpression(filter)"
                          (contextmenu)="this.contextMenuFilters.onContextMenu($event); this.contextMenuFilter = filter"
-                         *ngFor="let filter of filters.getFilters()"
+                         *ngFor="let filter of this.displayedFilters"
                          class="tag-input-item"
                          mat-ripple>
                         <app-filter-expression-item [filter]="filter"></app-filter-expression-item>

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

@@ -12,6 +12,7 @@ import {SearchFilters} from "../../../../../api/models/SearchFilters";
 import {FileStatus, FilterExpression,} from "../../../../../api/api-types/files";
 import {filterExpressionToString} from "../../../../utils/filter-utils";
 import {MatCheckboxChange} from "@angular/material/checkbox";
+import * as deepEqual from "fast-deep-equal";
 
 
 @Component({
@@ -36,6 +37,7 @@ export class FileSearchComponent implements AfterViewChecked, OnInit {
     public contextMenuTag: Tag | undefined;
     public contextMenuFilter: FilterExpression | undefined = undefined;
     public initialFilterInputValue: string | undefined;
+    public displayedFilters: FilterExpression[] = [];
 
     public displayImported = true;
     public displayArchived = true;
@@ -47,14 +49,19 @@ export class FileSearchComponent implements AfterViewChecked, OnInit {
         private errorBroker: ErrorBrokerService,
         public dialog: MatDialog
     ) {
+        this.assignDisplayedFilters();
     }
 
     public async ngOnInit() {
-        this.state.filters.subscribe(f => this.filters = f);
+        this.state.filters.subscribe(f => {
+            this.filters = f;
+            this.assignDisplayedFilters();
+        });
         this.state.sortKeys.subscribe(s => this.sortExpression = s);
         this.applyStatusFromFilters();
         await this.searchForFiles();
         this.needsScroll = true;
+        this.assignDisplayedFilters();
     }
 
     public ngAfterViewChecked(): void {
@@ -145,8 +152,8 @@ export class FileSearchComponent implements AfterViewChecked, OnInit {
         filterDialog.afterClosed().subscribe(async (filterExpression) => {
             if (filterExpression !== undefined || filterExpression?.length > 0) {
                 this.filters = filterExpression;
-                this.state.setTagFilters(this.filters);
                 this.applyStatusFromFilters();
+                this.state.setTagFilters(this.filters);
                 this.needsScroll = true;
             }
         });
@@ -175,6 +182,15 @@ export class FileSearchComponent implements AfterViewChecked, OnInit {
         this.updateStatusFilters();
     }
 
+    public isTagFilter(filter: FilterExpression): boolean {
+        const tagFilter = this.buildFilterForDisplayProperty();
+        return deepEqual(tagFilter, filter);
+    }
+
+    private assignDisplayedFilters() {
+        this.displayedFilters = this.filters.getFilters().filter(f => !this.isTagFilter(f));
+    }
+
     private applyStatusFromFilters() {
         const filterImported = FilterQueryBuilder.status("Imported");
         const filterArchived = FilterQueryBuilder.status("Archived");