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

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

@ -15,7 +15,8 @@
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()">
<div fxLayout="column" class="tb-filter-container mat-padding">
<ng-container *ngFor="let column of showColumns"> <ng-container *ngFor="let column of showColumns">
<ng-container [ngSwitch]="column.key"> <ng-container [ngSwitch]="column.key">
<ng-template [ngSwitchCase]="isSelector(column.key)"> <ng-template [ngSwitchCase]="isSelector(column.key)">
@ -58,7 +59,8 @@
</ng-container> </ng-container>
</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" <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;
.tb-filter {
height: 100%;
&-container {
overflow: auto; 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;
} }
} }

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;