Skip to content

Commit 609221f

Browse files
borschborsch
committed
translate texts
1 parent 55f93f8 commit 609221f

6 files changed

Lines changed: 102 additions & 23 deletions

File tree

‎projects/angular-datatable-advanced-examples/src/app/app.module.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {HttpClientModule} from '@angular/common/http';
1616
AppRoutingModule,
1717
HttpClientModule,
1818
BrowserAnimationsModule,
19-
AngularDatatableAdvancedModule
19+
AngularDatatableAdvancedModule.forRoot()
2020
],
2121
providers: [],
2222
bootstrap: [AppComponent]

‎projects/angular-datatable-advanced/src/lib/angular-datatable-advanced-configuration.ts‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import {InjectionToken} from '@angular/core';
2+
3+
export interface AngularDatatableAdvancedConfiguration {
4+
filterTranslate: FilterTranslate;
5+
}
6+
7+
export interface FilterTranslate {
8+
contains: string;
9+
startsWith: string;
10+
endsWith: string;
11+
equals: string;
12+
notEquals: string;
13+
range: string;
14+
in: string;
15+
nin: string;
16+
greaterThan: string;
17+
greaterThanOrEquals: string;
18+
lessThan: string;
19+
lessThanOrEquals: string;
20+
21+
applyFilter: string;
22+
clearFilter: string;
23+
filterOutOptions: string;
24+
filterRangeFrom: string;
25+
filterRangeTo: string;
26+
filterPlaceholder: string;
27+
}
28+
29+
const DEFAULT_CONFIG: AngularDatatableAdvancedConfiguration = {
30+
filterTranslate: {
31+
contains: 'Contains',
32+
startsWith: 'Starts with',
33+
endsWith: 'Ends with',
34+
equals: 'Equals',
35+
notEquals: 'Not equals',
36+
range: 'Range',
37+
in: 'In',
38+
nin: 'Not in',
39+
greaterThan: 'Greater then',
40+
greaterThanOrEquals: 'Greater then or equals',
41+
lessThan: 'Less than',
42+
lessThanOrEquals: 'Less than or equals',
43+
44+
applyFilter: 'Apply filter',
45+
clearFilter: 'Clear filter',
46+
filterOutOptions: 'Filter out options',
47+
filterRangeFrom: 'From',
48+
filterRangeTo: 'To',
49+
filterPlaceholder: 'Filter'
50+
}
51+
};
52+
53+
export { DEFAULT_CONFIG };
54+
55+
export const ANGULAR_DATATABLE_ADVANCED_CONFIGURATION = new InjectionToken('ANGULAR_DATATABLE_ADVANCED_CONFIGURATION');

‎projects/angular-datatable-advanced/src/lib/angular-datatable-advanced.module.ts‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { NgModule } from '@angular/core';
1+
import {ModuleWithProviders, NgModule} from '@angular/core';
22
import { AngularDatatableAdvancedComponent } from './angular-datatable-advanced.component';
33
import { MatPaginatorModule } from '@angular/material/paginator';
44
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@@ -13,6 +13,11 @@ import {FilterComponent, FilterSelectByKeyword} from './components/filter/filter
1313
import {FormsModule} from '@angular/forms';
1414
import {FlatpickrModule} from 'angularx-flatpickr';
1515
import { CogMenuComponent } from './components/cog-menu/cog-menu.component';
16+
import {
17+
ANGULAR_DATATABLE_ADVANCED_CONFIGURATION,
18+
AngularDatatableAdvancedConfiguration,
19+
DEFAULT_CONFIG
20+
} from './angular-datatable-advanced-configuration';
1621

1722
@NgModule({
1823
declarations: [AngularDatatableAdvancedComponent, FilterComponent, FilterSelectByKeyword, CogMenuComponent],
@@ -31,4 +36,14 @@ import { CogMenuComponent } from './components/cog-menu/cog-menu.component';
3136
],
3237
exports: [AngularDatatableAdvancedComponent]
3338
})
34-
export class AngularDatatableAdvancedModule { }
39+
export class AngularDatatableAdvancedModule {
40+
static forRoot(configuration?: AngularDatatableAdvancedConfiguration): ModuleWithProviders {
41+
return {
42+
ngModule: AngularDatatableAdvancedModule,
43+
providers: [{
44+
provide: ANGULAR_DATATABLE_ADVANCED_CONFIGURATION,
45+
useValue: configuration || DEFAULT_CONFIG
46+
}]
47+
};
48+
}
49+
}

