SHIBUI-814 added i18n to dynamic schema form components

TIER · Sep 17, 2018 · 5961451 · 5961451
1 parent 1e54690
commit 5961451
Show file tree

Hide file tree

Showing 12 changed files with 77 additions and 44 deletions.
diff --git a/ui/src/app/schema-form/schema-form.module.ts b/ui/src/app/schema-form/schema-form.module.ts
@@ -18,6 +18,7 @@ import { CustomIntegerComponent } from './widget/number/number.component';
 import { FilterTargetComponent } from './widget/filter-target/filter-target.component';
 import { ChecklistComponent } from './widget/check/checklist.component';
 import { IconButtonComponent } from './widget/button/icon-button.component';
+import { I18nModule } from '../i18n/i18n.module';
 
 export const COMPONENTS = [
     BooleanRadioComponent,
@@ -41,6 +42,7 @@ export const COMPONENTS = [
         NgbPopoverModule,
         NgbDropdownModule,
         SharedModule,
+        I18nModule,
         SchemaFormModule.forRoot()
     ],
     declarations: COMPONENTS,

diff --git a/ui/src/app/schema-form/widget/array/array.component.html b/ui/src/app/schema-form/widget/array/array.component.html
@@ -5,12 +5,14 @@
         </label>
         &nbsp;
         <button (click)="addItem()" class="btn btn-success btn-sm array-add-button">
-            Add &nbsp;
+            <translate key="action.add">Add</translate> &nbsp;
             <i class="fa fa-plus" aria-hidden="true"></i>
         </button>
         &nbsp;
         <span class="text-right" *ngIf="schema.description">
-            <ng-template #tooltip>{{ schema.description }}</ng-template>
+            <ng-template #tooltip>
+                <translate [key]="schema.description"></translate>
+            </ng-template>
             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltip" i18n-aria-label="@@tooltip.instruction"
                 aria-label="Information icon - press spacebar to read additional information for this form field"></i>
         </span>
@@ -21,10 +23,12 @@
             <div class="py-2">
                 <button class="btn btn-link pt-1" (click)="removeItem(i)" role="button">
                     <i class="fa fa-fw fa-trash fa-lg text-danger"></i>
-                    <span class="sr-only">Remove</span>
+                    <span class="sr-only" translate="action.remove">Remove</span>
                 </button>
             </div>
         </div>
     </div>
-    <span *ngIf="schema.description" class="sr-only">{{schema.description}}</span>
+    <span *ngIf="schema.description" class="sr-only">
+        <translate [key]="schema.description"></translate>
+    </span>
 </div>
diff --git a/ui/src/app/schema-form/widget/boolean-radio/boolean-radio.component.html b/ui/src/app/schema-form/widget/boolean-radio/boolean-radio.component.html
@@ -1,15 +1,17 @@
 <div class="widget form-group">
     <label class="d-flex justify-content-start control-label">
-        <span>{{ schema.title }}</span>
+        <span [translate]="schema.title">{{ schema.title }}</span>
         <span *ngIf="schema.description">
-            <ng-template #tooltip translate="tooltip.description">{{ schema.description }}</ng-template>
+            <ng-template #tooltip translate="tooltip.description">
+                <translate [key]="schema.description">{{ schema.description }}</translate>
+            </ng-template>
             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                 [ngbPopover]="tooltip"
-                i18n-aria-label="@@tooltip.instruction"
+                i18n-aria-label="tooltip.instruction"
                 aria-label="Information icon - press spacebar to read additional information for this form field"></i>
         </span>
     </label>
-    <span *ngIf="schema.description" class="sr-only">{{ schema.description }}</span>
+    <span *ngIf="schema.description" class="sr-only" [translate]="schema.description">{{ schema.description }}</span>
     <div *ngFor="let option of schema.oneOf; let i=index;" class="form-check form-check-inline">
         <label class="control-label">
             <input
@@ -19,7 +21,7 @@
                 [value]="option.enum[0]"
                 type="radio"
                 [attr.disabled]="schema.readOnly">
-            {{ option.description }}
+            <translate [key]="option.description">{{ option.description }}</translate>
         </label>
     </div>
     <input *ngIf="schema.readOnly" [attr.name]="name" type="hidden" [formControl]="control">

diff --git a/ui/src/app/schema-form/widget/check/checkbox.component.html b/ui/src/app/schema-form/widget/check/checkbox.component.html
@@ -10,12 +10,14 @@
                     [attr.disabled]="schema.readOnly?true:null"
                     id="{{ name }}"
                     [disableValidation]="true">
-                <label for="{{ name }}" class="custom-control-label">
+                <label for="{{ name }}" class="custom-control-label" [translate]="schema.title">
                     {{ schema.title }}
                 </label>
             </div>
             <div>
-                <ng-template #tooltip>{{ schema.description }}</ng-template>
+                <ng-template #tooltip>
+                    <translate [key]="schema.description">{{ schema.description }}</translate>
+                </ng-template>
                 <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltip" i18n-aria-label="@@tooltip.instruction"
                     aria-label="Information icon - press spacebar to read additional information for this form field"></i>
             </div>
@@ -30,7 +32,7 @@
                     [attr.disabled]="schema.readOnly?true:null"
                     (change)="onCheck($event.target)"
                     [attr.checked]="checked[option.enum[0]] ? true : null">
-                {{option.description}}
+                <translate [key]="option.description">{{ option.description }}</translate>
             </label>
         </div>
     </ng-container>

diff --git a/ui/src/app/schema-form/widget/check/checklist.component.html b/ui/src/app/schema-form/widget/check/checklist.component.html
@@ -24,7 +24,9 @@
                                 aria-checked="false"
                             />
                             <label class="custom-control-label" for="input-{{ i }}">
-                                <span class="sr-only">Toggle {{ attr.label }}</span>
+                                <span class="sr-only" translate="action.toggle" [translateParams]="{ label: attr.label }">
+                                    Toggle {{ attr.label }}
+                                </span>
                             </label>
                         </div>
                     </fieldset>

diff --git a/ui/src/app/schema-form/widget/datalist/datalist.component.html b/ui/src/app/schema-form/widget/datalist/datalist.component.html
@@ -5,14 +5,16 @@
             <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i>
         </span>
         <span *ngIf="schema.description">
-            <ng-template #tooltip translate="tooltip.description">{{ schema.description }}</ng-template>
+            <ng-template #tooltip>
+                <translate key="tooltip.description">{{ schema.description }}</translate>
+            </ng-template>
             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                 [ngbPopover]="tooltip"
-                i18n-aria-label="@@tooltip.instruction"
+                i18n-aria-label="tooltip.instruction"
                 aria-label="Information icon - press spacebar to read additional information for this form field"></i>
         </span>
     </label>
-    <span *ngIf="schema.description" class="sr-only">{{ schema.description }}</span>
+    <span *ngIf="schema.description" class="sr-only" [translate]="schema.description">{{ schema.description }}</span>
     <auto-complete
         [id]="id"
         [fieldId]="id"

diff --git a/ui/src/app/schema-form/widget/fieldset/fieldset.component.html b/ui/src/app/schema-form/widget/fieldset/fieldset.component.html
@@ -6,8 +6,8 @@
                 [class.d-none]="fieldset.type === 'hidden'"
                 [class.col-lg-6]="fieldset.type === 'group'"
                 [class.col-lg-12]="fieldset.type === 'group-lg'">
-                <legend class="text-primary" *ngIf="fieldset.title">{{ fieldset.title }}</legend>
-                <p *ngIf="fieldset.description">{{ fieldset.description }}</p>
+                <legend class="text-primary" *ngIf="fieldset.title" [translate]="fieldset.title">{{ fieldset.title }}</legend>
+                <p *ngIf="fieldset.description" [translate]="fieldset.description">{{ fieldset.description }}</p>
                 <div [ngClass]="{
                     'bg-light border rounded px-4 pt-4 pb-1': fieldset.type === 'section' || (!fieldset.type && formProperty.schema.widget.id === 'fieldset')
                 }">

