SHIBUI-814 Fixes in templates for translations

TIER · Sep 20, 2018 · 7885824 · 7885824
1 parent 8ec0332
commit 7885824
Show file tree

Hide file tree

Showing 24 changed files with 67 additions and 36 deletions.
diff --git a/backend/src/main/resources/i18n/messages_en.properties b/backend/src/main/resources/i18n/messages_en.properties
@@ -1,5 +1,6 @@
 action.dashboard=Dashboard
 action.logout=Logout
+action.add=Add
 action.add-new=Add New
 action.add-new-provider=Add a new metadata provider
 action.add-new-source=Add a new metadata source
@@ -231,7 +232,7 @@ label.script=Script
 label.metadata-filter=Metadata Filter
 label.metadata-filter-type=Metadata Filter Type
 
-label.http-connnection-attributes=HTTP Connection Attributes
+label.http-connection-attributes=HTTP Connection Attributes
 label.http-security-attributes=HTTP Security Attributes
 label.http-proxy-attributes=HTTP Proxy Attributes
 label.http-caching-attributes=HTTP Caching Attributes

diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
@@ -77,7 +77,7 @@
                 {{ formatted$ | async }}
                 &nbsp;|&nbsp;
                 </ng-container>
-                <translate-i18n key="label.copyright" [params]="{ year: year }">Copyright &copy; Internet2</translate-i18n>
+                <translate-i18n key="brand.footer.copyright" [params]="{ year: year }">Copyright &copy; Internet2</translate-i18n>
             </p>
         </div>
         <div class="col-md-4 logo">

