[NAE-2477] Builder translations

projects/netgrif-components/src/lib/builder/builder.component.spec.ts

@@ -14,6 +14,7 @@ import {ModelService} from './modeler/services/model/model.service';
 import {BuilderComponent} from './builder.component';
 import {ConfigurationService, TestConfigurationService} from '@netgrif/components-core';
 import {CommonModule} from "@angular/common";
+import {TranslateService} from "@ngx-translate/core";
 
 describe('BuilderComponent', () => {
     beforeEach(() => {
@@ -32,6 +33,7 @@ describe('BuilderComponent', () => {
                 {provide: Router, useValue: {navigate: () => {}}},
                 {provide: ActivatedRoute, useValue: {queryParams: of({})}},
                 {provide: ConfigurationService, useClass: TestConfigurationService},
+                {provide: TranslateService, useValue: { instant: (key: string) => `translated-${key}` }}
             ],
             schemas: [NO_ERRORS_SCHEMA],
         });

projects/netgrif-components/src/lib/builder/builder.component.ts

@@ -66,6 +66,7 @@ import {TaskModeService} from "./modeler/task-mode/task-mode.service";
 import {LocalStorageService} from "./services/local-storage.service";
 import {PetriflowCanvasService} from '@netgrif/petriflow.svg';
 import {Subscription} from "rxjs";
+import {TranslateService} from "@ngx-translate/core";
 
 @Component({
     selector: 'nc-builder',
@@ -144,7 +145,8 @@ export class BuilderComponent implements OnDestroy {
                 protected _builderIntegrationService: BuilderIntegrationService,
                 protected _logger: LoggerService,
                 @Optional() @Inject(NAE_TAB_DATA) injectedTabData: InjectedTabbedBuilderViewData,
-                @Optional() @Inject(DATA_FIELD_PORTAL_DATA) dataFieldPortalData: DataFieldPortalData<CaseRefField>) {
+                @Optional() @Inject(DATA_FIELD_PORTAL_DATA) dataFieldPortalData: DataFieldPortalData<CaseRefField>,
+                protected _translateService: TranslateService) {
         this.loading = new LoadingEmitter(true);
         if (injectedTabData !== null && injectedTabData?.processCase) {
             this._builderIntegrationService.isIntegrated = true;
@@ -182,7 +184,7 @@ export class BuilderComponent implements OnDestroy {
             this.resolveRouterModel();
             if (!this.modelService.model) {
                 this.modelService.model = this.modelService.newModel();
-                this.historyService.save(`New model has been created.`);
+                this.historyService.save(_translateService.instant('builder.newModelCreated'));
             }
         }
     }
@@ -232,11 +234,11 @@ export class BuilderComponent implements OnDestroy {
                 const model = this._importService.parseFromXml(data)?.model;
                 if (model) {
                     this.modelService.model = model;
-                    this.historyService.save(`Model ${this.modelService.model.id} has been imported.`);
+                    this.historyService.save(`Model ${this.modelService.model.id} ` + this._translateService.instant('builder.hasBeenImported'));
                 }
             } else if (!this.modelService.model) {
                 this.modelService.model = this.modelService.newModel();
-                this.historyService.save(`New Model has been created.`);
+                this.historyService.save(this._translateService.instant('builder.newModelCreated'));
             }
         } catch (e) {
             console.log(e);

projects/netgrif-components/src/lib/builder/builder.module.ts

@@ -13,6 +13,7 @@ import {BuilderDialogsModule} from './dialogs/dialogs.module';
 import {FlexLayoutModule} from "@ngbracket/ngx-layout";
 import {ComponentPortal} from '@angular/cdk/portal';
 import {ProcessRefDefaultComponent} from '../data-fields/process-ref/process-ref-default/process-ref-default.component';
+import {TranslateModule} from "@ngx-translate/core";
 
 
 @NgModule({
@@ -33,6 +34,7 @@ import {ProcessRefDefaultComponent} from '../data-fields/process-ref/process-ref
         NgxMatMomentModule,
         MaterialIconPickerComponent,
         FlexLayoutModule,
+        TranslateModule,
     ],
     exports: [BuilderComponent]
 })

projects/netgrif-components/src/lib/builder/dialogs/dialog-arc-edit/dialog-arc-edit.component.html

@@ -1,11 +1,11 @@
-<h2 mat-dialog-title>Edit arc</h2>
+<h2 mat-dialog-title>{{ 'builder.dialogs.arc-edit.editArc' | translate}}</h2>
 <mat-dialog-content class="netgrif-input padding-top-4px">
     <mat-form-field fxFlex appearance="outline">
         <mat-label>Id</mat-label>
         <input type="text" matInput [(ngModel)]="arc.arc.id" disabled>
     </mat-form-field>
     <mat-form-field fxFlex appearance="outline">
-        <mat-label>Type</mat-label>
+        <mat-label>{{ 'builder.dialogs.arc-edit.type' | translate}}</mat-label>
         <mat-select [(ngModel)]="arcType" [disabled]="isTPArc()" (ngModelChange)="onTypeChange($event)">
             <mat-select-trigger>
                 {{arcType}}
@@ -16,20 +16,20 @@ <h2 mat-dialog-title>Edit arc</h2>
         </mat-select>
     </mat-form-field>
     <mat-form-field fxFlex appearance="outline">
-        <mat-label>Multiplicity</mat-label>
+        <mat-label>{{ 'builder.dialogs.arc-edit.multiplicity' | translate}}</mat-label>
         <input type="number" min="1" step="1" matInput [(ngModel)]="arc.arc.multiplicity" [formControl]="multiplicityCtrl">
-        <mat-error *ngIf="multiplicityCtrl.errors && multiplicityCtrl.errors.required">Id is required</mat-error>
-        <mat-error *ngIf="multiplicityCtrl.errors && multiplicityCtrl.errors.validMultiplicity">Multiplicity must be a positive integer</mat-error>
+        <mat-error *ngIf="multiplicityCtrl.errors && multiplicityCtrl.errors.required">{{ 'builder.dialogs.arc-edit.idRequired' | translate}}</mat-error>
+        <mat-error *ngIf="multiplicityCtrl.errors && multiplicityCtrl.errors.validMultiplicity">{{ 'builder.dialogs.arc-edit.multiplicityPositive' | translate}}</mat-error>
     </mat-form-field>
     <mat-form-field fxFlex appearance="outline">
-        <mat-label>Reference</mat-label>
+        <mat-label>{{ 'builder.dialogs.arc-edit.reference' | translate}}</mat-label>
         <input type="text"
                matInput
                [formControl]="formControlRef"
                [(ngModel)]="arc.arc.reference"
                [matAutocomplete]="auto">
         <mat-autocomplete #auto="matAutocomplete">
-            <mat-option>-- None --</mat-option>
+            <mat-option>{{ 'builder.dialogs.arc-edit.none' | translate}}</mat-option>
             <mat-optgroup *ngFor="let referenceGroup of filteredReferences | async" [label]="referenceGroup.name">
                 <mat-option *ngFor="let reference of referenceGroup.references" [value]="reference.id">
                     {{reference.label}} [{{reference.id}}]
@@ -38,17 +38,17 @@ <h2 mat-dialog-title>Edit arc</h2>
         </mat-autocomplete>
     </mat-form-field>
     <mat-form-field fxFlex appearance="outline">
-        <mat-label>Source</mat-label>
+        <mat-label>{{ 'builder.dialogs.arc-edit.source' | translate}}</mat-label>
         <input type="text" matInput value="{{arc.arc.source.label?.value}} [{{arc.arc.source.id}}]" disabled>
     </mat-form-field>
     <mat-form-field fxFlex appearance="outline">
-        <mat-label>Destination</mat-label>
+        <mat-label>{{ 'builder.dialogs.arc-edit.destination' | translate}}</mat-label>
         <input type="text" matInput value="{{arc.arc.destination.label?.value}} [{{arc.arc.destination.id}}]" disabled>
     </mat-form-field>
 </mat-dialog-content>
 <mat-dialog-actions>
     <button mat-flat-button color="primary" [mat-dialog-close]="arc" [disabled]="multiplicityCtrl.invalid">
         <mat-icon>done</mat-icon>
-        <span>Save</span>
+        <span>{{ 'builder.dialogs.arc-edit.save' | translate}}</span>
     </button>
 </mat-dialog-actions>

projects/netgrif-components/src/lib/builder/dialogs/dialog-arc-edit/dialog-arc-edit.component.ts

@@ -7,6 +7,7 @@ import {map, startWith} from 'rxjs/operators';
 import {ModelService} from '../../modeler/services/model/model.service';
 import {ChangedArc} from './changed-arc';
 import {CanvasToolContext} from "../../modeler/edit-mode/services/modes/canvas-tool-context";
+import {TranslateService} from "@ngx-translate/core";
 
 export interface ArcEditData {
     context: CanvasToolContext
@@ -49,7 +50,8 @@ export class DialogArcEditComponent implements OnInit {
     private modelService: ModelService;
 
     constructor(
-        @Inject(MAT_DIALOG_DATA) public data: ArcEditData
+        @Inject(MAT_DIALOG_DATA) public data: ArcEditData,
+        protected _translateService: TranslateService
     ) {
         this.modelService = data.context.modelService;
         this.arc = new ChangedArc(undefined, this.modelService.model.getArc(data.arcId).clone());
@@ -64,13 +66,13 @@ export class DialogArcEditComponent implements OnInit {
         this.arcTypes = Object.values(XmlArcType);
         this.arcType = this.arcTypeMapping.get(this.arc.arcType);
         this.references = [];
-        this.addReferences('Data fields', this.modelService.model.getDataSet()
+        this.addReferences(this._translateService.instant('builder.dialogs.arc-edit.dataFields'), this.modelService.model.getDataSet()
             .filter(data => data.type === DataType.NUMBER)
             .map(data => {
                 return {id: data.id, label: data.title?.value} as Reference;
             })
             .sort((a, b) => a.label?.localeCompare(b.label)));
-        this.addReferences('Places', this.modelService.model.getPlaces()
+        this.addReferences(this._translateService.instant('builder.dialogs.arc-edit.places'), this.modelService.model.getPlaces()
             .map(place => {
                 return {id: place.id, label: place.label?.value} as Reference;
             })

projects/netgrif-components/src/lib/builder/dialogs/dialog-change-data/dialog-change-data.component.html

@@ -1,16 +1,16 @@
-<h2 mat-dialog-title>Change referenced data value{{dataSet.length > 1 ? 's' : ''}}</h2>
+<h2 mat-dialog-title>{{dataSet.length > 1 ? ('builder.dialogs.change-data.titleMulti' | translate) : ('builder.dialogs.change-data.title' | translate)}}</h2>
 <mat-dialog-content class="netgrif-input padding-top-4px">
     <mat-form-field fxFlex appearance="outline" *ngFor="let data of dataSet">
         <mat-label>{{data.id}}</mat-label>
         <input type="number" step="1" min="0" matInput [(ngModel)]="data.value" [formControl]="valueCtrl">
-        <mat-error *ngIf="valueCtrl.errors && valueCtrl.errors.required">Value is required</mat-error>
-        <mat-error *ngIf="valueCtrl.errors && valueCtrl.errors.validValue">Value can not be a negative number</mat-error>
+        <mat-error *ngIf="valueCtrl.errors && valueCtrl.errors.required">{{ 'builder.dialogs.change-data.valueRequired' | translate }}</mat-error>
+        <mat-error *ngIf="valueCtrl.errors && valueCtrl.errors.validValue">{{ 'builder.dialogs.change-data.valueNotNegative' | translate }}</mat-error>
     </mat-form-field>
-    <span *ngIf="dataSet.length === 0">No referenced data found</span>
+    <span *ngIf="dataSet.length === 0">{{ 'builder.dialogs.change-data.noData' | translate }}</span>
 </mat-dialog-content>
 <mat-dialog-actions>
     <button mat-flat-button color="primary" [mat-dialog-close]="dataSet" [disabled]="valueCtrl.invalid">
         <mat-icon>done</mat-icon>
-        <span>Save</span>
+        <span>{{ 'builder.dialogs.change-data.save' | translate }}</span>
     </button>
 </mat-dialog-actions>

projects/netgrif-components/src/lib/builder/dialogs/dialog-dead-net/dialog-dead-net.component.html

@@ -1,8 +1,8 @@
-<h2 mat-dialog-title>No executable task</h2>
+<h2 mat-dialog-title>{{ 'builder.dialogs.dead-net.title' | translate }}</h2>
 <mat-dialog-content class="mat-typography padding-top-4px">
-    <span>There are no executable tasks. Are you sure you want to download the model ?</span>
+    <span>{{ 'builder.dialogs.dead-net.message' | translate }}</span>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
-    <button mat-button [mat-dialog-close]="false">Cancel</button>
-    <button mat-button [mat-dialog-close]="true">Download</button>
+    <button mat-button [mat-dialog-close]="false">{{ 'builder.dialogs.dead-net.cancel' | translate }}</button>
+    <button mat-button [mat-dialog-close]="true">{{ 'builder.dialogs.dead-net.download' | translate }}</button>
 </mat-dialog-actions>

projects/netgrif-components/src/lib/builder/dialogs/dialog-delete-model/dialog-delete-model.component.html

@@ -1,11 +1,11 @@
 <h2 mat-dialog-title>
     <mat-icon>warning_amber</mat-icon>
-    <span>Delete model</span>
+    <span>{{ 'builder.dialogs.delete-model.title' | translate }}</span>
 </h2>
 <mat-dialog-content class="mat-typography padding-top-4px">
-    <h3>Are you sure to delete the model? Any unsaved changes will be lost.</h3>
+    <h3>{{ 'builder.dialogs.delete-model.message' | translate }}</h3>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
-    <button mat-button [mat-dialog-close]="false">Cancel</button>
-    <button mat-button [mat-dialog-close]="true" cdkFocusInitial>Delete</button>
+    <button mat-button [mat-dialog-close]="false">{{ 'builder.dialogs.delete-model.cancel' | translate }}</button>
+    <button mat-button [mat-dialog-close]="true" cdkFocusInitial>{{ 'builder.dialogs.delete-model.delete' | translate }}</button>
 </mat-dialog-actions>

projects/netgrif-components/src/lib/builder/dialogs/dialog-delete-model/dialog-delete-model.component.spec.ts

@@ -1,13 +1,19 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {DialogDeleteModelComponent} from './dialog-delete-model.component';
+import {HttpClientTestingModule} from "@angular/common/http/testing";
+import {TranslateLibModule} from "@netgrif/components-core";
 
 describe('DialogDeleteModelComponent', () => {
   let component: DialogDeleteModelComponent;
   let fixture: ComponentFixture<DialogDeleteModelComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+        imports: [
+            TranslateLibModule,
+            HttpClientTestingModule,
+        ],
       declarations: [ DialogDeleteModelComponent ]
     })
     .compileComponents();

projects/netgrif-components/src/lib/builder/dialogs/dialog-delete/dialog-delete.component.html

@@ -1,8 +1,8 @@
-<h2 mat-dialog-title>Delete confirmation</h2>
+<h2 mat-dialog-title>{{ 'builder.dialogs.delete.title' | translate }}</h2>
 <mat-dialog-content class="mat-typography padding-top-4px">
-  <h3>Are you sure you want to delete this item?</h3>
+    <h3>{{ 'builder.dialogs.delete.message' | translate }}</h3>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
-  <button [mat-dialog-close]="false" mat-button>Cancel</button>
-  <button [mat-dialog-close]="true" cdkFocusInitial mat-button>Confirm</button>
+    <button [mat-dialog-close]="false" mat-button>{{ 'builder.dialogs.delete.cancel' | translate }}</button>
+    <button [mat-dialog-close]="true" cdkFocusInitial mat-button>{{ 'builder.dialogs.delete.confirm' | translate }}</button>
 </mat-dialog-actions>

projects/netgrif-components/src/lib/builder/dialogs/dialog-delete/dialog-delete.component.spec.ts

@@ -2,14 +2,22 @@ import {NO_ERRORS_SCHEMA} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 import {DialogDeleteComponent} from './dialog-delete.component';
+import {TranslateService} from "@ngx-translate/core";
+import {HttpClientTestingModule} from "@angular/common/http/testing";
+import {TranslateLibModule} from "@netgrif/components-core";
 
 describe('DialogDeleteComponent', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
+            imports: [
+                TranslateLibModule,
+                HttpClientTestingModule,
+            ],
             declarations: [DialogDeleteComponent],
             providers: [
                 {provide: MatDialogRef, useValue: {}},
                 {provide: MAT_DIALOG_DATA, useValue: {}},
+                {provide: TranslateService, useValue: { instant: (key: string) => `translated-${key}` }}
             ],
             schemas: [NO_ERRORS_SCHEMA],
         });

projects/netgrif-components/src/lib/builder/dialogs/dialog-errors/dialog-errors.component.html

@@ -1,36 +1,35 @@
-<h2 mat-dialog-title>Import result</h2>
+<h2 mat-dialog-title>{{ 'builder.dialogs.errors.title' | translate }}</h2>
 <mat-dialog-content class="mat-typography padding-top-4px">
-  <div *ngIf="data.errors.length > 0">
-    <h3 class="error">
-      <mat-icon>error</mat-icon>
-      <span>Errors:</span>
-    </h3>
-    <p *ngFor="let error of data.errors" class="paragraph">
-      {{ error }}<br>
-    </p>
-  </div>
+    <div *ngIf="data.errors.length > 0">
+        <h3 class="error">
+            <mat-icon>error</mat-icon>
+            <span>{{ 'builder.dialogs.errors.errors' | translate }}</span>
+        </h3>
+        <p *ngFor="let error of data.errors" class="paragraph">
+            {{ error }}<br>
+        </p>
+    </div>
 
-  <div *ngIf="data.warnings.length > 0">
-    <h3 class="warning">
-      <mat-icon>warning_amber</mat-icon>
-      <span>Warnings:</span>
-    </h3>
-    <p *ngFor="let warning of data.warnings" class="paragraph">
-      {{ warning }}<br>
-    </p>
-  </div>
+    <div *ngIf="data.warnings.length > 0">
+        <h3 class="warning">
+            <mat-icon>warning_amber</mat-icon>
+            <span>{{ 'builder.dialogs.errors.warnings' | translate }}</span>
+        </h3>
+        <p *ngFor="let warning of data.warnings" class="paragraph">
+            {{ warning }}<br>
+        </p>
+    </div>
 
-  <div *ngIf="data.info.length > 0">
-    <h3 class="info">
-      <mat-icon>info_outline</mat-icon>
-      <span>Info:</span>
-    </h3>
-    <p *ngFor="let info of data.info" class="paragraph">
-      {{ info }}<br>
-    </p>
-  </div>
+    <div *ngIf="data.info.length > 0">
+        <h3 class="info">
+            <mat-icon>info_outline</mat-icon>
+            <span>{{ 'builder.dialogs.errors.info' | translate }}</span>
+        </h3>
+        <p *ngFor="let info of data.info" class="paragraph">
+            {{ info }}<br>
+        </p>
+    </div>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
-  <button cdkFocusInitial mat-button mat-dialog-close>Close</button>
+    <button cdkFocusInitial mat-button mat-dialog-close>{{ 'builder.dialogs.errors.close' | translate }}</button>
 </mat-dialog-actions>
-

projects/netgrif-components/src/lib/builder/dialogs/dialog-errors/dialog-errors.component.spec.ts

@@ -2,12 +2,21 @@ import {NO_ERRORS_SCHEMA} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {MAT_DIALOG_DATA} from '@angular/material/dialog';
 import {DialogErrorsComponent} from './dialog-errors.component';
+import {TranslateService} from "@ngx-translate/core";
+import {HttpClientTestingModule} from "@angular/common/http/testing";
+import {TranslateLibModule} from "@netgrif/components-core";
 
 describe('DialogErrorsComponent', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
+            imports: [
+                TranslateLibModule,
+                HttpClientTestingModule,
+            ],
             declarations: [DialogErrorsComponent],
-            providers: [{provide: MAT_DIALOG_DATA, useValue: {errors: []}}],
+            providers: [{provide: MAT_DIALOG_DATA, useValue: {errors: []}},
+                {provide: TranslateService, useValue: { instant: (key: string) => `translated-${key}` }}
+            ],
             schemas: [NO_ERRORS_SCHEMA],
         });
     });

projects/netgrif-components/src/lib/builder/dialogs/dialog-local-storage-model/dialog-local-storage-model.component.html

@@ -1,14 +1,14 @@
-<h2 mat-dialog-title>Continue previous work</h2>
+<h2 mat-dialog-title>{{ 'builder.dialogs.local-storage-model.title' | translate }}</h2>
 <mat-dialog-content class="mat-typography padding-top-4px">
-    <span>Do you wish to continue work on "{{data.title}}" [{{data.id}}] from {{data.timestamp}}</span>
+    <span>{{ 'builder.dialogs.local-storage-model.message' | translate }} "{{data.title}}" [{{data.id}}] {{ 'builder.dialogs.local-storage-model.from' | translate }} {{data.timestamp}}</span>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
     <button mat-button [mat-dialog-close]="false" color="warn">
         <mat-icon>delete</mat-icon>
-        <span>Delete old work</span>
+        <span>{{ 'builder.dialogs.local-storage-model.deleteOld' | translate }}</span>
     </button>
     <button mat-button [mat-dialog-close]="true" color="primary">
         <mat-icon>done</mat-icon>
-        <span>Load</span>
+        <span>{{ 'builder.dialogs.local-storage-model.load' | translate }}</span>
     </button>
 </mat-dialog-actions>