translation of manage hooks

openMF · Jun 15, 2024 · 95d29c4 · 95d29c4
1 parent 52da1f5
commit 95d29c4
Show file tree

Hide file tree

Showing 20 changed files with 478 additions and 97 deletions.
diff --git a/src/app/system/manage-hooks/add-event-dialog/add-event-dialog.component.html b/src/app/system/manage-hooks/add-event-dialog/add-event-dialog.component.html
@@ -1,4 +1,4 @@
-<h1 mat-dialog-title>Add Event</h1>
+<h1 mat-dialog-title>{{"labels.buttons.Add Event" | translate}}</h1>
 
 <mat-dialog-content>
 
@@ -7,38 +7,38 @@ <h1 mat-dialog-title>Add Event</h1>
     <div fxLayout="column">
 
       <mat-form-field>
-        <mat-label>Select Grouping</mat-label>
+        <mat-label>{{ 'labels.inputs.Select Grouping' | translate }}</mat-label>
         <mat-select required formControlName="grouping">
           <mat-option *ngFor="let grouping of data.groupings" [value]="grouping.name">
-            {{ grouping.name }}
+            {{ grouping.name | translateKey:'catalogs' }}
           </mat-option>
         </mat-select>
         <mat-error *ngIf="eventForm.controls.grouping.hasError('required')">
-          Grouping is <strong>required</strong>
+          {{ 'labels.inputs.Grouping' | translate }} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field>
-        <mat-label>Select Entity</mat-label>
+        <mat-label>{{ 'labels.inputs.Select Entity' | translate }}</mat-label>
         <mat-select required formControlName="entity">
           <mat-option *ngFor="let entity of entityData" [value]="entity.name">
             {{ entity.name }}
           </mat-option>
         </mat-select>
         <mat-error *ngIf="eventForm.controls.entity.hasError('required')">
-          Entity is <strong>required</strong>
+          {{ 'labels.inputs.Entity' | translate }} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field>
-        <mat-label>Select Action</mat-label>
+        <mat-label>{{ 'labels.inputs.Select Action' | translate }}</mat-label>
         <mat-select required formControlName="action">
           <mat-option *ngFor="let action of actionData" [value]="action">
             {{ action }}
           </mat-option>
         </mat-select>
         <mat-error *ngIf="eventForm.controls.action.hasError('required')">