diff --git a/ui/src/app/i18n/component/translate.component.ts b/ui/src/app/i18n/component/translate.component.ts
@@ -37,6 +37,7 @@ export class TranslateComponent implements OnDestroy {
 
     @Input() set params(params: any) {
         this.currentParams = params || {};
+        console.log(params);
         this.update();
     }
 

diff --git a/ui/src/app/i18n/directive/translate.directive.ts b/ui/src/app/i18n/directive/translate.directive.ts
@@ -51,7 +51,7 @@ export class TranslateDirective implements OnDestroy {
     update(): void {
         const translated = this.service.translate(this.key, this.currentParams, this.messages);
         this.element.nativeElement.textContent = translated;
-        // this.element.nativeElement.data = translated;
+        this.element.nativeElement.data = translated;
     }
 
     ngOnDestroy() {

diff --git a/ui/src/app/metadata/provider/component/provider-wizard-summary.component.html b/ui/src/app/metadata/provider/component/provider-wizard-summary.component.html
@@ -1,9 +1,9 @@
 <div class="row">
     <div class="col-xl-6 col-xs-12" *ngFor="let sections of columns">
         <section class="px-3" *ngFor="let section of sections; let i = index;" role="list">
-            <button (click)="gotoPage(section.id)" class="tag tag-success tag-sm my-4 text-left" [attr.aria-label]="section.label" role="button">
+            <button (click)="gotoPage(section.id)" class="tag tag-success tag-sm my-4 text-left" [attr.aria-label]="section.label | translate" role="button">
                 <span class="index">{{ section.index }}</span>
-                <ng-container>{{ section.label }}</ng-container>
+                <translate-i18n [key]="section.label">{{ section.label }}</translate-i18n>
             </button>
             <ng-container *ngFor="let prop of section.properties">
                 <summary-property [property]="prop" role="listitem"></summary-property>

diff --git a/ui/src/app/metadata/provider/component/summary-property.component.html b/ui/src/app/metadata/provider/component/summary-property.component.html
@@ -2,13 +2,13 @@
     <ng-container [ngSwitch]="property.type">
         <ng-container *ngSwitchDefault>
             <ng-container *ngIf="property.name">
-                <strong class="text-primary d-block" role="term">{{ property.name }}</strong>
+                <strong class="text-primary d-block" role="term" [translate]="property.name">{{ property.name }}</strong>
                 <span class="d-block" role="definition">{{ property.value || property.value === false ? property.value : '-' }}</span>
             </ng-container>
         </ng-container>
         <ng-container *ngSwitchCase="'object'">
             <ng-container *ngIf="property.name">
-                <span class="text-primary d-block" role="term">{{ property.name }}</span>
+                <span class="text-primary d-block" role="term" [translate]="property.name">{{ property.name }}</span>
             </ng-container>
             <ng-container *ngIf="property.properties">
                 <summary-property *ngFor="let prop of property.properties" [property]="prop"></summary-property>

diff --git a/ui/src/app/schema-form/registry.ts b/ui/src/app/schema-form/registry.ts
@@ -17,7 +17,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 { CustomObjectWidget } from './widget/object/object.component';
 
 export class CustomWidgetRegistry extends WidgetRegistry {
     constructor() {
@@ -38,7 +38,7 @@ export class CustomWidgetRegistry extends WidgetRegistry {
         this.register('boolean-radio', BooleanRadioComponent);
 
         this.register('fieldset', FieldsetComponent);
-        this.register('object', ObjectWidget);
+        this.register('object', CustomObjectWidget);
 
         this.register('array', CustomArrayComponent);
         this.register('checklist', ChecklistComponent);

diff --git a/ui/src/app/schema-form/schema-form.module.ts b/ui/src/app/schema-form/schema-form.module.ts
@@ -19,6 +19,7 @@ import { FilterTargetComponent } from './widget/filter-target/filter-target.comp
 import { ChecklistComponent } from './widget/check/checklist.component';
 import { IconButtonComponent } from './widget/button/icon-button.component';
 import { I18nModule } from '../i18n/i18n.module';
+import { CustomObjectWidget } from './widget/object/object.component';
 
 export const COMPONENTS = [
     BooleanRadioComponent,
@@ -32,7 +33,8 @@ export const COMPONENTS = [
     CustomIntegerComponent,
     FilterTargetComponent,
     ChecklistComponent,
-    IconButtonComponent
+    IconButtonComponent,
+    CustomObjectWidget
 ];
 
 @NgModule({

diff --git a/ui/src/app/schema-form/widget/array/array.component.html b/ui/src/app/schema-form/widget/array/array.component.html
@@ -1,7 +1,7 @@
 <div class="widget form-group">
     <div class="d-flex justify-content-start">
         <label [attr.for]="id" class="m-0 pt-1 control-label">
-            {{ schema.title }}
+            <translate-i18n [key]="schema.title">{{ schema.title }}</translate-i18n>
         </label>
         &nbsp;
         <button (click)="addItem()" class="btn btn-success btn-sm array-add-button">

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
@@ -2,7 +2,7 @@
     <label class="d-flex justify-content-start control-label">
         <span [translate]="schema.title">{{ schema.title }}</span>
         <span *ngIf="schema.description">
-            <ng-template #tooltip translate="tooltip.description">
+            <ng-template #tooltip>
                 <translate-i18n [key]="schema.description">{{ schema.description }}</translate-i18n>
             </ng-template>
             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"

diff --git a/ui/src/app/schema-form/widget/check/checklist.component.html b/ui/src/app/schema-form/widget/check/checklist.component.html
@@ -1,5 +1,5 @@
 <fieldset [attr.aria-label]="schema.description" tabindex="0">
-    <legend *ngIf="schema.title">{{ schema.title }}</legend>
+    <legend *ngIf="schema.title" [translate]="schema.title">{{ schema.title }}</legend>
     <table class="table table-striped table-sm">
         <thead>
             <tr class="table-secondary">

diff --git a/ui/src/app/schema-form/widget/datalist/datalist.component.html b/ui/src/app/schema-form/widget/datalist/datalist.component.html
@@ -1,12 +1,12 @@
 <div class="widget form-group">
     <label [for]="id" class="d-flex justify-content-between control-label">
         <span [ngClass]="{'sr-only': formProperty.parent.schema.type === 'array'}">
-            {{ schema.title }}
+            <translate-i18n [key]="schema.title">{{ schema.title }}</translate-i18n>
             <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i>
         </span>
         <span *ngIf="schema.description">
             <ng-template #tooltip>
-                <translate-i18n key="tooltip.description">{{ schema.description }}</translate-i18n>
+                <translate-i18n [key]="schema.description">{{ schema.description }}</translate-i18n>
             </ng-template>
             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                 [ngbPopover]="tooltip"
@@ -22,9 +22,9 @@
         [matches]="schema.widget.data"
         [required]="true"
         [dropdown]="true"
-        [placeholder]="schema.placeholder || ''"
+        [attr.placeholder]="schema.placeholder || '' | translate"
         [attr.disabled]="schema.readOnly?true:null"
         role="textbox"
-        [attr.aria-label]="schema.title">
+        [attr.aria-label]="schema.title | translate">
     </auto-complete>
 </div>
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,7 +6,9 @@
                 [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" [translate]="fieldset.title">{{ fieldset.title }}</legend>
+                <legend class="text-primary" *ngIf="fieldset.title">
+                    <translate-i18n [key]="fieldset.title">{{ fieldset.title }}</translate-i18n>
+                </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
@@ -6,12 +6,11 @@
                     <span>
                         <translate-i18n key="action.search-by">Search By</translate-i18n> <i class="fa fa-asterisk text-danger" aria-hidden="true"></i></span>
                     <span>
-                        <ng-template #tooltipBy translate="tooltip.description">
+                        <ng-template #tooltipBy>
                             <translate-i18n key="action.search-by">Search By</translate-i18n>
                         </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                             [ngbPopover]="tooltipBy"
-
                             [attr.aria-label]="'tooltip.instruction' | translate"></i>
                     </span>
                 </label>
@@ -40,14 +39,16 @@
             <div>
                 <label for="targetInput" class="d-flex justify-content-start control-label">
                     <span>
-                        <translate-i18n key="label.search-criteria-by" params="{ displayType }">Search Criteria by {{ this.displayType }}</translate-i18n>
+                        <translate-i18n key="label.search-criteria-by" [params]="{ displayType: (displayType | translate) }">
+                            Search Criteria by {{ this.displayType | translate }}
+                        </translate-i18n>
                         <i class="fa fa-asterisk text-danger"
                             aria-hidden="true"
                             *ngIf="entityAttributesFilterTargetType !== 'ENTITY'"></i>
                     </span>
                     <span>
                         <ng-template #tooltipCriteria>
-                            <translate-i18n key="label.search-criteria-by" params="{ displayType }">Search Criteria by {{ this.displayType }}</translate-i18n>
+                            <translate-i18n key="label.search-criteria-by" [params]="{ displayType: (displayType | translate) }">Search Criteria by {{ this.displayType }}</translate-i18n>
                         </ng-template>
                         <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
                             [ngbPopover]="tooltipCriteria"

diff --git a/ui/src/app/schema-form/widget/number/number.component.html b/ui/src/app/schema-form/widget/number/number.component.html
@@ -1,8 +1,11 @@
 <div class="widget form-group">
     <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>
+            <translate-i18n [key]="schema.title">{{ schema.title }}</translate-i18n>
+            <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i>
+        </span>
         <span *ngIf="schema.description">
-            <ng-template #tooltip translate="tooltip.description">
+            <ng-template #tooltip>
                 <translate-i18n [key]="schema.description">{{ schema.description }}</translate-i18n>
             </ng-template>
             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
@@ -19,7 +22,7 @@
         [attr.type]="'number'"
         [attr.min]="schema.minimum"
         [attr.max]="schema.maximum"
-        [attr.placeholder]="schema.placeholder"
+        [attr.placeholder]="schema.placeholder | translate"
         [attr.maxLength]="schema.maxLength || null"
         [attr.minLength]="schema.minLength || null"
         [attr.step]="schema.multipleOf || schema.widget.step"

diff --git a/ui/src/app/schema-form/widget/object/object.component.html b/ui/src/app/schema-form/widget/object/object.component.html
@@ -0,0 +1,7 @@
+<fieldset *ngFor="let fieldset of formProperty.schema.fieldsets">
+    <legend *ngIf="fieldset.title" [translate]="fieldset.title">{{fieldset.title}}</legend>
+    <div *ngIf="fieldset.description" [translate]="fieldset.description">{{fieldset.description}}</div>
+    <div *ngFor="let fieldId of fieldset.fields">
+        <sf-form-element [formProperty]="formProperty.getProperty(fieldId)"></sf-form-element>
+    </div>
+</fieldset>
diff --git a/ui/src/app/schema-form/widget/object/object.component.ts b/ui/src/app/schema-form/widget/object/object.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { ObjectWidget } from 'ngx-schema-form';
+
+/* tslint:disable */
+@Component({
+    selector: 'custom-object',
+    templateUrl: `./object.component.html`
+})
+export class CustomObjectWidget extends ObjectWidget { }
diff --git a/ui/src/app/schema-form/widget/select/select.component.html b/ui/src/app/schema-form/widget/select/select.component.html
@@ -5,7 +5,7 @@
             <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i>
         </span>
         <span *ngIf="schema.description">
-            <ng-template #tooltip translate="tooltip.description">
+            <ng-template #tooltip>
                 <translate-i18n [key]="schema.description">{{ schema.description }}</translate-i18n>
             </ng-template>
             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
@@ -23,8 +23,8 @@
         class="form-control"
         [attr.aria-label]="schema.title">
         <option disabled selected>
-            <translate-i18n *ngIf="schema.placeholder">{{ schema.placeholder }}</translate-i18n>
-            <translate-i18n *ngIf="!schema.placeholder">{{ schema.title }}</translate-i18n>
+            <translate-i18n *ngIf="schema.placeholder" [key]="schema.placeholder">{{ schema.placeholder }}</translate-i18n>
+            <translate-i18n *ngIf="!schema.placeholder" [key]="schema.title">{{ schema.title }}</translate-i18n>
         </option>
         <option *ngFor="let option of schema.oneOf" [ngValue]="option.enum[0]" [translate]="option.description">{{ option.description }}</option>
     </select>

diff --git a/ui/src/app/schema-form/widget/string/string.component.html b/ui/src/app/schema-form/widget/string/string.component.html
@@ -3,7 +3,7 @@
         <span>
             <translate-i18n [key]="schema.title">{{ schema.title }}</translate-i18n> <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i></span>
         <span *ngIf="schema.description">
-            <ng-template #tooltip translate="tooltip.description">
+            <ng-template #tooltip>
                 <translate-i18n [key]="schema.description">{{ schema.description }}</translate-i18n>
             </ng-template>
             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
@@ -19,7 +19,7 @@
         [attr.type]="this.getInputType()"
         [attr.id]="id"
         [formControl]="control"
-        [attr.placeholder]="schema.placeholder"
+        [attr.placeholder]="schema.placeholder | translate"
         [attr.maxLength]="schema.maxLength || null"
         [attr.minLength]="schema.minLength || null"
         [attr.disabled]="(schema.widget.id=='color' && schema.readOnly)?true:null"
@@ -28,7 +28,9 @@
     <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" [translate]="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>
diff --git a/ui/src/app/schema-form/widget/textarea/textarea.component.html b/ui/src/app/schema-form/widget/textarea/textarea.component.html
@@ -5,7 +5,7 @@
             <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i>
         </span>
         <span *ngIf="schema.description">
-            <ng-template #tooltip translate="tooltip.description">
+            <ng-template #tooltip>
                 <translate-i18n [key]="schema.description">{{ schema.description }}</translate-i18n>
             </ng-template>
             <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"

diff --git a/ui/src/app/shared/shared.module.ts b/ui/src/app/shared/shared.module.ts
@@ -12,12 +12,14 @@ import { PrettyXml } from './pipe/pretty-xml.pipe';
 import { ToggleSwitchComponent } from './switch/switch.component';
 import { ContenteditableDirective } from './contenteditable/contenteditable.directive';
 import { ReplacePipe } from './pipe/replace.pipe';
+import { I18nModule } from '../i18n/i18n.module';
 
 @NgModule({
     imports: [
         CommonModule,
         FormsModule,
-        ReactiveFormsModule
+        ReactiveFormsModule,
+        I18nModule
     ],
     declarations: [
         HighlightPipe,

diff --git a/ui/src/assets/schema/filter/metadata-filter.schema.json b/ui/src/assets/schema/filter/metadata-filter.schema.json
@@ -11,7 +11,7 @@
             "type": "string",
             "widget": {
                 "id": "string",
-                "help": "message.unique"
+                "help": "message.must-be-unique"
             }
         },
         "@type": {

diff --git a/ui/src/assets/schema/provider/filebacked-http-common.editor.schema.json b/ui/src/assets/schema/provider/filebacked-http-common.editor.schema.json
@@ -70,7 +70,7 @@
             "type": "string",
             "widget": {
                 "id": "string",
-                "help": "message.unique"
+                "help": "message.must-be-unique"
             }
         },
         "@type": {

diff --git a/ui/src/assets/schema/provider/metadata-provider.schema.json b/ui/src/assets/schema/provider/metadata-provider.schema.json
@@ -11,7 +11,7 @@
             "type": "string",
             "widget": {
                 "id": "string",
-                "help": "message.unique"
+                "help": "message.must-be-unique"
             }
         },
         "@type": {