diff --git a/ui/src/app/schema-form/widget/filter-target/filter-target.component.html b/ui/src/app/schema-form/widget/filter-target/filter-target.component.html
@@ -3,9 +3,12 @@
         <div class="col-lg-6">
             <div>
                 <label [attr.for]="id" class="d-flex justify-content-start control-label">
-                    <span>Search By <i class="fa fa-asterisk text-danger" aria-hidden="true"></i></span>
                     <span>
-                        <ng-template #tooltipBy translate="tooltip.description">Search By</ng-template>
+                        <translate key="action.search-by">Search By</translate> <i class="fa fa-asterisk text-danger" aria-hidden="true"></i></span>
+                    <span>
+                        <ng-template #tooltipBy translate="tooltip.description">
+                            <translate key="action.search-by">Search By</translate>
+                        </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                             [ngbPopover]="tooltipBy"
                             i18n-aria-label="@@tooltip.instruction"
@@ -18,14 +21,16 @@
                         type="button"
                         data-toggle="dropdown"
                         aria-haspopup="true"
-                        aria-expanded="false">
+                        aria-expanded="false"
+                        [translate]="this.displayType">
                         {{ this.displayType }}
                     </button>
                     <div class="dropdown-menu" ngbDropdownMenu>
                         <a *ngFor="let option of typeOptions"
                             class="dropdown-item"
                             href="#"
