tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: Refactoring event filter panel

pull/9556/head
Artem Dzhereleiko 3 years ago
parent
e211e5759f
commit
cdaedc8b51
3 changed files with 65 additions and 70 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 86
      ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html
  2. 19
      ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.scss
  3. 30
      ui-ngx/src/app/modules/home/components/event/event-table-config.ts

86
ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html
View File

@ -15,50 +15,52 @@
limitations under the License. limitations under the License.
--> -->
<form fxLayout="column" class="mat-content mat-padding" [formGroup]="eventFilterFormGroup" (ngSubmit)="update()"> <form fxLayout="column" class="tb-filter" [formGroup]="eventFilterFormGroup" (ngSubmit)="update()">
<ng-container *ngFor="let column of showColumns"> <div fxLayout="column" class="tb-filter-container mat-padding">
<ng-container [ngSwitch]="column.key"> <ng-container *ngFor="let column of showColumns">
<ng-template [ngSwitchCase]="isSelector(column.key)"> <ng-container [ngSwitch]="column.key">
<mat-form-field> <ng-template [ngSwitchCase]="isSelector(column.key)">
<mat-label>{{ column.title | translate}}</mat-label> <mat-form-field>
<mat-select [formControlName]="column.key"> <mat-label>{{ column.title | translate}}</mat-label>
<mat-option [value]="">{{ 'event.all-events' | translate}}</mat-option> <mat-select [formControlName]="column.key">
<mat-option *ngFor="let value of selectorValues(column.key)" [value]="value"> <mat-option [value]="">{{ 'event.all-events' | translate}}</mat-option>
{{ value }} <mat-option *ngFor="let value of selectorValues(column.key)" [value]="value">
</mat-option> {{ value }}
</mat-select> </mat-option>
</mat-form-field> </mat-select>
</ng-template> </mat-form-field>
<ng-template [ngSwitchCase]="isNumberFields(column.key)"> </ng-template>
<mat-form-field> <ng-template [ngSwitchCase]="isNumberFields(column.key)">
<mat-label>{{ column.title | translate}}</mat-label> <mat-form-field>
<input matInput type="number" min="0" [name]="column.key" [formControlName]="column.key"> <mat-label>{{ column.title | translate}}</mat-label>
<mat-error *ngIf="eventFilterFormGroup.get(column.key).hasError('min')"> <input matInput type="number" min="0" [name]="column.key" [formControlName]="column.key">
{{ 'event.min-value' | translate }} <mat-error *ngIf="eventFilterFormGroup.get(column.key).hasError('min')">
</mat-error> {{ 'event.min-value' | translate }}
</mat-form-field> </mat-error>
</ng-template> </mat-form-field>
<ng-template [ngSwitchCase]="'isError'"> </ng-template>
<tb-checkbox formControlName="isError" [falseValue]="''" <ng-template [ngSwitchCase]="'isError'">
(ngModelChange)="changeIsError($event)"> <tb-checkbox formControlName="isError" [falseValue]="''"
{{ 'event.has-error' | translate }} (ngModelChange)="changeIsError($event)">
</tb-checkbox> {{ 'event.has-error' | translate }}
</ng-template> </tb-checkbox>
<ng-template [ngSwitchCase]="'errorStr'"> </ng-template>
<mat-form-field fxHide [fxShow]="showErrorMsgFields()"> <ng-template [ngSwitchCase]="'errorStr'">
<mat-label>{{ column.title | translate}}</mat-label> <mat-form-field fxHide [fxShow]="showErrorMsgFields()">
<input matInput type="text" name="errorSearchText" formControlName="errorStr"> <mat-label>{{ column.title | translate}}</mat-label>
</mat-form-field> <input matInput type="text" name="errorSearchText" formControlName="errorStr">
</ng-template> </mat-form-field>
<ng-container *ngSwitchDefault> </ng-template>
<mat-form-field> <ng-container *ngSwitchDefault>
<mat-label>{{ column.title | translate}}</mat-label> <mat-form-field>
<input matInput type="text" [name]="column.key" [formControlName]="column.key"> <mat-label>{{ column.title | translate}}</mat-label>
</mat-form-field> <input matInput type="text" [name]="column.key" [formControlName]="column.key">
</mat-form-field>
</ng-container>
</ng-container> </ng-container>
</ng-container> </ng-container>
</ng-container> </div>
<div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center"> <div fxLayout="row" class="tb-panel-actions mat-padding" fxLayoutAlign="end center">
<button type="button" <button type="button"
mat-button mat-button
(click)="cancel()"> (click)="cancel()">

