Igor Kulikov
6 years ago
48 changed files with 856 additions and 173 deletions
@ -0,0 +1,28 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2020 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
:host { |
||||
|
.tb-editable-switch { |
||||
|
padding-left: 10px; |
||||
|
|
||||
|
.editable-switch { |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.editable-label { |
||||
|
margin: 5px 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,29 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2020 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
:host { |
||||
|
.predicate-list { |
||||
|
overflow: auto; |
||||
|
max-height: 350px; |
||||
|
.no-data-found { |
||||
|
height: 50px; |
||||
|
} |
||||
|
} |
||||
|
.filters-operation { |
||||
|
margin-top: -40px; |
||||
|
color: #666; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,29 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2020 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
:host ::ng-deep { |
||||
|
mat-form-field { |
||||
|
.mat-form-field-wrapper { |
||||
|
padding-bottom: 0; |
||||
|
.mat-form-field-infix { |
||||
|
border-top-width: 0.2em; |
||||
|
width: auto; |
||||
|
} |
||||
|
.mat-form-field-underline { |
||||
|
bottom: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,33 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2020 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<div fxLayout="column" class="mat-content mat-padding"> |
||||
|
<div fxLayout="column" *ngFor="let filter of filtersInfo | keyvalue"> |
||||
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center"> |
||||
|
<mat-label fxFlex>{{filter.value.filter}}</mat-label> |
||||
|
<button mat-icon-button color="primary" |
||||
|
style="min-width: 40px;" |
||||
|
type="button" |
||||
|
(click)="editFilter(filter.key, filter.value)" |
||||
|
matTooltip="{{ 'filter.edit' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>edit</mat-icon> |
||||
|
</button> |
||||
|
</div> |
||||
|
<mat-divider></mat-divider> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,35 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2020 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
:host { |
||||
|
min-width: 300px; |
||||
|
max-height: 150px; |
||||
|
overflow-x: hidden; |
||||
|
overflow-y: 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); |
||||
|
|
||||
|
@media (min-height: 350px) { |
||||
|
max-height: 250px; |
||||
|
} |
||||
|
|
||||
|
.mat-content { |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,65 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2020 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { Component, Inject, InjectionToken } from '@angular/core'; |
||||
|
import { IAliasController } from '@core/api/widget-api.models'; |
||||
|
import { Filter, FilterInfo } from '@shared/models/query/query.models'; |
||||
|
import { MatDialog } from '@angular/material/dialog'; |
||||
|
import { FilterDialogComponent, FilterDialogData } from '@home/components/filter/filter-dialog.component'; |
||||
|
import { deepClone } from '@core/utils'; |
||||
|
|
||||
|
export const FILTER_EDIT_PANEL_DATA = new InjectionToken<any>('FiltersEditPanelData'); |
||||
|
|
||||
|
export interface FiltersEditPanelData { |
||||
|
aliasController: IAliasController; |
||||
|
filtersInfo: {[filterId: string]: FilterInfo}; |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-filters-edit-panel', |
||||
|
templateUrl: './filters-edit-panel.component.html', |
||||
|
styleUrls: ['./filters-edit-panel.component.scss'] |
||||
|
}) |
||||
|
export class FiltersEditPanelComponent { |
||||
|
|
||||
|
filtersInfo: {[filterId: string]: FilterInfo}; |
||||
|
|
||||
|
constructor(@Inject(FILTER_EDIT_PANEL_DATA) public data: FiltersEditPanelData, |
||||
|
private dialog: MatDialog) { |
||||
|
this.filtersInfo = this.data.filtersInfo; |
||||
|
} |
||||
|
|
||||
|
public editFilter(filterId: string, filter: FilterInfo) { |
||||
|
const singleFilter: Filter = {id: filterId, ...deepClone(filter)}; |
||||
|
this.dialog.open<FilterDialogComponent, FilterDialogData, |
||||
|
Filter>(FilterDialogComponent, { |
||||
|
disableClose: true, |
||||
|
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], |
||||
|
data: { |
||||
|
isAdd: false, |
||||
|
filters: [], |
||||
|
filter: singleFilter, |
||||
|
userMode: true |
||||
|
} |
||||
|
}).afterClosed().subscribe( |
||||
|
(result) => { |
||||
|
if (result) { |
||||
|
this.filtersInfo[result.id] = result; |
||||
|
this.data.aliasController.updateUserFilter(result); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,32 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2020 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<section class="tb-filters-edit" fxLayout="row" fxLayoutAlign="start center" *ngIf="hasEditableFilters"> |
||||
|
<button mat-icon-button |
||||
|
cdkOverlayOrigin #filtersEditPanelOrigin="cdkOverlayOrigin" |
||||
|
(click)="openEditMode()" |
||||
|
matTooltip="{{ 'filter.filters' | translate }}" |
||||
|
[matTooltipPosition]="tooltipPosition"> |
||||
|
<mat-icon>filter_list</mat-icon> |
||||
|
</button> |
||||
|
<span fxHide.lt-lg |
||||
|
(click)="openEditMode()" |
||||
|
matTooltip="{{ 'filter.filters' | translate }}" |
||||
|
[matTooltipPosition]="tooltipPosition"> |
||||
|
{{ 'filter.filters' | translate }} |
||||
|
</span> |
||||
|
</section> |
||||
@ -0,0 +1,36 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2020 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
@import "../../../../../scss/constants"; |
||||
|
|
||||
|
:host { |
||||
|
section.tb-filters-edit { |
||||
|
min-height: 32px; |
||||
|
padding: 0 6px; |
||||
|
|
||||
|
@media #{$mat-lt-md} { |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
span { |
||||
|
max-width: 200px; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
pointer-events: all; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,154 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2020 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { Component, Input, OnDestroy, OnInit, ViewChild, ViewContainerRef } from '@angular/core'; |
||||
|
import { TooltipPosition } from '@angular/material/tooltip'; |
||||
|
import { IAliasController } from '@core/api/widget-api.models'; |
||||
|
import { CdkOverlayOrigin, ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { Subscription } from 'rxjs'; |
||||
|
import { BreakpointObserver } from '@angular/cdk/layout'; |
||||
|
import { deepClone } from '@core/utils'; |
||||
|
import { FilterInfo } from '@shared/models/query/query.models'; |
||||
|
import { |
||||
|
FILTER_EDIT_PANEL_DATA, |
||||
|
FiltersEditPanelComponent, |
||||
|
FiltersEditPanelData |
||||
|
} from '@home/components/filter/filters-edit-panel.component'; |
||||
|
import { ComponentPortal, PortalInjector } from '@angular/cdk/portal'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-filters-edit', |
||||
|
templateUrl: './filters-edit.component.html', |
||||
|
styleUrls: ['./filters-edit.component.scss'] |
||||
|
}) |
||||
|
export class FiltersEditComponent implements OnInit, OnDestroy { |
||||
|
|
||||
|
aliasControllerValue: IAliasController; |
||||
|
|
||||
|
@Input() |
||||
|
set aliasController(aliasController: IAliasController) { |
||||
|
this.aliasControllerValue = aliasController; |
||||
|
this.setupAliasController(this.aliasControllerValue); |
||||
|
} |
||||
|
|
||||
|
get aliasController(): IAliasController { |
||||
|
return this.aliasControllerValue; |
||||
|
} |
||||
|
|
||||
|
@Input() |
||||
|
tooltipPosition: TooltipPosition = 'above'; |
||||
|
|
||||
|
@Input() disabled: boolean; |
||||
|
|
||||
|
@ViewChild('filtersEditPanelOrigin') filtersEditPanelOrigin: CdkOverlayOrigin; |
||||
|
|
||||
|
displayValue: string; |
||||
|
filtersInfo: {[filterId: string]: FilterInfo} = {}; |
||||
|
hasEditableFilters = false; |
||||
|
|
||||
|
private rxSubscriptions = new Array<Subscription>(); |
||||
|
|
||||
|
constructor(private translate: TranslateService, |
||||
|
private overlay: Overlay, |
||||
|
private breakpointObserver: BreakpointObserver, |
||||
|
private viewContainerRef: ViewContainerRef) { |
||||
|
} |
||||
|
|
||||
|
private setupAliasController(aliasController: IAliasController) { |
||||
|
this.rxSubscriptions.forEach((subscription) => { |
||||
|
subscription.unsubscribe(); |
||||
|
}); |
||||
|
this.rxSubscriptions.length = 0; |
||||
|
if (aliasController) { |
||||
|
this.rxSubscriptions.push(aliasController.filtersChanged.subscribe( |
||||
|
() => { |
||||
|
setTimeout(() => { |
||||
|
this.updateFiltersInfo(); |
||||
|
}, 0); |
||||
|
} |
||||
|
)); |
||||
|
setTimeout(() => { |
||||
|
this.updateFiltersInfo(); |
||||
|
}, 0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy(): void { |
||||
|
this.rxSubscriptions.forEach((subscription) => { |
||||
|
subscription.unsubscribe(); |
||||
|
}); |
||||
|
this.rxSubscriptions.length = 0; |
||||
|
} |
||||
|
|
||||
|
openEditMode() { |
||||
|
if (this.disabled || !this.hasEditableFilters) { |
||||
|
return; |
||||
|
} |
||||
|
const position = this.overlay.position(); |
||||
|
const config = new OverlayConfig({ |
||||
|
panelClass: 'tb-filters-edit-panel', |
||||
|
backdropClass: 'cdk-overlay-transparent-backdrop', |
||||
|
hasBackdrop: true, |
||||
|
}); |
||||
|
const connectedPosition: ConnectedPosition = { |
||||
|
originX: 'start', |
||||
|
originY: 'bottom', |
||||
|
overlayX: 'start', |
||||
|
overlayY: 'top' |
||||
|
}; |
||||
|
config.positionStrategy = position.flexibleConnectedTo(this.filtersEditPanelOrigin.elementRef) |
||||
|
.withPositions([connectedPosition]); |
||||
|
const overlayRef = this.overlay.create(config); |
||||
|
overlayRef.backdropClick().subscribe(() => { |
||||
|
overlayRef.dispose(); |
||||
|
}); |
||||
|
|
||||
|
const injector = this._createFiltersEditPanelInjector( |
||||
|
overlayRef, |
||||
|
{ |
||||
|
aliasController: this.aliasController, |
||||
|
filtersInfo: deepClone(this.filtersInfo) |
||||
|
} |
||||
|
); |
||||
|
overlayRef.attach(new ComponentPortal(FiltersEditPanelComponent, this.viewContainerRef, injector)); |
||||
|
} |
||||
|
|
||||
|
private _createFiltersEditPanelInjector(overlayRef: OverlayRef, data: FiltersEditPanelData): PortalInjector { |
||||
|
const injectionTokens = new WeakMap<any, any>([ |
||||
|
[FILTER_EDIT_PANEL_DATA, data], |
||||
|
[OverlayRef, overlayRef] |
||||
|
]); |
||||
|
return new PortalInjector(this.viewContainerRef.injector, injectionTokens); |
||||
|
} |
||||
|
|
||||
|
private updateFiltersInfo() { |
||||
|
const allFilters = this.aliasController.getFilters(); |
||||
|
this.filtersInfo = {}; |
||||
|
this.hasEditableFilters = false; |
||||
|
for (const filterId of Object.keys(allFilters)) { |
||||
|
const filterInfo = this.aliasController.getFilterInfo(filterId); |
||||
|
if (filterInfo && filterInfo.editable) { |
||||
|
this.filtersInfo[filterId] = deepClone(filterInfo); |
||||
|
this.hasEditableFilters = true; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,26 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2020 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
:host ::ng-deep { |
||||
|
.entity-key { |
||||
|
mat-form-field { |
||||
|
.mat-form-field-wrapper { |
||||
|
.mat-form-field-infix { |
||||
|
width: auto; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,29 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2020 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
:host { |
||||
|
.key-filter-list { |
||||
|
overflow: auto; |
||||
|
max-height: 300px; |
||||
|
.no-data-found { |
||||
|
height: 50px; |
||||
|
} |
||||
|
} |
||||
|
.filters-operation { |
||||
|
margin-top: -40px; |
||||
|
color: #666; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue