From 2fefc65d29f6ac28ebc447b89fa631819bb1a296 Mon Sep 17 00:00:00 2001 From: trivernis Date: Sat, 20 Nov 2021 17:22:21 +0100 Subject: [PATCH] Fix scaling of filter dialog height Signed-off-by: trivernis --- .../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 @@ - + 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 @@ delete-sweep - - Enter tags to filter for - + - - - {{tag}} - - - + 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; @Input() availableTags: Tag[] = []; - @Input() validTags: string[] = []; @Output() searchStartEvent = new EventEmitter(); @Output() searchEndEvent = new EventEmitter(); @ViewChild("tagInput") tagInput!: ElementRef; @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 @@

Filters

-
-
- +
+
+ - +
- - +
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 @@ - + Enter a tag @@ -7,6 +7,7 @@ matInput (keydown.enter)="addTagByInput($event)" [matAutocomplete]="auto"> + {{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 @@
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(