translate texts

borsch · Oct 3, 2021 · 609221f · 609221f
1 parent 55f93f8
commit 609221f
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 23 deletions.
diff --git a/projects/angular-datatable-advanced-examples/src/app/app.module.ts b/projects/angular-datatable-advanced-examples/src/app/app.module.ts
@@ -16,7 +16,7 @@ import {HttpClientModule} from '@angular/common/http';
     AppRoutingModule,
     HttpClientModule,
     BrowserAnimationsModule,
-    AngularDatatableAdvancedModule
+    AngularDatatableAdvancedModule.forRoot()
   ],
   providers: [],
   bootstrap: [AppComponent]

diff --git a/projects/angular-datatable-advanced/src/lib/angular-datatable-advanced-configuration.ts b/projects/angular-datatable-advanced/src/lib/angular-datatable-advanced-configuration.ts
@@ -0,0 +1,55 @@
+import {InjectionToken} from '@angular/core';
+
+export interface AngularDatatableAdvancedConfiguration {
+    filterTranslate: FilterTranslate;
+}
+
+export interface FilterTranslate {
+    contains: string;
+    startsWith: string;
+    endsWith: string;
+    equals: string;
+    notEquals: string;
+    range: string;
+    in: string;
+    nin: string;
+    greaterThan: string;
+    greaterThanOrEquals: string;
+    lessThan: string;
+    lessThanOrEquals: string;
+
+    applyFilter: string;
+    clearFilter: string;
+    filterOutOptions: string;
+    filterRangeFrom: string;
+    filterRangeTo: string;
+    filterPlaceholder: string;
+}
+
+const DEFAULT_CONFIG: AngularDatatableAdvancedConfiguration = {
+    filterTranslate: {
+        contains: 'Contains',
+        startsWith: 'Starts with',
+        endsWith: 'Ends with',
+        equals: 'Equals',
+        notEquals: 'Not equals',
+        range: 'Range',
+        in: 'In',
+        nin: 'Not in',
+        greaterThan: 'Greater then',
+        greaterThanOrEquals: 'Greater then or equals',
+        lessThan: 'Less than',
+        lessThanOrEquals: 'Less than or equals',
+
+        applyFilter: 'Apply filter',
+        clearFilter: 'Clear filter',
+        filterOutOptions: 'Filter out options',
+        filterRangeFrom: 'From',
+        filterRangeTo: 'To',
+        filterPlaceholder: 'Filter'
+    }
+};
+
+export { DEFAULT_CONFIG };
+
+export const ANGULAR_DATATABLE_ADVANCED_CONFIGURATION = new InjectionToken('ANGULAR_DATATABLE_ADVANCED_CONFIGURATION');
diff --git a/projects/angular-datatable-advanced/src/lib/angular-datatable-advanced.module.ts b/projects/angular-datatable-advanced/src/lib/angular-datatable-advanced.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import {ModuleWithProviders, NgModule} from '@angular/core';
 import { AngularDatatableAdvancedComponent } from './angular-datatable-advanced.component';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@@ -13,6 +13,11 @@ import {FilterComponent, FilterSelectByKeyword} from './components/filter/filter
 import {FormsModule} from '@angular/forms';
 import {FlatpickrModule} from 'angularx-flatpickr';
 import { CogMenuComponent } from './components/cog-menu/cog-menu.component';
+import {
+  ANGULAR_DATATABLE_ADVANCED_CONFIGURATION,
+  AngularDatatableAdvancedConfiguration,
+  DEFAULT_CONFIG
+} from './angular-datatable-advanced-configuration';
 
 @NgModule({
   declarations: [AngularDatatableAdvancedComponent, FilterComponent, FilterSelectByKeyword, CogMenuComponent],
@@ -31,4 +36,14 @@ import { CogMenuComponent } from './components/cog-menu/cog-menu.component';
   ],
   exports: [AngularDatatableAdvancedComponent]
 })
-export class AngularDatatableAdvancedModule { }
+export class AngularDatatableAdvancedModule {
+  static forRoot(configuration?: AngularDatatableAdvancedConfiguration): ModuleWithProviders {
+    return {
+      ngModule: AngularDatatableAdvancedModule,
+      providers: [{
+        provide: ANGULAR_DATATABLE_ADVANCED_CONFIGURATION,
+        useValue: configuration || DEFAULT_CONFIG
+      }]
+    };
+  }
+}
diff --git a/projects/angular-datatable-advanced/src/lib/components/filter/filter.component.html b/projects/angular-datatable-advanced/src/lib/components/filter/filter.component.html
@@ -4,22 +4,22 @@
   <mat-menu #menu="matMenu" class="filter-menu">
     <div (click)="ignoreMenuClick($event);" class="ada-filter-block" *ngIf="!isSingleFilterEnabled()">
       <select class="ada-filter-input" [(ngModel)]="filterType">
