Browse Source

fix(iot-hub): fix stepper navigation by tracking step completion

Linear mat-stepper requires steps to be marked completed before
advancing. Added completed flag to WizardStep, set it when user
clicks Next or when entity steps finish.
pull/15347/head
Andrii Shvaika 4 months ago
parent
commit
86f8792d59
  1. 2
      ui-ngx/src/app/modules/home/pages/iot-hub/device-install-dialog/device-install-dialog.component.html
  2. 12
      ui-ngx/src/app/modules/home/pages/iot-hub/device-install-dialog/device-install-dialog.component.ts

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

@ -68,7 +68,7 @@
@for (ws of wizardSteps; track ws.label; let i = $index; let last = $last) { @for (ws of wizardSteps; track ws.label; let i = $index; let last = $last) {
<mat-step [editable]="false" <mat-step [editable]="false"
[completed]="ws.type === 'progress' ? ws.progressDone : false" [completed]="ws.completed"
[stepControl]="ws.type === 'form' ? ws.formGroup : null"> [stepControl]="ws.type === 'form' ? ws.formGroup : null">
<ng-template matStepLabel>{{ ws.label }}</ng-template> <ng-template matStepLabel>{{ ws.label }}</ng-template>

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

@ -51,6 +51,7 @@ export interface WizardStep {
type: WizardStepType; type: WizardStepType;
label: string; label: string;
rawSteps: DeviceInstallStep[]; rawSteps: DeviceInstallStep[];
completed: boolean;
// Instruction // Instruction
markdown?: string; markdown?: string;
// Form // Form
@ -172,6 +173,7 @@ export class TbDeviceInstallDialogComponent implements OnInit {
this.done(); this.done();
return; return;
} }
step.completed = true;
this.stepper.next(); this.stepper.next();
this.onStepActivated(); this.onStepActivated();
} }
@ -244,14 +246,16 @@ export class TbDeviceInstallDialogComponent implements OnInit {
this.wizardSteps.push({ this.wizardSteps.push({
type: 'instruction', type: 'instruction',
label: step.name, label: step.name,
rawSteps: [step] rawSteps: [step],
completed: false
}); });
i++; i++;
} else if (step.type === InstallStepType.SHOW_FORM) { } else if (step.type === InstallStepType.SHOW_FORM) {
this.wizardSteps.push({ this.wizardSteps.push({
type: 'form', type: 'form',
label: step.name, label: step.name,
rawSteps: [step] rawSteps: [step],
completed: false
}); });
i++; i++;
} else if (ENTITY_STEP_TYPES.has(step.type)) { } else if (ENTITY_STEP_TYPES.has(step.type)) {
@ -264,7 +268,8 @@ export class TbDeviceInstallDialogComponent implements OnInit {
this.wizardSteps.push({ this.wizardSteps.push({
type: 'progress', type: 'progress',
label: 'Provisioning', label: 'Provisioning',
rawSteps: group rawSteps: group,
completed: false
}); });
} else { } else {
// Skip unsupported steps (CONVERTER, INTEGRATION) // Skip unsupported steps (CONVERTER, INTEGRATION)
@ -368,6 +373,7 @@ export class TbDeviceInstallDialogComponent implements OnInit {
// All done — report install // All done — report install
ws.progressDone = true; ws.progressDone = true;
ws.completed = true;
try { try {
await firstValueFrom( await firstValueFrom(
this.data.iotHubApiService.reportVersionInstalled(this.data.item.id as string, { ignoreLoading: true }) this.data.iotHubApiService.reportVersionInstalled(this.data.item.id as string, { ignoreLoading: true })

Loading…
Cancel
Save