feat(product): translate collaterals folder and add missing translations

Translated all HTML files within the collaterals folder under the product module. Utilized TranslateService for the translation process. Additionally, added the missing translation 'Edit' to each JSON file within the translation folder. Also, included 'Base Percentage' in each JSON file as it was not found in the existing translations.

This commit enhances the internationalization of the product module, ensuring a more comprehensive localization for users.
This commit is contained in:
omar
2024-03-18 00:25:11 -06:00
committed by Jose Alberto Hernandez
parent c691658ed8
commit 1e2027c37b
17 changed files with 239 additions and 217 deletions
@@ -1,47 +1,44 @@
<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CHARGE'">
<fa-icon icon="plus" class="m-r-10"></fa-icon>
Create Collateral
</button>
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CHARGE'">
<fa-icon icon="plus" class="m-r-10"></fa-icon>
{{"labels.text.Create Collateral" | translate}}
</button>
</div>
<div class="container">
<div fxLayout="row" fxLayoutGap="20px">
<mat-form-field fxFlex>
<mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
<input matInput (keyup)="applyFilter($event.target.value)">
</mat-form-field>
</div>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<div class="container">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Name" | translate}} </th>
<td mat-cell *matCellDef="let collateral"> {{ collateral.name }} </td>
</ng-container>
<div fxLayout="row" fxLayoutGap="20px">
<mat-form-field fxFlex>
<mat-label>{{'labels.inputs.Filter' | translate}}</mat-label>
<input matInput (keyup)="applyFilter($event.target.value)">
</mat-form-field>
</div>
<ng-container matColumnDef="quality">
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Type/Quality" | translate}} </th>
<td mat-cell *matCellDef="let collateral"> {{ collateral.quality }} </td>
</ng-container>
<div class="mat-elevation-z8">
<ng-container matColumnDef="basePrice">
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Base Price" | translate}} </th>
<td mat-cell *matCellDef="let collateral"> {{ collateral.basePrice }} </td>
</ng-container>
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="basePercentage">
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Base Percentage" | translate}} </th>
<td mat-cell *matCellDef="let collateral"> {{ collateral.pctToBase }} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let collateral"> {{ collateral.name }} </td>
</ng-container>
<ng-container matColumnDef="quality">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Quality/Type </th>
<td mat-cell *matCellDef="let collateral"> {{ collateral.quality }} </td>
</ng-container>
<ng-container matColumnDef="basePrice">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Base Price </th>
<td mat-cell *matCellDef="let collateral"> {{ collateral.basePrice }} </td>
</ng-container>
<ng-container matColumnDef="basePercentage">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Base Percentage </th>
<td mat-cell *matCellDef="let collateral"> {{ collateral.pctToBase }} </td>
</ng-container>
<ng-container matColumnDef="unitType">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Unit Type </th>
<td mat-cell *matCellDef="let collateral"> {{ collateral.unitType }} </td>
</ng-container>
<ng-container matColumnDef="unitType">
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Unit Type" | translate}} </th>
<td mat-cell *matCellDef="let collateral"> {{ collateral.unitType }} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
@@ -1,71 +1,73 @@
<div class="container">
<mat-card>
<form [formGroup]="collateralForm" (ngSubmit)="submit()">
<mat-card-content>
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<mat-card>
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Name" | translate}}</mat-label>
<input matInput required formControlName="name">
<mat-error *ngIf="collateralForm.controls.name.hasError('required')">
{{"labels.inputs.Name" | translate}} {{"labels.commons.is" | translate}}
<strong>{{"labels.commons.required" | translate}}</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Type/Quality" | translate}}</mat-label>
<input matInput required formControlName="quality">
<mat-error *ngIf="collateralForm.controls.quality.hasError('required')">
{{"labels.inputs.Type/Quality" | translate}} {{"labels.commons.is" | translate}}
<strong>{{"labels.commons.required" | translate}}</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Unit Type" | translate}}</mat-label>
<input matInput required formControlName="unitType">
<mat-error *ngIf="collateralForm.controls.unitType.hasError('required')">
{{"labels.inputs.Unit Type" | translate}} {{"labels.commons.is" | translate}}
<strong>{{"labels.commons.required" | translate}}</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Base Price" | translate}}</mat-label>
<input matInput required formControlName="basePrice">
<mat-error *ngIf="collateralForm.controls.basePrice.hasError('required')">
{{"labels.inputs.Base Price" | translate}} {{"labels.commons.is" | translate}}
<strong>{{"labels.commons.required" | translate}}</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Percentage to Base" | translate}}</mat-label>
<input matInput required formControlName="pctToBase">
<mat-error *ngIf="collateralForm.controls.pctToBase.hasError('required')">
{{"labels.inputs.Percentage to Base" | translate}} {{"labels.commons.is" | translate}}
<strong>{{"labels.commons.required" | translate}}</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.heading.Currency" | translate}}</mat-label>
<mat-select required formControlName="currency">
<mat-option *ngFor="let currency of collateralTemplateData" [value]="currency.code">
{{ currency.name }}
</mat-option>
</mat-select>
<mat-error *ngIf="collateralForm.controls.currency.hasError('required')">
{{"labels.heading.Currency" | translate}} {{"labels.commons.is" | translate}}
<strong>{{"labels.commons.required" | translate}}</strong>
</mat-error>
</mat-form-field>
<form [formGroup]="collateralForm" (ngSubmit)="submit()">
</div>
</mat-card-content>
<mat-card-content>
<mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
<button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
<button mat-raised-button color="primary" [disabled]="!collateralForm.valid"
*mifosxHasPermission="'CREATE_CHARGE'">{{"labels.buttons.Submit" | translate}}</button>
</mat-card-actions>
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
</form>
<mat-form-field fxFlex="48%">
<mat-label>Name</mat-label>
<input matInput required formControlName="name">
<mat-error *ngIf="collateralForm.controls.name.hasError('required')">
Name is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>Type/Quality</mat-label>
<input matInput required formControlName="quality">
<mat-error *ngIf="collateralForm.controls.quality.hasError('required')">
Quality is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>Unit Type</mat-label>
<input matInput required formControlName="unitType">
<mat-error *ngIf="collateralForm.controls.unitType.hasError('required')">
Unit Type is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>Base Price</mat-label>
<input matInput required formControlName="basePrice">
<mat-error *ngIf="collateralForm.controls.basePrice.hasError('required')">
Base Price is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>Percentage to Base</mat-label>
<input matInput required formControlName="pctToBase">
<mat-error *ngIf="collateralForm.controls.pctToBase.hasError('required')">
Percentage to Base is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>Currency</mat-label>
<mat-select required formControlName="currency">
<mat-option *ngFor="let currency of collateralTemplateData" [value]="currency.code">
{{ currency.name }}
</mat-option>
</mat-select>
<mat-error *ngIf="collateralForm.controls.currency.hasError('required')">
Currency is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</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]="!collateralForm.valid" *mifosxHasPermission="'CREATE_CHARGE'">Submit</button>
</mat-card-actions>
</form>
</mat-card>
</mat-card>
</div>
@@ -1,76 +1,79 @@
<div class="container">
<mat-card>
<form [formGroup]="collateralForm" (ngSubmit)="submit()">
<mat-card-content>
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<mat-card>
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Name" | translate}}</mat-label>
<input matInput required autoFocus formControlName="name">
<mat-error *ngIf="collateralForm.controls.name.hasError('required')">
{{"labels.inputs.Name" | translate}} {{"labels.commons.is" | translate}}
<strong>{{"labels.commons.required" |translate}}</strong>
</mat-error>
</mat-form-field>
<form [formGroup]="collateralForm" (ngSubmit)="submit()">
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Type/Quality" | translate}}</mat-label>
<input matInput required autoFocus formControlName="quality">
<mat-error *ngIf="collateralForm.controls.quality.hasError('required')">
{{"labels.inputs.Type/Quality" | translate}} {{"labels.commons.is" | translate}}
<strong>{{"labels.commons.required" | translate}}</strong>
</mat-error>
</mat-form-field>
<mat-card-content>
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Unit Type" | translate}}</mat-label>
<input matInput required autoFocus formControlName="unitType">
<mat-error *ngIf="collateralForm.controls.unitType.hasError('required')">
{{"labels.inputs.Unit Type" | translate}} {{"labels.commons.is" | translate}}
<strong>{{"labels.commons.required" | translate}}</strong>
</mat-error>
</mat-form-field>
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Base Price" | translate}}</mat-label>
<input matInput required autoFocus formControlName="basePrice">
<mat-error *ngIf="collateralForm.controls.basePrice.hasError('required')">
{{"labels.inputs.Base Price" | translate}} {{"labels.commons.is" | translate}}
<strong>{{"labels.commons.required" | translate}}</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>Name</mat-label>
<input matInput required autoFocus formControlName="name">
<mat-error *ngIf="collateralForm.controls.name.hasError('required')">
Name is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.inputs.Percentage to Base" | translate}}</mat-label>
<input matInput required autoFocus formControlName="pctToBase">
<mat-error *ngIf="collateralForm.controls.pctToBase.hasError('required')">
{{"labels.inputs.Percentage to Base" | translate}} {{"labels.commons.is" | translate}}
<strong>{{"labels.commons.required" | translate}}</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>Type/Quality</mat-label>
<input matInput required autoFocus formControlName="quality">
<mat-error *ngIf="collateralForm.controls.quality.hasError('required')">
Type/Quality is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{"labels.heading.Currency" | translate}}</mat-label>
<mat-select required formControlName="currency">
<mat-option *ngFor="let currency of collateralTemplateData" [value]="currency.code">
{{ currency.name }}
</mat-option>
</mat-select>
<mat-error *ngIf="collateralForm.controls.currency.hasError('required')">
{{"labels.heading.Currency" | translate}} {{"labels.commons.is" | translate}}
<strong>{{"labels.commons.required" | translate}}</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>Unit Type</mat-label>
<input matInput required autoFocus formControlName="unitType">
<mat-error *ngIf="collateralForm.controls.unitType.hasError('required')">
Unit Type is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
<mat-form-field fxFlex="48%">
<mat-label>Base Price</mat-label>
<input matInput required autoFocus formControlName="basePrice">
<mat-error *ngIf="collateralForm.controls.basePrice.hasError('required')">
Base Price is <strong>required</strong>
</mat-error>
</mat-form-field>
</mat-card-content>
<mat-form-field fxFlex="48%">
<mat-label>Percentage To Base</mat-label>
<input matInput required autoFocus formControlName="pctToBase">
<mat-error *ngIf="collateralForm.controls.pctToBase.hasError('required')">
Percentage to Base is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
<button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
<button mat-raised-button color="primary" [disabled]="!collateralForm.valid"
*mifosxHasPermission="'UPDATE_CHARGE'">{{"labels.buttons.Submit" | translate}}</button>
</mat-card-actions>
<mat-form-field fxFlex="48%">
<mat-label>Currency</mat-label>
<mat-select required formControlName="currency">
<mat-option *ngFor="let currency of collateralTemplateData" [value]="currency.code">
{{ currency.name }}
</mat-option>
</mat-select>
<mat-error *ngIf="collateralForm.controls.currency.hasError('required')">
Currency is <strong>required</strong>
</mat-error>
</mat-form-field>
</form>
</div>
</mat-card>
</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]="!collateralForm.valid" *mifosxHasPermission="'UPDATE_CHARGE'">Submit</button>
</mat-card-actions>
</form>
</mat-card>
</div>
</div>
@@ -1,74 +1,67 @@
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
<button mat-raised-button color="primary" [routerLink]="['edit']" >
<fa-icon icon="edit" class="m-r-10"></fa-icon>
Edit
{{"labels.heading.Edit" | translate}}
</button>
<button mat-raised-button color="warn" (click)="deleteCollateral()" >
<fa-icon icon="trash" class="m-r-10"></fa-icon>
Delete
{{"labels.heading.Delete" | translate}}
</button>
</div>
<div class="container">
<mat-card>
<mat-card-content>
<div fxLayout="row wrap" class="content">
<mat-card>
<div fxFlex="50%" class="mat-body-strong">
{{"labels.inputs.Collateral Name" | translate}}
</div>
<mat-card-content>
<div fxFlex="50%">
{{ collateralData.name }}
</div>
<div fxLayout="row wrap" class="content">
<div fxFlex="50%" class="mat-body-strong">
{{"labels.inputs.Type/Quality" | translate}}
</div>
<div fxFlex="50%" class="mat-body-strong">
Collateral Name
</div>
<div fxFlex="50%">
{{ collateralData.quality }}
</div>
<div fxFlex="50%">
{{ collateralData.name }}
</div>
<div fxFlex="50%" class="mat-body-strong">
{{"labels.inputs.Base Price" | translate}}
</div>
<div fxFlex="50%" class="mat-body-strong">
Quality/Type
</div>
<div fxFlex="50%">
{{ collateralData.basePrice }}
</div>
<div fxFlex="50%">
{{ collateralData.quality }}
</div>
<div fxFlex="50%" class="mat-body-strong">
{{"labels.inputs.Base Percentage" | translate}}
</div>
<div fxFlex="50%" class="mat-body-strong">
Base Price
</div>
<div fxFlex="50%">
{{ collateralData.pctToBase }}
</div>
<div fxFlex="50%">
{{ collateralData.basePrice }}
</div>
<div fxFlex="50%" class="mat-body-strong">
{{"labels.inputs.Unit Type" | translate}}
</div>
<div fxFlex="50%" class="mat-body-strong">
Base Percentage
</div>
<div fxFlex="50%">
{{ collateralData.unitType }}
</div>
<div fxFlex="50%">
{{ collateralData.pctToBase }}
</div>
<div fxFlex="50%" class="mat-body-strong">
Unit Type
</div>
<div fxFlex="50%">
{{ collateralData.unitType }}
</div>
<div fxFlex="50%" class="mat-body-strong">
Currency
</div>
<div fxFlex="50%">
{{ collateralData.currency }}
</div>
</div>
</mat-card-content>
</mat-card>
<div fxFlex="50%" class="mat-body-strong">
{{"labels.heading.Currency" | translate}}
</div>
<div fxFlex="50%">
{{ collateralData.currency }}
</div>
</div>
</mat-card-content>
</mat-card>
</div>
@@ -1,11 +1,12 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { MatDialog } from '@angular/material/dialog';
import { ActivatedRoute, Router } from '@angular/router';
/** Custom Services */
import { ProductsService } from 'app/products/products.service';
/** Custom Components */
import { TranslateService } from '@ngx-translate/core';
import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component';
/**
@@ -27,11 +28,13 @@ export class ViewCollateralComponent implements OnInit {
* @param {ActivatedRoute} route Activated Route.
* @param {Router} router Router for navigation.
* @param {MatDialog} dialog Dialog reference.
* @param {TranslateService} translateService Translate Service.
*/
constructor(private productsService: ProductsService,
private route: ActivatedRoute,
private router: Router,
private dialog: MatDialog) {
private dialog: MatDialog,
private translateService:TranslateService) {
this.route.data.subscribe((data: { collateral: any }) => {
this.collateralData = data.collateral;
});
@@ -45,7 +48,7 @@ export class ViewCollateralComponent implements OnInit {
*/
deleteCollateral() {
const deleteCollateralDialogRef = this.dialog.open(DeleteDialogComponent, {
data: { deleteContext: `collateral ${this.collateralData.id}` }
data: { deleteContext: this.translateService.instant('labels.text.Collateral') + " " + this.collateralData.id}
});
deleteCollateralDialogRef.afterClosed().subscribe((response: any) => {
if (response.delete) {