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) { @switch (currentView) {
@case ('connectivity') { @case ('connectivity') {
<div class="tb-device-install-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"> <div class="tb-connectivity-options">
@for (ct of availableConnectivityTypes; track ct) { @for (ct of availableConnectivityTypes; track ct) {
<button mat-stroked-button <button mat-stroked-button
@ -49,8 +49,8 @@
} }
@case ('instruction') { @case ('instruction') {
<div class="tb-device-install-instruction"> <div class="tb-device-install-instruction">
<tb-markdown [markdownText]="currentMarkdown" <tb-markdown [data]="currentMarkdown"
[style]="'doc'"> [usePlainMarkdown]="true">
</tb-markdown> </tb-markdown>
</div> </div>
} }
@ -74,7 +74,7 @@
} }
</mat-select> </mat-select>
@if (currentFormGroup.controls[field.key]?.hasError('required')) { @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> </mat-form-field>
} }
@ -88,7 +88,7 @@
<mat-icon>{{ passwordVisible[field.key] ? 'visibility_off' : 'visibility' }}</mat-icon> <mat-icon>{{ passwordVisible[field.key] ? 'visibility_off' : 'visibility' }}</mat-icon>
</button> </button>
@if (currentFormGroup.controls[field.key]?.hasError('required')) { @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')) { @if (currentFormGroup.controls[field.key]?.hasError('pattern')) {
<mat-error>{{ getPatternErrorMessage(field) }}</mat-error> <mat-error>{{ getPatternErrorMessage(field) }}</mat-error>
@ -100,7 +100,7 @@
<mat-label>{{ field.label }}</mat-label> <mat-label>{{ field.label }}</mat-label>
<input matInput type="number" [formControlName]="field.key"> <input matInput type="number" [formControlName]="field.key">
@if (currentFormGroup.controls[field.key]?.hasError('required')) { @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')) { @if (currentFormGroup.controls[field.key]?.hasError('pattern')) {
<mat-error>{{ getPatternErrorMessage(field) }}</mat-error> <mat-error>{{ getPatternErrorMessage(field) }}</mat-error>
@ -112,7 +112,7 @@
<mat-label>{{ field.label }}</mat-label> <mat-label>{{ field.label }}</mat-label>
<input matInput [formControlName]="field.key"> <input matInput [formControlName]="field.key">
@if (currentFormGroup.controls[field.key]?.hasError('required')) { @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')) { @if (currentFormGroup.controls[field.key]?.hasError('pattern')) {
<mat-error>{{ getPatternErrorMessage(field) }}</mat-error> <mat-error>{{ getPatternErrorMessage(field) }}</mat-error>
@ -124,7 +124,7 @@
<div class="tb-form-field-help">{{ field.helpText }}</div> <div class="tb-form-field-help">{{ field.helpText }}</div>
} }
@if (field.helpImage) { @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> </form>
@ -171,7 +171,7 @@
[style]="'doc'"> [style]="'doc'">
</tb-markdown> </tb-markdown>
} @else { } @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> </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 { DashboardService } from '@core/http/dashboard.service';
import { RuleChainService } from '@core/http/rule-chain.service'; import { RuleChainService } from '@core/http/rule-chain.service';
import { import {
ConnectivityType,
connectivityTypeTranslations, connectivityTypeTranslations,
DeviceInstallStep, DeviceInstallStep,
DevicePackageInfo, DevicePackageInfo,
@ -102,6 +101,9 @@ export class TbDeviceInstallDialogComponent implements OnInit {
); );
if (this.availableConnectivityTypes.length === 1) { if (this.availableConnectivityTypes.length === 1) {
this.selectedConnectivity = this.availableConnectivityTypes[0]; this.selectedConnectivity = this.availableConnectivityTypes[0];
this.steps = this.packageInfo.installSteps[this.selectedConnectivity] || [];
this.currentStepIndex = 0;
this.advanceToCurrentStep();
} }
} catch (e) { } catch (e) {
console.error('Failed to parse device package ZIP', e); console.error('Failed to parse device package ZIP', e);
@ -203,10 +205,6 @@ export class TbDeviceInstallDialogComponent implements OnInit {
this.runEntitySteps(); this.runEntitySteps();
} }
resolveImageUrl(path: string): string {
return this.data.iotHubApiService.resolveResourceUrl(path);
}
getPatternErrorMessage(field: FormFieldDefinition): string { getPatternErrorMessage(field: FormFieldDefinition): string {
if (field.validators?.length > 0) { if (field.validators?.length > 0) {
return field.validators[0].message || 'Invalid format'; 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", "open-installed-entity": "Open installed entity",
"view-item-details": "View item details", "view-item-details": "View item details",
"open-item-type-details": "Open {{type}} 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": { "item-data": {
"widget-type-timeseries": "Timeseries", "widget-type-timeseries": "Timeseries",

Loading…
Cancel
Save