fix(i18n): add missing translations and apply translate pipes across web-app (#2934)

fix: address code review issues

fix: translate accessibility attributes and fix translation errors

src/app/organization/bulk-import/view-bulk-import/bulk-imports.ts

@@ -78,7 +78,7 @@ export const BulkImports = [
     formFields: 2
   },
   {
-    name: 'Reccuring Deposit Accounts',
+    name: 'Recurring Deposit Accounts',
     entityType: 'recurringdeposits',
     urlSuffix: '/recurringdepositaccounts',
     permission: 'READ_CLIENT',

src/app/organization/bulk-import/view-bulk-import/view-bulk-import.component.html

@@ -2,7 +2,9 @@
   <div class="gap-2percent m-b-20">
     <mat-card class="layout-column gap-2percent flex-50">
       <h3>
-        <strong>{{ bulkImport.name }} {{ 'labels.heading.Template' | translate }}</strong>
+        <strong
+          >{{ 'labels.heading.' + bulkImport.name | translate }} {{ 'labels.heading.Template' | translate }}</strong
+        >
       </h3>
 
       <form [formGroup]="bulkImportForm">
@@ -65,7 +67,7 @@
 
     <mat-card class="layout-column gap-2percent flex-50">
       <h3>
-        <strong>{{ bulkImport.name }}</strong>
+        <strong>{{ 'labels.heading.' + bulkImport.name | translate }}</strong>
       </h3>
 
       <h4>{{ 'labels.heading.Select Excel File' | translate }}</h4>

src/app/organization/entity-data-table-checks/create-entity-data-table-checks/create-entity-data-table-checks.component.html

@@ -8,7 +8,7 @@
             <mat-select required formControlName="entity">
               @for (entity of entityTypes; track entity) {
                 <mat-option [value]="entity.value">
-                  {{ entity.name }}
+                  {{ entity.name | translateKey: 'catalogs' }}
                 </mat-option>
               }
             </mat-select>

src/app/organization/loan-provisioning-criteria/create-loan-provisioning-criteria/create-loan-provisioning-criteria.component.ts

@@ -32,6 +32,7 @@ import { MatFormField, MatLabel, MatError, MatHint } from '@angular/material/for
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { FindPipe } from '../../../pipes/find.pipe';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { TranslateService } from '@ngx-translate/core';
 
 /**
  * Create Loan Provisioning Criteria Component.
@@ -64,6 +65,7 @@ export class CreateLoanProvisioningCriteriaComponent implements OnInit {
   private router = inject(Router);
   dialog = inject(MatDialog);
   private route = inject(ActivatedRoute);
+  private translateService = inject(TranslateService);
 
   /** Loan Provisioning Criteria form. */
   provisioningCriteriaForm: UntypedFormGroup;
@@ -145,7 +147,7 @@ export class CreateLoanProvisioningCriteriaComponent implements OnInit {
    */
   editDefinition(definition: any) {
     const data = {
-      title: 'Edit Criteria Definition',
+      title: this.translateService.instant('labels.heading.Edit Criteria Definition'),
       formfields: this.getDefinitionFormFields(definition),
       layout: { addButtonText: 'Confirm' }
     };
@@ -173,7 +175,7 @@ export class CreateLoanProvisioningCriteriaComponent implements OnInit {
     formfields.push(
       new InputBase({
         controlName: 'minAge',
-        label: 'Min Age',
+        label: this.translateService.instant('labels.inputs.Min Age'),
         value: definition ? definition.minAge : '',
         type: 'number',
         required: true,
@@ -183,7 +185,7 @@ export class CreateLoanProvisioningCriteriaComponent implements OnInit {
     formfields.push(
       new InputBase({
         controlName: 'maxAge',
-        label: 'Max Age',
+        label: this.translateService.instant('labels.inputs.Max Age'),
         value: definition ? definition.maxAge : '',
         type: 'number',
         required: true,
@@ -193,7 +195,7 @@ export class CreateLoanProvisioningCriteriaComponent implements OnInit {
     formfields.push(
       new InputBase({
         controlName: 'provisioningPercentage',
-        label: 'Percentage (%)',
+        label: this.translateService.instant('labels.inputs.Percentage') + ' (%)',
         value: definition ? definition.provisioningPercentage : '',
         type: 'number',
         required: true,
@@ -203,7 +205,7 @@ export class CreateLoanProvisioningCriteriaComponent implements OnInit {
     formfields.push(
       new SelectBase({
         controlName: 'liabilityAccount',
-        label: 'Liability Account',
+        label: this.translateService.instant('labels.inputs.Liability Account'),
         value: definition ? definition.liabilityAccount : '',
         options: { label: 'name', value: 'id', data: this.liabilityAccounts },
         required: true,
@@ -213,7 +215,7 @@ export class CreateLoanProvisioningCriteriaComponent implements OnInit {
     formfields.push(
       new SelectBase({
         controlName: 'expenseAccount',
-        label: 'Expense Account',
+        label: this.translateService.instant('labels.inputs.Expense Account'),
         value: definition ? definition.expenseAccount : '',
         options: { label: 'name', value: 'id', data: this.expenseAccounts },
         required: true,

src/app/organization/loan-provisioning-criteria/edit-loan-provisioning-criteria/edit-loan-provisioning-criteria.component.ts

@@ -32,6 +32,7 @@ import { MatFormField, MatLabel, MatError, MatHint } from '@angular/material/for
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { FindPipe } from '../../../pipes/find.pipe';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { TranslateService } from '@ngx-translate/core';
 
 /**
  * Edit Loan Provisioning Criteria Component.
@@ -64,6 +65,7 @@ export class EditLoanProvisioningCriteriaComponent implements OnInit {
   private settingsService = inject(SettingsService);
   dialog = inject(MatDialog);
   private route = inject(ActivatedRoute);
+  private translateService = inject(TranslateService);
 
   /** Loan Provisioning Criteria form. */
   provisioningCriteriaForm: UntypedFormGroup;
@@ -155,7 +157,7 @@ export class EditLoanProvisioningCriteriaComponent implements OnInit {
    */
   editDefinition(definition: any) {
     const data = {
-      title: 'Edit Criteria Definition',
+      title: this.translateService.instant('labels.heading.Edit Criteria Definition'),
       formfields: this.getDefinitionFormFields(definition),
       layout: { addButtonText: 'Confirm' }
     };
@@ -181,7 +183,7 @@ export class EditLoanProvisioningCriteriaComponent implements OnInit {
     formfields.push(
       new InputBase({
         controlName: 'minAge',
-        label: 'Min Age',
+        label: this.translateService.instant('labels.inputs.Min Age'),
         value: definition ? definition.minAge : '',
         type: 'number',
         required: true,
@@ -191,7 +193,7 @@ export class EditLoanProvisioningCriteriaComponent implements OnInit {
     formfields.push(
       new InputBase({
         controlName: 'maxAge',
-        label: 'Max Age',
+        label: this.translateService.instant('labels.inputs.Max Age'),
         value: definition ? definition.maxAge : '',
         type: 'number',
         required: true,
@@ -201,7 +203,7 @@ export class EditLoanProvisioningCriteriaComponent implements OnInit {
     formfields.push(
       new InputBase({
         controlName: 'provisioningPercentage',
-        label: 'Percentage (%)',
+        label: this.translateService.instant('labels.inputs.Percentage') + ' (%)',
         value: definition ? definition.provisioningPercentage : '',
         type: 'number',
         required: true,
@@ -211,7 +213,7 @@ export class EditLoanProvisioningCriteriaComponent implements OnInit {
     formfields.push(
       new SelectBase({
         controlName: 'liabilityAccount',
-        label: 'Liability Account',
+        label: this.translateService.instant('labels.inputs.Liability Account'),
         value: definition ? definition.liabilityAccount : '',
         options: { label: 'name', value: 'id', data: this.liabilityAccounts },
         required: true,
@@ -221,7 +223,7 @@ export class EditLoanProvisioningCriteriaComponent implements OnInit {
     formfields.push(
       new SelectBase({
         controlName: 'expenseAccount',
-        label: 'Expense Account',
+        label: this.translateService.instant('labels.inputs.Expense Account'),
         value: definition ? definition.expenseAccount : '',
         options: { label: 'name', value: 'id', data: this.expenseAccounts },
         required: true,

src/app/organization/organization-routing.module.ts

@@ -550,7 +550,7 @@ const routes: Routes = [
         {
           path: 'bulkloan',
           component: BulkLoanReassignmnetComponent,
-          data: { title: 'Bulk Loan Reassignment', breadcrumb: 'Bulk Loan Reasssignment' },
+          data: { title: 'Bulk Loan Reassignment', breadcrumb: 'Bulk Loan Reassignment' },
           resolve: {
             offices: OfficesResolver
           }

src/app/organization/password-preferences/password-preferences.component.html

@@ -5,7 +5,9 @@
         <mat-radio-group class="layout-column gap-10px radio-group-spacing" formControlName="validationPolicyId">
           @for (passwordPreference of passwordPreferencesData; track passwordPreference) {
             <mat-radio-button [value]="passwordPreference.id">
-              <span class="description-wrap">{{ passwordPreference.description }}</span>
+              <span class="description-wrap">{{
+                passwordPreference.description | translateKey: 'passwordPreferences'
+              }}</span>
             </mat-radio-button>
           }
         </mat-radio-group>

src/app/organization/working-days/working-days.component.html

@@ -9,7 +9,7 @@
               @for (day of recurrence.controls; track day; let i = $index) {
                 <div>
                   <mat-checkbox labelPosition="after" [formControlName]="i">
-                    {{ weekDays[i].name }}
+                    {{ weekDays[i].name | translateKey: 'catalogs' }}
                   </mat-checkbox>
                 </div>
               }
@@ -21,7 +21,7 @@
             <mat-select formControlName="repaymentRescheduleType">
               @for (repaymentRescheduleType of repaymentRescheduleTypeData; track repaymentRescheduleType) {
                 <mat-option [value]="repaymentRescheduleType.id">
-                  {{ repaymentRescheduleType.value }}
+                  {{ repaymentRescheduleType.value | translateKey: 'catalogs' }}
                 </mat-option>
               }
             </mat-select>