-                            (click)="$event.preventDefault(); select(option.value);">
+                            (click)="$event.preventDefault(); select(option.value);"
+                            [translate]="option.description">
                             {{ option.description }}
                         </a>
                     </div>
@@ -35,14 +40,14 @@
             <div>
                 <label for="targetInput" class="d-flex justify-content-start control-label">
                     <span>
-                        Search Criteria by {{ this.displayType }}
+                        <translate key="label.search-criteria-by" params="{ displayType }">Search Criteria by {{ this.displayType }}</translate>
                         <i class="fa fa-asterisk text-danger"
                             aria-hidden="true"
                             *ngIf="entityAttributesFilterTargetType !== 'ENTITY'"></i>
                     </span>
                     <span>
-                        <ng-template #tooltipCriteria translate="tooltip.description">
-                            Search Criteria by {{ this.displayType }}
+                        <ng-template #tooltipCriteria>
+                            <translate key="label.search-criteria-by" params="{ displayType }">Search Criteria by {{ this.displayType }}</translate>
                         </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                             [ngbPopover]="tooltipCriteria"
@@ -61,21 +66,23 @@
                                 [matches]="ids$ | async"
                                 (keydown.enter)="onSelectValue(search.value)">
                             </auto-complete>
-                            <small [class.text-danger]="search.invalid && search.touched">
+                            <small [class.text-danger]="search.invalid && search.touched" translate="message.entity-id-min-unique">
                                 You must add at least one entity id target and they must each be unique.
                             </small>
                         </ng-container>
                         <ng-container *ngSwitchCase="'CONDITION_SCRIPT'">
                             <p id="targetInput" role="textbox" class="codearea form-control" rows="8" contenteditable [formControl]="script" name="script"></p>
                             <small id="script-help" class="text-danger">
-                                <ng-container *ngIf="script.invalid && script.touched">Required for Scripts</ng-container>
+                                <ng-container *ngIf="script.invalid && script.touched">
+                                    <translate key="message.required-for-scripts">Required for Scripts</translate>
+                                </ng-container>
                                 &nbsp;
                             </small>
                         </ng-container>
                         <ng-container *ngSwitchCase="'REGEX'">
                             <input id="targetInput" class="form-control" type="text" [formControl]="script" name="script" />
                             <small id="regex-help" class="text-danger">
-                                <ng-container *ngIf="script.invalid && script.touched">Required for Regex</ng-container>
+                                <translate key="message.required-for-regex">Required for Regex</translate>
                                 &nbsp;
                             </small>
                         </ng-container>
@@ -84,15 +91,16 @@
                         <button
                             class="btn btn-success"
                             [disabled]="search.invalid"
-                            (click)="onSelectValue(search.value)">
+                            (click)="onSelectValue(search.value)"
+                            translate="action.add-entity-id">
                             Add Entity ID
                         </button>
                     </div>
                 </div>
             </div>
         </div>
         <div class="col-lg-6" *ngIf="entityAttributesFilterTargetType === 'ENTITY'">
-            <label class="control-label">Entity Ids Added</label>
+            <label class="control-label" translate="label.entity-ids-added">Entity Ids Added</label>
             <hr />
             <ul class="list-group list-group-sm list-group-scroll">
                 <li class="list-group-item d-flex justify-content-between align-items-center" *ngFor="let id of targets">

diff --git a/ui/src/app/schema-form/widget/number/number.component.html b/ui/src/app/schema-form/widget/number/number.component.html
@@ -2,14 +2,16 @@
     <label [attr.for]="id" class="d-flex justify-content-between control-label">
         <span>{{ schema.title }} <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i></span>
         <span *ngIf="schema.description">
-            <ng-template #tooltip translate="tooltip.description">{{ schema.description }}</ng-template>
+            <ng-template #tooltip translate="tooltip.description">
+                <translate [key]="schema.description">{{ schema.description }}</translate>
+            </ng-template>
             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                 [ngbPopover]="tooltip"
                 i18n-aria-label="@@tooltip.instruction"
                 aria-label="Information icon - press spacebar to read additional information for this form field"></i>
         </span>
     </label>
