Skip to content

Commit

Permalink
feat: add translation module for labels (#11)
Browse files Browse the repository at this point in the history
  • Loading branch information
@IAM5K
IAM5K authored Feb 10, 2025
1 parent d447a16 commit 5274b72
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 26 deletions.
14 changes: 14 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"@angular/platform-browser": "^18.0.0",
"@angular/platform-browser-dynamic": "^18.0.0",
"@angular/router": "^18.0.0",
"@ngx-translate/core": "^15.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
Expand Down
69 changes: 43 additions & 26 deletions projects/osmosys-form/src/lib/osmosys-form.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,11 @@ <h2>{{ formConfig.title.text }}</h2>
<!-- Input elements will be inserted here based on type -->
<!-- Input field (Text, Email, Password, etc.) -->
<div *ngSwitchCase="'input'" class="form-group">
<label [for]="element.name">{{ element.label }}</label>
<label [for]="element.name">{{ translate(element.label) }}</label>
<input
[type]="element.inputType"
[formControlName]="element.name"
[placeholder]="element.placeholder ? translate(element.placeholder) : ''"
[ngClass]="
element.class +
' ' +
Expand All @@ -34,6 +35,7 @@ <h2>{{ formConfig.title.text }}</h2>
"
[id]="element.name"
[readonly]="element.readonly || false"
[autocomplete]="element.autocomplete || 'off'"
class="form-control"
(change)="handleEvent(element.events?.change, $event)"
(focus)="handleEvent(element.events?.focus, $event)"
Expand All @@ -45,14 +47,14 @@ <h2>{{ formConfig.title.text }}</h2>
>
<div *ngFor="let validation of element.validations">
<div *ngIf="form.get(element.name)?.errors?.[validation.name]">
{{ validation.message }}
{{ translate(validation.message) }}
</div>
</div>
</div>
</div>
<!-- Select field -->
<div *ngSwitchCase="'select'" class="form-group">
<label [for]="element.name">{{ element.label }}</label>
<label [for]="element.name">{{ translate(element.label) }}</label>
<select
[formControlName]="element.name"
[ngClass]="
Expand All @@ -67,14 +69,18 @@ <h2>{{ formConfig.title.text }}</h2>
[id]="element.name"
class="form-select"
aria-label="Default select example"
[autocomplete]="element.autocomplete || 'off'"
(change)="handleEvent(element.events?.change, $event)"
(focus)="handleEvent(element.events?.focus, $event)"
(blur)="handleEvent(element.events?.blur, $event)"
>
<!--can add disabled property-->
<option value="">{{ 'Select ' + element.label }}</option>
<option value="">
{{ element.placeholder ? translate(element.placeholder) : '' }}
</option>
<option *ngFor="let option of element.options" [value]="option.value">
{{ option.label }}
{{ translate(option.label) }}
</option>
</select>
<div
Expand All @@ -83,14 +89,15 @@ <h2>{{ formConfig.title.text }}</h2>
>
<div *ngFor="let validation of element.validations">
<div *ngIf="form.get(element.name)?.errors?.[validation.name]">
{{ validation.message }}
{{ translate(validation.message) }}
</div>
</div>
</div>
</div>

<!-- Range field -->
<div *ngSwitchCase="'range'" class="form-group">
<label [for]="element.name">{{ element.label }}</label>
<label [for]="element.name">{{ translate(element.label) }}</label>
<input
type="range"
[formControlName]="element.name"
Expand All @@ -107,6 +114,7 @@ <h2>{{ formConfig.title.text }}</h2>
"
[id]="element.name"
class="form-range"
[autocomplete]="element.autocomplete || 'off'"
(change)="handleEvent(element.events?.change, $event)"
(focus)="handleEvent(element.events?.focus, $event)"
(blur)="handleEvent(element.events?.blur, $event)"
Expand All @@ -122,14 +130,14 @@ <h2>{{ formConfig.title.text }}</h2>
>
<div *ngFor="let validation of element.validations">
<div *ngIf="form.get(element.name)?.errors?.[validation.name]">
{{ validation.message }}
{{ translate(validation.message) }}
</div>
</div>
</div>
</div>
<!-- Date field -->
<div *ngSwitchCase="'date'" class="form-group">
<label [for]="element.name">{{ element.label }}</label>
<label [for]="element.name">{{ translate(element.label) }}</label>
<input
type="date"
[formControlName]="element.name"
Expand All @@ -144,6 +152,7 @@ <h2>{{ formConfig.title.text }}</h2>
"
[id]="element.name"
class="form-control"
[autocomplete]="element.autocomplete || 'off'"
(change)="handleEvent(element.events?.change, $event)"
(focus)="handleEvent(element.events?.focus, $event)"
(blur)="handleEvent(element.events?.blur, $event)"
Expand All @@ -154,14 +163,14 @@ <h2>{{ formConfig.title.text }}</h2>
>
<div *ngFor="let validation of element.validations">
<div *ngIf="form.get(element.name)?.errors?.[validation.name]">
{{ validation.message }}
{{ translate(validation.message) }}
</div>
</div>
</div>
</div>
<!-- File upload field -->
<div *ngSwitchCase="'file'" class="form-group">
<label [for]="element.name">{{ element.label }}</label>
<label [for]="element.name">{{ translate(element.label) }}</label>
<input
type="file"
[formControlName]="element.name"
Expand All @@ -176,6 +185,7 @@ <h2>{{ formConfig.title.text }}</h2>
"
[id]="element.name"
class="form-control"
[autocomplete]="element.autocomplete || 'off'"
(change)="handleEvent(element.events?.change, $event)"
(focus)="handleEvent(element.events?.focus, $event)"
(blur)="handleEvent(element.events?.blur, $event)"
Expand All @@ -186,14 +196,14 @@ <h2>{{ formConfig.title.text }}</h2>
>
<div *ngFor="let validation of element.validations">
<div *ngIf="form.get(element.name)?.errors?.[validation.name]">
{{ validation.message }}
{{ translate(validation.message) }}
</div>
</div>
</div>
</div>
<!-- Multiselect field -->
<div *ngSwitchCase="'multiselect'" class="form-group">
<label [for]="element.name">{{ element.label }}</label>
<label [for]="element.name">{{ translate(element.label) }}</label>
<select
[formControlName]="element.name"
[ngClass]="
Expand All @@ -208,12 +218,13 @@ <h2>{{ formConfig.title.text }}</h2>
[id]="element.name"
multiple
class="form-control"
[autocomplete]="element.autocomplete || 'off'"
(change)="handleEvent(element.events?.change, $event)"
(focus)="handleEvent(element.events?.focus, $event)"
(blur)="handleEvent(element.events?.blur, $event)"
>
<option *ngFor="let option of element.options" [value]="option.value">
{{ option.label }}
{{ translate(option.label) }}
</option>
</select>
<div
Expand All @@ -222,7 +233,7 @@ <h2>{{ formConfig.title.text }}</h2>
>
<div *ngFor="let validation of element.validations">
<div *ngIf="form.get(element.name)?.errors?.[validation.name]">
{{ validation.message }}
{{ translate(validation.message) }}
</div>
</div>
</div>
Expand All @@ -235,12 +246,13 @@ <h2>{{ formConfig.title.text }}</h2>
[disabled]="element.action === 'submit' && form.invalid"
(click)="handleButtonClick(element.action)"
>
{{ element.label }}
{{ translate(element.label) }}
</button>
</ng-container>

<!-- Color field -->
<div *ngSwitchCase="'color'" class="form-group">
<label [for]="element.name">{{ element.label }}</label>
<label [for]="element.name">{{ translate(element.label) }}</label>
<input
type="color"
[formControlName]="element.name"
Expand All @@ -255,6 +267,7 @@ <h2>{{ formConfig.title.text }}</h2>
"
[id]="element.name"
class="form-control form-control-color"
[autocomplete]="element.autocomplete || 'off'"
(change)="handleEvent(element.events?.change, $event)"
(focus)="handleEvent(element.events?.focus, $event)"
(blur)="handleEvent(element.events?.blur, $event)"
Expand All @@ -265,14 +278,14 @@ <h2>{{ formConfig.title.text }}</h2>
>
<div *ngFor="let validation of element.validations">
<div *ngIf="form.get(element.name)?.errors?.[validation.name]">
{{ validation.message }}
{{ translate(validation.message) }}
</div>
</div>
</div>
</div>
<!-- Radio button field -->
<div *ngSwitchCase="'radio'" class="form-group">
<label [for]="element.name">{{ element.label }}</label>
<label [for]="element.name">{{ translate(element.label) }}</label>
<div
*ngFor="let option of element.options"
class="form-check"
Expand All @@ -293,12 +306,13 @@ <h2>{{ formConfig.title.text }}</h2>
"
[id]="element.name + '_' + option.value"
class="form-check-input"
[autocomplete]="element.autocomplete || 'off'"
(change)="handleEvent(element.events?.change, $event)"
(focus)="handleEvent(element.events?.focus, $event)"
(blur)="handleEvent(element.events?.blur, $event)"
/>
<label class="form-check-label" [for]="element.name + '_' + option.value">
{{ option.label }}
{{ translate(option.label) }}
</label>
</div>
<div
Expand All @@ -307,17 +321,18 @@ <h2>{{ formConfig.title.text }}</h2>
>
<div *ngFor="let validation of element.validations">
<div *ngIf="form.get(element.name)?.errors?.[validation.name]">
{{ validation.message }}
{{ translate(validation.message) }}
</div>
</div>
</div>
</div>
<!-- Textarea field -->
<div *ngSwitchCase="'textarea'" class="form-group">
<label [for]="element.name">{{ element.label }}</label>
<label [for]="element.name">{{ translate(element.label) }}</label>
<textarea
[formControlName]="element.name"
[rows]="element.rows"
[placeholder]="element.placeholder ? translate(element.placeholder) : ''"
[ngClass]="
element.class +
' ' +
Expand All @@ -329,6 +344,7 @@ <h2>{{ formConfig.title.text }}</h2>
"
[id]="element.name"
class="form-control"
[autocomplete]="element.autocomplete || 'off'"
(change)="handleEvent(element.events?.change, $event)"
(focus)="handleEvent(element.events?.focus, $event)"
(blur)="handleEvent(element.events?.blur, $event)"
Expand All @@ -339,14 +355,14 @@ <h2>{{ formConfig.title.text }}</h2>
>
<div *ngFor="let validation of element.validations">
<div *ngIf="form.get(element.name)?.errors?.[validation.name]">
{{ validation.message }}
{{ translate(validation.message) }}
</div>
</div>
</div>
</div>
<!-- Checkbox field -->
<div *ngSwitchCase="'checkbox'" class="form-group">
<label [for]="element.name">{{ element.label }}</label>
<label [for]="element.name">{{ translate(element.label) }}</label>
<div
*ngFor="let option of element.options"
class="form-check"
Expand All @@ -367,12 +383,13 @@ <h2>{{ formConfig.title.text }}</h2>
"
[id]="element.name + '_' + option.value"
class="form-check-input"
[autocomplete]="element.autocomplete || 'off'"
(change)="handleEvent(element.events?.change, $event)"
(focus)="handleEvent(element.events?.focus, $event)"
(blur)="handleEvent(element.events?.blur, $event)"
/>
<label class="form-check-label" [for]="element.name + '_' + option.value">
{{ option.label }}
{{ translate(option.label) }}
</label>
</div>
<div
Expand All @@ -381,14 +398,14 @@ <h2>{{ formConfig.title.text }}</h2>
>
<div *ngFor="let validation of element.validations">
<div *ngIf="form.get(element.name)?.errors?.[validation.name]">
{{ validation.message }}
{{ translate(validation.message) }}
</div>
</div>
</div>
</div>
<!--paragraph field-->
<div *ngSwitchCase="'paragraph'" class="form-group">
<p>{{ element.value }}</p>
<p>{{ translate(element.value) }}</p>
</div>
</ng-container>
</div>
Expand Down
19 changes: 19 additions & 0 deletions projects/osmosys-form/src/lib/osmosys-form.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
} from '@angular/forms';
import { Router } from '@angular/router';
import { CommonModule } from '@angular/common';
import { TranslateService } from '@ngx-translate/core';

@Component({
selector: 'osmosys-form',
Expand All @@ -34,6 +35,10 @@ export class OsmosysFormComponent implements OnInit, OnChanges {

@Input() eventHandlers: { [key: string]: (event: Event) => void } = {};

@Input() useTranslation = false;

@Input() translateService!: TranslateService;

@Output() formSubmit = new EventEmitter<any>();

@Output() formInstance = new EventEmitter<FormGroup>();
Expand Down Expand Up @@ -179,4 +184,18 @@ export class OsmosysFormComponent implements OnInit, OnChanges {

this.form.reset(defaultValues);
}

translate(key: string): string {
if (this.useTranslation && this.translateService) {
if (key) {
return this.translateService.instant(key) || key;
}

// eslint-disable-next-line no-console
console.warn(`Translation key is empty: ${key}`);
return ''; // Return an empty string if the key is invalid
}

return key; // Return the key as fallback if translation is not used
}
}

0 comments on commit 5274b72

Please sign in to comment.