Sanitise the component and Demo shell from embedded strings (#2474)

demo-shell-ng2/app/components/app-layout/app-layout.component.html

@@ -3,7 +3,7 @@
         <md-nav-list>
             <a md-list-item *ngFor="let link of links" [routerLink]="link.href" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="sidenav.close()" class="adf-sidenav-link">
                 <md-icon mdListIcon>{{link.icon}}</md-icon>
-                <span>{{link.title}}</span>
+                <span>{{link.title | translate }}</span>
             </a>
             <a md-list-item adf-logout (click)="sidenav.close()">
                 <md-icon mdListIcon>exit_to_app</md-icon>
@@ -19,15 +19,15 @@
             [menuPositionY]="'above'">
         </adf-userinfo>
 
-        <span fxFlex="1 1 auto" fxShow fxHide.lt-sm="true">ADF Demo Application</span>
+        <span fxFlex="1 1 auto" fxShow fxHide.lt-sm="true">{{'APP_LAYOUT.APP_NAME' | translate }}</span>
 
         <div class="adf-app-layout-menu-spacer"></div>
 
         <search-bar fxFlex="0 1 auto"></search-bar>
 
-        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" md-button data-automation-id="home" href="" routerLink="/home" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>
-        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" md-button data-automation-id="files" href="" routerLink="/files" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Content Services</a>
-        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true"  md-button data-automation-id="activiti" href="" routerLink="/activiti" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Process Services</a>
+        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" md-button data-automation-id="home" href="" routerLink="/home" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.HOME' | translate }}</a>
+        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" md-button data-automation-id="files" href="" routerLink="/files" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.CONTENT_SERVICES' | translate }}</a>
+        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true"  md-button data-automation-id="activiti" href="" routerLink="/activiti" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.PROCESS_SERVICES' | translate }}</a>
         <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" md-button data-automation-id="login" href="" routerLink="/login">Login</a>
 
         <theme-picker></theme-picker>

demo-shell-ng2/app/components/datatable/datatable-demo.component.html

@@ -22,10 +22,10 @@
     </alfresco-datatable>
 </div>
 <div class="p-10" data-automation-id="multiselect">
-    <md-checkbox [(ngModel)]="multiselect">Multiselect</md-checkbox>
+    <md-checkbox [(ngModel)]="multiselect">{{ 'DATATABLE.MULTISELECT'| translate }}</md-checkbox>
 </div>
 <div class="p-10">
-    <p>For 'Multiple' selection mode use Cmd (macOS) or Ctrl (Win) to toggle selection of multiple items.</p>
+    <p>{{ 'DATATABLE.MULTISELECT_DESCRIPTION'| translate }}</p>
     <md-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
         <md-option *ngFor="let mode of selectionModes" [value]="mode.value">
             {{mode.viewValue}}
@@ -33,9 +33,9 @@
     </md-select>
 </div>
 <div class="p-10">
-    <button md-raised-button (click)="reset()">Reset to default</button>
-    <button md-raised-button (click)="addRow()">Add row</button>
-    <button md-raised-button (click)="replaceRows()">Replace rows</button>
-    <button md-raised-button (click)="replaceColumns()">Replace columns</button>
-    <button md-raised-button (click)="getRowForNode()">Load Node</button>
+    <button md-raised-button (click)="reset()">{{ 'DATATABLE.RESET_DEFAULT'| translate }}</button>
+    <button md-raised-button (click)="addRow()">{{ 'DATATABLE.ADD_ROW'| translate }}</button>
+    <button md-raised-button (click)="replaceRows()">{{ 'DATATABLE.REPLACE_ROWS'| translate }}</button>
+    <button md-raised-button (click)="replaceColumns()">{{ 'DATATABLE.REPLACE_COLUMNS'| translate }}</button>
+    <button md-raised-button (click)="getRowForNode()">{{ 'DATATABLE.LOAD_NODE'| translate }}</button>
 </div>

demo-shell-ng2/app/components/files/files.component.html

@@ -244,23 +244,23 @@
 
     <div class="container">
         <section>
-            <md-slide-toggle [color]="'primary'" [(ngModel)]="multiselect">Multiselect (with checkboxes)</md-slide-toggle>
+            <md-slide-toggle [color]="'primary'" [(ngModel)]="multiselect">{{'DOCUMENT_LIST.MULTISELECT_CHECKBOXES' | translate}}</md-slide-toggle>
         </section>
 
         <section>
-            <md-slide-toggle [color]="'primary'" [(ngModel)]="multipleFileUpload">Multiple File Upload</md-slide-toggle>
+            <md-slide-toggle [color]="'primary'" [(ngModel)]="multipleFileUpload">{{'DOCUMENT_LIST.MULTIPLE_FILE_UPLOAD' | translate}}</md-slide-toggle>
         </section>
 
         <section>
-            <md-slide-toggle [color]="'primary'" [(ngModel)]="folderUpload">Folder upload</md-slide-toggle>
+            <md-slide-toggle [color]="'primary'" [(ngModel)]="folderUpload">{{'DOCUMENT_LIST.FOLDER_UPLOAD' | translate}}</md-slide-toggle>
         </section>
 
         <section>
-            <md-slide-toggle [color]="'primary'" [(ngModel)]="acceptedFilesTypeShow">Custom extensions filter</md-slide-toggle>
+            <md-slide-toggle [color]="'primary'" [(ngModel)]="acceptedFilesTypeShow">{{'DOCUMENT_LIST.CUSTOM_FILTER' | translate}}</md-slide-toggle>
         </section>
 
         <section>
-            <md-slide-toggle [color]="'primary'" [(ngModel)]="versioning">Enable versioning</md-slide-toggle>
+            <md-slide-toggle [color]="'primary'" [(ngModel)]="versioning">{{'DOCUMENT_LIST.ENABLE_VERSIONING' | translate}}</md-slide-toggle>
         </section>
 
         <h5>Upload</h5>
@@ -301,12 +301,16 @@
             </adf-upload-button>
         </div>
         <section>
-            <md-checkbox [(ngModel)]="enableUpload">Enable upload (demoing enabled/disabled state only if the permission are not checked dynamically)</md-checkbox>
+            <md-checkbox [(ngModel)]="enableUpload">
+                {{'DOCUMENT_LIST.DESCRIPTION_UPLOAD' | translate}}
+            </md-checkbox>
         </section>
     </div>
 
     <div class="p-10">
-        <p>For 'Multiple' selection mode use Cmd (macOS) or Ctrl (Win) to toggle selection of multiple items.</p>
+        <p>
+            {{'DOCUMENT_LIST.MULTISELECT_DESCRIPTION' | translate}}
+        </p>
         <md-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
             <md-option *ngFor="let mode of selectionModes" [value]="mode.value">
                 {{mode.viewValue}}

demo-shell-ng2/app/components/login/login-demo.component.html

@@ -7,7 +7,7 @@
             [color]="'primary'"
             (change)="toggleECM()"
             [checked]="isECM">
-            Content Services
+            {{ 'LOGIN.CONTENT_SERVICES'| translate }}
         </md-slide-toggle>
     </p>
     <p class="toggle">
@@ -16,7 +16,7 @@
             [color]="'primary'"
             (change)="toggleBPM()"
             [checked]="isBPM">
-            Process Services
+            {{ 'LOGIN.PROCESS_SERVICES'| translate }}
         </md-slide-toggle>
     </p>
     <p class="toggle">
@@ -34,7 +34,7 @@
             [color]="'primary'"
             (change)="toggleFooter()"
             [checked]="showFooter">
-            Login footer
+            {{ 'LOGIN.LOGIN_FOOTER'| translate }}
         </md-slide-toggle>
     </p>
 </div>
@@ -62,7 +62,7 @@
                 [color]="'primary'"
                 (change)="toggleECM()"
                 [checked]="isECM">
-                Content Services
+                {{ 'LOGIN.CONTENT_SERVICES'| translate }}
             </md-slide-toggle>
         </p>
         <p>
@@ -71,7 +71,7 @@
                 [color]="'primary'"
                 (change)="toggleBPM()"
                 [checked]="isBPM">
-                Process Services
+                {{ 'LOGIN.PROCESS_SERVICES'| translate }}
             </md-slide-toggle>
         </p>
         <p>
@@ -89,7 +89,7 @@
                 [color]="'primary'"
                 (change)="toggleFooter()"
                 [checked]="showFooter">
-                Login footer
+                {{ 'LOGIN.LOGIN_FOOTER'| translate }}
             </md-slide-toggle>
         </p>
     </div>

demo-shell-ng2/app/components/search/search.component.html

@@ -1,5 +1,5 @@
 <div class="search-results-container">
-    <div class="adf-search-title">Search results</div>
+    <div class="adf-search-title">{{ 'SEARCH.RESULTS'| translate }}</div>
     <adf-search
         [navigate]="false"
         (nodeDbClick)="nodeDbClick($event)"></adf-search>

demo-shell-ng2/app/components/settings/settings.component.html

@@ -21,7 +21,7 @@
                        value="{{ecmHost}}"
                        placeholder="http(s)://host|ip:port(/path)">
                 <md-error *ngIf="urlFormControlEcm.hasError('pattern')">
-                    ECM host is not valid! http(s)://host|ip:port(/path)
+                    {{ 'SETTINGS.NOT_VALID'| translate }}
                 </md-error>
             </md-input-container>
             <p>
@@ -40,7 +40,7 @@
                        value="{{bpmHost}}"
                        placeholder="http(s)://host|ip:port(/path)">
                 <md-error *ngIf="urlFormControlBpm.hasError('pattern')">
-                    BPM host is not valid! http(s)://host|ip:port(/path)
+                    {{ 'SETTINGS.NOT_VALID'| translate }}
                 </md-error>
             </md-input-container>
 

demo-shell-ng2/app/components/social/social.component.html

@@ -4,13 +4,17 @@
 <div fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
     <div class="adf-social-example-area" fxFlex.gt-md="1 1 auto">
         <md-card>
-            <div class="adf-social-title">Like component</div>
+            <div class="adf-social-title">
+                {{'SOCIAL.LIKE' | translate }}
+            </div>
             <adf-like [nodeId]="nodeId"></adf-like>
         </md-card>
     </div>
     <div class="adf-social-example-area" fxFlex.gt-md="1 1 auto">
         <md-card>
-            <div class="adf-social-title">Rating component</div>
+            <div class="adf-social-title">
+                {{'SOCIAL.RATING' | translate }}
+            </div>
             <adf-rating [nodeId]="nodeId"></adf-rating>
         </md-card>
     </div>

demo-shell-ng2/app/components/tag/tag.component.html

@@ -1,4 +1,4 @@
-<label for="nodeId"><b>Insert Node Id</b></label><br>
+<label for="nodeId"><b>{{'TAG.INSERT' | translate }}</b></label><br>
 <input id="nodeId" type="text" size="48" [(ngModel)]="nodeId"><br>
 <div fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
     <div class="adf-tag-example-area" fxFlex.gt-md="1 1 auto">
@@ -8,13 +8,17 @@
     </div>
     <div class="adf-tag-example-area" fxFlex.gt-md="1 1 auto">
         <md-card>
-            <div class="adf-tag-example-title">List Tags Content Services</div>
+            <div class="adf-tag-example-title">
+                {{'TAG.LIST' | translate }}
+            </div>
             <adf-tag-list></adf-tag-list>
         </md-card>
     </div>
     <div class="adf-tag-example-area" fxFlex.gt-md="1 1 auto">
         <md-card>
-            <div class="adf-tag-example-title">Tag list By Node ID</div>
+            <div class="adf-tag-example-title">
+                {{'TAG.NODE_LIST' | translate }}
+            </div>
             <adf-tag-node-list [nodeId]="nodeId"></adf-tag-node-list>
         </md-card>
     </div>

demo-shell-ng2/config/webpack.common.js

@@ -145,11 +145,7 @@ module.exports = {
         inline: true,
         proxy: {
             '/ecm': {
-                target: {
-                    host: "0.0.0.0",
-                    protocol: 'http:',
-                    port: 8080
-                },
+                target: 'http://adfdev.lab.alfresco.me/',
                 pathRewrite: {
                     '^/ecm': ''
                 },
@@ -164,11 +160,7 @@ module.exports = {
                 }
             },
             '/bpm': {
-                target: {
-                    host: "0.0.0.0",
-                    protocol: 'http:',
-                    port: 9999
-                },
+                target: 'http://adfdev.lab.alfresco.me/',
                 pathRewrite: {
                     '^/bpm': ''
                 },

demo-shell-ng2/resources/i18n/en.json

@@ -1,6 +1,30 @@
 {
     "title": "Welcome",
+    "APP_LAYOUT": {
+        "APP_NAME": "ADF Demo Application",
+        "HOME": "Home",
+        "CONTENT_SERVICES": "Content Services",
+        "PROCESS_SERVICES": "Process Services",
+        "LOGIN": "Login",
+        "CUSTOM_SOURCES": "DL: Custom Sources",
+        "DATATABLE": "Datatable",
+        "FORM": "Form",
+        "FORM_LIST": "Form List",
+        "UPLOADER": "Uploader",
+        "WEBSCRIPT": "Webscript",
+        "TAG": "Tag",
+        "SOCIAL": "Social",
+        "SETTINGS": "Settings",
+        "ABOUT": "About"
+    },
     "DOCUMENT_LIST": {
+        "MULTISELECT_CHECKBOXES" :"Multiselect (with checkboxes)",
+        "MULTIPLE_FILE_UPLOAD" :"Multiple File Upload",
+        "FOLDER_UPLOAD" :"Folder upload",
+        "CUSTOM_FILTER" :"Custom extensions filter",
+        "ENABLE_VERSIONING" :"Enable versioning",
+        "MULTISELECT_DESCRIPTION" : "Enable upload (demoing enabled/disabled state only if the permission are not checked dynamically)",
+        "DESCRIPTION_" : "For 'Multiple' selection mode use Cmd (macOS) or Ctrl (Win) to toggle selection of multiple items.",
         "COLUMNS": {
             "DISPLAY_NAME": "Display name",
             "TAG": "Tag",
@@ -22,6 +46,15 @@
             }
         }
     },
+    "DATATABLE" :{
+        "RESET_DEFAULT":"Reset to default",
+        "ADD_ROW":"Add row",
+        "REPLACE_ROWS":"Replace rows",
+        "REPLACE_COLUMNS":"Replace columns",
+        "LOAD_NODE":"Load Node",
+        "MULTISELECT":"Multiselect",
+        "MULTISELECT_DESCRIPTION":"For 'Multiple' selection mode use Cmd (macOS) or Ctrl (Win) to toggle selection of multiple items."
+    },
     "ANALYTICS_REPORT": {
         "NO_REPORT_MESSAGE": "No report selected. Choose a report from the list"
     },
@@ -38,10 +71,28 @@
         "CS-HOST": "Content Services host URL configuration",
         "BP-HOST": "Process Services host URL configuration",
         "BACK": "Back",
-        "APPLY": "APPLY"
+        "APPLY": "APPLY",
+        "NOT_VALID": "Host not valid! http(s)://host|ip:port(/path)"
     },
-    "FORM-LIST":{
+    "FORM-LIST": {
         "STORE": "Store",
         "RESTORE": "Restore"
+    },
+    "LOGIN": {
+        "CONTENT_SERVICES": "Content Services",
+        "PROCESS_SERVICES": "Process Services",
+        "LOGIN_FOOTER": "Login footer"
+    },
+    "SEARCH": {
+        "RESULTS": "Search results"
+    },
+    "SOCIAL": {
+        "LIKE":"Like component",
+        "RATING":"Rating component"
+    },
+    "TAG": {
+        "LIST":"List Tags Content Services",
+        "INSERT":"Insert Node Id",
+        "NODE_LIST":"Tag list By Node ID"
     }
 }

ng2-components/ng2-alfresco-viewer/index.ts

@@ -16,8 +16,7 @@
  */
 
 import { NgModule } from '@angular/core';
-import { CoreModule } from 'ng2-alfresco-core';
-
+import { CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
 import { MaterialModule } from './src/material.module';
 
 export { ViewerComponent } from './src/components/viewer.component';
@@ -49,11 +48,20 @@ export function declarations() {
     ],
     declarations: declarations(),
     providers: [
-        RenderingQueueServices
+        RenderingQueueServices,
+        {
+            provide: TRANSLATION_PROVIDER,
+            multi: true,
+            useValue: {
+                name: 'ng2-alfresco-viewer',
+                source: 'assets/ng2-alfresco-viewer'
+            }
+        }
     ],
     exports: [
         MaterialModule,
         ...declarations()
     ]
 })
-export class ViewerModule {}
+export class ViewerModule {
+}

ng2-components/ng2-alfresco-viewer/src/components/unknown-format/unknown-format.component.html

@@ -1,6 +1,6 @@
 <div class="adf-viewer__unknown-format-view">
     <div>
         <md-icon class="icon">wifi_tethering</md-icon>
-        <div class="label">Document preview could not be loaded.</div>
+        <div class="label">{{'VIEWER.UNKNOWN' | translate}}</div>
     </div>
 </div>

ng2-components/ng2-alfresco-viewer/src/i18n/en.json

@@ -1,3 +1,5 @@
 {
-
+    "VIEWER": {
+        "UNKNOWN": "Document preview could not be loaded"
+    }
 }

ng2-components/ng2-alfresco-webscript/index.ts

@@ -16,7 +16,7 @@
  */
 
 import { NgModule } from '@angular/core';
-import { CoreModule } from 'ng2-alfresco-core';
+import { CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
 import { DataTableModule } from 'ng2-alfresco-datatable';
 
 import { WebscriptComponent } from './src/webscript.component';
@@ -30,6 +30,16 @@ export { WebscriptComponent } from './src/webscript.component';
     declarations: [
         WebscriptComponent
     ],
+    providers: [
+        {
+            provide: TRANSLATION_PROVIDER,
+            multi: true,
+            useValue: {
+                name: 'ng2-alfresco-webscript',
+                source: 'assets/ng2-alfresco-webscript'
+            }
+        }
+    ],
     exports: [
         WebscriptComponent
     ]

ng2-components/ng2-alfresco-webscript/src/i18n/en.json

@@ -1,3 +1,5 @@
 {
-
+    "WEBSCRIPT": {
+        "ERROR": "Error during the deserialization of {{data}} as {{contentType}}"
+    }
 }

ng2-components/ng2-alfresco-webscript/src/webscript.component.html

@@ -0,0 +1,16 @@
+<div *ngIf="showData">
+    <div *ngIf="contentType === 'JSON'" id="webscript-data-JSON">{{data | json}}</div>
+    <div *ngIf="contentType === 'HTML'" id="webscript-data-HTML" [innerHTML]="data"></div>
+    <div *ngIf="contentType === 'TEXT'" id="webscript-data-TEXT">{{data}}</div>
+    <div *ngIf="isDataTableContent()">
+        <alfresco-datatable id="webscript-datatable-wrapper" [data]="data"></alfresco-datatable>
+        <div>
+            <div *ngIf="showError" id="error">{{'WEBSCRIPT.ERROR' | translate: {
+                data: data,
+                contentType: contentType
+                }
+                }}
+            </div>
+        </div>
+    </div>
+</div>

ng2-components/ng2-alfresco-webscript/src/webscript.component.ts

@@ -42,15 +42,7 @@ import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
  */
 @Component({
     selector: 'adf-webscript-get, alfresco-webscript-get',
-    template: `
-        <div *ngIf="showData">
-            <div *ngIf="contentType === 'JSON'" id="webscript-data-JSON">{{data | json}}</div>
-            <div *ngIf="contentType === 'HTML'" id="webscript-data-HTML" [innerHTML]="data"></div>
-            <div *ngIf="contentType === 'TEXT'" id="webscript-data-TEXT" >{{data}}</div>
-            <div *ngIf="isDataTableContent()"><alfresco-datatable id="webscript-datatable-wrapper" [data]="data"></alfresco-datatable><div>
-            <div *ngIf="showError" id="error">Error during the deserialization of {{data}} as {{contentType}}</div>
-        </div>
-    `
+    templateUrl: 'webscript.component.html'
 })
 export class WebscriptComponent implements OnChanges {