‎projects/angular-datatable-advanced/src/lib/components/filter/filter.component.html‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,22 @@
44
<mat-menu #menu="matMenu" class="filter-menu">
55
<div (click)="ignoreMenuClick($event);" class="ada-filter-block" *ngIf="!isSingleFilterEnabled()">
66
<select class="ada-filter-input" [(ngModel)]="filterType">
7-
<option value="CONTAINS" *ngIf="!hasSetSelect() && !hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.CONTAINS)">Contains</option>
8-
<option value="STARTS_WITH" *ngIf="!hasSetSelect() && !hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.STARTS_WITH)">Starts with</option>
9-
<option value="ENDS_WITH" *ngIf="!hasSetSelect() && !hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.ENDS_WITH)">Ends with</option>
10-
<option value="EQUALS" *ngIf="!hasSetSelect() && isFilterEnabled(FILTER_TYPES.EQUALS)">Equals</option>
11-
<option value="NOT_EQUALS" *ngIf="!hasSetSelect() && isFilterEnabled(FILTER_TYPES.NOT_EQUALS)">Not equals</option>
12-
<option value="RANGE" *ngIf="!hasSetSelect() && isFilterEnabled(FILTER_TYPES.RANGE)">Range</option>
13-
<option value="IN" *ngIf="hasSetSelect() && !hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.IN)">In</option>
14-
<option value="NIN" *ngIf="hasSetSelect() && !hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.NIN)">Not in</option>
15-
<option value="GREATER_THAN" *ngIf="hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.GREATER_THAN)">Greater than</option>
16-
<option value="GREATER_THAN_OR_EQUALS" *ngIf="hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.GREATER_THAN_OR_EQUALS)">Greater than or equals</option>
17-
<option value="LESS_THAN" *ngIf="hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.LESS_THAN)">Less than</option>
18-
<option value="LESS_THAN_OR_EQUALS" *ngIf="hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.LESS_THAN_OR_EQUALS)">Less than or equals</option>
7+
<option value="CONTAINS" *ngIf="!hasSetSelect() && !hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.CONTAINS)">{{configuration.filterTranslate.contains}}</option>
8+
<option value="STARTS_WITH" *ngIf="!hasSetSelect() && !hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.STARTS_WITH)">{{configuration.filterTranslate.startsWith}}</option>
9+
<option value="ENDS_WITH" *ngIf="!hasSetSelect() && !hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.ENDS_WITH)">{{configuration.filterTranslate.endsWith}}</option>
10+
<option value="EQUALS" *ngIf="!hasSetSelect() && isFilterEnabled(FILTER_TYPES.EQUALS)">{{configuration.filterTranslate.equals}}</option>
11+
<option value="NOT_EQUALS" *ngIf="!hasSetSelect() && isFilterEnabled(FILTER_TYPES.NOT_EQUALS)">{{configuration.filterTranslate.notEquals}}</option>
12+
<option value="RANGE" *ngIf="!hasSetSelect() && isFilterEnabled(FILTER_TYPES.RANGE)">{{configuration.filterTranslate.range}}</option>
13+
<option value="IN" *ngIf="hasSetSelect() && !hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.IN)">{{configuration.filterTranslate.in}}</option>
14+
<option value="NIN" *ngIf="hasSetSelect() && !hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.NIN)">{{configuration.filterTranslate.nin}}</option>
15+
<option value="GREATER_THAN" *ngIf="hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.GREATER_THAN)">{{configuration.filterTranslate.greaterThan}}</option>
16+
<option value="GREATER_THAN_OR_EQUALS" *ngIf="hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.GREATER_THAN_OR_EQUALS)">{{configuration.filterTranslate.greaterThanOrEquals}}</option>
17+
<option value="LESS_THAN" *ngIf="hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.LESS_THAN)">{{configuration.filterTranslate.lessThan}}</option>
18+
<option value="LESS_THAN_OR_EQUALS" *ngIf="hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.LESS_THAN_OR_EQUALS)">{{configuration.filterTranslate.lessThanOrEquals}}</option>
1919
</select>
2020
</div>
2121
<div (click)="ignoreMenuClick($event);" *ngIf="hasSetSelect()" class="ada-filter-block">
22-
<input type="text" class="ada-filter-input ada-filter-input-small" placeholder="Filter out options" [(ngModel)]="filterOutSelect">
22+
<input type="text" class="ada-filter-input ada-filter-input-small" [placeholder]="configuration.filterTranslate.filterOutOptions" [(ngModel)]="filterOutSelect">
2323
<div class="ada-filter-select-block">
2424
<div *ngFor="let check of filterIn | filter:filterOutSelect">
2525
<input type="checkbox" [checked]="filter3.indexOf(check.value) > -1" (change)="checkboxChange(check.value, $event)">
@@ -28,23 +28,23 @@
2828
</div>
2929
</div>
3030
<div (click)="ignoreMenuClick($event);" *ngIf="!hasSetSelect()" class="ada-filter-block">
31-
<input type="text" *ngIf="!hasDateTimeSelect()" class="ada-filter-input" placeholder="{{filterType === 'RANGE' ? 'From' : 'Filter'}}" [(ngModel)]="filter1">
31+
<input type="text" *ngIf="!hasDateTimeSelect()" class="ada-filter-input" placeholder="{{filterType === 'RANGE' ? configuration.filterTranslate.filterRangeFrom : configuration.filterTranslate.filterPlaceholder}}" [(ngModel)]="filter1">
3232

