From 2fefc65d29f6ac28ebc447b89fa631819bb1a296 Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Sat, 20 Nov 2021 17:22:21 +0100
Subject: [PATCH] Fix scaling of filter dialog height

Signed-off-by: trivernis <trivernis@protonmail.com>
---
 .../context-menu/context-menu.component.html  |  2 +-
 .../file-search/file-search.component.html    | 15 +----
 .../file-search/file-search.component.ts      | 61 ++++---------------
 .../filter-dialog.component.html              | 17 +++---
 .../filter-dialog.component.scss              | 10 ++-
 .../inputs/tag-input/tag-input.component.html |  3 +-
 .../files-tab-sidebar.component.html          |  1 -
 .../files-tab-sidebar.component.ts            |  4 --
 8 files changed, 35 insertions(+), 78 deletions(-)

diff --git a/mediarepo-ui/src/app/components/context-menu/context-menu.component.html b/mediarepo-ui/src/app/components/context-menu/context-menu.component.html
index d182a4b..d75ee99 100644
--- a/mediarepo-ui/src/app/components/context-menu/context-menu.component.html
+++ b/mediarepo-ui/src/app/components/context-menu/context-menu.component.html
@@ -1,5 +1,5 @@
 <div class="menu-anchor" [matMenuTriggerFor]="contextMenu" [style.left]="x" [style.top]="y"></div>
 <mat-menu #contextMenu="matMenu">
   <ng-content select="mat-menu-item"></ng-content>
-  <ng-content ></ng-content>
+  <ng-content></ng-content>
 </mat-menu>
diff --git a/mediarepo-ui/src/app/components/file-search/file-search.component.html b/mediarepo-ui/src/app/components/file-search/file-search.component.html
index cfd3ae7..bdc8c27 100644
--- a/mediarepo-ui/src/app/components/file-search/file-search.component.html
+++ b/mediarepo-ui/src/app/components/file-search/file-search.component.html
@@ -9,20 +9,9 @@
     <mat-icon>delete-sweep</mat-icon>
   </button>
 </div>
-<mat-form-field appearance="fill" class="full-width">
-  <mat-label>Enter tags to filter for</mat-label>
-  <input #tagInput
-         (keydown)="addSearchTagByInput($event)"
-         [formControl]="formControl"
-         [matAutocomplete]="auto"
-         matInput/>
+<app-tag-input class="full-width" [allowNegation]="true" [availableTags]="getValidSearchTags()" (tagAdded)="addSearchTag($event); searchForFiles()">
   <button mat-button class="filter-dialog-button" (click)="openFilterDialog()">
     <mat-icon>filter_alt</mat-icon>
   </button>
-  <mat-autocomplete #auto (optionSelected)="addSearchTagByAutocomplete($event)">
-    <mat-option *ngFor="let tag of suggestionTags | async" [value]="tag">
-      {{tag}}
-    </mat-option>
-  </mat-autocomplete>
-</mat-form-field>
+</app-tag-input>
 <button (click)="openSortDialog()" id="sort-button" mat-flat-button>Sort: {{sortExpression.join(", ")}}</button>
diff --git a/mediarepo-ui/src/app/components/file-search/file-search.component.ts b/mediarepo-ui/src/app/components/file-search/file-search.component.ts
index da3f060..5c916a1 100644
--- a/mediarepo-ui/src/app/components/file-search/file-search.component.ts
+++ b/mediarepo-ui/src/app/components/file-search/file-search.component.ts
@@ -8,12 +8,7 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
-import {TagService} from "../../services/tag/tag.service";
 import {FileService} from "../../services/file/file.service";
-import {FormControl} from "@angular/forms";
-import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";
-import {map, startWith} from "rxjs/operators";
-import {Observable} from "rxjs";
 import {TagQuery} from "../../models/TagQuery";
 import {SortKey} from "../../models/SortKey";
 import {MatDialog} from "@angular/material/dialog";
