Browse Source
- Create TbIotHubDeleteDialogComponent with warn-colored "Delete anyway" button - Extract install dialog template and styles to separate HTML/SCSS files - Install dialog: simplified confirm/success layout matching design, "Close" label when only button shown on success - Item card: installed label is now a clickable button emitting deleteClick - Detail dialog: 64px colored icon header for CF/RC types, description-only layout (no image) for CF/RC, delete button (stroked warn) in footer when installed, closes with 'deleted' result after confirmed deletion - Home component: handle install/delete dialog results by reloading installed items, pass installedItem to detail dialogpull/15347/head
Igor Kulikov
6 months ago
14 changed files with 423 additions and 173 deletions
@ -0,0 +1,83 @@ |
|||
///
|
|||
/// 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'; |
|||
|
|||
export interface IotHubDeleteDialogData { |
|||
itemName: string; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-iot-hub-delete-dialog', |
|||
standalone: false, |
|||
template: ` |
|||
<div class="tb-iot-hub-delete-content"> |
|||
<h2 class="tb-iot-hub-delete-title">{{ 'iot-hub.delete-confirm-title' | translate:{ name: data.itemName } }}</h2> |
|||
<p class="tb-iot-hub-delete-desc">{{ 'iot-hub.delete-desc' | translate }}</p> |
|||
</div> |
|||
<div class="tb-iot-hub-delete-actions"> |
|||
<button mat-button (click)="cancel()">{{ 'action.cancel' | translate }}</button> |
|||
<button mat-flat-button color="warn" (click)="confirm()">{{ 'iot-hub.delete-anyway' | translate }}</button> |
|||
</div> |
|||
`,
|
|||
styles: [` |
|||
.tb-iot-hub-delete-content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20px; |
|||
padding: 24px; |
|||
} |
|||
.tb-iot-hub-delete-title { |
|||
font-size: 20px; |
|||
font-weight: 600; |
|||
line-height: 24px; |
|||
letter-spacing: 0.1px; |
|||
color: rgba(0, 0, 0, 0.87); |
|||
margin: 0; |
|||
} |
|||
.tb-iot-hub-delete-desc { |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
line-height: 20px; |
|||
letter-spacing: 0.2px; |
|||
color: rgba(0, 0, 0, 0.54); |
|||
margin: 0; |
|||
} |
|||
.tb-iot-hub-delete-actions { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
gap: 8px; |
|||
padding: 8px; |
|||
} |
|||
`]
|
|||
}) |
|||
export class TbIotHubDeleteDialogComponent { |
|||
|
|||
constructor( |
|||
@Inject(MAT_DIALOG_DATA) public data: IotHubDeleteDialogData, |
|||
private dialogRef: MatDialogRef<TbIotHubDeleteDialogComponent> |
|||
) {} |
|||
|
|||
confirm(): void { |
|||
this.dialogRef.close(true); |
|||
} |
|||
|
|||
cancel(): void { |
|||
this.dialogRef.close(false); |
|||
} |
|||
} |
|||
@ -0,0 +1,80 @@ |
|||
<!-- |
|||
|
|||
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-install-content"> |
|||
@switch (state) { |
|||
@case ('confirm') { |
|||
<h2 class="tb-iot-hub-install-title">{{ 'iot-hub.install-confirm-title' | translate:{ name: item.name } }}</h2> |
|||
<p class="tb-iot-hub-install-desc">{{ 'iot-hub.install-desc' | translate }}</p> |
|||
} |
|||
@case ('select-entity') { |
|||
<h2 class="tb-iot-hub-install-title">{{ 'iot-hub.install-confirm-title' | translate:{ name: item.name } }}</h2> |
|||
<p class="tb-iot-hub-install-desc">{{ 'iot-hub.select-entity-for-cf' | translate:{ name: item.name } }}</p> |
|||
<tb-entity-select |
|||
[(ngModel)]="selectedEntityId" |
|||
[allowedEntityTypes]="cfEntityTypes" |
|||
[defaultEntityType]="defaultCfEntityType" |
|||
[filterAllowedEntityTypes]="false" |
|||
appearance="outline" |
|||
required> |
|||
</tb-entity-select> |
|||
} |
|||
@case ('installing') { |
|||
<h2 class="tb-iot-hub-install-title">{{ 'iot-hub.install-confirm-title' | translate:{ name: item.name } }}</h2> |
|||
<p class="tb-iot-hub-install-desc">{{ 'iot-hub.install-desc' | translate }}</p> |
|||
} |
|||
@case ('success') { |
|||
<h2 class="tb-iot-hub-install-title">{{ 'iot-hub.install-success-title' | translate }}</h2> |
|||
<p class="tb-iot-hub-install-desc">{{ 'iot-hub.install-success-desc' | translate:{ name: item.name } }}</p> |
|||
} |
|||
@case ('error') { |
|||
<h2 class="tb-iot-hub-install-title">{{ 'iot-hub.install-error-title' | translate }}</h2> |
|||
<p class="tb-iot-hub-install-desc">{{ 'iot-hub.install-error-message' | translate:{ name: item.name } }}</p> |
|||
<div class="tb-iot-hub-error-details">{{ errorMessage }}</div> |
|||
} |
|||
} |
|||
</div> |
|||
<mat-dialog-actions align="end"> |
|||
@switch (state) { |
|||
@case ('confirm') { |
|||
<button mat-button (click)="cancel()">{{ 'action.cancel' | translate }}</button> |
|||
<button mat-flat-button color="primary" (click)="install()">{{ 'iot-hub.install' | translate }}</button> |
|||
} |
|||
@case ('select-entity') { |
|||
<button mat-button (click)="cancel()">{{ 'action.cancel' | translate }}</button> |
|||
<button mat-flat-button color="primary" [disabled]="!selectedEntityId" (click)="doInstall()">{{ 'iot-hub.install' | translate }}</button> |
|||
} |
|||
@case ('installing') { |
|||
<button mat-button disabled>{{ 'action.cancel' | translate }}</button> |
|||
<button mat-flat-button color="primary" disabled> |
|||
<mat-spinner diameter="18" class="tb-iot-hub-inline-spinner"></mat-spinner> |
|||
{{ 'iot-hub.installing' | translate }} |
|||
</button> |
|||
} |
|||
@case ('success') { |
|||
<button mat-button (click)="close()">{{ (entityDetailsUrl ? 'action.cancel' : 'action.close') | translate }}</button> |
|||
@if (entityDetailsUrl) { |
|||
<button mat-flat-button color="primary" (click)="openEntityDetails()"> |
|||
{{ 'iot-hub.open-details' | translate }} |
|||
</button> |
|||
} |
|||
} |
|||
@case ('error') { |
|||
<button mat-button (click)="close()">{{ 'action.close' | translate }}</button> |
|||
} |
|||
} |
|||
</mat-dialog-actions> |
|||
@ -0,0 +1,57 @@ |
|||
/** |
|||
* 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-install-content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20px; |
|||
padding: 24px; |
|||
} |
|||
|
|||
.tb-iot-hub-install-title { |
|||
font-size: 20px; |
|||
font-weight: 600; |
|||
line-height: 24px; |
|||
letter-spacing: 0.1px; |
|||
color: rgba(0, 0, 0, 0.87); |
|||
margin: 0; |
|||
} |
|||
|
|||
.tb-iot-hub-install-desc { |
|||
color: rgba(0, 0, 0, 0.54); |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
letter-spacing: 0.2px; |
|||
margin: 0; |
|||
} |
|||
|
|||
.tb-iot-hub-inline-spinner { |
|||
display: inline-block; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.tb-iot-hub-error-details { |
|||
max-height: 200px; |
|||
overflow-y: auto; |
|||
padding: 12px; |
|||
background: #f5f5f5; |
|||
border-radius: 4px; |
|||
font-family: monospace; |
|||
font-size: 12px; |
|||
color: rgba(0, 0, 0, 0.7); |
|||
white-space: pre-wrap; |
|||
word-break: break-word; |
|||
} |
|||
Loading…
Reference in new issue