Browse Source
- Add 'add' mode to item card: shows "Add" button, emits addClick - Add 'add' mode and addItem output to browse component - Browse passes mode to cards and detail dialog, propagates add results - New TbIotHubAddItemDialogComponent: fullscreen dialog with embedded browse in add mode, installs item via API and returns descriptor - Add "Add from IoT Hub" menu item to dashboards table config - On add: installs dashboard, navigates to newly created dashboard - Add HomeComponentsModule import to IotHubModulepull/15508/head
Igor Kulikov
6 months ago
11 changed files with 241 additions and 6 deletions
@ -0,0 +1,39 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2026 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-iot-hub-add-item-dialog"> |
|||
<div class="tb-iot-hub-add-item-header"> |
|||
<h2>{{ getTitle() }}</h2> |
|||
<button mat-icon-button (click)="close()"> |
|||
<mat-icon>close</mat-icon> |
|||
</button> |
|||
</div> |
|||
<div class="tb-iot-hub-add-item-content"> |
|||
@if (isInstalling) { |
|||
<div class="tb-iot-hub-add-item-loading"> |
|||
<mat-spinner diameter="40"></mat-spinner> |
|||
</div> |
|||
} |
|||
<tb-iot-hub-browse |
|||
[activeType]="itemType" |
|||
[hideTabs]="true" |
|||
[embedded]="true" |
|||
mode="add" |
|||
(addItem)="onAddItem($event)"> |
|||
</tb-iot-hub-browse> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,55 @@ |
|||
/** |
|||
* Copyright © 2016-2026 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-iot-hub-add-item-dialog { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.tb-iot-hub-add-item-header { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 16px 24px; |
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.12); |
|||
flex-shrink: 0; |
|||
|
|||
h2 { |
|||
margin: 0; |
|||
font-size: 20px; |
|||
font-weight: 500; |
|||
line-height: 28px; |
|||
color: rgba(0, 0, 0, 0.87); |
|||
} |
|||
} |
|||
|
|||
.tb-iot-hub-add-item-content { |
|||
flex: 1; |
|||
overflow: hidden; |
|||
position: relative; |
|||
} |
|||
|
|||
.tb-iot-hub-add-item-loading { |
|||
position: absolute; |
|||
inset: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: rgba(255, 255, 255, 0.7); |
|||
z-index: 10; |
|||
} |
|||
@ -0,0 +1,78 @@ |
|||
///
|
|||
/// Copyright © 2016-2026 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 } from '@angular/core'; |
|||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; |
|||
import { MpItemVersionView } from '@shared/models/iot-hub/iot-hub-version.models'; |
|||
import { ItemType, itemTypeTranslations } from '@shared/models/iot-hub/iot-hub-item.models'; |
|||
import { IotHubApiService } from '@core/http/iot-hub-api.service'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
|
|||
export interface IotHubAddItemDialogData { |
|||
itemType: ItemType; |
|||
iotHubApiService: IotHubApiService; |
|||
} |
|||
|
|||
export interface IotHubAddItemDialogResult { |
|||
item: MpItemVersionView; |
|||
descriptor: any; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-iot-hub-add-item-dialog', |
|||
standalone: false, |
|||
templateUrl: './iot-hub-add-item-dialog.component.html', |
|||
styleUrls: ['./iot-hub-add-item-dialog.component.scss'] |
|||
}) |
|||
export class TbIotHubAddItemDialogComponent { |
|||
|
|||
itemType: ItemType; |
|||
isInstalling = false; |
|||
|
|||
constructor( |
|||
@Inject(MAT_DIALOG_DATA) public data: IotHubAddItemDialogData, |
|||
private dialogRef: MatDialogRef<TbIotHubAddItemDialogComponent>, |
|||
private translate: TranslateService |
|||
) { |
|||
this.itemType = data.itemType; |
|||
} |
|||
|
|||
getTitle(): string { |
|||
const typeKey = itemTypeTranslations.get(this.itemType); |
|||
const typeLabel = typeKey ? this.translate.instant(typeKey) : ''; |
|||
return this.translate.instant('iot-hub.add-item-from-iot-hub', { type: typeLabel }); |
|||
} |
|||
|
|||
onAddItem(item: MpItemVersionView): void { |
|||
this.isInstalling = true; |
|||
const versionId = item.id as string; |
|||
this.data.iotHubApiService.installItemVersion(versionId, { ignoreLoading: true }).subscribe({ |
|||
next: (result) => { |
|||
this.isInstalling = false; |
|||
if (result.success) { |
|||
this.dialogRef.close({ item, descriptor: result.descriptor } as IotHubAddItemDialogResult); |
|||
} |
|||
}, |
|||
error: () => { |
|||
this.isInstalling = false; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
close(): void { |
|||
this.dialogRef.close(); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue