Igor Kulikov
3 years ago
52 changed files with 1986 additions and 727 deletions
@ -0,0 +1,46 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2023 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. |
||||
|
|
||||
|
--> |
||||
|
<mat-toolbar color="primary"> |
||||
|
<h2 translate>widgets-bundle.export</h2> |
||||
|
<span fxFlex></span> |
||||
|
<button mat-icon-button |
||||
|
(click)="cancel()" |
||||
|
type="button"> |
||||
|
<mat-icon class="material-icons">close</mat-icon> |
||||
|
</button> |
||||
|
</mat-toolbar> |
||||
|
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> |
||||
|
</mat-progress-bar> |
||||
|
<div mat-dialog-content> |
||||
|
<fieldset [disabled]="isLoading$ | async"> |
||||
|
<mat-checkbox [formControl]="exportWidgetsFormControl">{{ 'widgets-bundle.export-widgets-bundle-widgets-prompt' | translate }}</mat-checkbox> |
||||
|
</fieldset> |
||||
|
</div> |
||||
|
<div mat-dialog-actions fxLayoutAlign="end center"> |
||||
|
<button mat-button color="primary" |
||||
|
type="button" |
||||
|
[disabled]="(isLoading$ | async)" |
||||
|
(click)="cancel()"> |
||||
|
{{ 'action.cancel' | translate }} |
||||
|
</button> |
||||
|
<button mat-raised-button color="primary" |
||||
|
(click)="export()" |
||||
|
[disabled]="(isLoading$ | async)"> |
||||
|
{{ 'action.export' | translate }} |
||||
|
</button> |
||||
|
</div> |
||||
@ -0,0 +1,67 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2023 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, OnInit } from '@angular/core'; |
||||
|
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { FormControl } from '@angular/forms'; |
||||
|
import { Router } from '@angular/router'; |
||||
|
import { DialogComponent } from '@app/shared/components/dialog.component'; |
||||
|
import { WidgetsBundle } from '@shared/models/widgets-bundle.model'; |
||||
|
|
||||
|
export interface ExportWidgetsBundleDialogData { |
||||
|
widgetsBundle: WidgetsBundle; |
||||
|
} |
||||
|
|
||||
|
export interface ExportWidgetsBundleDialogResult { |
||||
|
exportWidgets: boolean; |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-export-widgets-bundle-dialog', |
||||
|
templateUrl: './export-widgets-bundle-dialog.component.html', |
||||
|
providers: [], |
||||
|
styleUrls: [] |
||||
|
}) |
||||
|
export class ExportWidgetsBundleDialogComponent extends DialogComponent<ExportWidgetsBundleDialogComponent, ExportWidgetsBundleDialogResult> |
||||
|
implements OnInit { |
||||
|
|
||||
|
widgetsBundle: WidgetsBundle; |
||||
|
|
||||
|
exportWidgetsFormControl = new FormControl(false); |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
protected router: Router, |
||||
|
@Inject(MAT_DIALOG_DATA) public data: ExportWidgetsBundleDialogData, |
||||
|
public dialogRef: MatDialogRef<ExportWidgetsBundleDialogComponent, ExportWidgetsBundleDialogResult>) { |
||||
|
super(store, router, dialogRef); |
||||
|
this.widgetsBundle = data.widgetsBundle; |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
} |
||||
|
|
||||
|
cancel(): void { |
||||
|
this.dialogRef.close(null); |
||||
|
} |
||||
|
|
||||
|
export(): void { |
||||
|
this.dialogRef.close({ |
||||
|
exportWidgets: this.exportWidgetsFormControl.value |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
@ -1,56 +0,0 @@ |
|||||
<!-- |
|
||||
|
|
||||
Copyright © 2016-2023 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. |
|
||||
|
|
||||
--> |
|
||||
<form [formGroup]="moveWidgetTypeFormGroup" (ngSubmit)="move()"> |
|
||||
<mat-toolbar color="primary"> |
|
||||
<h2 translate>widget.move-widget-type</h2> |
|
||||
<span fxFlex></span> |
|
||||
<button mat-icon-button |
|
||||
(click)="cancel()" |
|
||||
type="button"> |
|
||||
<mat-icon class="material-icons">close</mat-icon> |
|
||||
</button> |
|
||||
</mat-toolbar> |
|
||||
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> |
|
||||
</mat-progress-bar> |
|
||||
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> |
|
||||
<div mat-dialog-content> |
|
||||
<fieldset> |
|
||||
<span translate>widget.move-widget-type-text</span> |
|
||||
<tb-widgets-bundle-select fxFlex |
|
||||
formControlName="widgetsBundle" |
|
||||
required |
|
||||
[excludeBundleIds]="[data.currentBundleId]" |
|
||||
bundlesScope="{{bundlesScope}}"> |
|
||||
</tb-widgets-bundle-select> |
|
||||
</fieldset> |
|
||||
</div> |
|
||||
<div mat-dialog-actions fxLayoutAlign="end center"> |
|
||||
<button mat-button color="primary" |
|
||||
type="button" |
|
||||
[disabled]="(isLoading$ | async)" |
|
||||
(click)="cancel()" cdkFocusInitial> |
|
||||
{{ 'action.cancel' | translate }} |
|
||||
</button> |
|
||||
<button mat-raised-button color="primary" |
|
||||
type="submit" |
|
||||
[disabled]="(isLoading$ | async) || moveWidgetTypeFormGroup.invalid |
|
||||
|| !moveWidgetTypeFormGroup.dirty"> |
|
||||
{{ 'action.move' | translate }} |
|
||||
</button> |
|
||||
</div> |
|
||||
</form> |
|
||||
@ -1,82 +0,0 @@ |
|||||
///
|
|
||||
/// Copyright © 2016-2023 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, OnInit } from '@angular/core'; |
|
||||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; |
|
||||
import { Store } from '@ngrx/store'; |
|
||||
import { AppState } from '@core/core.state'; |
|
||||
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; |
|
||||
import { DialogComponent } from '@shared/components/dialog.component'; |
|
||||
import { Router } from '@angular/router'; |
|
||||
import { WidgetsBundle } from '@shared/models/widgets-bundle.model'; |
|
||||
import { getCurrentAuthUser } from '@core/auth/auth.selectors'; |
|
||||
import { Authority } from '@shared/models/authority.enum'; |
|
||||
|
|
||||
export interface MoveWidgetTypeDialogResult { |
|
||||
bundleId: string; |
|
||||
bundleAlias: string; |
|
||||
} |
|
||||
|
|
||||
export interface MoveWidgetTypeDialogData { |
|
||||
currentBundleId: string; |
|
||||
} |
|
||||
|
|
||||
@Component({ |
|
||||
selector: 'tb-move-widget-type-dialog', |
|
||||
templateUrl: './move-widget-type-dialog.component.html', |
|
||||
styleUrls: [] |
|
||||
}) |
|
||||
export class MoveWidgetTypeDialogComponent extends |
|
||||
DialogComponent<MoveWidgetTypeDialogComponent, MoveWidgetTypeDialogResult> implements OnInit { |
|
||||
|
|
||||
moveWidgetTypeFormGroup: UntypedFormGroup; |
|
||||
|
|
||||
bundlesScope: string; |
|
||||
|
|
||||
constructor(protected store: Store<AppState>, |
|
||||
protected router: Router, |
|
||||
@Inject(MAT_DIALOG_DATA) public data: MoveWidgetTypeDialogData, |
|
||||
public dialogRef: MatDialogRef<MoveWidgetTypeDialogComponent, MoveWidgetTypeDialogResult>, |
|
||||
public fb: UntypedFormBuilder) { |
|
||||
super(store, router, dialogRef); |
|
||||
|
|
||||
const authUser = getCurrentAuthUser(store); |
|
||||
if (authUser.authority === Authority.TENANT_ADMIN) { |
|
||||
this.bundlesScope = 'tenant'; |
|
||||
} else { |
|
||||
this.bundlesScope = 'system'; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
ngOnInit(): void { |
|
||||
this.moveWidgetTypeFormGroup = this.fb.group({ |
|
||||
widgetsBundle: [null, [Validators.required]] |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
cancel(): void { |
|
||||
this.dialogRef.close(null); |
|
||||
} |
|
||||
|
|
||||
move(): void { |
|
||||
const widgetsBundle: WidgetsBundle = this.moveWidgetTypeFormGroup.get('widgetsBundle').value; |
|
||||
const result: MoveWidgetTypeDialogResult = { |
|
||||
bundleId: widgetsBundle.id.id, |
|
||||
bundleAlias: widgetsBundle.alias |
|
||||
}; |
|
||||
this.dialogRef.close(result); |
|
||||
} |
|
||||
} |
|
||||
@ -1,42 +0,0 @@ |
|||||
<!-- |
|
||||
|
|
||||
Copyright © 2016-2023 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 [fxShow]="!(isLoading$ | async) && widgetsData.widgets.length === 0" fxLayoutAlign="center center" |
|
||||
style="display: flex; z-index: 1;" |
|
||||
class="tb-absolute-fill"> |
|
||||
<button mat-button *ngIf="!isReadOnly" class="tb-add-new-widget" (click)="addWidgetType($event)"> |
|
||||
<mat-icon class="tb-mat-96">add</mat-icon> |
|
||||
{{ 'widget.add-widget-type' | translate }} |
|
||||
</button> |
|
||||
<span translate *ngIf="isReadOnly" |
|
||||
fxLayoutAlign="center center" |
|
||||
style="display: flex;" |
|
||||
class="mat-headline-5 tb-absolute-fill">widgets-bundle.empty</span> |
|
||||
</section> |
|
||||
<tb-dashboard class="tb-widget-library" |
|
||||
#dashboard |
|
||||
[aliasController]="aliasController" |
|
||||
[widgets]="widgetsData.widgets" |
|
||||
[widgetLayouts]="widgetsData.widgetLayouts" |
|
||||
[isEdit]="false" |
|
||||
[isEditActionEnabled]="true" |
|
||||
[isExportActionEnabled]="true" |
|
||||
[isRemoveActionEnabled]="!isReadOnly" |
|
||||
[disableWidgetInteraction]="true" |
|
||||
[callbacks]="dashboardCallbacks"></tb-dashboard> |
|
||||
<tb-footer-fab-buttons [fxShow]="!isReadOnly" [footerFabButtons]="footerFabButtons"> |
|
||||
</tb-footer-fab-buttons> |
|
||||
@ -1,205 +0,0 @@ |
|||||
///
|
|
||||
/// Copyright © 2016-2023 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, OnInit, ViewChild } from '@angular/core'; |
|
||||
import { Store } from '@ngrx/store'; |
|
||||
import { AppState } from '@core/core.state'; |
|
||||
import { PageComponent } from '@shared/components/page.component'; |
|
||||
import { AuthUser } from '@shared/models/user.model'; |
|
||||
import { getCurrentAuthUser } from '@core/auth/auth.selectors'; |
|
||||
import { WidgetsBundle } from '@shared/models/widgets-bundle.model'; |
|
||||
import { ActivatedRoute, Router } from '@angular/router'; |
|
||||
import { Authority } from '@shared/models/authority.enum'; |
|
||||
import { NULL_UUID } from '@shared/models/id/has-uuid'; |
|
||||
import { of } from 'rxjs'; |
|
||||
import { Widget, widgetType } from '@app/shared/models/widget.models'; |
|
||||
import { WidgetService } from '@core/http/widget.service'; |
|
||||
import { map, mergeMap } from 'rxjs/operators'; |
|
||||
import { DialogService } from '@core/services/dialog.service'; |
|
||||
import { FooterFabButtons } from '@app/shared/components/footer-fab-buttons.component'; |
|
||||
import { DashboardCallbacks, IDashboardComponent, WidgetsData } from '@home/models/dashboard-component.models'; |
|
||||
import { IAliasController, IStateController, StateParams } from '@app/core/api/widget-api.models'; |
|
||||
import { AliasController } from '@core/api/alias-controller'; |
|
||||
import { MatDialog } from '@angular/material/dialog'; |
|
||||
import { SelectWidgetTypeDialogComponent } from '@home/pages/widget/select-widget-type-dialog.component'; |
|
||||
import { TranslateService } from '@ngx-translate/core'; |
|
||||
import { ImportExportService } from '@home/components/import-export/import-export.service'; |
|
||||
import { UtilsService } from '@core/services/utils.service'; |
|
||||
import { EntityService } from '@core/http/entity.service'; |
|
||||
|
|
||||
@Component({ |
|
||||
selector: 'tb-widget-library', |
|
||||
templateUrl: './widget-library.component.html', |
|
||||
styleUrls: ['./widget-library.component.scss'] |
|
||||
}) |
|
||||
export class WidgetLibraryComponent extends PageComponent implements OnInit { |
|
||||
|
|
||||
authUser: AuthUser; |
|
||||
|
|
||||
isReadOnly: boolean; |
|
||||
|
|
||||
widgetsBundle: WidgetsBundle; |
|
||||
|
|
||||
widgetsData: WidgetsData; |
|
||||
|
|
||||
footerFabButtons: FooterFabButtons = { |
|
||||
fabTogglerName: 'widget.add-widget-type', |
|
||||
fabTogglerIcon: 'add', |
|
||||
buttons: [ |
|
||||
{ |
|
||||
name: 'widget-type.create-new-widget-type', |
|
||||
icon: 'insert_drive_file', |
|
||||
onAction: ($event) => { |
|
||||
this.addWidgetType($event); |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
name: 'widget-type.import', |
|
||||
icon: 'file_upload', |
|
||||
onAction: ($event) => { |
|
||||
this.importWidgetType($event); |
|
||||
} |
|
||||
} |
|
||||
] |
|
||||
}; |
|
||||
|
|
||||
dashboardCallbacks: DashboardCallbacks = { |
|
||||
onEditWidget: this.openWidgetType.bind(this), |
|
||||
onWidgetClicked: this.openWidgetType.bind(this), |
|
||||
onExportWidget: this.exportWidgetType.bind(this), |
|
||||
onRemoveWidget: this.removeWidgetType.bind(this) |
|
||||
}; |
|
||||
|
|
||||
aliasController: IAliasController = new AliasController(this.utils, |
|
||||
this.entityService, |
|
||||
this.translate, |
|
||||
() => ({ |
|
||||
getStateParams: (): StateParams => ({}) |
|
||||
} as IStateController), |
|
||||
{}, |
|
||||
{}); |
|
||||
|
|
||||
@ViewChild('dashboard', {static: true}) dashboard: IDashboardComponent; |
|
||||
|
|
||||
constructor(protected store: Store<AppState>, |
|
||||
private route: ActivatedRoute, |
|
||||
private router: Router, |
|
||||
private widgetService: WidgetService, |
|
||||
private dialogService: DialogService, |
|
||||
private importExport: ImportExportService, |
|
||||
private dialog: MatDialog, |
|
||||
private translate: TranslateService, |
|
||||
private utils: UtilsService, |
|
||||
private entityService: EntityService) { |
|
||||
super(store); |
|
||||
|
|
||||
this.authUser = getCurrentAuthUser(this.store); |
|
||||
this.widgetsBundle = this.route.snapshot.data.widgetsBundle; |
|
||||
this.widgetsData = this.route.snapshot.data.widgetsData; |
|
||||
if (this.authUser.authority === Authority.TENANT_ADMIN) { |
|
||||
this.isReadOnly = !this.widgetsBundle || this.widgetsBundle.tenantId.id === NULL_UUID; |
|
||||
} else { |
|
||||
this.isReadOnly = this.authUser.authority !== Authority.SYS_ADMIN; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
ngOnInit(): void { |
|
||||
} |
|
||||
|
|
||||
addWidgetType($event: Event): void { |
|
||||
this.openWidgetType($event); |
|
||||
} |
|
||||
|
|
||||
importWidgetType($event: Event): void { |
|
||||
if ($event) { |
|
||||
$event.stopPropagation(); |
|
||||
} |
|
||||
this.importExport.importWidgetType(this.widgetsBundle.alias).subscribe( |
|
||||
(widgetTypeInstance) => { |
|
||||
if (widgetTypeInstance) { |
|
||||
this.reload(); |
|
||||
} |
|
||||
} |
|
||||
); |
|
||||
} |
|
||||
|
|
||||
private reload() { |
|
||||
const bundleAlias = this.widgetsBundle.alias; |
|
||||
const isSystem = this.widgetsBundle.tenantId.id === NULL_UUID; |
|
||||
this.widgetService.loadBundleLibraryWidgets(bundleAlias, isSystem).subscribe( |
|
||||
(widgets) => { |
|
||||
this.widgetsData = {widgets}; |
|
||||
} |
|
||||
); |
|
||||
} |
|
||||
|
|
||||
openWidgetType($event: Event, widget?: Widget): void { |
|
||||
if ($event) { |
|
||||
$event.stopPropagation(); |
|
||||
} |
|
||||
if (widget) { |
|
||||
this.router.navigate([widget.typeId.id], {relativeTo: this.route}); |
|
||||
} else { |
|
||||
this.dialog.open<SelectWidgetTypeDialogComponent, any, |
|
||||
widgetType>(SelectWidgetTypeDialogComponent, { |
|
||||
disableClose: true, |
|
||||
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'] |
|
||||
}).afterClosed().subscribe( |
|
||||
(type) => { |
|
||||
if (type) { |
|
||||
this.router.navigate([type], {relativeTo: this.route}); |
|
||||
} |
|
||||
} |
|
||||
); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
exportWidgetType($event: Event, widget: Widget): void { |
|
||||
if ($event) { |
|
||||
$event.stopPropagation(); |
|
||||
} |
|
||||
this.importExport.exportWidgetType(widget.typeId.id); |
|
||||
} |
|
||||
|
|
||||
removeWidgetType($event: Event, widget: Widget): void { |
|
||||
if ($event) { |
|
||||
$event.stopPropagation(); |
|
||||
} |
|
||||
this.dialogService.confirm( |
|
||||
this.translate.instant('widget.remove-widget-type-title', {widgetName: widget.config.title}), |
|
||||
this.translate.instant('widget.remove-widget-type-text'), |
|
||||
this.translate.instant('action.no'), |
|
||||
this.translate.instant('action.yes'), |
|
||||
).pipe( |
|
||||
mergeMap((result) => { |
|
||||
if (result) { |
|
||||
return this.widgetService.deleteWidgetType(widget.typeFullFqn); |
|
||||
} else { |
|
||||
return of(false); |
|
||||
} |
|
||||
}), |
|
||||
map((result) => { |
|
||||
if (result !== false) { |
|
||||
this.reload(); |
|
||||
return true; |
|
||||
} else { |
|
||||
return false; |
|
||||
} |
|
||||
} |
|
||||
)).subscribe(); |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
@ -0,0 +1,59 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2023 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. |
||||
|
|
||||
|
--> |
||||
|
<mat-form-field [formGroup]="selectWidgetTypeFormGroup" class="mat-block" [floatLabel]="floatLabel" |
||||
|
[appearance]="appearance" [subscriptSizing]="subscriptSizing"> |
||||
|
<mat-label *ngIf="label">{{ label }}</mat-label> |
||||
|
<input matInput type="text" |
||||
|
#widgetTypeInput |
||||
|
placeholder="{{ placeholder }}" |
||||
|
formControlName="widgetType" |
||||
|
(focusin)="onFocus()" |
||||
|
[required]="required" |
||||
|
[matAutocomplete]="widgetTypeAutocomplete"> |
||||
|
<button *ngIf="selectWidgetTypeFormGroup.get('widgetType').value && !disabled" |
||||
|
type="button" |
||||
|
matSuffix mat-icon-button aria-label="Clear" |
||||
|
(click)="clear()"> |
||||
|
<mat-icon class="material-icons">close</mat-icon> |
||||
|
</button> |
||||
|
<mat-autocomplete |
||||
|
class="tb-autocomplete tb-widget-type-autocomplete" |
||||
|
#widgetTypeAutocomplete |
||||
|
[displayWith]="displayWidgetTypeFn"> |
||||
|
<mat-option *ngFor="let widgetType of filteredWidgetTypes | async" [value]="widgetType"> |
||||
|
<div class="tb-widget-type-option-container"> |
||||
|
<img class="tb-widget-type-option-image-preview" [src]="getPreviewImage(widgetType.image)" alt="{{ widgetType.name }}"> |
||||
|
<div class="tb-widget-type-option-details"> |
||||
|
<div class="tb-widget-type-option-text" [innerHTML]="widgetType.name | highlight:searchText:true"></div> |
||||
|
<div *ngIf="widgetType.deprecated" class="tb-widget-type-option-deprecated">{{ 'widget.deprecated' | translate }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</mat-option> |
||||
|
<mat-option *ngIf="!(filteredWidgetTypes | async)?.length" [value]="null"> |
||||
|
<span> |
||||
|
{{ translate.get('widget.no-widgets-matching', {entity: searchText}) | async }} |
||||
|
</span> |
||||
|
</mat-option> |
||||
|
</mat-autocomplete> |
||||
|
<mat-error> |
||||
|
<ng-content select="[tb-error]"></ng-content> |
||||
|
</mat-error> |
||||
|
<mat-hint> |
||||
|
<ng-content select="[tb-hint]"></ng-content> |
||||
|
</mat-hint> |
||||
|
</mat-form-field> |
||||
@ -0,0 +1,49 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2023 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. |
||||
|
*/ |
||||
|
.tb-widget-type-autocomplete { |
||||
|
.mat-mdc-option { |
||||
|
.mdc-list-item__primary-text { |
||||
|
width: 100%; |
||||
|
.tb-widget-type-option-container { |
||||
|
display: flex; |
||||
|
gap: 8px; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.tb-widget-type-option-image-preview { |
||||
|
width: 36px; |
||||
|
max-height: 100%; |
||||
|
object-fit: contain; |
||||
|
border-radius: 6px; |
||||
|
} |
||||
|
.tb-widget-type-option-details { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
.tb-widget-type-option-text { |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
letter-spacing: 0.2px; |
||||
|
} |
||||
|
.tb-widget-type-option-deprecated { |
||||
|
font-size: 13px; |
||||
|
font-weight: 400; |
||||
|
color: rgba(0, 0, 0, 0.54); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,227 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2023 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 { |
||||
|
AfterViewInit, |
||||
|
Component, |
||||
|
ElementRef, |
||||
|
forwardRef, |
||||
|
Input, |
||||
|
OnInit, |
||||
|
ViewChild, |
||||
|
ViewEncapsulation |
||||
|
} from '@angular/core'; |
||||
|
import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; |
||||
|
import { Observable, of } from 'rxjs'; |
||||
|
import { PageLink } from '@shared/models/page/page-link'; |
||||
|
import { Direction } from '@shared/models/page/sort-order'; |
||||
|
import { catchError, debounceTime, distinctUntilChanged, map, share, switchMap, tap } from 'rxjs/operators'; |
||||
|
import { emptyPageData } from '@shared/models/page/page-data'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@app/core/core.state'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { FloatLabelType, MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field'; |
||||
|
import { WidgetTypeInfo } from '@shared/models/widget.models'; |
||||
|
import { coerceBoolean } from '@shared/decorators/coercion'; |
||||
|
import { WidgetService } from '@core/http/widget.service'; |
||||
|
import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; |
||||
|
import { isDefinedAndNotNull } from '@core/utils'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-widget-type-autocomplete', |
||||
|
templateUrl: './widget-type-autocomplete.component.html', |
||||
|
styleUrls: ['./widget-type-autocomplete.component.scss'], |
||||
|
providers: [{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => WidgetTypeAutocompleteComponent), |
||||
|
multi: true |
||||
|
}], |
||||
|
encapsulation: ViewEncapsulation.None |
||||
|
}) |
||||
|
export class WidgetTypeAutocompleteComponent implements ControlValueAccessor, OnInit, AfterViewInit { |
||||
|
|
||||
|
private dirty = false; |
||||
|
|
||||
|
selectWidgetTypeFormGroup: UntypedFormGroup; |
||||
|
|
||||
|
modelValue: WidgetTypeInfo | null; |
||||
|
|
||||
|
@Input() |
||||
|
label = this.translate.instant('widget.widget'); |
||||
|
|
||||
|
@Input() |
||||
|
placeholder: string; |
||||
|
|
||||
|
@Input() |
||||
|
floatLabel: FloatLabelType = 'auto'; |
||||
|
|
||||
|
@Input() |
||||
|
appearance: MatFormFieldAppearance = 'fill'; |
||||
|
|
||||
|
@Input() |
||||
|
subscriptSizing: SubscriptSizing = 'fixed'; |
||||
|
|
||||
|
@Input() |
||||
|
@coerceBoolean() |
||||
|
required: boolean; |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
@Input() |
||||
|
excludeWidgetTypeIds: Array<string>; |
||||
|
|
||||
|
@ViewChild('widgetTypeInput', {static: true}) widgetTypeInput: ElementRef; |
||||
|
|
||||
|
filteredWidgetTypes: Observable<Array<WidgetTypeInfo>>; |
||||
|
|
||||
|
searchText = ''; |
||||
|
|
||||
|
private propagateChange = (v: any) => { }; |
||||
|
|
||||
|
constructor(private store: Store<AppState>, |
||||
|
public translate: TranslateService, |
||||
|
private widgetService: WidgetService, |
||||
|
private sanitizer: DomSanitizer, |
||||
|
private fb: UntypedFormBuilder) { |
||||
|
this.selectWidgetTypeFormGroup = this.fb.group({ |
||||
|
widgetType: [null] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
this.filteredWidgetTypes = this.selectWidgetTypeFormGroup.get('widgetType').valueChanges |
||||
|
.pipe( |
||||
|
debounceTime(150), |
||||
|
tap(value => { |
||||
|
let modelValue; |
||||
|
if (typeof value === 'string' || !value) { |
||||
|
modelValue = null; |
||||
|
} else { |
||||
|
modelValue = value; |
||||
|
} |
||||
|
this.updateView(modelValue); |
||||
|
}), |
||||
|
map(value => value ? (typeof value === 'string' ? value : value.name) : ''), |
||||
|
distinctUntilChanged(), |
||||
|
switchMap(name => this.fetchWidgetTypes(name) ), |
||||
|
share() |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
ngAfterViewInit(): void { |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (this.disabled) { |
||||
|
this.selectWidgetTypeFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.selectWidgetTypeFormGroup.enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(value: WidgetTypeInfo | string | null): void { |
||||
|
this.searchText = ''; |
||||
|
if (value != null) { |
||||
|
if (typeof value === 'string') { |
||||
|
this.widgetService.getWidgetTypeInfoById(value).subscribe( |
||||
|
(widgetType) => { |
||||
|
this.modelValue = widgetType; |
||||
|
this.selectWidgetTypeFormGroup.get('widgetType').patchValue(widgetType, {emitEvent: false}); |
||||
|
} |
||||
|
); |
||||
|
} else { |
||||
|
this.modelValue = value; |
||||
|
this.selectWidgetTypeFormGroup.get('widgetType').patchValue(value, {emitEvent: false}); |
||||
|
} |
||||
|
} else { |
||||
|
this.modelValue = null; |
||||
|
this.selectWidgetTypeFormGroup.get('widgetType').patchValue('', {emitEvent: false}); |
||||
|
} |
||||
|
this.dirty = true; |
||||
|
} |
||||
|
|
||||
|
updateView(value: WidgetTypeInfo | null) { |
||||
|
if (this.modelValue !== value) { |
||||
|
this.modelValue = value; |
||||
|
this.propagateChange(this.modelValue); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
displayWidgetTypeFn(widgetType?: WidgetTypeInfo): string | undefined { |
||||
|
return widgetType ? widgetType.name : undefined; |
||||
|
} |
||||
|
|
||||
|
getPreviewImage(imageUrl: string | null): SafeUrl | string { |
||||
|
if (isDefinedAndNotNull(imageUrl)) { |
||||
|
return this.sanitizer.bypassSecurityTrustUrl(imageUrl); |
||||
|
} |
||||
|
return '/assets/widget-preview-empty.svg'; |
||||
|
} |
||||
|
|
||||
|
fetchWidgetTypes(searchText?: string): Observable<Array<WidgetTypeInfo>> { |
||||
|
this.searchText = searchText; |
||||
|
const pageLink = new PageLink(10, 0, searchText, { |
||||
|
property: 'name', |
||||
|
direction: Direction.ASC |
||||
|
}); |
||||
|
return this.getWidgetTypes(pageLink); |
||||
|
} |
||||
|
|
||||
|
getWidgetTypes(pageLink: PageLink, |
||||
|
result: Array<WidgetTypeInfo> = []): Observable<Array<WidgetTypeInfo>> { |
||||
|
return this.widgetService.getWidgetTypes(pageLink, true).pipe( |
||||
|
catchError(() => of(emptyPageData<WidgetTypeInfo>())), |
||||
|
switchMap((data) => { |
||||
|
if (this.excludeWidgetTypeIds?.length) { |
||||
|
const filtered = data.data.filter(w => !this.excludeWidgetTypeIds.includes(w.id.id)); |
||||
|
result = result.concat(filtered); |
||||
|
} else { |
||||
|
result = data.data; |
||||
|
} |
||||
|
if (result.length >= pageLink.pageSize || !this.excludeWidgetTypeIds?.length || !data.hasNext) { |
||||
|
return of(result); |
||||
|
} else { |
||||
|
return this.getWidgetTypes(pageLink.nextPageLink(), result); |
||||
|
} |
||||
|
}) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
onFocus() { |
||||
|
if (this.dirty) { |
||||
|
this.selectWidgetTypeFormGroup.get('widgetType').updateValueAndValidity({onlySelf: true}); |
||||
|
this.dirty = false; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
clear() { |
||||
|
this.selectWidgetTypeFormGroup.get('widgetType').patchValue(''); |
||||
|
setTimeout(() => { |
||||
|
this.widgetTypeInput.nativeElement.blur(); |
||||
|
this.widgetTypeInput.nativeElement.focus(); |
||||
|
}, 0); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,23 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2023 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. |
||||
|
|
||||
|
--> |
||||
|
<mat-tab *ngIf="isTenantWidgetType() && authUser.authority === authorities.TENANT_ADMIN" |
||||
|
label="{{ 'version-control.version-control' | translate }}" #versionControlTab="matTab"> |
||||
|
<tb-version-control detailsMode="true" singleEntityMode="true" |
||||
|
(versionRestored)="entitiesTableConfig.updateData()" |
||||
|
[active]="versionControlTab.isActive" [entityId]="entity.id" [entityName]="entity.name" [externalEntityId]="entity.externalId || entity.id"></tb-version-control> |
||||
|
</mat-tab> |
||||
@ -0,0 +1,43 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2023 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 } from '@angular/core'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { EntityTabsComponent } from '../../components/entity/entity-tabs.component'; |
||||
|
import { NULL_UUID } from '@shared/models/id/has-uuid'; |
||||
|
import { WidgetTypeDetails } from '@shared/models/widget.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-widget-type-tabs', |
||||
|
templateUrl: './widget-type-tabs.component.html', |
||||
|
styleUrls: [] |
||||
|
}) |
||||
|
export class WidgetTypeTabsComponent extends EntityTabsComponent<WidgetTypeDetails> { |
||||
|
|
||||
|
constructor(protected store: Store<AppState>) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
isTenantWidgetType() { |
||||
|
return this.entity && this.entity.tenantId.id !== NULL_UUID; |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
super.ngOnInit(); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,66 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2023 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 class="tb-details-buttons" fxLayout.xs="column"> |
||||
|
<button mat-raised-button color="primary" |
||||
|
[disabled]="(isLoading$ | async)" |
||||
|
(click)="onEntityAction($event, 'edit')" |
||||
|
[fxShow]="!isEdit"> |
||||
|
{{'widget.edit-widget-type' | translate }} |
||||
|
</button> |
||||
|
<button mat-raised-button color="primary" |
||||
|
[disabled]="(isLoading$ | async)" |
||||
|
(click)="onEntityAction($event, 'export')" |
||||
|
[fxShow]="!isEdit"> |
||||
|
{{'widget-type.export' | translate }} |
||||
|
</button> |
||||
|
<button mat-raised-button color="primary" |
||||
|
[disabled]="(isLoading$ | async)" |
||||
|
(click)="onEntityAction($event, 'delete')" |
||||
|
[fxShow]="!hideDelete() && !isEdit"> |
||||
|
{{'widget.delete-widget-type' | translate }} |
||||
|
</button> |
||||
|
</div> |
||||
|
<div class="mat-padding" fxLayout="column"> |
||||
|
<form [formGroup]="entityForm"> |
||||
|
<fieldset [disabled]="(isLoading$ | async) || !isEdit"> |
||||
|
<mat-form-field class="mat-block"> |
||||
|
<mat-label translate>widget.title</mat-label> |
||||
|
<input matInput formControlName="name" required> |
||||
|
<mat-error *ngIf="entityForm.get('name').hasError('required')"> |
||||
|
{{ 'widget.title-required' | translate }} |
||||
|
</mat-error> |
||||
|
<mat-error *ngIf="entityForm.get('name').hasError('maxlength')"> |
||||
|
{{ 'widget.title-max-length' | translate }} |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
<tb-image-input fxFlex |
||||
|
label="{{'widget.image-preview' | translate}}" |
||||
|
maxSizeByte="524288" |
||||
|
formControlName="image"> |
||||
|
</tb-image-input> |
||||
|
<mat-form-field class="mat-block"> |
||||
|
<mat-label translate>widget.description</mat-label> |
||||
|
<textarea matInput formControlName="description" rows="2" maxlength="255" #descriptionInput></textarea> |
||||
|
<mat-hint align="end">{{descriptionInput.value?.length || 0}}/255</mat-hint> |
||||
|
</mat-form-field> |
||||
|
<mat-slide-toggle formControlName="deprecated"> |
||||
|
{{ 'widget.deprecated' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</fieldset> |
||||
|
</form> |
||||
|
</div> |
||||
@ -0,0 +1,68 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2023 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 { ChangeDetectorRef, Component, Inject } from '@angular/core'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { EntityComponent } from '../../components/entity/entity.component'; |
||||
|
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; |
||||
|
import { WidgetsBundle } from '@shared/models/widgets-bundle.model'; |
||||
|
import { EntityTableConfig } from '@home/models/entity/entities-table-config.models'; |
||||
|
import { WidgetTypeDetails } from '@shared/models/widget.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-widget-type', |
||||
|
templateUrl: './widget-type.component.html', |
||||
|
styleUrls: [] |
||||
|
}) |
||||
|
export class WidgetTypeComponent extends EntityComponent<WidgetTypeDetails> { |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
@Inject('entity') protected entityValue: WidgetTypeDetails, |
||||
|
@Inject('entitiesTableConfig') protected entitiesTableConfigValue: EntityTableConfig<WidgetTypeDetails>, |
||||
|
public fb: UntypedFormBuilder, |
||||
|
protected cd: ChangeDetectorRef) { |
||||
|
super(store, fb, entityValue, entitiesTableConfigValue, cd); |
||||
|
} |
||||
|
|
||||
|
hideDelete() { |
||||
|
if (this.entitiesTableConfig) { |
||||
|
return !this.entitiesTableConfig.deleteEnabled(this.entity); |
||||
|
} else { |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
buildForm(entity: WidgetTypeDetails): UntypedFormGroup { |
||||
|
return this.fb.group( |
||||
|
{ |
||||
|
name: [entity ? entity.name : '', [Validators.required, Validators.maxLength(255)]], |
||||
|
image: [entity ? entity.image : ''], |
||||
|
description: [entity ? entity.description : '', Validators.maxLength(255)], |
||||
|
deprecated: [entity ? entity.deprecated : false] |
||||
|
} |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
updateForm(entity: WidgetTypeDetails) { |
||||
|
this.entityForm.patchValue({ |
||||
|
name: entity.name, |
||||
|
image: entity.image, |
||||
|
description: entity.description, |
||||
|
deprecated: entity.deprecated |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,232 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2023 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 { Injectable } from '@angular/core'; |
||||
|
|
||||
|
import { Resolve, Router } from '@angular/router'; |
||||
|
import { |
||||
|
checkBoxCell, |
||||
|
DateEntityTableColumn, |
||||
|
EntityTableColumn, |
||||
|
EntityTableConfig |
||||
|
} from '@home/models/entity/entities-table-config.models'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { DatePipe } from '@angular/common'; |
||||
|
import { EntityType, entityTypeResources, entityTypeTranslations } from '@shared/models/entity-type.models'; |
||||
|
import { EntityAction } from '@home/models/entity/entity-component.models'; |
||||
|
import { WidgetService } from '@app/core/http/widget.service'; |
||||
|
import { NULL_UUID } from '@shared/models/id/has-uuid'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { getCurrentAuthState, getCurrentAuthUser } from '@app/core/auth/auth.selectors'; |
||||
|
import { Authority } from '@shared/models/authority.enum'; |
||||
|
import { DialogService } from '@core/services/dialog.service'; |
||||
|
import { ImportExportService } from '@home/components/import-export/import-export.service'; |
||||
|
import { Direction } from '@shared/models/page/sort-order'; |
||||
|
import { |
||||
|
BaseWidgetType, |
||||
|
WidgetTypeDetails, |
||||
|
WidgetTypeInfo, |
||||
|
widgetType as WidgetDataType, |
||||
|
widgetTypesData |
||||
|
} from '@shared/models/widget.models'; |
||||
|
import { WidgetTypeComponent } from '@home/pages/widget/widget-type.component'; |
||||
|
import { WidgetTypeTabsComponent } from '@home/pages/widget/widget-type-tabs.component'; |
||||
|
import { SelectWidgetTypeDialogComponent } from '@home/pages/widget/select-widget-type-dialog.component'; |
||||
|
import { MatDialog } from '@angular/material/dialog'; |
||||
|
|
||||
|
@Injectable() |
||||
|
export class WidgetTypesTableConfigResolver implements Resolve<EntityTableConfig<WidgetTypeInfo | WidgetTypeDetails>> { |
||||
|
|
||||
|
private readonly config: EntityTableConfig<WidgetTypeInfo | WidgetTypeDetails> = |
||||
|
new EntityTableConfig<WidgetTypeInfo | WidgetTypeDetails>(); |
||||
|
|
||||
|
constructor(private store: Store<AppState>, |
||||
|
private dialog: MatDialog, |
||||
|
private widgetsService: WidgetService, |
||||
|
private translate: TranslateService, |
||||
|
private importExport: ImportExportService, |
||||
|
private datePipe: DatePipe, |
||||
|
private router: Router) { |
||||
|
|
||||
|
this.config.entityType = EntityType.WIDGETS_BUNDLE; |
||||
|
this.config.entityComponent = WidgetTypeComponent; |
||||
|
this.config.entityTabsComponent = WidgetTypeTabsComponent; |
||||
|
this.config.entityTranslations = entityTypeTranslations.get(EntityType.WIDGET_TYPE); |
||||
|
this.config.entityResources = entityTypeResources.get(EntityType.WIDGET_TYPE); |
||||
|
this.config.defaultSortOrder = {property: 'name', direction: Direction.ASC}; |
||||
|
|
||||
|
this.config.rowPointer = true; |
||||
|
|
||||
|
this.config.entityTitle = (widgetType) => widgetType ? |
||||
|
widgetType.name : ''; |
||||
|
|
||||
|
this.config.columns.push( |
||||
|
new DateEntityTableColumn<WidgetTypeInfo>('createdTime', 'common.created-time', this.datePipe, '150px'), |
||||
|
new EntityTableColumn<WidgetTypeInfo>('name', 'widget.title', '100%'), |
||||
|
new EntityTableColumn<WidgetTypeInfo>('widgetType', 'widget.type', '150px', entity => |
||||
|
entity?.widgetType ? this.translate.instant(widgetTypesData.get(entity.widgetType).name) : '', undefined, false), |
||||
|
new EntityTableColumn<WidgetTypeInfo>('tenantId', 'widget.system', '60px', |
||||
|
entity => checkBoxCell(entity.tenantId.id === NULL_UUID)), |
||||
|
new EntityTableColumn<WidgetTypeInfo>('deprecated', 'widget.deprecated', '60px', |
||||
|
entity => checkBoxCell(entity.deprecated)) |
||||
|
); |
||||
|
|
||||
|
this.config.addActionDescriptors.push( |
||||
|
{ |
||||
|
name: this.translate.instant('widget-type.create-new-widget-type'), |
||||
|
icon: 'insert_drive_file', |
||||
|
isEnabled: () => true, |
||||
|
onAction: ($event) => this.addWidgetType($event) |
||||
|
}, |
||||
|
{ |
||||
|
name: this.translate.instant('widget-type.import'), |
||||
|
icon: 'file_upload', |
||||
|
isEnabled: () => true, |
||||
|
onAction: ($event) => this.importWidgetType($event) |
||||
|
} |
||||
|
); |
||||
|
|
||||
|
this.config.cellActionDescriptors.push( |
||||
|
{ |
||||
|
name: this.translate.instant('widget-type.export'), |
||||
|
icon: 'file_download', |
||||
|
isEnabled: () => true, |
||||
|
onAction: ($event, entity) => this.exportWidgetType($event, entity) |
||||
|
}, |
||||
|
{ |
||||
|
name: this.translate.instant('widget.widget-type-details'), |
||||
|
icon: 'edit', |
||||
|
isEnabled: () => true, |
||||
|
onAction: ($event, entity) => this.config.toggleEntityDetails($event, entity) |
||||
|
} |
||||
|
); |
||||
|
|
||||
|
this.config.groupActionDescriptors.push( |
||||
|
{ |
||||
|
name: this.translate.instant('widget-type.export-widget-types'), |
||||
|
icon: 'file_download', |
||||
|
isEnabled: true, |
||||
|
onAction: ($event, entities) => this.exportWidgetTypes($event, entities) |
||||
|
} |
||||
|
); |
||||
|
|
||||
|
this.config.deleteEntityTitle = widgetType => this.translate.instant('widget.delete-widget-type-title', |
||||
|
{ widgetTypeName: widgetType.name }); |
||||
|
this.config.deleteEntityContent = () => this.translate.instant('widget.delete-widget-type-text'); |
||||
|
this.config.deleteEntitiesTitle = count => this.translate.instant('widget.delete-widget-types-title', {count}); |
||||
|
this.config.deleteEntitiesContent = () => this.translate.instant('widget.delete-widget-types-text'); |
||||
|
|
||||
|
|
||||
|
this.config.loadEntity = id => this.widgetsService.getWidgetTypeById(id.id); |
||||
|
this.config.saveEntity = widgetType => this.widgetsService.saveWidgetType(widgetType as WidgetTypeDetails); |
||||
|
this.config.deleteEntity = id => this.widgetsService.deleteWidgetType(id.id); |
||||
|
this.config.onEntityAction = action => this.onWidgetTypeAction(action); |
||||
|
|
||||
|
this.config.handleRowClick = ($event, widgetType) => { |
||||
|
if (this.config.isDetailsOpen()) { |
||||
|
this.config.toggleEntityDetails($event, widgetType); |
||||
|
} else { |
||||
|
this.openWidgetEditor($event, widgetType); |
||||
|
} |
||||
|
return true; |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
resolve(): EntityTableConfig<WidgetTypeInfo | WidgetTypeDetails> { |
||||
|
this.config.tableTitle = this.translate.instant('widget.widget-types'); |
||||
|
const authUser = getCurrentAuthUser(this.store); |
||||
|
this.config.deleteEnabled = (widgetType) => this.isWidgetTypeEditable(widgetType, authUser.authority); |
||||
|
this.config.entitySelectionEnabled = (widgetType) => this.isWidgetTypeEditable(widgetType, authUser.authority); |
||||
|
this.config.detailsReadonly = (widgetType) => !this.isWidgetTypeEditable(widgetType, authUser.authority); |
||||
|
const authState = getCurrentAuthState(this.store); |
||||
|
this.config.entitiesFetchFunction = pageLink => this.widgetsService.getWidgetTypes(pageLink); |
||||
|
return this.config; |
||||
|
} |
||||
|
|
||||
|
isWidgetTypeEditable(widgetType: BaseWidgetType, authority: Authority): boolean { |
||||
|
if (authority === Authority.TENANT_ADMIN) { |
||||
|
return widgetType && widgetType.tenantId && widgetType.tenantId.id !== NULL_UUID; |
||||
|
} else { |
||||
|
return authority === Authority.SYS_ADMIN; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
addWidgetType($event: Event): void { |
||||
|
if ($event) { |
||||
|
$event.stopPropagation(); |
||||
|
} |
||||
|
this.dialog.open<SelectWidgetTypeDialogComponent, any, |
||||
|
WidgetDataType>(SelectWidgetTypeDialogComponent, { |
||||
|
disableClose: true, |
||||
|
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'] |
||||
|
}).afterClosed().subscribe( |
||||
|
(type) => { |
||||
|
if (type) { |
||||
|
this.router.navigateByUrl(`resources/widgets-library/widget-types/${type}`); |
||||
|
} |
||||
|
} |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
importWidgetType($event: Event) { |
||||
|
this.importExport.importWidgetType().subscribe( |
||||
|
(widgetType) => { |
||||
|
if (widgetType) { |
||||
|
this.config.updateData(); |
||||
|
} |
||||
|
} |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
openWidgetEditor($event: Event, widgetType: BaseWidgetType) { |
||||
|
if ($event) { |
||||
|
$event.stopPropagation(); |
||||
|
} |
||||
|
this.router.navigateByUrl(`resources/widgets-library/widget-types/${widgetType.id.id}`); |
||||
|
} |
||||
|
|
||||
|
exportWidgetType($event: Event, widgetType: BaseWidgetType) { |
||||
|
if ($event) { |
||||
|
$event.stopPropagation(); |
||||
|
} |
||||
|
this.importExport.exportWidgetType(widgetType.id.id); |
||||
|
} |
||||
|
|
||||
|
exportWidgetTypes($event: Event, widgetTypes: BaseWidgetType[]) { |
||||
|
if ($event) { |
||||
|
$event.stopPropagation(); |
||||
|
} |
||||
|
this.importExport.exportWidgetTypes(widgetTypes.map(w => w.id.id)).subscribe( |
||||
|
() => { |
||||
|
this.config.getTable().clearSelection(); |
||||
|
} |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
onWidgetTypeAction(action: EntityAction<BaseWidgetType>): boolean { |
||||
|
switch (action.action) { |
||||
|
case 'edit': |
||||
|
this.openWidgetEditor(action.event, action.entity); |
||||
|
return true; |
||||
|
case 'export': |
||||
|
this.exportWidgetType(action.event, action.entity); |
||||
|
return true; |
||||
|
} |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,134 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2023 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. |
||||
|
|
||||
|
--> |
||||
|
<mat-card appearance="outlined" class="tb-bundle-widgets-card"> |
||||
|
<mat-card-header> |
||||
|
<mat-card-title> |
||||
|
<div class="title-container"> |
||||
|
<button mat-icon-button |
||||
|
matTooltip="{{ 'action.back' | translate }}" |
||||
|
matTooltipPosition="above" |
||||
|
(click)="goBack()"> |
||||
|
<mat-icon>arrow_back</mat-icon> |
||||
|
</button> |
||||
|
<span class="mat-headline-5">{{ widgetsBundle.title }}: {{ 'widget.widgets' | translate }}</span> |
||||
|
<span fxFlex></span> |
||||
|
<button mat-icon-button |
||||
|
matTooltip="{{ 'widgets-bundle.export' | translate }}" |
||||
|
matTooltipPosition="above" |
||||
|
(click)="exportWidgetsBundle()"> |
||||
|
<mat-icon>file_download</mat-icon> |
||||
|
</button> |
||||
|
</div> |
||||
|
</mat-card-title> |
||||
|
</mat-card-header> |
||||
|
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> |
||||
|
</mat-progress-bar> |
||||
|
<div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div> |
||||
|
<mat-card-content> |
||||
|
<div class="tb-drop-list tb-bundle-widgets-container" cdkDropList cdkDropListOrientation="vertical" |
||||
|
(cdkDropListDropped)="widgetDrop($event)" [cdkDropListDisabled]="!editMode || widgets?.length < 2"> |
||||
|
<div cdkDrag class="tb-draggable tb-bundle-widget-row" *ngFor="let widget of widgets; trackBy: trackByWidget; |
||||
|
let $index = index; last as isLast;"> |
||||
|
<div class="tb-bundle-widget-row-details"> |
||||
|
<img class="tb-bundle-widget-image-preview" [src]="getPreviewImage(widget.image)" alt="{{ widget.name }}"> |
||||
|
<div class="tb-bundle-widget-details"> |
||||
|
<div class="tb-bundle-widget-title">{{ widget.name }}</div> |
||||
|
<div *ngIf="widget.deprecated" class="tb-bundle-widget-deprecated">{{ 'widget.deprecated' | translate }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<button *ngIf="!editMode" |
||||
|
mat-icon-button |
||||
|
(click)="openWidgetEditor($event, widget)" |
||||
|
matTooltip="{{'widget.edit-widget-type' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>edit</mat-icon> |
||||
|
</button> |
||||
|
<button *ngIf="!editMode" |
||||
|
mat-icon-button |
||||
|
(click)="exportWidgetType($event, widget)" |
||||
|
matTooltip="{{'widget-type.export' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>file_download</mat-icon> |
||||
|
</button> |
||||
|
<button *ngIf="editMode && !addMode" |
||||
|
mat-icon-button |
||||
|
(click)="removeWidgetType($event, widget)" |
||||
|
matTooltip="{{'widget.remove' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>delete</mat-icon> |
||||
|
</button> |
||||
|
<button cdkDragHandle *ngIf="editMode" |
||||
|
[fxShow]="widgets?.length > 1" |
||||
|
mat-icon-button |
||||
|
matTooltip="{{ 'action.drag' | translate }}" |
||||
|
matTooltipPosition="above" |
||||
|
class="tb-drag-handle"> |
||||
|
<tb-icon>drag_indicator</tb-icon> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div *ngIf="editMode && !addMode && widgets?.length" class="tb-add-widget-button" |
||||
|
matTooltip="{{ 'widget.add' | translate }}" |
||||
|
matTooltipPosition="above" |
||||
|
(click)="addWidgetMode()"> |
||||
|
<tb-icon color="primary" class="tb-add-widget-icon">add</tb-icon> |
||||
|
</div> |
||||
|
<div *ngIf="editMode && !addMode && !widgets?.length" class="tb-add-widget-button-panel"> |
||||
|
<div class="tb-add-widget-button-with-text" |
||||
|
matTooltip="{{ 'widget.add' | translate }}" |
||||
|
matTooltipPosition="above" |
||||
|
(click)="addWidgetMode()"> |
||||
|
<tb-icon color="primary" class="tb-add-widget-icon">add</tb-icon> |
||||
|
<div class="tb-add-widget-button-text" translate>widget.add</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div *ngIf="isReadOnly && !widgets?.length" class="tb-no-data-available"> |
||||
|
<div class="tb-no-data-bg"></div> |
||||
|
<div class="tb-no-data-text" translate>widget.no-widgets</div> |
||||
|
</div> |
||||
|
<div *ngIf="addMode" class="tb-add-bundle-widget-form"> |
||||
|
<tb-widget-type-autocomplete |
||||
|
required |
||||
|
placeholder="{{ 'widget.select-widget' | translate }}" |
||||
|
[excludeWidgetTypeIds]="excludeWidgetTypeIds" |
||||
|
[formControl]="addWidgetFormControl"> |
||||
|
</tb-widget-type-autocomplete> |
||||
|
<div class="tb-add-bundle-widget-actions"> |
||||
|
<button mat-button color="primary" |
||||
|
[disabled]="(isLoading$ | async)" |
||||
|
(click)="cancelAddWidgetMode()">{{'action.cancel' | translate}} |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</mat-card-content> |
||||
|
<mat-card-actions> |
||||
|
<button mat-button color="primary" *ngIf="editMode && (widgets?.length || isDirty)" |
||||
|
[disabled]="(isLoading$ | async)" |
||||
|
(click)="cancel()">{{'action.cancel' | translate}} |
||||
|
</button> |
||||
|
<button mat-raised-button color="primary" *ngIf="editMode && (widgets?.length || isDirty)" |
||||
|
[disabled]="(isLoading$ | async) || !isDirty" |
||||
|
(click)="save()">{{'action.save' | translate}} |
||||
|
</button> |
||||
|
<button mat-raised-button color="primary" *ngIf="!isReadOnly && !editMode" |
||||
|
[disabled]="(isLoading$ | async)" |
||||
|
(click)="edit()">{{'action.edit' | translate}} |
||||
|
</button> |
||||
|
</mat-card-actions> |
||||
|
</mat-card> |
||||
|
|
||||
@ -0,0 +1,184 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2023 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 { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
padding: 8px; |
||||
|
} |
||||
|
|
||||
|
:host ::ng-deep { |
||||
|
.tb-bundle-widgets-card { |
||||
|
.mat-mdc-card-header-text { |
||||
|
flex: 1; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tb-bundle-widgets-card { |
||||
|
padding: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
@media #{$mat-md} { |
||||
|
width: 80%; |
||||
|
} |
||||
|
|
||||
|
@media #{$mat-gt-md} { |
||||
|
width: 60%; |
||||
|
} |
||||
|
|
||||
|
.title-container { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
gap: 8px; |
||||
|
.mat-headline-5 { |
||||
|
margin: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.mat-mdc-card-content { |
||||
|
flex: 1; |
||||
|
padding: 16px; |
||||
|
min-height: 0; |
||||
|
overflow: hidden; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 8px; |
||||
|
} |
||||
|
|
||||
|
.tb-add-widget-button { |
||||
|
min-height: 56px; |
||||
|
cursor: pointer; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
background: #FFFFFF; |
||||
|
padding: 8px; |
||||
|
border: 2px dashed rgba(0, 0, 0, 0.08); |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
|
||||
|
.tb-add-widget-button-panel { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
.tb-add-widget-button-with-text { |
||||
|
cursor: pointer; |
||||
|
display: flex; |
||||
|
padding: 24px 40px 24px 24px; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
gap: 8px; |
||||
|
border: 2px dashed rgba(0, 0, 0, 0.12); |
||||
|
border-radius: 10px; |
||||
|
.tb-add-widget-button-text { |
||||
|
font-size: 16px; |
||||
|
font-style: normal; |
||||
|
font-weight: 500; |
||||
|
line-height: 24px; |
||||
|
letter-spacing: 0.25px; |
||||
|
color: $tb-primary-color; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tb-add-bundle-widget-form { |
||||
|
display: flex; |
||||
|
padding: 16px; |
||||
|
flex-direction: column; |
||||
|
gap: 12px; |
||||
|
border-radius: 10px; |
||||
|
border: 1px solid rgba(0, 0, 0, 0.05); |
||||
|
box-shadow: 0 5px 16px 0 rgba(0, 0, 0, 0.04); |
||||
|
} |
||||
|
|
||||
|
.tb-add-bundle-widget-actions { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
align-items: flex-start; |
||||
|
gap: 16px; |
||||
|
} |
||||
|
|
||||
|
.mat-mdc-card-actions { |
||||
|
justify-content: end; |
||||
|
gap: 8px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tb-bundle-widgets-container { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 8px; |
||||
|
min-height: 0; |
||||
|
overflow: auto; |
||||
|
padding-top: 8px; |
||||
|
padding-bottom: 8px; |
||||
|
} |
||||
|
|
||||
|
.tb-bundle-widget-row { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
padding: 6px 12px 6px 6px; |
||||
|
background: #fff; |
||||
|
gap: 12px; |
||||
|
border-radius: 10px; |
||||
|
border: 1px solid rgba(0, 0, 0, 0.05); |
||||
|
box-shadow: 0 5px 16px 0 rgba(0, 0, 0, 0.04); |
||||
|
.tb-bundle-widget-row-details { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
gap: 12px; |
||||
|
.tb-bundle-widget-image-preview { |
||||
|
width: 64px; |
||||
|
max-height: 100%; |
||||
|
object-fit: contain; |
||||
|
border-radius: 6px; |
||||
|
} |
||||
|
.tb-bundle-widget-details { |
||||
|
padding: 18px 0; |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
.tb-bundle-widget-title { |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
letter-spacing: 0.2px; |
||||
|
color: rgba(0, 0, 0, 0.76); |
||||
|
} |
||||
|
.tb-bundle-widget-deprecated { |
||||
|
font-size: 13px; |
||||
|
font-weight: 400; |
||||
|
color: rgba(0, 0, 0, 0.54); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.mat-icon { |
||||
|
color: rgba(0, 0, 0, 0.54); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,178 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2023 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 { ChangeDetectorRef, Component, OnInit } from '@angular/core'; |
||||
|
import { PageComponent } from '@shared/components/page.component'; |
||||
|
import { AuthUser } from '@shared/models/user.model'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { ActivatedRoute, Router } from '@angular/router'; |
||||
|
import { getCurrentAuthUser } from '@core/auth/auth.selectors'; |
||||
|
import { Authority } from '@shared/models/authority.enum'; |
||||
|
import { NULL_UUID } from '@shared/models/id/has-uuid'; |
||||
|
import { WidgetsBundle } from '@shared/models/widgets-bundle.model'; |
||||
|
import { WidgetTypeInfo } from '@shared/models/widget.models'; |
||||
|
import { CdkDragDrop } from '@angular/cdk/drag-drop'; |
||||
|
import { ImportExportService } from '@home/components/import-export/import-export.service'; |
||||
|
import { WidgetService } from '@core/http/widget.service'; |
||||
|
import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; |
||||
|
import { isDefinedAndNotNull } from '@core/utils'; |
||||
|
import { FormControl, Validators } from '@angular/forms'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-widgets-bundle-widget', |
||||
|
templateUrl: './widgets-bundle-widgets.component.html', |
||||
|
styleUrls: ['./widgets-bundle-widgets.component.scss'] |
||||
|
}) |
||||
|
export class WidgetsBundleWidgetsComponent extends PageComponent implements OnInit { |
||||
|
|
||||
|
authUser: AuthUser; |
||||
|
|
||||
|
isReadOnly: boolean; |
||||
|
editMode = false; |
||||
|
addMode = false; |
||||
|
isDirty = false; |
||||
|
|
||||
|
widgetsBundle: WidgetsBundle; |
||||
|
widgets: Array<WidgetTypeInfo>; |
||||
|
excludeWidgetTypeIds: Array<string>; |
||||
|
|
||||
|
addWidgetFormControl = new FormControl(null, [Validators.required]); |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private router: Router, |
||||
|
private route: ActivatedRoute, |
||||
|
private widgetsService: WidgetService, |
||||
|
private importExport: ImportExportService, |
||||
|
private sanitizer: DomSanitizer, |
||||
|
private cd: ChangeDetectorRef) { |
||||
|
super(store); |
||||
|
this.authUser = getCurrentAuthUser(this.store); |
||||
|
this.widgetsBundle = this.route.snapshot.data.widgetsBundle; |
||||
|
this.widgets = [...this.route.snapshot.data.widgets]; |
||||
|
if (this.authUser.authority === Authority.TENANT_ADMIN) { |
||||
|
this.isReadOnly = !this.widgetsBundle || this.widgetsBundle.tenantId.id === NULL_UUID; |
||||
|
} else { |
||||
|
this.isReadOnly = this.authUser.authority !== Authority.SYS_ADMIN; |
||||
|
} |
||||
|
if (!this.isReadOnly && !this.widgets.length) { |
||||
|
this.editMode = true; |
||||
|
} |
||||
|
this.addWidgetFormControl.valueChanges.subscribe((newWidget) => { |
||||
|
if (newWidget) { |
||||
|
this.addWidget(newWidget); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
} |
||||
|
|
||||
|
getPreviewImage(imageUrl: string | null): SafeUrl | string { |
||||
|
if (isDefinedAndNotNull(imageUrl)) { |
||||
|
return this.sanitizer.bypassSecurityTrustUrl(imageUrl); |
||||
|
} |
||||
|
return '/assets/widget-preview-empty.svg'; |
||||
|
} |
||||
|
|
||||
|
trackByWidget(index: number, widget: WidgetTypeInfo): any { |
||||
|
return widget; |
||||
|
} |
||||
|
|
||||
|
widgetDrop(event: CdkDragDrop<string[]>) { |
||||
|
const widget = this.widgets[event.previousIndex]; |
||||
|
this.widgets.splice(event.previousIndex, 1); |
||||
|
this.widgets.splice(event.currentIndex, 0, widget); |
||||
|
this.isDirty = true; |
||||
|
} |
||||
|
|
||||
|
addWidgetMode() { |
||||
|
this.addWidgetFormControl.patchValue(null, {emitEvent: false}); |
||||
|
this.excludeWidgetTypeIds = this.widgets.map(w => w.id.id); |
||||
|
this.addMode = true; |
||||
|
} |
||||
|
|
||||
|
cancelAddWidgetMode() { |
||||
|
this.addMode = false; |
||||
|
} |
||||
|
|
||||
|
private addWidget(newWidget: WidgetTypeInfo) { |
||||
|
this.widgets.push(newWidget); |
||||
|
this.isDirty = true; |
||||
|
this.addMode = false; |
||||
|
} |
||||
|
|
||||
|
openWidgetEditor($event: Event, widgetType: WidgetTypeInfo) { |
||||
|
if ($event) { |
||||
|
$event.stopPropagation(); |
||||
|
} |
||||
|
this.router.navigateByUrl(`resources/widgets-library/widget-types/${widgetType.id.id}`); |
||||
|
} |
||||
|
|
||||
|
exportWidgetType($event: Event, widgetType: WidgetTypeInfo) { |
||||
|
if ($event) { |
||||
|
$event.stopPropagation(); |
||||
|
} |
||||
|
this.importExport.exportWidgetType(widgetType.id.id); |
||||
|
} |
||||
|
|
||||
|
removeWidgetType($event: Event, widgetType: WidgetTypeInfo) { |
||||
|
if ($event) { |
||||
|
$event.stopPropagation(); |
||||
|
} |
||||
|
const index = this.widgets.indexOf(widgetType); |
||||
|
this.widgets.splice(index, 1); |
||||
|
this.isDirty = true; |
||||
|
} |
||||
|
|
||||
|
goBack() { |
||||
|
this.router.navigate(['..'], { relativeTo: this.route }); |
||||
|
} |
||||
|
|
||||
|
exportWidgetsBundle() { |
||||
|
this.importExport.exportWidgetsBundle(this.widgetsBundle.id.id); |
||||
|
} |
||||
|
|
||||
|
edit() { |
||||
|
this.editMode = true; |
||||
|
} |
||||
|
|
||||
|
cancel() { |
||||
|
if (this.isDirty) { |
||||
|
this.widgetsService.getBundleWidgetTypeInfos(this.widgetsBundle.id.id).subscribe( |
||||
|
(widgets) => { |
||||
|
this.widgets = [...widgets]; |
||||
|
this.isDirty = false; |
||||
|
this.addMode = false; |
||||
|
this.editMode = !this.widgets.length; |
||||
|
this.cd.markForCheck(); |
||||
|
} |
||||
|
); |
||||
|
} else { |
||||
|
this.addMode = false; |
||||
|
this.editMode = !this.widgets.length; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
save() { |
||||
|
const widgetTypeIds = this.widgets.map(w => w.id.id); |
||||
|
this.widgetsService.updateWidgetsBundleWidgetTypes(this.widgetsBundle.id.id, widgetTypeIds).subscribe(() => { |
||||
|
this.isDirty = false; |
||||
|
this.editMode = false; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
} |
||||
Loading…
Reference in new issue