19
ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.scss
View File

@ -16,20 +16,11 @@
:host { :host {
width: 100%; width: 100%;
min-width: 300px; 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 { .tb-filter {
overflow: hidden; height: 100%;
background-color: #fff; &-container {
} overflow: auto;
}
.mat-padding {
padding: 16px;
} }
} }

30
ui-ngx/src/app/modules/home/components/event/event-table-config.ts
View File

@ -30,7 +30,7 @@ import { EntityId } from '@shared/models/id/entity-id';
import { EventService } from '@app/core/http/event.service'; import { EventService } from '@app/core/http/event.service';
import { EventTableHeaderComponent } from '@home/components/event/event-table-header.component'; import { EventTableHeaderComponent } from '@home/components/event/event-table-header.component';
import { EntityTypeResource } from '@shared/models/entity-type.models'; 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 { PageData } from '@shared/models/page/page-data';
import { Direction } from '@shared/models/page/sort-order'; import { Direction } from '@shared/models/page/sort-order';
import { DialogService } from '@core/services/dialog.service'; import { DialogService } from '@core/services/dialog.service';
@ -50,6 +50,7 @@ import {
EventFilterPanelData, EventFilterPanelData,
FilterEntityColumn FilterEntityColumn
} from '@home/components/event/event-filter-panel.component'; } from '@home/components/event/event-filter-panel.component';
import { DEFAULT_OVERLAY_POSITIONS } from '@shared/models/overlay.models';
export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> { export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
@ -457,19 +458,16 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
$event.stopPropagation(); $event.stopPropagation();
} }
const target = $event.target || $event.srcElement || $event.currentTarget; const target = $event.target || $event.srcElement || $event.currentTarget;
const config = new OverlayConfig(); const config = new OverlayConfig({
config.backdropClass = 'cdk-overlay-transparent-backdrop'; panelClass: 'tb-panel-container',
config.hasBackdrop = true; backdropClass: 'cdk-overlay-transparent-backdrop',
const connectedPosition: ConnectedPosition = { hasBackdrop: true,
originX: 'end', height: 'fit-content',
originY: 'bottom', maxHeight: '65vh'
overlayX: 'end', });
overlayY: 'top' config.positionStrategy = this.overlay.position()
}; .flexibleConnectedTo(target as HTMLElement)
config.positionStrategy = this.overlay.position().flexibleConnectedTo(target as HTMLElement) .withPositions(DEFAULT_OVERLAY_POSITIONS);
.withPositions([connectedPosition]);
config.maxHeight = '70vh';
config.height = 'min-content';
const overlayRef = this.overlay.create(config); const overlayRef = this.overlay.create(config);
overlayRef.backdropClick().subscribe(() => { overlayRef.backdropClick().subscribe(() => {
@ -491,7 +489,11 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
const injector = Injector.create({parent: this.viewContainerRef.injector, providers}); const injector = Injector.create({parent: this.viewContainerRef.injector, providers});
const componentRef = overlayRef.attach(new ComponentPortal(EventFilterPanelComponent, const componentRef = overlayRef.attach(new ComponentPortal(EventFilterPanelComponent,
this.viewContainerRef, injector)); this.viewContainerRef, injector));
const resizeWindows$ = fromEvent(window, 'resize').subscribe(() => {
overlayRef.updatePosition();
});
componentRef.onDestroy(() => { componentRef.onDestroy(() => {
resizeWindows$.unsubscribe();
if (componentRef.instance.result && !isEqual(this.filterParams, componentRef.instance.result.filterParams)) { if (componentRef.instance.result && !isEqual(this.filterParams, componentRef.instance.result.filterParams)) {
this.filterParams = componentRef.instance.result.filterParams; this.filterParams = componentRef.instance.result.filterParams;
this.getTable().paginator.pageIndex = 0; this.getTable().paginator.pageIndex = 0;

Write Preview
Loading…
Cancel
Save