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

UI: Refactoring overlay

pull/8062/head
Artem Dzhereleiko 4 years ago
parent
97a94ef5a0
commit
dec459c196
2 changed files with 83 additions and 71 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. 64
      ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts
  2. 90
      ui-ngx/src/app/shared/components/time/timewindow.component.ts

64
ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts
View File

@ -14,7 +14,7 @@
/// limitations under the License. /// limitations under the License.
/// ///
import { Component, Input, OnInit, ViewContainerRef } from '@angular/core'; import { Component, Inject, InjectionToken, OnInit, ViewContainerRef } from '@angular/core';
import { import {
aggregationTranslations, aggregationTranslations,
AggregationType, AggregationType,
@ -31,6 +31,7 @@ import { AppState } from '@core/core.state';
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { TimeService } from '@core/services/time.service'; import { TimeService } from '@core/services/time.service';
import { isDefined } from '@core/utils'; import { isDefined } from '@core/utils';
import { OverlayRef } from '@angular/cdk/overlay';
export interface TimewindowPanelData { export interface TimewindowPanelData {
historyOnly: boolean; historyOnly: boolean;
@ -41,6 +42,8 @@ export interface TimewindowPanelData {
isEdit: boolean; isEdit: boolean;
} }
export const TIMEWINDOW_PANEL_DATA = new InjectionToken<any>('TimewindowPanelData');
@Component({ @Component({
selector: 'tb-timewindow-panel', selector: 'tb-timewindow-panel',
templateUrl: './timewindow-panel.component.html', templateUrl: './timewindow-panel.component.html',
@ -48,12 +51,6 @@ export interface TimewindowPanelData {
}) })
export class TimewindowPanelComponent extends PageComponent implements OnInit { export class TimewindowPanelComponent extends PageComponent implements OnInit {
@Input()
data: any;
@Input()
onClose: (result: Timewindow | null) => void;
historyOnly = false; historyOnly = false;
quickIntervalOnly = false; quickIntervalOnly = false;
@ -80,23 +77,24 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
aggregationTypesTranslations = aggregationTranslations; aggregationTypesTranslations = aggregationTranslations;
private result: Timewindow; result: Timewindow;
constructor(protected store: Store<AppState>, constructor(@Inject(TIMEWINDOW_PANEL_DATA) public data: TimewindowPanelData,
public overlayRef: OverlayRef,
protected store: Store<AppState>,
public fb: UntypedFormBuilder, public fb: UntypedFormBuilder,
private timeService: TimeService, private timeService: TimeService,
public viewContainerRef: ViewContainerRef) { public viewContainerRef: ViewContainerRef) {
super(store); super(store);
this.historyOnly = data.historyOnly;
this.quickIntervalOnly = data.quickIntervalOnly;
this.timewindow = data.timewindow;
this.aggregation = data.aggregation;
this.timezone = data.timezone;
this.isEdit = data.isEdit;
} }
ngOnInit(): void { ngOnInit(): void {
this.historyOnly = this.data.historyOnly;
this.quickIntervalOnly = this.data.quickIntervalOnly;
this.timewindow = this.data.timewindow;
this.aggregation = this.data.aggregation;
this.timezone = this.data.timezone;
this.isEdit = this.data.isEdit;
const hideInterval = this.timewindow.hideInterval || false; const hideInterval = this.timewindow.hideInterval || false;
const hideLastInterval = this.timewindow.hideLastInterval || false; const hideLastInterval = this.timewindow.hideLastInterval || false;
const hideQuickInterval = this.timewindow.hideQuickInterval || false; const hideQuickInterval = this.timewindow.hideQuickInterval || false;
@ -111,46 +109,46 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
this.timewindowForm = this.fb.group({ this.timewindowForm = this.fb.group({
realtime: this.fb.group({ realtime: this.fb.group({
realtimeType: [{ realtimeType: [{
value: this.defined(realtime, realtime.realtimeType) ? this.timewindow.realtime.realtimeType : RealtimeWindowType.LAST_INTERVAL, value: isDefined(realtime?.realtimeType) ? this.timewindow.realtime.realtimeType : RealtimeWindowType.LAST_INTERVAL,
disabled: hideInterval disabled: hideInterval
}], }],
timewindowMs: [{ timewindowMs: [{
value: this.defined(realtime, realtime.timewindowMs) ? this.timewindow.realtime.timewindowMs : null, value: isDefined(realtime?.timewindowMs) ? this.timewindow.realtime.timewindowMs : null,
disabled: hideInterval || hideLastInterval disabled: hideInterval || hideLastInterval
}], }],
interval: [this.defined(realtime, realtime.interval) ? this.timewindow.realtime.interval : null], interval: [isDefined(realtime?.interval) ? this.timewindow.realtime.interval : null],
quickInterval: [{ quickInterval: [{
value: this.defined(realtime, realtime.quickInterval) ? this.timewindow.realtime.quickInterval : null, value: isDefined(realtime?.quickInterval) ? this.timewindow.realtime.quickInterval : null,
disabled: hideInterval || hideQuickInterval disabled: hideInterval || hideQuickInterval
}] }]
}), }),
history: this.fb.group({ history: this.fb.group({
historyType: [{ historyType: [{
value: this.defined(history, history.historyType) ? this.timewindow.history.historyType : HistoryWindowType.LAST_INTERVAL, value: isDefined(history?.historyType) ? this.timewindow.history.historyType : HistoryWindowType.LAST_INTERVAL,
disabled: hideInterval disabled: hideInterval
}], }],
timewindowMs: [{ timewindowMs: [{
value: this.defined(history, history.timewindowMs) ? this.timewindow.history.timewindowMs : null, value: isDefined(history?.timewindowMs) ? this.timewindow.history.timewindowMs : null,
disabled: hideInterval disabled: hideInterval
}], }],
interval: [ this.defined(history, history.interval) ? this.timewindow.history.interval : null interval: [ isDefined(history?.interval) ? this.timewindow.history.interval : null
], ],
fixedTimewindow: [{ fixedTimewindow: [{
value: this.defined(history, history.fixedTimewindow) ? this.timewindow.history.fixedTimewindow : null, value: isDefined(history?.fixedTimewindow) ? this.timewindow.history.fixedTimewindow : null,
disabled: hideInterval disabled: hideInterval
}], }],
quickInterval: [{ quickInterval: [{
value: this.defined(history, history.quickInterval) ? this.timewindow.history.quickInterval : null, value: isDefined(history?.quickInterval) ? this.timewindow.history.quickInterval : null,
disabled: hideInterval disabled: hideInterval
}] }]
}), }),
aggregation: this.fb.group({ aggregation: this.fb.group({
type: [{ type: [{
value: this.defined(aggregation, aggregation.type) ? this.timewindow.aggregation.type : null, value: isDefined(aggregation?.type) ? this.timewindow.aggregation.type : null,
disabled: hideAggregation disabled: hideAggregation
}], }],
limit: [{ limit: [{
value: this.defined(aggregation, aggregation.limit) ? this.checkLimit(this.timewindow.aggregation.limit) : null, value: isDefined(aggregation?.limit) ? this.checkLimit(this.timewindow.aggregation.limit) : null,
disabled: hideAggInterval disabled: hideAggInterval
}, []] }, []]
}), }),
@ -165,10 +163,6 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
}); });
} }
private defined(arg1, arg2) {
return arg1 && isDefined(arg2);
}
private checkLimit(limit?: number): number { private checkLimit(limit?: number): number {
if (!limit || limit < this.minDatapointsLimit()) { if (!limit || limit < this.minDatapointsLimit()) {
return this.minDatapointsLimit(); return this.minDatapointsLimit();
@ -214,13 +208,11 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
this.timewindow.timezone = timewindowFormValue.timezone; this.timewindow.timezone = timewindowFormValue.timezone;
} }
this.result = this.timewindow; this.result = this.timewindow;
this.cancel(this.result); this.overlayRef.dispose();
} }
cancel(result: Timewindow | null = null) { cancel() {
if (this.onClose) { this.overlayRef.dispose();
this.onClose(result);
}
} }
minDatapointsLimit() { minDatapointsLimit() {

90
ui-ngx/src/app/shared/components/time/timewindow.component.ts
View File

@ -18,10 +18,11 @@ import {
ChangeDetectorRef, ChangeDetectorRef,
Component, Component,
forwardRef, forwardRef,
Injector,
Input, Input,
OnDestroy, OnDestroy,
OnInit, OnInit,
Renderer2, StaticProvider,
ViewContainerRef ViewContainerRef
} from '@angular/core'; } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@ -38,14 +39,15 @@ import {
TimewindowType TimewindowType
} from '@shared/models/time/time.models'; } from '@shared/models/time/time.models';
import { DatePipe } from '@angular/common'; import { DatePipe } from '@angular/common';
import { TimewindowPanelComponent } from '@shared/components/time/timewindow-panel.component'; import { TIMEWINDOW_PANEL_DATA, TimewindowPanelComponent } from '@shared/components/time/timewindow-panel.component';
import { MediaBreakpoints } from '@shared/models/constants'; import { MediaBreakpoints } from '@shared/models/constants';
import { BreakpointObserver } from '@angular/cdk/layout'; import { BreakpointObserver } from '@angular/cdk/layout';
import { TimeService } from '@core/services/time.service'; import { TimeService } from '@core/services/time.service';
import { TooltipPosition } from '@angular/material/tooltip'; import { TooltipPosition } from '@angular/material/tooltip';
import { deepClone, isDefinedAndNotNull } from '@core/utils'; import { deepClone, isDefinedAndNotNull } from '@core/utils';
import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { TbPopoverService } from '@shared/components/popover.service'; import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
// @dynamic // @dynamic
@Component({ @Component({
@ -171,13 +173,12 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
private propagateChange = (_: any) => {}; private propagateChange = (_: any) => {};
constructor(private translate: TranslateService, constructor(private overlay: Overlay,
private translate: TranslateService,
private timeService: TimeService, private timeService: TimeService,
private millisecondsToTimeStringPipe: MillisecondsToTimeStringPipe, private millisecondsToTimeStringPipe: MillisecondsToTimeStringPipe,
private datePipe: DatePipe, private datePipe: DatePipe,
private cd: ChangeDetectorRef, private cd: ChangeDetectorRef,
private popoverService: TbPopoverService,
private renderer: Renderer2,
public viewContainerRef: ViewContainerRef, public viewContainerRef: ViewContainerRef,
public breakpointObserver: BreakpointObserver) { public breakpointObserver: BreakpointObserver) {
} }
@ -192,35 +193,54 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
if ($event) { if ($event) {
$event.stopPropagation(); $event.stopPropagation();
} }
const trigger = ($event.target || $event.srcElement || $event.currentTarget) as Element; const target = $event.target || $event.srcElement || $event.currentTarget;
if (this.popoverService.hasPopover(trigger)) { const config = new OverlayConfig();
this.popoverService.hidePopover(trigger); config.backdropClass = 'cdk-overlay-transparent-backdrop';
} else { config.hasBackdrop = true;
const timewindowPopover = this.popoverService.displayPopover(trigger, this.renderer, const connectedPosition: ConnectedPosition = {
this.viewContainerRef, TimewindowPanelComponent, 'leftTop', true, null, originX: 'end',
{ originY: 'bottom',
data: { overlayX: 'end',
timewindow: deepClone(this.innerValue), overlayY: 'top'
historyOnly: this.historyOnly, };
quickIntervalOnly: this.quickIntervalOnly, config.positionStrategy = this.overlay.position().flexibleConnectedTo(target as HTMLElement)
aggregation: this.aggregation, .withPositions([connectedPosition]);
timezone: this.timezone, config.maxHeight = '70vh';
isEdit: this.isEdit config.height = 'min-content';
},
onClose: (result: Timewindow) => { const overlayRef = this.overlay.create(config);
timewindowPopover.hide(); overlayRef.backdropClick().subscribe(() => {
if (result) { overlayRef.dispose();
this.innerValue = result; });
this.timewindowDisabled = this.isTimewindowDisabled(); const providers: StaticProvider[] = [
this.updateDisplayValue(); {
this.notifyChanged(); provide: TIMEWINDOW_PANEL_DATA,
} useValue: {
} timewindow: deepClone(this.innerValue),
}, historyOnly: this.historyOnly,
{maxHeight: '100vh', height: '100%', padding: '10px'}, quickIntervalOnly: this.quickIntervalOnly,
{minWidth: '100%', maxWidth: '100%'}, {}, false); aggregation: this.aggregation,
timewindowPopover.tbComponentRef.instance.popoverComponent = timewindowPopover; timezone: this.timezone,
} isEdit: this.isEdit
}
},
{
provide: OverlayRef,
useValue: overlayRef
}
];
const injector = Injector.create({parent: this.viewContainerRef.injector, providers});
const componentRef = overlayRef.attach(new ComponentPortal(TimewindowPanelComponent,
this.viewContainerRef, injector));
componentRef.onDestroy(() => {
if (componentRef.instance.result) {
this.innerValue = componentRef.instance.result;
this.timewindowDisabled = this.isTimewindowDisabled();
this.updateDisplayValue();
this.notifyChanged();
}
});
this.cd.detectChanges();
} }
private onHistoryOnlyChanged(): boolean { private onHistoryOnlyChanged(): boolean {

Write Preview
Loading…
Cancel
Save