UI: Refactoring event filter panel
This commit is contained in:
Artem Dzhereleiko
parent
e211e5759f
commit
cdaedc8b51
@ -15,50 +15,52 @@
|
||||
limitations under the License.
|
||||
|
||||
-->
|
||||
<form fxLayout="column" class="mat-content mat-padding" [formGroup]="eventFilterFormGroup" (ngSubmit)="update()">
|
||||
<ng-container *ngFor="let column of showColumns">
|
||||
<ng-container [ngSwitch]="column.key">
|
||||
<ng-template [ngSwitchCase]="isSelector(column.key)">
|
||||
<mat-form-field>
|
||||
<mat-label>{{ column.title | translate}}</mat-label>
|
||||
<mat-select [formControlName]="column.key">
|
||||
<mat-option [value]="">{{ 'event.all-events' | translate}}</mat-option>
|
||||
<mat-option *ngFor="let value of selectorValues(column.key)" [value]="value">
|
||||
{{ value }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</ng-template>
|
||||
<ng-template [ngSwitchCase]="isNumberFields(column.key)">
|
||||
<mat-form-field>
|
||||
<mat-label>{{ column.title | translate}}</mat-label>
|
||||
<input matInput type="number" min="0" [name]="column.key" [formControlName]="column.key">
|
||||
<mat-error *ngIf="eventFilterFormGroup.get(column.key).hasError('min')">
|
||||
{{ 'event.min-value' | translate }}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
</ng-template>
|
||||
<ng-template [ngSwitchCase]="'isError'">
|
||||
<tb-checkbox formControlName="isError" [falseValue]="''"
|
||||
(ngModelChange)="changeIsError($event)">
|
||||
{{ 'event.has-error' | translate }}
|
||||
</tb-checkbox>
|
||||
</ng-template>
|
||||
<ng-template [ngSwitchCase]="'errorStr'">
|
||||
<mat-form-field fxHide [fxShow]="showErrorMsgFields()">
|
||||
<mat-label>{{ column.title | translate}}</mat-label>
|
||||
<input matInput type="text" name="errorSearchText" formControlName="errorStr">
|
||||
</mat-form-field>
|
||||
</ng-template>
|
||||
<ng-container *ngSwitchDefault>
|
||||
<mat-form-field>
|
||||
<mat-label>{{ column.title | translate}}</mat-label>
|
||||
<input matInput type="text" [name]="column.key" [formControlName]="column.key">
|
||||
</mat-form-field>
|
||||
<form fxLayout="column" class="tb-filter" [formGroup]="eventFilterFormGroup" (ngSubmit)="update()">
|
||||
<div fxLayout="column" class="tb-filter-container mat-padding">
|
||||
<ng-container *ngFor="let column of showColumns">
|
||||
<ng-container [ngSwitch]="column.key">
|
||||
<ng-template [ngSwitchCase]="isSelector(column.key)">
|
||||
<mat-form-field>
|
||||
<mat-label>{{ column.title | translate}}</mat-label>
|
||||
<mat-select [formControlName]="column.key">
|
||||
<mat-option [value]="">{{ 'event.all-events' | translate}}</mat-option>
|
||||
<mat-option *ngFor="let value of selectorValues(column.key)" [value]="value">
|
||||
{{ value }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</ng-template>
|
||||
<ng-template [ngSwitchCase]="isNumberFields(column.key)">
|
||||
<mat-form-field>
|
||||
<mat-label>{{ column.title | translate}}</mat-label>
|
||||
<input matInput type="number" min="0" [name]="column.key" [formControlName]="column.key">
|
||||
<mat-error *ngIf="eventFilterFormGroup.get(column.key).hasError('min')">
|
||||
{{ 'event.min-value' | translate }}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
</ng-template>
|
||||
<ng-template [ngSwitchCase]="'isError'">
|
||||
<tb-checkbox formControlName="isError" [falseValue]="''"
|
||||
(ngModelChange)="changeIsError($event)">
|
||||
{{ 'event.has-error' | translate }}
|
||||
</tb-checkbox>
|
||||
</ng-template>
|
||||
<ng-template [ngSwitchCase]="'errorStr'">
|
||||
<mat-form-field fxHide [fxShow]="showErrorMsgFields()">
|
||||
<mat-label>{{ column.title | translate}}</mat-label>
|
||||
<input matInput type="text" name="errorSearchText" formControlName="errorStr">
|
||||
</mat-form-field>
|
||||
</ng-template>
|
||||
<ng-container *ngSwitchDefault>
|
||||
<mat-form-field>
|
||||
<mat-label>{{ column.title | translate}}</mat-label>
|
||||
<input matInput type="text" [name]="column.key" [formControlName]="column.key">
|
||||
</mat-form-field>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center">
|
||||
</div>
|
||||
<div fxLayout="row" class="tb-panel-actions mat-padding" fxLayoutAlign="end center">
|
||||
<button type="button"
|
||||
mat-button
|
||||
(click)="cancel()">
|
||||
|
||||
@ -16,20 +16,11 @@
|
||||
:host {
|
||||
width: 100%;
|
||||
min-width: 300px;
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow:
|
||||
0 7px 8px -4px rgba(0, 0, 0, .2),
|
||||
0 13px 19px 2px rgba(0, 0, 0, .14),
|
||||
0 5px 24px 4px rgba(0, 0, 0, .12);
|
||||
|
||||
.mat-content {
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.mat-padding {
|
||||
padding: 16px;
|
||||
.tb-filter {
|
||||
height: 100%;
|
||||
&-container {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,7 +30,7 @@ import { EntityId } from '@shared/models/id/entity-id';
|
||||
import { EventService } from '@app/core/http/event.service';
|
||||
import { EventTableHeaderComponent } from '@home/components/event/event-table-header.component';
|
||||
import { EntityTypeResource } from '@shared/models/entity-type.models';
|
||||
import { Observable } from 'rxjs';
|
||||
import { fromEvent, Observable } from 'rxjs';
|
||||
import { PageData } from '@shared/models/page/page-data';
|
||||
import { Direction } from '@shared/models/page/sort-order';
|
||||
import { DialogService } from '@core/services/dialog.service';
|
||||
@ -50,6 +50,7 @@ import {
|
||||
EventFilterPanelData,
|
||||
FilterEntityColumn
|
||||
} from '@home/components/event/event-filter-panel.component';
|
||||
import { DEFAULT_OVERLAY_POSITIONS } from '@shared/models/overlay.models';
|
||||
|
||||
export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
|
||||
|
||||
@ -457,19 +458,16 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
|
||||
$event.stopPropagation();
|
||||
}
|
||||
const target = $event.target || $event.srcElement || $event.currentTarget;
|
||||
const config = new OverlayConfig();
|
||||
config.backdropClass = 'cdk-overlay-transparent-backdrop';
|
||||
config.hasBackdrop = true;
|
||||
const connectedPosition: ConnectedPosition = {
|
||||
originX: 'end',
|
||||
originY: 'bottom',
|
||||
overlayX: 'end',
|
||||
overlayY: 'top'
|
||||
};
|
||||
config.positionStrategy = this.overlay.position().flexibleConnectedTo(target as HTMLElement)
|
||||
.withPositions([connectedPosition]);
|
||||
config.maxHeight = '70vh';
|
||||
config.height = 'min-content';
|
||||
const config = new OverlayConfig({
|
||||
panelClass: 'tb-panel-container',
|
||||
backdropClass: 'cdk-overlay-transparent-backdrop',
|
||||
hasBackdrop: true,
|
||||
height: 'fit-content',
|
||||
maxHeight: '65vh'
|
||||
});
|
||||
config.positionStrategy = this.overlay.position()
|
||||
.flexibleConnectedTo(target as HTMLElement)
|
||||
.withPositions(DEFAULT_OVERLAY_POSITIONS);
|
||||
|
||||
const overlayRef = this.overlay.create(config);
|
||||
overlayRef.backdropClick().subscribe(() => {
|
||||
@ -491,7 +489,11 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
|
||||
const injector = Injector.create({parent: this.viewContainerRef.injector, providers});
|
||||
const componentRef = overlayRef.attach(new ComponentPortal(EventFilterPanelComponent,
|
||||
this.viewContainerRef, injector));
|
||||
const resizeWindows$ = fromEvent(window, 'resize').subscribe(() => {
|
||||
overlayRef.updatePosition();
|
||||
});
|
||||
componentRef.onDestroy(() => {
|
||||
resizeWindows$.unsubscribe();
|
||||
if (componentRef.instance.result && !isEqual(this.filterParams, componentRef.instance.result.filterParams)) {
|
||||
this.filterParams = componentRef.instance.result.filterParams;
|
||||
this.getTable().paginator.pageIndex = 0;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user