Browse Source

feat(iot-hub): add Open Dashboard/Device button on last wizard step

Replace Done button on the last step with:
- Close (text button) — closes dialog
- Open Dashboard / Open Device / Open Gateway (primary button) —
  closes dialog and navigates to the entity

Priority: dashboard > device > gateway > integration.
If no entity was created, only Close is shown.
pull/15508/head
Andrii Shvaika 6 months ago
parent
commit
8862fee3ce
  1. 26
      ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html
  2. 28
      ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts

26
ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html

@ -203,10 +203,19 @@
@if (currentWizardStep; as step) {
@switch (step.type) {
@case ('instruction') {
<button mat-button (click)="cancel()">{{ 'action.cancel' | translate }}</button>
<button mat-flat-button color="primary" (click)="nextStep()">
{{ (isLastWizardStep ? 'action.done' : 'action.next') | translate }}
</button>
@if (isLastWizardStep) {
<button mat-button (click)="done()">{{ 'action.close' | translate }}</button>
@if (primaryEntityAction; as action) {
<button mat-flat-button color="primary" (click)="openEntity(action.url)">
{{ action.label }}
</button>
}
} @else {
<button mat-button (click)="cancel()">{{ 'action.cancel' | translate }}</button>
<button mat-flat-button color="primary" (click)="nextStep()">
{{ 'action.next' | translate }}
</button>
}
}
@case ('form') {
<button mat-button (click)="cancel()">{{ 'action.cancel' | translate }}</button>
@ -222,9 +231,12 @@
{{ 'action.retry' | translate }}
</button>
} @else if (step.progressDone && isLastWizardStep) {
<button mat-flat-button color="primary" (click)="done()">
{{ 'action.done' | translate }}
</button>
<button mat-button (click)="done()">{{ 'action.close' | translate }}</button>
@if (primaryEntityAction; as action) {
<button mat-flat-button color="primary" (click)="openEntity(action.url)">
{{ action.label }}
</button>
}
}
}
}

28
ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts

@ -15,8 +15,8 @@
///
import { ChangeDetectorRef, Component, Inject, OnInit, ViewChild } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { Router } from '@angular/router';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { DialogComponent } from '@shared/components/dialog.component';
@ -216,6 +216,32 @@ export class TbDeviceInstallDialogComponent extends DialogComponent<TbDeviceInst
this.onStepActivated();
}
get primaryEntityAction(): { url: string; label: string } | null {
// Priority: dashboard > device > gateway > integration
const dashboard = this.entityOutputs.get('dashboard');
if (dashboard?.url) {
return { url: dashboard.url, label: 'Open Dashboard' };
}
const device = this.entityOutputs.get('device');
if (device?.url) {
return { url: device.url, label: 'Open Device' };
}
const gateway = this.entityOutputs.get('gateway');
if (gateway?.url) {
return { url: gateway.url, label: 'Open Gateway' };
}
const integration = this.entityOutputs.get('integration');
if (integration?.url) {
return { url: integration.url, label: 'Open Integration' };
}
return null;
}
openEntity(url: string): void {
this.dialogRef.close('installed');
this.router.navigateByUrl(url);
}
done(): void {
this.dialogRef.close('installed');
}

Loading…
Cancel
Save