-          Action is <strong>required</strong>
+          {{'labels.inputs.Action' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
         </mat-error>
       </mat-form-field>
 
@@ -49,7 +49,7 @@ <h1 mat-dialog-title>Add Event</h1>
 </mat-dialog-content>
 
 <mat-dialog-actions align="end">
-  <button mat-button mat-dialog-close>Cancel</button>
+  <button mat-button mat-dialog-close>{{'labels.buttons.Cancel' | translate}}</button>
   <button mat-raised-button color="primary"
-    [disabled]="!eventForm.valid || eventForm.pristine" (click)="submit()">Submit</button>
+    [disabled]="!eventForm.valid || eventForm.pristine" (click)="submit()">{{'labels.buttons.Submit' | translate}}</button>
 </mat-dialog-actions>
diff --git a/src/app/system/manage-hooks/create-hook/create-hook.component.html b/src/app/system/manage-hooks/create-hook/create-hook.component.html
@@ -9,28 +9,28 @@
         <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="4%">
 
           <mat-form-field fxFlex="40%">
-            <mat-label>Hook Template</mat-label>
+            <mat-label>{{"labels.inputs.Hook Template" | translate}}</mat-label>
             <mat-select required formControlName="name">
               <mat-option *ngFor="let hookTemplate of hooksTemplateData.templates" [value]="hookTemplate.name">
-                {{ hookTemplate.name }}
+                {{ hookTemplate.name | translateKey:'text' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="hookForm.controls.name.hasError('required')">
-              Hook Template is <strong>required</strong>
+              {{"labels.inputs.Hook Template" | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="40%">
-            <mat-label>Display Name</mat-label>
+            <mat-label>{{"labels.inputs.Display Name" | translate}}</mat-label>
             <input matInput required formControlName="displayName">
             <mat-error *ngIf="hookForm.controls.displayName.hasError('required')">
-              Display Name is <strong>required</strong>
+              {{"labels.inputs.Display Name" | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <div class="is-active-wrapper">
             <mat-checkbox class="is-active" fxFlex="10%" labelPosition="before" formControlName="isActive">
-              Is Active?
+              {{'labels.inputs.Is Active' | translate}}?
             </mat-checkbox>
           </div>
 
@@ -39,34 +39,34 @@
         <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="4%">
 
           <mat-form-field fxFlex="48%" *ngIf="hookForm.controls.name.value === 'Web'">
-            <mat-label>Content Type</mat-label>
+            <mat-label>{{'labels.inputs.Content Type' | translate}}</mat-label>
             <mat-select required formControlName="contentType">
               <mat-option [value]="'json'">
-                json
+                {{'labels.inputs.json' | translate}}
               </mat-option>
               <mat-option [value]="'form'">
-                form
+                {{'labels.inputs.form' | translate}}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="hookForm.controls.contentType.hasError('required')">
-              Content Type is <strong>required</strong>
+              {{'labels.inputs.Content Type' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" *ngIf="hookForm.controls.name.value === 'SMS Bridge'">
-            <mat-label>Phone Number</mat-label>
+            <mat-label>{{'labels.inputs.Phone Number' | translate}}</mat-label>
             <input matInput type="tel" #input maxlength="10" required formControlName="phoneNumber">
             <mat-hint align="end">{{input.value?.length || 0}}/10</mat-hint>
             <mat-error *ngIf="hookForm.controls.phoneNumber.hasError('required')">
-              Payload URL is <strong>required</strong>
+              {{'labels.inputs.Payload URL' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Payload URL</mat-label>
+            <mat-label>{{'labels.inputs.Payload URL' | translate}}</mat-label>
             <input matInput required formControlName="payloadUrl">
             <mat-error *ngIf="hookForm.controls.payloadUrl.hasError('required')">
-              Payload URL is <strong>required</strong>
+              {{'labels.inputs.Payload URL' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -76,26 +76,26 @@
              *ngIf="hookForm.controls.name.value === 'SMS Bridge'">
 
           <mat-form-field fxFlex="30%">
-            <mat-label>SMS Provider</mat-label>
+            <mat-label>{{'labels.inputs.SMS Provider' | translate}}</mat-label>
             <input matInput required formControlName="smsProvider">
             <mat-error *ngIf="hookForm.controls.smsProvider.hasError('required')">
-              SMS Provider is <strong>required</strong>
+              {{'labels.inputs.SMS Provider' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="30%">
-            <mat-label>SMS Provider Account ID</mat-label>
+            <mat-label>{{'labels.inputs.SMS Provider Account ID' | translate}}</mat-label>
             <input matInput required formControlName="smsProviderAccountId">
             <mat-error *ngIf="hookForm.controls.smsProviderAccountId.hasError('required')">
-              SMS Provider Account ID is <strong>required</strong>
+              {{'labels.inputs.SMS Provider Account ID' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="30%">
-            <mat-label>SMS Provider Token</mat-label>
+            <mat-label>{{'labels.inputs.SMS Provider Token' | translate}}</mat-label>
             <input matInput required formControlName="smsProviderToken">
             <mat-error *ngIf="hookForm.controls.smsProviderToken.hasError('required')">
-              SMS Provider Token is <strong>required</strong>
+              {{'labels.inputs.SMS Provider Token' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -109,29 +109,29 @@
 
         <div fxLayout="row wrap" fxLayoutGap="60%" fxLayout.lt-md="column">
 
-          <p fxFlex="20%" class="mat-title">Events</p>
+          <p fxFlex="20%" class="mat-title">{{'labels.inputs.Events' | translate}}</p>
 
           <button mat-raised-button fxFlex="20%" type="button" color="primary" (click)="addEvent()">
             <fa-icon icon="plus" class="m-r-10"></fa-icon>
-            Add Event
+            {{'labels.buttons.Add' | translate}} {{'labels.inputs.Events' | translate}}
           </button>
 
         </div>
 
         <table mat-table [dataSource]="dataSource" matSort>
 
           <ng-container matColumnDef="entityName">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Entity Name </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Entity Name' | translate}} </th>
             <td mat-cell *matCellDef="let event"> {{ event.entityName }} </td>
           </ng-container>
 
           <ng-container matColumnDef="actionName">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Action Name </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Action' | translate }} {{ 'labels.inputs.Name' | translate}} </th>
             <td mat-cell *matCellDef="let event"> {{ event.actionName }} </td>
           </ng-container>
 
           <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef> Actions </th>
+            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate }} </th>
             <td mat-cell *matCellDef="let i = index" fxLayoutGap="15%">
               <button type="button" fxFlex="8%" color="warn" mat-icon-button
                 (click)="deleteEvent(i)">
@@ -148,8 +148,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!hookForm.valid" *mifosxHasPermission="'CREATE_HOOK'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!hookForm.valid" *mifosxHasPermission="'CREATE_HOOK'">{{ 'labels.buttons.Submit' | translate}}</button>
       </mat-card-actions>
 
     </form>

diff --git a/src/app/system/manage-hooks/create-hook/create-hook.component.ts b/src/app/system/manage-hooks/create-hook/create-hook.component.ts
@@ -1,18 +1,18 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
-import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
+import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { SystemService } from '../../system.service';
 
 /** Custom Components */
-import { AddEventDialogComponent } from '../add-event-dialog/add-event-dialog.component';
+import { TranslateService } from '@ngx-translate/core';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+import { AddEventDialogComponent } from '../add-event-dialog/add-event-dialog.component';
 
 /**
  * Create Hook Component.
@@ -44,12 +44,14 @@ export class CreateHookComponent implements OnInit {
    * @param {Router} router Router for navigation.
    * @param {FormBuilder} formBuilder Form Builder.
    * @param {MatDialog} dialog Dialog Reference.
+   * @param {TranslateService} translateService Translate Service.
    */
   constructor(private route: ActivatedRoute,
               private systemService: SystemService,
               private router: Router,
               private formBuilder: UntypedFormBuilder,
-              private dialog: MatDialog) {
+              private dialog: MatDialog,
+              private translateService:TranslateService) {
     this.route.data.subscribe((data: { hooksTemplate: any }) => {
       this.hooksTemplateData = data.hooksTemplate;
     });
@@ -110,6 +112,8 @@ export class CreateHookComponent implements OnInit {
     const addEventDialogRef = this.dialog.open(AddEventDialogComponent, {
       data: this.hooksTemplateData
     });
+    console.log(this.hooksTemplateData);
+
     addEventDialogRef.afterClosed().subscribe((response: any) => {
     if (response) {
       this.eventsData.push({ entityName: response.entity,
@@ -125,7 +129,7 @@ export class CreateHookComponent implements OnInit {
    */
   deleteEvent(index: number) {
     const deleteEventDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `event with entity name of ${this.eventsData[index].entityName}` }
+      data: { deleteContext: this.translateService.instant('labels.inputs.event with entity name of') +' '+this.eventsData[index].entityName }
     });
     deleteEventDialogRef.afterClosed().subscribe((response: any) => {
       if (response.delete) {