+
{{expression.data.getDisplayName()}}
-
+
-
+
0">OR
{{entry[1].getNormalizedTag()}}
-
diff --git a/mediarepo-ui/src/app/components/file-search/filter-dialog/tag-filter-list-item/tag-filter-list-item.component.scss b/mediarepo-ui/src/app/components/file-search/filter-dialog/tag-filter-list-item/tag-filter-list-item.component.scss
index e64d496..37a6050 100644
--- a/mediarepo-ui/src/app/components/file-search/filter-dialog/tag-filter-list-item/tag-filter-list-item.component.scss
+++ b/mediarepo-ui/src/app/components/file-search/filter-dialog/tag-filter-list-item/tag-filter-list-item.component.scss
@@ -14,6 +14,7 @@ mat-list {
width: 100%;
display: block;
background-color: #353535;
+ padding: 0;
border-radius: 0.25em;
}
@@ -21,6 +22,9 @@ mat-list-item.or-filter-list-item {
padding: 0.5em 0;
height: 100%;
width: 100%;
+ border-collapse: collapse;
+ cursor: pointer;
+ user-select: none;
::ng-deep .mat-list-item-content {
padding-right: 0;
@@ -31,3 +35,7 @@ mat-list-item.or-filter-list-item {
.or-span {
margin-right: 0.5em;
}
+
+.selected {
+ background-color: #5c5c5c;
+}
diff --git a/mediarepo-ui/src/app/components/file-search/filter-dialog/tag-filter-list-item/tag-filter-list-item.component.ts b/mediarepo-ui/src/app/components/file-search/filter-dialog/tag-filter-list-item/tag-filter-list-item.component.ts
index abe1391..f2d0b03 100644
--- a/mediarepo-ui/src/app/components/file-search/filter-dialog/tag-filter-list-item/tag-filter-list-item.component.ts
+++ b/mediarepo-ui/src/app/components/file-search/filter-dialog/tag-filter-list-item/tag-filter-list-item.component.ts
@@ -3,9 +3,9 @@ import {
Component,
EventEmitter,
Inject,
- Input,
+ Input, OnChanges,
OnInit,
- Output
+ Output, SimpleChanges
} from '@angular/core';
import {
FilterExpression,
@@ -19,12 +19,22 @@ import {Selectable} from "../../../../models/Selectable";
templateUrl: './tag-filter-list-item.component.html',
styleUrls: ['./tag-filter-list-item.component.scss']
})
-export class TagFilterListItemComponent {
+export class TagFilterListItemComponent implements OnChanges {
@Input() expression!: Selectable;
@Output() removeClicked = new EventEmitter();
+ @Output() querySelect = new EventEmitter();
+ @Output() queryUnselect = new EventEmitter();
- constructor() { }
+ public selectedIndices: number[] = [];
+
+ constructor(private changeDetector: ChangeDetectorRef) { }
+
+ public ngOnChanges(changes: SimpleChanges): void {
+ if (changes["expression"]) {
+ this.selectedIndices = [];
+ }
+ }
public enumerate(items: T[]): [number, T][] {
return items.map((value, index) => [index, value]);
@@ -40,4 +50,26 @@ export class TagFilterListItemComponent {
this.expression.data = new SingleFilterExpression(expression.filter[0]);
}
}
+
+ public selectInnerIndex(index: number): void {
+ const expression = this.expression.data as OrFilterExpression;
+
+ if (this.selectedIndices.includes(index)) {
+ const elementIndex = this.selectedIndices.indexOf(index);
+ this.selectedIndices.splice(elementIndex, 1);
+ this.queryUnselect.emit(expression.filter[index]);
+ } else {
+ this.selectedIndices.push(index);
+ this.querySelect.emit(expression.filter[index]);
+ }
+ }
+
+ public onSelect(): void {
+ this.expression.selected = !this.expression.selected;
+ if (this.expression.selected) {
+ this.querySelect.emit(this.expression.data.filter as TagQuery);
+ } else {
+ this.queryUnselect.emit(this.expression.data.filter as TagQuery);
+ }
+ }
}
diff --git a/mediarepo-ui/src/app/models/FilterExpression.ts b/mediarepo-ui/src/app/models/FilterExpression.ts
index 7929872..e2e8d62 100644
--- a/mediarepo-ui/src/app/models/FilterExpression.ts
+++ b/mediarepo-ui/src/app/models/FilterExpression.ts
@@ -47,6 +47,18 @@ export class OrFilterExpression implements FilterExpression{
public removeQueryEntry(index: number) {
this.filter.splice(index, 1);
}
+
+ public removeDuplicates() {
+ const filters = this.filter.reverse();
+ let newEntries: TagQuery[] = [];
+
+ for (const entry of filters) {
+ if (newEntries.findIndex(f => f.tag === entry.tag) < 0) {
+ newEntries.push(entry);
+ }
+ }
+ this.filter = newEntries.reverse();
+ }
}
export class SingleFilterExpression implements FilterExpression {