Improve filter query display performance
Signed-off-by: trivernis <trivernis@protonmail.com>pull/3/head
parent
96c44d1fbc
commit
83f820e8ea
GPG Key ID:
DFFFCC2C7A02DB45
@ -0,0 +1,8 @@
|
||||
import { HasPropertyPipe } from './has-property.pipe';
|
||||
|
||||
describe('HasPropertyPipe', () => {
|
||||
it('create an instance', () => {
|
||||
const pipe = new HasPropertyPipe();
|
||||
expect(pipe).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,11 @@
|
||||
import {Pipe, PipeTransform} from "@angular/core";
|
||||
|
||||
@Pipe({
|
||||
name: "hasProperty"
|
||||
})
|
||||
export class HasPropertyPipe implements PipeTransform {
|
||||
|
||||
transform(value: any, propertyName: string): unknown {
|
||||
return propertyName in value;
|
||||
}
|
||||
}
|
||||
@ -1,15 +1,15 @@
|
||||
<span *ngIf="is('OrExpression')" class="or-expression">
|
||||
<ng-container *ngFor="let query of this.orExpression().OrExpression">
|
||||
<app-property-query-item *ngIf="this.queryIs(query, 'Property')"
|
||||
[propertyQuery]="this.propertyQuery(query).Property"></app-property-query-item>
|
||||
<app-tag-query-item *ngIf="this.queryIs(query, 'Tag')"
|
||||
[tagQuery]="this.tagQuery(query).Tag"></app-tag-query-item>
|
||||
<span *ngIf="this.orExpression" class="or-expression">
|
||||
<ng-container *ngFor="let query of this.orExpression">
|
||||
<app-property-query-item *ngIf="query | hasProperty: 'Property'"
|
||||
[propertyQuery]="query | getPropertyQuery"></app-property-query-item>
|
||||
<app-tag-query-item *ngIf="query | hasProperty: 'Tag'"
|
||||
[tagQuery]="query | getTagQuery"></app-tag-query-item>
|
||||
<span class="or-combinator"> OR </span>
|
||||
</ng-container>
|
||||
</span>
|
||||
<span *ngIf="is('Query')" class="query">
|
||||
<app-property-query-item *ngIf="this.queryIs(this.query().Query, 'Property')"
|
||||
[propertyQuery]="this.propertyQuery(this.query().Query).Property"></app-property-query-item>
|
||||
<app-tag-query-item *ngIf="this.queryIs(this.query().Query, 'Tag')"
|
||||
[tagQuery]="this.tagQuery(this.query().Query).Tag"></app-tag-query-item>
|
||||
<span *ngIf="this.query" class="query">
|
||||
<app-property-query-item *ngIf="this.query | hasProperty: 'Property'"
|
||||
[propertyQuery]="this.query | getPropertyQuery"></app-property-query-item>
|
||||
<app-tag-query-item *ngIf="this.query | hasProperty: 'Tag'"
|
||||
[tagQuery]="this.query | getTagQuery"></app-tag-query-item>
|
||||
</span>
|
||||
|
||||
@ -1,47 +1,35 @@
|
||||
import {Component, Input} from "@angular/core";
|
||||
import {
|
||||
FilterExpression,
|
||||
FilterExpressionOrExpression,
|
||||
FilterExpressionQuery,
|
||||
FilterQuery,
|
||||
FilterQueryProperty,
|
||||
FilterQueryTag
|
||||
} from "../../../../../../api/api-types/files";
|
||||
import {ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges} from "@angular/core";
|
||||
import {FilterExpression, FilterQuery} from "../../../../../../api/api-types/files";
|
||||
|
||||
@Component({
|
||||
selector: "app-filter-expression-item",
|
||||
templateUrl: "./filter-expression-item.component.html",
|
||||
styleUrls: ["./filter-expression-item.component.scss"]
|
||||
styleUrls: ["./filter-expression-item.component.scss"],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class FilterExpressionItemComponent {
|
||||
|
||||
|
||||
export class FilterExpressionItemComponent implements OnInit, OnChanges {
|
||||
@Input() filter!: FilterExpression;
|
||||
public orExpression?: FilterQuery[];
|
||||
public query?: FilterQuery;
|
||||
|
||||
constructor() {
|
||||
}
|
||||
|
||||
public is(key: "OrExpression" | "Query"): boolean {
|
||||
return key in this.filter;
|
||||
}
|
||||
|
||||
public orExpression(): FilterExpressionOrExpression {
|
||||
return this.filter as FilterExpressionOrExpression;
|
||||
}
|
||||
|
||||
public query(): FilterExpressionQuery {
|
||||
return this.filter as FilterExpressionQuery;
|
||||
}
|
||||
|
||||
public queryIs(query: FilterQuery, key: "Property" | "Tag"): boolean {
|
||||
return key in query;
|
||||
public ngOnInit(): void {
|
||||
this.parseQuery();
|
||||
}
|
||||
|
||||
public propertyQuery(query: FilterQuery): FilterQueryProperty {
|
||||
return query as FilterQueryProperty;
|
||||
public ngOnChanges(changes: SimpleChanges): void {
|
||||
if (changes["filter"]) {
|
||||
this.parseQuery();
|
||||
}
|
||||
}
|
||||
|
||||
public tagQuery(query: FilterQuery): FilterQueryTag {
|
||||
return query as FilterQueryTag;
|
||||
private parseQuery() {
|
||||
if ("Query" in this.filter) {
|
||||
this.query = this.filter.Query;
|
||||
} else {
|
||||
this.orExpression = this.filter.OrExpression;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,8 @@
|
||||
import { GetPropertyQueryPipe } from './get-property-query.pipe';
|
||||
|
||||
describe('GetPropertyQueryPipe', () => {
|
||||
it('create an instance', () => {
|
||||
const pipe = new GetPropertyQueryPipe();
|
||||
expect(pipe).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,13 @@
|
||||
import {Pipe, PipeTransform} from "@angular/core";
|
||||
import {FilterQuery, FilterQueryProperty, PropertyQuery} from "../../../../../../api/api-types/files";
|
||||
|
||||
@Pipe({
|
||||
name: "getPropertyQuery"
|
||||
})
|
||||
export class GetPropertyQueryPipe implements PipeTransform {
|
||||
|
||||
transform(value: FilterQuery): PropertyQuery {
|
||||
return (value as FilterQueryProperty).Property;
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
import { GetTagQueryPipe } from './get-tag-query.pipe';
|
||||
|
||||
describe('GetTagQueryPipe', () => {
|
||||
it('create an instance', () => {
|
||||
const pipe = new GetTagQueryPipe();
|
||||
expect(pipe).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,12 @@
|
||||
import {Pipe, PipeTransform} from "@angular/core";
|
||||
import {FilterQuery, FilterQueryTag, TagQuery} from "../../../../../../api/api-types/files";
|
||||
|
||||
@Pipe({
|
||||
name: "getTagQuery"
|
||||
})
|
||||
export class GetTagQueryPipe implements PipeTransform {
|
||||
|
||||
transform(value: FilterQuery): TagQuery {
|
||||
return (value as FilterQueryTag).Tag;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue