dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Refactoring event filter panel

Browse Source
This commit is contained in:
Artem Dzhereleiko 2023-11-02 16:52:51 +02:00
parent e211e5759f
commit cdaedc8b51
3 changed files with 65 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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;