-    <span *ngIf="schema.description" class="formHelp">{{schema.description}}</span>
+    <span *ngIf="schema.description" class="formHelp" [translate]="schema.description">{{schema.description}}</span>
     <input [attr.readonly]="schema.readOnly?true:null"
         [name]="name"
         class="text-widget integer-widget form-control"

diff --git a/ui/src/app/schema-form/widget/select/select.component.html b/ui/src/app/schema-form/widget/select/select.component.html
@@ -1,30 +1,35 @@
 <div class="widget form-group">
     <label [attr.for]="id" class="horizontal control-label" *ngIf="schema.title">
         <span>
-            {{ schema.title }}
+            <translate [key]="schema.title">{{ schema.title }}</translate>
             <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i>
         </span>
         <span *ngIf="schema.description">
-            <ng-template #tooltip translate="tooltip.description">{{ schema.description }}</ng-template>
+            <ng-template #tooltip translate="tooltip.description">
+                <translate [key]="schema.description">{{ schema.description }}</translate>
+            </ng-template>
             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                 [ngbPopover]="tooltip"
                 i18n-aria-label="@@tooltip.instruction"
                 aria-label="Information icon - press spacebar to read additional information for this form field"></i>
         </span>
     </label>
-    <span *ngIf="schema.description" class="sr-only">
+    <span *ngIf="schema.description" class="sr-only" [translate]="schema.description">
         {{ schema.description }}
     </span>
     <select *ngIf="schema.type !== 'array'"
         [formControl]="control"
         [attr.name]="name"
         class="form-control"
         [attr.aria-label]="schema.title">
-        <option disabled selected>{{ schema.placeholder || schema.title }}</option>
-        <option *ngFor="let option of schema.oneOf" [ngValue]="option.enum[0]">{{option.description}}</option>
+        <option disabled selected>
+            <translate *ngIf="schema.placeholder">{{ schema.placeholder }}</translate>
+            <translate *ngIf="!schema.placeholder">{{ schema.title }}</translate>
+        </option>
+        <option *ngFor="let option of schema.oneOf" [ngValue]="option.enum[0]" [translate]="option.description">{{ option.description }}</option>
     </select>
     <select *ngIf="schema.type === 'array'" multiple [formControl]="control" [attr.name]="name" [attr.disabled]="schema.readOnly" class="form-control">
-        <option *ngFor="let option of schema.items.oneOf" [ngValue]="option.enum[0]">{{option.description}}</option>
+        <option *ngFor="let option of schema.items.oneOf" [ngValue]="option.enum[0]" [translate]="option.description">{{ option.description }}</option>
     </select>
     <input *ngIf="schema.readOnly" [attr.name]="name" type="hidden" [formControl]="control">
 </div>
diff --git a/ui/src/app/schema-form/widget/string/string.component.html b/ui/src/app/schema-form/widget/string/string.component.html
@@ -2,14 +2,16 @@
     <label [attr.for]="id" class="d-flex justify-content-between control-label">
         <span>{{ schema.title }} <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i></span>
         <span *ngIf="schema.description">
-            <ng-template #tooltip translate="tooltip.description">{{ schema.description }}</ng-template>
+            <ng-template #tooltip translate="tooltip.description">
+                <translate [key]="schema.description">{{ schema.description }}</translate>
+            </ng-template>
             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                 [ngbPopover]="tooltip"
                 i18n-aria-label="@@tooltip.instruction"
                 aria-label="Information icon - press spacebar to read additional information for this form field"></i>
         </span>
     </label>
-    <span *ngIf="schema.description" class="sr-only">{{ schema.description }}</span>
+    <span *ngIf="schema.description" class="sr-only" [translate]="schema.description">{{ schema.description }}</span>
     <input [name]="name"
         validate="true"
         [attr.readonly]="schema.readOnly?true:null"
@@ -26,7 +28,7 @@
     <small class="form-text text-danger" *ngIf="errorMessages && errorMessages.length && control.touched">
         {{ errorMessages }}
     </small>
-    <small class="form-text text-secondary" *ngIf="!(control.touched && errorMessages && errorMessages.length) && schema.widget.help">
+    <small class="form-text text-secondary" *ngIf="!(control.touched && errorMessages && errorMessages.length) && schema.widget.help" [translate]="schema.widget.help">
         {{ schema.widget.help }}
     </small>
 </div>