GitHub
commit
251d981b04
@ -0,0 +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>
|
||||||
|
</mat-menu>
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
.menu-anchor {
|
||||||
|
visibility: hidden;
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { ContextMenuComponent } from './context-menu.component';
|
||||||
|
|
||||||
|
describe('ContextMenuComponent', () => {
|
||||||
|
let component: ContextMenuComponent;
|
||||||
|
let fixture: ComponentFixture<ContextMenuComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [ ContextMenuComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
});
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(ContextMenuComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
import {
|
||||||
|
Component,
|
||||||
|
ComponentFactoryResolver,
|
||||||
|
OnInit,
|
||||||
|
ViewChild,
|
||||||
|
ViewContainerRef
|
||||||
|
} from '@angular/core';
|
||||||
|
import {MatMenuTrigger} from "@angular/material/menu";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-context-menu',
|
||||||
|
templateUrl: './context-menu.component.html',
|
||||||
|
styleUrls: ['./context-menu.component.scss']
|
||||||
|
})
|
||||||
|
export class ContextMenuComponent {
|
||||||
|
|
||||||
|
|
||||||
|
public x: string = "0";
|
||||||
|
public y: string = "0";
|
||||||
|
|
||||||
|
@ViewChild(MatMenuTrigger) menuTrigger!: MatMenuTrigger
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
}
|
||||||
|
|
||||||
|
public onContextMenu(event: MouseEvent) {
|
||||||
|
event.preventDefault();
|
||||||
|
this.x = event.clientX + "px";
|
||||||
|
this.y = event.clientY + "px";
|
||||||
|
this.menuTrigger.openMenu();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</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"
|
||||||
|
(tagAdded)="this.addFilter($event)"></app-tag-input>
|
||||||
|
</div>
|
||||||
|
<div class="dialog-actions" mat-dialog-actions>
|
||||||
|
<button mat-flat-button color="primary" (click)="confirmFilter()">Filter</button>
|
||||||
|
<button mat-stroked-button color="accent" (click)="cancelFilter()">Cancel</button>
|
||||||
|
</div>
|
||||||
|
<app-context-menu #contextMenu>
|
||||||
|
<button mat-menu-item (click)="this.convertSelectionToOrExpression()">Copy to OR-Expression</button>
|
||||||
|
<button mat-menu-item (click)="this.convertSelectionToAndExpression()">Copy to AND-Expression</button>
|
||||||
|
<button mat-menu-item (click)="this.invertSelection()">Invert</button>
|
||||||
|
</app-context-menu>
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
.dialog-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-input {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
mat-list-item.filter-list-item {
|
||||||
|
height: 100%;
|
||||||
|
padding: 0.5em 0;
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
app-tag-filter-list-item {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected {
|
||||||
|
background-color: #5c5c5c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-dialog-content {
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-dialog-list {
|
||||||
|
overflow-y: auto;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { FilterDialogComponent } from './filter-dialog.component';
|
||||||
|
|
||||||
|
describe('FilterDialogComponent', () => {
|
||||||
|
let component: FilterDialogComponent;
|
||||||
|
let fixture: ComponentFixture<FilterDialogComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [ FilterDialogComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
});
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(FilterDialogComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,167 @@
|
|||||||
|
import {Component, HostListener, Inject, ViewChildren} from '@angular/core';
|
||||||
|
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
|
||||||
|
import {SortDialogComponent} from "../sort-dialog/sort-dialog.component";
|
||||||
|
import {
|
||||||
|
FilterExpression,
|
||||||
|
OrFilterExpression,
|
||||||
|
SingleFilterExpression
|
||||||
|
} from "../../../models/FilterExpression";
|
||||||
|
import {TagQuery} from "../../../models/TagQuery";
|
||||||
|
import {Tag} from "../../../models/Tag";
|
||||||
|
import {TagFilterListItemComponent} from "./tag-filter-list-item/tag-filter-list-item.component";
|
||||||
|
import {Selectable} from "../../../models/Selectable";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-filter-dialog',
|
||||||
|
templateUrl: './filter-dialog.component.html',
|
||||||
|
styleUrls: ['./filter-dialog.component.scss']
|
||||||
|
})
|
||||||
|
export class FilterDialogComponent {
|
||||||
|
|
||||||
|
public filters: Selectable<FilterExpression>[];
|
||||||
|
public availableTags: Tag[] = [];
|
||||||
|
public mode: "AND" | "OR" = "AND";
|
||||||
|
|
||||||
|
@ViewChildren(
|
||||||
|
TagFilterListItemComponent) filterListItems!: TagFilterListItemComponent[];
|
||||||
|
|
||||||
|
private selectedQueries: TagQuery[] = [];
|
||||||
|
|
||||||
|
constructor(public dialogRef: MatDialogRef<SortDialogComponent>, @Inject(
|
||||||
|
MAT_DIALOG_DATA) data: any) {
|
||||||
|
this.filters = data.filterEntries.map(
|
||||||
|
(f: FilterExpression) => new Selectable<FilterExpression>(f,
|
||||||
|
false)) ?? [];
|
||||||
|
this.availableTags = data.availableTags ?? [];
|
||||||
|
}
|
||||||
|
|
||||||
|
public cancelFilter(): void {
|
||||||
|
this.dialogRef.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
public confirmFilter(): void {
|
||||||
|
this.dialogRef.close(this.filters.map(f => f.data));
|
||||||
|
}
|
||||||
|
|
||||||
|
public removeFilter(event: TagFilterListItemComponent): void {
|
||||||
|
const filter = event.expression;
|
||||||
|
const index = this.filters.findIndex(f => f === filter);
|
||||||
|
if (index >= 0) {
|
||||||
|
this.filters.splice(index, 1);
|
||||||
|
}
|
||||||
|
this.unselectAll();
|
||||||
|
}
|
||||||
|
|
||||||
|
public addFilter(tag: string) {
|
||||||
|
const query = TagQuery.fromString(tag);
|
||||||
|
|
||||||
|
if (this.mode === "AND" || this.filters.length === 0) {
|
||||||
|
this.filters.push(
|
||||||
|
new Selectable<FilterExpression>(new SingleFilterExpression(query),
|
||||||
|
false));
|
||||||
|
tag = tag.replace(/^-/g, '');
|
||||||
|
|
||||||
|
if (this.filters.filter(t => t.data.partiallyEq(tag)).length > 1) {
|
||||||
|
const index = this.filters.findIndex(t => t.data.partiallyEq(tag));
|
||||||
|
this.filters.splice(index, 1);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
let queryList = this.filters.pop()?.data.queryList() ?? [];
|
||||||
|
|
||||||
|
queryList.push(query);
|
||||||
|
const filterExpression = new OrFilterExpression(queryList);
|
||||||
|
filterExpression.removeDuplicates();
|
||||||
|
this.filters.push(
|
||||||
|
new Selectable<FilterExpression>(filterExpression,
|
||||||
|
false));
|
||||||
|
}
|
||||||
|
this.unselectAll();
|
||||||
|
}
|
||||||
|
|
||||||
|
public addToSelection(query: TagQuery): void {
|
||||||
|
this.selectedQueries.push(query);
|
||||||
|
}
|
||||||
|
|
||||||
|
public removeFromSelection(query: TagQuery): void {
|
||||||
|
const index = this.selectedQueries.indexOf(query);
|
||||||
|
if (index > 0) {
|
||||||
|
this.selectedQueries.splice(index, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public unselectAll() {
|
||||||
|
this.filters.forEach(filter => filter.selected = false);
|
||||||
|
this.selectedQueries = [];
|
||||||
|
this.filterListItems.forEach(i => i.selectedIndices = []);
|
||||||
|
}
|
||||||
|
|
||||||
|
public convertSelectionToAndExpression(): void {
|
||||||
|
for (const query of this.selectedQueries) {
|
||||||
|
this.filters.push(new Selectable<FilterExpression>(new SingleFilterExpression(query), false));
|
||||||
|
}
|
||||||
|
this.removeFilterDuplicates();
|
||||||
|
this.unselectAll();
|
||||||
|
}
|
||||||
|
|
||||||
|
public convertSelectionToOrExpression(): void {
|
||||||
|
const queries = this.selectedQueries;
|
||||||
|
const expression = new OrFilterExpression(queries);
|
||||||
|
this.filters.push(new Selectable<FilterExpression>(expression, false));
|
||||||
|
this.removeFilterDuplicates();
|
||||||
|
this.unselectAll();
|
||||||
|
}
|
||||||
|
|
||||||
|
public invertSelection(): void {
|
||||||
|
this.selectedQueries.forEach(query => query.negate = !query.negate);
|
||||||
|
}
|
||||||
|
|
||||||
|
private removeFilterDuplicates() {
|
||||||
|
const filters = this.filters;
|
||||||
|
let newFilters: Selectable<FilterExpression>[] = [];
|
||||||
|
|
||||||
|
for (const filterItem of filters) {
|
||||||
|
if (filterItem.data.filter_type == "OrExpression") {
|
||||||
|
(filterItem.data as OrFilterExpression).removeDuplicates();
|
||||||
|
}
|
||||||
|
if (newFilters.findIndex(f => FilterDialogComponent.checkFiltersEqual(f.data, filterItem.data)) < 0) {
|
||||||
|
if (filterItem.data.filter_type == "OrExpression" && filterItem.data.queryList().length === 1) {
|
||||||
|
filterItem.data = new SingleFilterExpression(filterItem.data.queryList()[0]);
|
||||||
|
}
|
||||||
|
newFilters.push(filterItem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.filters = newFilters;
|
||||||
|
}
|
||||||
|
|
||||||
|
private static checkFiltersEqual(l: FilterExpression, r: FilterExpression): boolean {
|
||||||
|
const lTags = l.queryList().map(q => q.getNormalizedTag()).sort();
|
||||||
|
const rTags = r.queryList().map(q => q.getNormalizedTag()).sort();
|
||||||
|
let match = false;
|
||||||
|
|
||||||
|
if (lTags.length == rTags.length) {
|
||||||
|
match = true;
|
||||||
|
|
||||||
|
for (const tag of lTags) {
|
||||||
|
match = rTags.includes(tag);
|
||||||
|
if (!match) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return match;
|
||||||
|
}
|
||||||
|
|
||||||
|
@HostListener("window:keydown", ["$event"])
|
||||||
|
private async handleKeydownEvent(event: KeyboardEvent) {
|
||||||
|
if (event.key === "Shift") {
|
||||||
|
this.mode = "OR";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@HostListener("window:keyup", ["$event"])
|
||||||
|
private async handleKeyupEvent(event: KeyboardEvent) {
|
||||||
|
if (event.key === "Shift") {
|
||||||
|
this.mode = "AND";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<div *ngIf="expression.data.filter_type === 'Query'" (click)="onSelect()">
|
||||||
|
{{expression.data.getDisplayName()}}
|
||||||
|
<button mat-button class="remove-button" (click)="this.removeClicked.emit(this)">
|
||||||
|
<mat-icon>remove</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="expression.data.filter_type === 'OrExpression'">
|
||||||
|
<mat-list>
|
||||||
|
<mat-list-item class="or-filter-list-item" *ngFor="let entry of enumerate(this.expression.data.queryList())"
|
||||||
|
(mousedown)="$event.button === 0 && this.selectInnerIndex(entry[0])" [class.selected]="this.selectedIndices.includes(entry[0])">
|
||||||
|
<span class="or-span" *ngIf="entry[0] > 0">OR</span>
|
||||||
|
{{entry[1].getNormalizedTag()}}
|
||||||
|
<button mat-button class="remove-button-inner-list" (mousedown)="$event.button === 0 && this.removeOrExpression(entry[0])">
|
||||||
|
<mat-icon>remove</mat-icon>
|
||||||
|
</button>
|
||||||
|
</mat-list-item>
|
||||||
|
</mat-list>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
.remove-button, .remove-button-inner-list {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
z-index: 999;
|
||||||
|
top: calc(0.5em - 15px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.remove-button {
|
||||||
|
right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
mat-list {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
background-color: #353535;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.or-span {
|
||||||
|
margin-right: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected {
|
||||||
|
background-color: #5c5c5c;
|
||||||
|
}
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { TagFilterListItemComponent } from './tag-filter-list-item.component';
|
||||||
|
|
||||||
|
describe('TagFilterListItemComponent', () => {
|
||||||
|
let component: TagFilterListItemComponent;
|
||||||
|
let fixture: ComponentFixture<TagFilterListItemComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [ TagFilterListItemComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
});
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(TagFilterListItemComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
import {
|
||||||
|
ChangeDetectorRef,
|
||||||
|
Component,
|
||||||
|
EventEmitter,
|
||||||
|
Inject,
|
||||||
|
Input, OnChanges,
|
||||||
|
OnInit,
|
||||||
|
Output, SimpleChanges
|
||||||
|
} from '@angular/core';
|
||||||
|
import {
|
||||||
|
FilterExpression,
|
||||||
|
OrFilterExpression, SingleFilterExpression
|
||||||
|
} from "../../../../models/FilterExpression";
|
||||||
|
import {TagQuery} from "../../../../models/TagQuery";
|
||||||
|
import {Selectable} from "../../../../models/Selectable";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-tag-filter-list-item',
|
||||||
|
templateUrl: './tag-filter-list-item.component.html',
|
||||||
|
styleUrls: ['./tag-filter-list-item.component.scss']
|
||||||
|
})
|
||||||
|
export class TagFilterListItemComponent implements OnChanges {
|
||||||
|
|
||||||
|
@Input() expression!: Selectable<FilterExpression>;
|
||||||
|
@Output() removeClicked = new EventEmitter<TagFilterListItemComponent>();
|
||||||
|
@Output() querySelect = new EventEmitter<TagQuery>();
|
||||||
|
@Output() queryUnselect = new EventEmitter<TagQuery>();
|
||||||
|
|
||||||
|
public selectedIndices: number[] = [];
|
||||||
|
|
||||||
|
constructor(private changeDetector: ChangeDetectorRef) { }
|
||||||
|
|
||||||
|
public ngOnChanges(changes: SimpleChanges): void {
|
||||||
|
if (changes["expression"]) {
|
||||||
|
this.selectedIndices = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public enumerate<T>(items: T[]): [number, T][] {
|
||||||
|
return items.map((value, index) => [index, value]);
|
||||||
|
}
|
||||||
|
|
||||||
|
public removeOrExpression(index: number) {
|
||||||
|
const expression = this.expression.data as OrFilterExpression;
|
||||||
|
expression.removeQueryEntry(index);
|
||||||
|
|
||||||
|
if (expression.filter.length == 0) {
|
||||||
|
this.removeClicked.emit(this);
|
||||||
|
} else if (expression.filter.length == 1) {
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<mat-form-field>
|
||||||
|
<mat-label>
|
||||||
|
Enter a tag
|
||||||
|
</mat-label>
|
||||||
|
<input #tagInput
|
||||||
|
[formControl]="formControl"
|
||||||
|
matInput
|
||||||
|
(keydown.enter)="addTagByInput($event)"
|
||||||
|
[matAutocomplete]="auto">
|
||||||
|
<mat-autocomplete #auto (optionSelected)="addTagByAutocomplete($event)">
|
||||||
|
<mat-option *ngFor="let tag of autosuggestTags | async" [value]="tag">
|
||||||
|
{{tag}}
|
||||||
|
</mat-option>
|
||||||
|
</mat-autocomplete>
|
||||||
|
</mat-form-field>
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
mat-form-field {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { TagInputComponent } from './tag-input.component';
|
||||||
|
|
||||||
|
describe('TagInputComponent', () => {
|
||||||
|
let component: TagInputComponent;
|
||||||
|
let fixture: ComponentFixture<TagInputComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [ TagInputComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
});
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(TagInputComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,114 @@
|
|||||||
|
import {
|
||||||
|
Component, ElementRef,
|
||||||
|
EventEmitter,
|
||||||
|
Input, OnChanges,
|
||||||
|
OnInit,
|
||||||
|
Output, SimpleChanges,
|
||||||
|
ViewChild
|
||||||
|
} from '@angular/core';
|
||||||
|
import {Tag} from "../../../models/Tag";
|
||||||
|
import {FormControl} from "@angular/forms";
|
||||||
|
import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";
|
||||||
|
import {Observable} from "rxjs";
|
||||||
|
import {debounceTime, delay, map, startWith} from "rxjs/operators";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-tag-input',
|
||||||
|
templateUrl: './tag-input.component.html',
|
||||||
|
styleUrls: ['./tag-input.component.scss']
|
||||||
|
})
|
||||||
|
export class TagInputComponent implements OnChanges{
|
||||||
|
|
||||||
|
@Input() availableTags: Tag[] = [];
|
||||||
|
@Input() allowNegation: boolean = false;
|
||||||
|
@Input() allowInvalid: boolean = false;
|
||||||
|
@Output() tagAdded = new EventEmitter<string>();
|
||||||
|
|
||||||
|
@ViewChild("tagInput") tagInput!: ElementRef<HTMLInputElement>;
|
||||||
|
public formControl = new FormControl();
|
||||||
|
public autosuggestTags: Observable<string[]>;
|
||||||
|
private tagsForAutocomplete: string[] = [];
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.tagsForAutocomplete = this.availableTags.map(t => t.getNormalizedOutput());
|
||||||
|
this.autosuggestTags = this.formControl.valueChanges.pipe(
|
||||||
|
startWith(null),
|
||||||
|
debounceTime(250),
|
||||||
|
map((tag: string | null) => tag ? this.filterSuggestionTag(tag) : this.tagsForAutocomplete.slice(0, 20)));
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnChanges(changes: SimpleChanges): void {
|
||||||
|
if (changes["availableTags"]) {
|
||||||
|
this.tagsForAutocomplete = this.availableTags.map(t => t.getNormalizedOutput());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public addTagByInput(event: any): void {
|
||||||
|
this.addTag(this.formControl.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
public addTagByAutocomplete(event: MatAutocompleteSelectedEvent): void {
|
||||||
|
this.addTag(event.option.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
private addTag(value: string) {
|
||||||
|
const tag = this.normalizeTag(value);
|
||||||
|
if (tag.length > 0 && (this.allowInvalid || this.checkTagValid(tag))) {
|
||||||
|
this.tagAdded.emit(tag);
|
||||||
|
this.formControl.setValue("");
|
||||||
|
this.tagInput.nativeElement.value = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private filterSuggestionTag(tag: string) {
|
||||||
|
let normalizedTag = this.normalizeTag(tag);
|
||||||
|
const negated = normalizedTag.startsWith("-") && this.allowNegation;
|
||||||
|
normalizedTag = this.allowNegation? normalizedTag.replace(/^-/, "") : normalizedTag;
|
||||||
|
|
||||||
|
return this.tagsForAutocomplete.filter(
|
||||||
|
t => t.includes(normalizedTag))
|
||||||
|
.map(t => negated ? "-" + t: t)
|
||||||
|
.sort((l, r) => this.compareSuggestionTags(normalizedTag, l, r))
|
||||||
|
.slice(0, 20);
|
||||||
|
}
|
||||||
|
|
||||||
|
private checkTagValid(tag: string): boolean {
|
||||||
|
if (this.allowNegation) {
|
||||||
|
tag = tag.replace(/^-/, "");
|
||||||
|
}
|
||||||
|
return this.tagsForAutocomplete.includes(tag);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Normalizes the tag by removing whitespaces
|
||||||
|
* @param {string} tag
|
||||||
|
* @returns {string}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
private normalizeTag(tag: string): string {
|
||||||
|
let normalizedTag = tag.trim();
|
||||||
|
let parts = normalizedTag.split(":");
|
||||||
|
|
||||||
|
if (parts.length > 1) {
|
||||||
|
const namespace = parts.shift()!.trim();
|
||||||
|
const name = parts.join(":").trim();
|
||||||
|
return namespace + ":" + name;
|
||||||
|
} else {
|
||||||
|
return normalizedTag;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private compareSuggestionTags(query: string, l: string, r: string): number {
|
||||||
|
if (l.startsWith(query) && !r.startsWith(query)) {
|
||||||
|
return -1;
|
||||||
|
} else if (!l.startsWith(query) && r.startsWith(query)) {
|
||||||
|
return 1;
|
||||||
|
} else if (l.length < r.length) {
|
||||||
|
return -1;
|
||||||
|
} else if (l.length > r.length) {
|
||||||
|
return 1;
|
||||||
|
} else {
|
||||||
|
return l.localeCompare(r)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue