Browse Source

fix(iot-hub): show guide button for all installed devices with fallback

Show the guide icon on device cards for ALL installed items, not just
those with installState. If installState is available, opens the
read-only review dialog. If not (items installed before the feature),
falls back to the item detail dialog — same pattern as the installed
items page info button.
pull/15508/head
Andrii Shvaika 6 months ago
parent
commit
797be258bc
  1. 46
      ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.ts
  2. 6
      ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.ts

46
ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.ts

@ -30,6 +30,7 @@ import { cfTypeTranslations, widgetTypeTranslations, ruleChainTypeTranslations }
import { IotHubInstalledItem, DeviceInstalledItemDescriptor } from '@shared/models/iot-hub/iot-hub-installed-item.models'; import { IotHubInstalledItem, DeviceInstalledItemDescriptor } from '@shared/models/iot-hub/iot-hub-installed-item.models';
import { IotHubApiService } from '@core/http/iot-hub-api.service'; import { IotHubApiService } from '@core/http/iot-hub-api.service';
import { TbDeviceInstallDialogComponent, DeviceInstallDialogData } from './device-install-dialog/device-install-dialog.component'; import { TbDeviceInstallDialogComponent, DeviceInstallDialogData } from './device-install-dialog/device-install-dialog.component';
import { TbIotHubItemDetailDialogComponent, IotHubItemDetailDialogData } from './iot-hub-item-detail-dialog.component';
import { MatDialog } from '@angular/material/dialog'; import { MatDialog } from '@angular/material/dialog';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
@ -586,24 +587,33 @@ export class TbIotHubBrowseComponent implements OnInit, OnDestroy {
const installedItem = this.getInstalledItem(item); const installedItem = this.getInstalledItem(item);
if (!installedItem) { return; } if (!installedItem) { return; }
const descriptor = installedItem.descriptor as DeviceInstalledItemDescriptor; const descriptor = installedItem.descriptor as DeviceInstalledItemDescriptor;
if (!descriptor?.installState || !descriptor?.selectedInstallMethod) { return; } if (descriptor?.installState && descriptor?.selectedInstallMethod) {
this.iotHubApiService.getVersionFileData(installedItem.itemVersionId, { ignoreLoading: true, ignoreErrors: true }).subscribe({ // Has install state — open review dialog
next: async (blob: Blob) => { this.iotHubApiService.getVersionFileData(installedItem.itemVersionId, { ignoreLoading: true, ignoreErrors: true }).subscribe({
const zipData = await blob.arrayBuffer(); next: async (blob: Blob) => {
this.dialog.open(TbDeviceInstallDialogComponent, { const zipData = await blob.arrayBuffer();
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], this.dialog.open(TbDeviceInstallDialogComponent, {
disableClose: false, panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
autoFocus: false, disableClose: false,
data: { autoFocus: false,
item, data: {
zipData, item,
reviewMode: true, zipData,
selectedInstallMethod: descriptor.selectedInstallMethod, reviewMode: true,
installState: descriptor.installState selectedInstallMethod: descriptor.selectedInstallMethod,
} as DeviceInstallDialogData installState: descriptor.installState
}); } as DeviceInstallDialogData
} });
}); }
});
} else {
// No install state — fall back to detail dialog
this.dialog.open(TbIotHubItemDetailDialogComponent, {
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
autoFocus: false,
data: { item, installedItem } as IotHubItemDetailDialogData
});
}
} }
navigateToCreator(creatorId: string): void { navigateToCreator(creatorId: string): void {

6
ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.ts

@ -225,11 +225,7 @@ export class TbIotHubItemCardComponent {
} }
hasInstallGuide(): boolean { hasInstallGuide(): boolean {
if (!this.installedItem || this.installedItem.itemType !== 'DEVICE') { return !!this.installedItem && this.installedItem.itemType === 'DEVICE';
return false;
}
const descriptor = this.installedItem.descriptor as any;
return !!descriptor?.installState && !!descriptor?.selectedInstallMethod;
} }
onGuideClick(event: MouseEvent): void { onGuideClick(event: MouseEvent): void {

Loading…
Cancel
Save