Browse Source

fix(iot-hub): fix device install dialog template and translations

- Use correct tb-markdown inputs ([data] and [usePlainMarkdown])
- Fix translation key format (hyphens, not dots)
- Remove unused ConnectivityType import and resolveImageUrl method
- Auto-advance to first step when single connectivity type
- Use inline data URIs for helpImage directly
pull/15347/head
Andrii Shvaika 6 months ago
parent
commit
2397232bf4
  1. 18
      ui-ngx/src/app/modules/home/pages/iot-hub/device-install-dialog/device-install-dialog.component.html
  2. 8
      ui-ngx/src/app/modules/home/pages/iot-hub/device-install-dialog/device-install-dialog.component.ts
  3. 17
      ui-ngx/src/assets/locale/locale.constant-en_US.json

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

@ -34,7 +34,7 @@
@switch (currentView) {
@case ('connectivity') {
<div class="tb-device-install-connectivity">
<p>{{ 'iot-hub.device-install.select-connectivity' | translate }}</p>
<p>{{ 'iot-hub.device-install-select-connectivity' | translate }}</p>
<div class="tb-connectivity-options">
@for (ct of availableConnectivityTypes; track ct) {
<button mat-stroked-button
@ -49,8 +49,8 @@
}
@case ('instruction') {
<div class="tb-device-install-instruction">
<tb-markdown [markdownText]="currentMarkdown"
[style]="'doc'">
<tb-markdown [data]="currentMarkdown"
[usePlainMarkdown]="true">
</tb-markdown>
</div>
}
@ -74,7 +74,7 @@
}
</mat-select>
@if (currentFormGroup.controls[field.key]?.hasError('required')) {
<mat-error>{{ 'iot-hub.device-install.field-required' | translate }}</mat-error>
<mat-error>{{ field.label + ' is required' }}</mat-error>
}
</mat-form-field>
}
@ -88,7 +88,7 @@
<mat-icon>{{ passwordVisible[field.key] ? 'visibility_off' : 'visibility' }}</mat-icon>
</button>
@if (currentFormGroup.controls[field.key]?.hasError('required')) {
<mat-error>{{ 'iot-hub.device-install.field-required' | translate }}</mat-error>
<mat-error>{{ field.label + ' is required' }}</mat-error>
}
@if (currentFormGroup.controls[field.key]?.hasError('pattern')) {
<mat-error>{{ getPatternErrorMessage(field) }}</mat-error>
@ -100,7 +100,7 @@
<mat-label>{{ field.label }}</mat-label>
<input matInput type="number" [formControlName]="field.key">
@if (currentFormGroup.controls[field.key]?.hasError('required')) {
<mat-error>{{ 'iot-hub.device-install.field-required' | translate }}</mat-error>
<mat-error>{{ field.label + ' is required' }}</mat-error>
}
@if (currentFormGroup.controls[field.key]?.hasError('pattern')) {
<mat-error>{{ getPatternErrorMessage(field) }}</mat-error>
@ -112,7 +112,7 @@
<mat-label>{{ field.label }}</mat-label>
<input matInput [formControlName]="field.key">
@if (currentFormGroup.controls[field.key]?.hasError('required')) {
<mat-error>{{ 'iot-hub.device-install.field-required' | translate }}</mat-error>
<mat-error>{{ field.label + ' is required' }}</mat-error>
}
@if (currentFormGroup.controls[field.key]?.hasError('pattern')) {
<mat-error>{{ getPatternErrorMessage(field) }}</mat-error>
@ -124,7 +124,7 @@
<div class="tb-form-field-help">{{ field.helpText }}</div>
}
@if (field.helpImage) {
<img class="tb-form-field-help-image" [src]="resolveImageUrl(field.helpImage)" [alt]="field.label">
<img class="tb-form-field-help-image" [src]="field.helpImage" [alt]="field.label">
}
}
</form>
@ -171,7 +171,7 @@
[style]="'doc'">
</tb-markdown>
} @else {
<p class="tb-done-message">{{ 'iot-hub.device-install.success' | translate:{ name: packageInfo?.name } }}</p>
<p class="tb-done-message">{{ 'iot-hub.install-success-desc' | translate:{ name: packageInfo?.name } }}</p>
}
</div>
}

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

@ -25,7 +25,6 @@ import { DeviceService } from '@core/http/device.service';
import { DashboardService } from '@core/http/dashboard.service';
import { RuleChainService } from '@core/http/rule-chain.service';
import {
ConnectivityType,
connectivityTypeTranslations,
DeviceInstallStep,
DevicePackageInfo,
@ -102,6 +101,9 @@ export class TbDeviceInstallDialogComponent implements OnInit {
);
if (this.availableConnectivityTypes.length === 1) {
this.selectedConnectivity = this.availableConnectivityTypes[0];
this.steps = this.packageInfo.installSteps[this.selectedConnectivity] || [];
this.currentStepIndex = 0;
this.advanceToCurrentStep();
}
} catch (e) {
console.error('Failed to parse device package ZIP', e);
@ -203,10 +205,6 @@ export class TbDeviceInstallDialogComponent implements OnInit {
this.runEntitySteps();
}
resolveImageUrl(path: string): string {
return this.data.iotHubApiService.resolveResourceUrl(path);
}
getPatternErrorMessage(field: FormFieldDefinition): string {
if (field.validators?.length > 0) {
return field.validators[0].message || 'Invalid format';

17
ui-ngx/src/assets/locale/locale.constant-en_US.json

@ -3852,7 +3852,22 @@
"open-installed-entity": "Open installed entity",
"view-item-details": "View item details",
"open-item-type-details": "Open {{type}} details",
"back-to-marketplace": "Back to Marketplace"
"back-to-marketplace": "Back to Marketplace",
"device-install-connection": "Connection: {{type}}",
"device-install-entity-error": "Failed to create {{name}}: {{error}}",
"device-install-expand-image": "Click to expand",
"device-install-select-connectivity": "Select your connection type:",
"device-install-step-error": "Failed",
"device-install-step-pending": "Pending",
"device-install-step-running": "Creating...",
"device-install-step-success": "Created",
"device-install-step-type-DASHBOARD": "Dashboard",
"device-install-step-type-DEVICE": "Device",
"device-install-step-type-DEVICE_PROFILE": "Device Profile",
"device-install-step-type-RULE_CHAIN": "Rule Chain",
"device-install-title": "Install \"{{name}}\"",
"device-install-complete-title": "Install \"{{name}}\" — Complete",
"device-installing-title": "Installing \"{{name}}\""
},
"item-data": {
"widget-type-timeseries": "Timeseries",

Loading…
Cancel
Save