@@ -35,24 +30,20 @@ import {Tag} from "../../models/Tag";
 export class FileSearchComponent implements AfterViewChecked, OnInit {
   public sortExpression: SortKey[] = [new SortKey("FileImportedTime",
     "Ascending", undefined)];
-  public formControl = new FormControl();
   public filters: FilterExpression[] = [];
-  public suggestionTags: Observable<string[]>;
 
   @Input() availableTags: Tag[] = [];
-  @Input() validTags: string[] = [];
   @Output() searchStartEvent = new EventEmitter<void>();
   @Output() searchEndEvent = new EventEmitter<void>();
 
   @ViewChild("tagInput") tagInput!: ElementRef<HTMLInputElement>;
   @ViewChild("tagInputList") inputList!: ElementRef;
 
-  constructor(private errorBroker: ErrorBrokerService, private tagService: TagService, private fileService: FileService, public dialog: MatDialog) {
-    this.suggestionTags = this.formControl.valueChanges.pipe(startWith(null),
-      map(
-        (tag: string | null) => tag ? this.filterSuggestionTag(
-          tag) : this.validTags.slice(0, 20)));
-  }
+  constructor(
+    private errorBroker: ErrorBrokerService,
+    private fileService: FileService,
+    public dialog: MatDialog
+  ) {}
 
   public async ngOnInit() {
     await this.searchForFiles();
@@ -82,12 +73,16 @@ export class FileSearchComponent implements AfterViewChecked, OnInit {
     }
   }
 
-  async removeAllSearchTags() {
+  public getValidSearchTags(): Tag[] {
+    return this.availableTags.filter(t => this.filters.findIndex(f => f.partiallyEq(t.getNormalizedOutput())) < 0);
+  }
+
+  public async removeAllSearchTags() {
     this.filters = [];
     await this.searchForFiles();
   }
 
-  async removeFilterExpression(expr: FilterExpression) {
+  public async removeFilterExpression(expr: FilterExpression) {
     const index = this.filters.indexOf(expr);
     if (index >= 0) {
       this.filters.splice(index, 1);
@@ -95,26 +90,7 @@ export class FileSearchComponent implements AfterViewChecked, OnInit {
     await this.searchForFiles();
   }
 
-  async addSearchTagByInput(event: KeyboardEvent) {
-    if (event.key === "Enter") {
-      const tag = (this.formControl.value as string ?? "").trim();
-      if (tag.length > 0 && this.validTags.includes(tag.replace(/-/g, ''))) {
-        this.addSearchTag(tag);
-        this.formControl.setValue(null);
-        await this.searchForFiles();
-      }
-    }
-  }
-
-  async addSearchTagByAutocomplete(event: MatAutocompleteSelectedEvent) {
-    const tag = event.option.viewValue;
-    this.addSearchTag(tag);
-    this.formControl.setValue(null);
-    this.tagInput.nativeElement.value = '';
-    await this.searchForFiles();
-  }
-
-  openSortDialog() {
+  public openSortDialog() {
     const sortEntries = this.sortExpression.map(
       key => JSON.parse(JSON.stringify(key))).map(
       key => new SortKey(key.sortType, key.sortDirection, key.namespaceName))
@@ -133,22 +109,11 @@ export class FileSearchComponent implements AfterViewChecked, OnInit {
     });
   }
 
-  private filterSuggestionTag(tag: string) {
-    const negated = tag.startsWith("-");
-    const normalizedTag = tag.replace(/^-/, "");
-
-    return this.validTags.filter(
-        t => t.includes(normalizedTag) && this.filters.findIndex(
-          f => f.eq(t)) < 0)
-      .map(t => negated ? "-" + t : t)
-      .slice(0, 20);
-  }
-
   public openFilterDialog(): void {
     const filterEntries = this.filters.map(f => f.clone());
     const filterDialog = this.dialog.open(FilterDialogComponent, {
       minWidth: "25vw",
-      height: "80vh",
+      maxHeight: "80vh",
       data: {
         filterEntries,
         availableTags: this.availableTags,
diff --git a/mediarepo-ui/src/app/components/file-search/filter-dialog/filter-dialog.component.html b/mediarepo-ui/src/app/components/file-search/filter-dialog/filter-dialog.component.html
index 3d76050..bd161b0 100644
--- a/mediarepo-ui/src/app/components/file-search/filter-dialog/filter-dialog.component.html
+++ b/mediarepo-ui/src/app/components/file-search/filter-dialog/filter-dialog.component.html
@@ -1,15 +1,18 @@
 <h1 mat-dialog-title>Filters</h1>
-<div mat-dialog-content fxLayout="column" class="filter-dialog-content">
-  <div fxFlex fxFlexFill class="filter-dialog-list">
-    <mat-list>
+<div mat-dialog-content class="filter-dialog-content">
+  <div class="filter-dialog-list">
+    <mat-list class="mat-filter-dialog-list">
       <mat-list-item class="filter-list-item" *ngFor="let expression of filters" [class.selected]="expression.selected">
-        <app-tag-filter-list-item (querySelect)="this.addToSelection($event)" (queryUnselect)="this.removeFromSelection($event)" (removeClicked)="this.removeFilter($event)"
-                                  (contextmenu)="contextMenu.onContextMenu($event)" [expression]="expression"></app-tag-filter-list-item>
+        <app-tag-filter-list-item (querySelect)="this.addToSelection($event)"
+                                  (queryUnselect)="this.removeFromSelection($event)"
+                                  (removeClicked)="this.removeFilter($event)"
+                                  (contextmenu)="contextMenu.onContextMenu($event)"
+                                  [expression]="expression"></app-tag-filter-list-item>
       </mat-list-item>
     </mat-list>
   </div>
-  <mat-divider fxFlex="10px"></mat-divider>
-  <app-tag-input fxFlex="5em" class="tag-input" [allowNegation]="true" [availableTags]="this.availableTags"
+  <mat-divider></mat-divider>
+  <app-tag-input class="tag-input" [allowNegation]="true" [availableTags]="this.availableTags"
                  (tagAdded)="this.addFilter($event)"></app-tag-input>
 </div>
 <div class="dialog-actions" mat-dialog-actions>
diff --git a/mediarepo-ui/src/app/components/file-search/filter-dialog/filter-dialog.component.scss b/mediarepo-ui/src/app/components/file-search/filter-dialog/filter-dialog.component.scss
index ca664f3..e5843d2 100644
--- a/mediarepo-ui/src/app/components/file-search/filter-dialog/filter-dialog.component.scss
+++ b/mediarepo-ui/src/app/components/file-search/filter-dialog/filter-dialog.component.scss
@@ -10,6 +10,7 @@
 
 .tag-input {
   width: 100%;
+  height: 5em;
 }
 
 mat-list-item.filter-list-item {
@@ -29,13 +30,16 @@ app-tag-filter-list-item {
 
 .filter-dialog-content {
   overflow: hidden;
-  height: 100%;
   width: 100%;
-  margin: 0;
+  max-height: 60vh;
 }
 
 .filter-dialog-list {
+  max-height: calc(60vh - 5em);
   overflow-y: auto;
-  height: 100%;
   width: 100%;
 }
+
+mat-list.mat-filter-dialog-list {
+  padding: 0;
+}
diff --git a/mediarepo-ui/src/app/components/inputs/tag-input/tag-input.component.html b/mediarepo-ui/src/app/components/inputs/tag-input/tag-input.component.html
index b1b8997..af9d353 100644
--- a/mediarepo-ui/src/app/components/inputs/tag-input/tag-input.component.html
+++ b/mediarepo-ui/src/app/components/inputs/tag-input/tag-input.component.html
@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>
     Enter a tag
   </mat-label>
@@ -7,6 +7,7 @@
          matInput
          (keydown.enter)="addTagByInput($event)"
          [matAutocomplete]="auto">
+  <ng-content></ng-content>
   <mat-autocomplete #auto (optionSelected)="addTagByAutocomplete($event)">
     <mat-option *ngFor="let tag of autosuggestTags | async" [value]="tag">
       {{tag}}
diff --git a/mediarepo-ui/src/app/pages/home/files-tab/files-tab-sidebar/files-tab-sidebar.component.html b/mediarepo-ui/src/app/pages/home/files-tab/files-tab-sidebar/files-tab-sidebar.component.html
index d54f2d8..3b3b29a 100644
--- a/mediarepo-ui/src/app/pages/home/files-tab/files-tab-sidebar/files-tab-sidebar.component.html
+++ b/mediarepo-ui/src/app/pages/home/files-tab/files-tab-sidebar/files-tab-sidebar.component.html
@@ -5,7 +5,6 @@
         <div id="file-search-input">
           <app-file-search #filesearch (searchEndEvent)="this.searchEndEvent.emit()"
                            (searchStartEvent)="this.searchStartEvent.emit()"
-                           [validTags]="this.getValidTagsForSearch()"
                            [availableTags]="this.allTags"></app-file-search>
         </div>
         <mat-divider fxFlex="1em"></mat-divider>
diff --git a/mediarepo-ui/src/app/pages/home/files-tab/files-tab-sidebar/files-tab-sidebar.component.ts b/mediarepo-ui/src/app/pages/home/files-tab/files-tab-sidebar/files-tab-sidebar.component.ts
index f06a2a1..a7ff42f 100644
--- a/mediarepo-ui/src/app/pages/home/files-tab/files-tab-sidebar/files-tab-sidebar.component.ts
+++ b/mediarepo-ui/src/app/pages/home/files-tab/files-tab-sidebar/files-tab-sidebar.component.ts
@@ -74,10 +74,6 @@ export class FilesTabSidebarComponent implements OnInit, OnChanges {
     await this.fileSearch.searchForFiles();
   }
 
-  getValidTagsForSearch(): string[] {
-    return this.tagsOfFiles.map(t => t.getNormalizedOutput())
-  }
-
   async showFileDetails(files: File[]) {
     this.tagsOfSelection = await this.tagService.getTagsForFiles(files.map(f => f.hash))
     this.tagsOfSelection = this.tagsOfSelection.sort(