-        <option value="CONTAINS" *ngIf="!hasSetSelect() && !hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.CONTAINS)">Contains</option>
-        <option value="STARTS_WITH" *ngIf="!hasSetSelect() && !hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.STARTS_WITH)">Starts with</option>
-        <option value="ENDS_WITH" *ngIf="!hasSetSelect() && !hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.ENDS_WITH)">Ends with</option>
-        <option value="EQUALS" *ngIf="!hasSetSelect() && isFilterEnabled(FILTER_TYPES.EQUALS)">Equals</option>
-        <option value="NOT_EQUALS" *ngIf="!hasSetSelect() && isFilterEnabled(FILTER_TYPES.NOT_EQUALS)">Not equals</option>
-        <option value="RANGE" *ngIf="!hasSetSelect() && isFilterEnabled(FILTER_TYPES.RANGE)">Range</option>
-        <option value="IN" *ngIf="hasSetSelect() && !hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.IN)">In</option>
-        <option value="NIN" *ngIf="hasSetSelect() && !hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.NIN)">Not in</option>
-        <option value="GREATER_THAN" *ngIf="hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.GREATER_THAN)">Greater than</option>
-        <option value="GREATER_THAN_OR_EQUALS" *ngIf="hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.GREATER_THAN_OR_EQUALS)">Greater than or equals</option>
-        <option value="LESS_THAN" *ngIf="hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.LESS_THAN)">Less than</option>
-        <option value="LESS_THAN_OR_EQUALS" *ngIf="hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.LESS_THAN_OR_EQUALS)">Less than or equals</option>
+        <option value="CONTAINS" *ngIf="!hasSetSelect() && !hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.CONTAINS)">{{configuration.filterTranslate.contains}}</option>
+        <option value="STARTS_WITH" *ngIf="!hasSetSelect() && !hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.STARTS_WITH)">{{configuration.filterTranslate.startsWith}}</option>
+        <option value="ENDS_WITH" *ngIf="!hasSetSelect() && !hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.ENDS_WITH)">{{configuration.filterTranslate.endsWith}}</option>
+        <option value="EQUALS" *ngIf="!hasSetSelect() && isFilterEnabled(FILTER_TYPES.EQUALS)">{{configuration.filterTranslate.equals}}</option>
+        <option value="NOT_EQUALS" *ngIf="!hasSetSelect() && isFilterEnabled(FILTER_TYPES.NOT_EQUALS)">{{configuration.filterTranslate.notEquals}}</option>
+        <option value="RANGE" *ngIf="!hasSetSelect() && isFilterEnabled(FILTER_TYPES.RANGE)">{{configuration.filterTranslate.range}}</option>
+        <option value="IN" *ngIf="hasSetSelect() && !hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.IN)">{{configuration.filterTranslate.in}}</option>
+        <option value="NIN" *ngIf="hasSetSelect() && !hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.NIN)">{{configuration.filterTranslate.nin}}</option>
+        <option value="GREATER_THAN" *ngIf="hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.GREATER_THAN)">{{configuration.filterTranslate.greaterThan}}</option>
+        <option value="GREATER_THAN_OR_EQUALS" *ngIf="hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.GREATER_THAN_OR_EQUALS)">{{configuration.filterTranslate.greaterThanOrEquals}}</option>
+        <option value="LESS_THAN" *ngIf="hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.LESS_THAN)">{{configuration.filterTranslate.lessThan}}</option>
+        <option value="LESS_THAN_OR_EQUALS" *ngIf="hasDateTimeSelect() && isFilterEnabled(FILTER_TYPES.LESS_THAN_OR_EQUALS)">{{configuration.filterTranslate.lessThanOrEquals}}</option>
       </select>
     </div>
     <div (click)="ignoreMenuClick($event);" *ngIf="hasSetSelect()" class="ada-filter-block">
-      <input type="text" class="ada-filter-input ada-filter-input-small" placeholder="Filter out options" [(ngModel)]="filterOutSelect">
+      <input type="text" class="ada-filter-input ada-filter-input-small" [placeholder]="configuration.filterTranslate.filterOutOptions" [(ngModel)]="filterOutSelect">
       <div class="ada-filter-select-block">
         <div *ngFor="let check of filterIn | filter:filterOutSelect">
           <input type="checkbox" [checked]="filter3.indexOf(check.value) > -1" (change)="checkboxChange(check.value, $event)">