3333
<input type="text" *ngIf="hasDateTimeSelect()"
3434
mwlFlatpickr [options]="this.column.column.filterDateOptions" [convertModelValue]="true"
35-
class="ada-filter-input" placeholder="{{filterType === 'RANGE' ? 'From' : 'Filter'}}" [(ngModel)]="filter1"
35+
class="ada-filter-input" placeholder="{{filterType === 'RANGE' ? configuration.filterTranslate.filterRangeFrom : configuration.filterTranslate.filterPlaceholder}}" [(ngModel)]="filter1"
3636
>
3737
</div>
3838
<div (click)="ignoreMenuClick($event);" *ngIf="filterType === 'RANGE' && !hasSetSelect()" class="ada-filter-block">
39-
<input type="text" *ngIf="!hasDateTimeSelect()" class="ada-filter-input" placeholder="To" [(ngModel)]="filter2">
39+
<input type="text" *ngIf="!hasDateTimeSelect()" class="ada-filter-input" [placeholder]="configuration.filterTranslate.filterRangeTo" [(ngModel)]="filter2">
4040

4141
<input type="text" *ngIf="hasDateTimeSelect()"
4242
mwlFlatpickr [options]="this.column.column.filterDateOptions" [convertModelValue]="true"
43-
class="ada-filter-input" placeholder="To" [(ngModel)]="filter2">
43+
class="ada-filter-input" [placeholder]="configuration.filterTranslate.filterRangeTo" [(ngModel)]="filter2">
4444
</div>
4545
<div style="text-align: center;">
46-
<button class="ada-filter-button ada-apply-button" (click)="applyFilter()">Apply filter</button>
47-
<button class="ada-filter-button ada-clear-button" (click)="clearFilter()">Clear filter</button>
46+
<button class="ada-filter-button ada-apply-button" (click)="applyFilter()">{{configuration.filterTranslate.applyFilter}}</button>
47+
<button class="ada-filter-button ada-clear-button" (click)="clearFilter()">{{configuration.filterTranslate.clearFilter}}</button>
4848
</div>
4949
</mat-menu>
5050
</span>

‎projects/angular-datatable-advanced/src/lib/components/filter/filter.component.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1-
import {Component, Input, OnInit, Pipe, PipeTransform} from '@angular/core';
1+
import {Component, Inject, Input, OnInit, Pipe, PipeTransform} from '@angular/core';
22
import {ExtendedColumn} from '../../model/column';
33
import {FilterType} from '../../model/filter';
44
import {BehaviorSubject} from 'rxjs';
55
import {FilterIn} from '../../model/filter-in';
6+
import {
7+
ANGULAR_DATATABLE_ADVANCED_CONFIGURATION,
8+
AngularDatatableAdvancedConfiguration
9+
} from '../../angular-datatable-advanced-configuration';
610

711
@Component({
812
selector: 'ada-filter',
@@ -30,6 +34,10 @@ export class FilterComponent implements OnInit {
3034

3135
filterOutSelect = null;
3236

37+
constructor(
38+
@Inject(ANGULAR_DATATABLE_ADVANCED_CONFIGURATION) readonly configuration: AngularDatatableAdvancedConfiguration
39+
) {}
40+
3341
ngOnInit(): void {
3442
if (this.column.column.filterIn) {
3543
this.filterIn = this.column.column.filterIn;

‎projects/angular-datatable-advanced/src/public-api.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
export * from './lib/angular-datatable-advanced.service';
66
export * from './lib/angular-datatable-advanced.component';
77
export * from './lib/angular-datatable-advanced.module';
8+
export * from './lib/angular-datatable-advanced-configuration';
89
export * from './lib/model/column';
910
export * from './lib/model/filter';
1011
export * from './lib/model/models';

0 commit comments

Comments
 (0)