@@ -28,23 +28,23 @@
       </div>
     </div>
     <div (click)="ignoreMenuClick($event);" *ngIf="!hasSetSelect()" class="ada-filter-block">
-      <input type="text" *ngIf="!hasDateTimeSelect()" class="ada-filter-input" placeholder="{{filterType === 'RANGE' ? 'From' : 'Filter'}}" [(ngModel)]="filter1">
+      <input type="text" *ngIf="!hasDateTimeSelect()" class="ada-filter-input" placeholder="{{filterType === 'RANGE' ? configuration.filterTranslate.filterRangeFrom : configuration.filterTranslate.filterPlaceholder}}" [(ngModel)]="filter1">
 
       <input type="text" *ngIf="hasDateTimeSelect()"
              mwlFlatpickr [options]="this.column.column.filterDateOptions" [convertModelValue]="true"
-             class="ada-filter-input" placeholder="{{filterType === 'RANGE' ? 'From' : 'Filter'}}" [(ngModel)]="filter1"
+             class="ada-filter-input" placeholder="{{filterType === 'RANGE' ? configuration.filterTranslate.filterRangeFrom : configuration.filterTranslate.filterPlaceholder}}" [(ngModel)]="filter1"
       >
     </div>
     <div (click)="ignoreMenuClick($event);" *ngIf="filterType === 'RANGE' && !hasSetSelect()" class="ada-filter-block">
-      <input type="text" *ngIf="!hasDateTimeSelect()" class="ada-filter-input" placeholder="To" [(ngModel)]="filter2">
+      <input type="text" *ngIf="!hasDateTimeSelect()" class="ada-filter-input" [placeholder]="configuration.filterTranslate.filterRangeTo" [(ngModel)]="filter2">
 
       <input type="text" *ngIf="hasDateTimeSelect()"
              mwlFlatpickr [options]="this.column.column.filterDateOptions" [convertModelValue]="true"
-             class="ada-filter-input" placeholder="To" [(ngModel)]="filter2">
+             class="ada-filter-input" [placeholder]="configuration.filterTranslate.filterRangeTo" [(ngModel)]="filter2">
     </div>
     <div style="text-align: center;">
-      <button class="ada-filter-button ada-apply-button" (click)="applyFilter()">Apply filter</button>
-      <button class="ada-filter-button ada-clear-button" (click)="clearFilter()">Clear filter</button>
+      <button class="ada-filter-button ada-apply-button" (click)="applyFilter()">{{configuration.filterTranslate.applyFilter}}</button>
+      <button class="ada-filter-button ada-clear-button" (click)="clearFilter()">{{configuration.filterTranslate.clearFilter}}</button>
     </div>
   </mat-menu>
 </span>
diff --git a/projects/angular-datatable-advanced/src/lib/components/filter/filter.component.ts b/projects/angular-datatable-advanced/src/lib/components/filter/filter.component.ts
@@ -1,8 +1,12 @@
-import {Component, Input, OnInit, Pipe, PipeTransform} from '@angular/core';
+import {Component, Inject, Input, OnInit, Pipe, PipeTransform} from '@angular/core';
 import {ExtendedColumn} from '../../model/column';
 import {FilterType} from '../../model/filter';
 import {BehaviorSubject} from 'rxjs';
 import {FilterIn} from '../../model/filter-in';
+import {
+  ANGULAR_DATATABLE_ADVANCED_CONFIGURATION,
+  AngularDatatableAdvancedConfiguration
+} from '../../angular-datatable-advanced-configuration';
 
 @Component({
   selector: 'ada-filter',
@@ -30,6 +34,10 @@ export class FilterComponent implements OnInit {
 
   filterOutSelect = null;
 
+  constructor(
+      @Inject(ANGULAR_DATATABLE_ADVANCED_CONFIGURATION) readonly configuration: AngularDatatableAdvancedConfiguration
+  ) {}
+
   ngOnInit(): void {
     if (this.column.column.filterIn) {
       this.filterIn = this.column.column.filterIn;

diff --git a/projects/angular-datatable-advanced/src/public-api.ts b/projects/angular-datatable-advanced/src/public-api.ts
@@ -5,6 +5,7 @@
 export * from './lib/angular-datatable-advanced.service';
 export * from './lib/angular-datatable-advanced.component';
 export * from './lib/angular-datatable-advanced.module';
+export * from './lib/angular-datatable-advanced-configuration';
 export * from './lib/model/column';
 export * from './lib/model/filter';
 export * from './lib/model/models';