feat(all): allow custom locale

package.json

@@ -47,6 +47,7 @@
     "aurelia-authentication": ">=3.8.2",
     "aurelia-event-aggregator": ">=1.0.1",
     "aurelia-framework": ">=1.3.0",
+    "aurelia-i18n": "^3.0.0-beta.7",
     "aurelia-inputmask": "^1.1.0",
     "aurelia-materialize-bridge": ">=1.2.1",
     "aurelia-router": ">=1.6.3",
@@ -67,6 +68,7 @@
     "aurelia-authentication": ">=3.8.2",
     "aurelia-event-aggregator": ">=1.0.1",
     "aurelia-framework": ">=1.3.0",
+    "aurelia-i18n": "^3.0.0-beta.7",
     "aurelia-inputmask": "^1.1.0",
     "aurelia-materialize-bridge": ">=1.2.1",
     "aurelia-router": ">=1.6.3",

src/aurelia.ts

@@ -12,3 +12,4 @@ import * as moment from "moment";
 export { moment };
 import * as ato from "aurelia-typed-observable-plugin";
 export { ato };
+export { I18N } from "aurelia-i18n";

src/elements/filter/filter-operator-converter.ts

@@ -1,16 +1,25 @@
-import {FilterOperator} from "./filter-operator";
+import * as au from "../../aurelia";
+import { FilterOperator } from "./filter-operator";
+import { I18NResource } from "../../interfaces/i18n-resource";
 
+@au.autoinject
 export class FilterOperatorValueConverter {
+	constructor(private i18n: au.I18N) {
+		this.i18nResource = this.i18n.tr("aurelia-toolkit:filter.operator", { returnObjects: true }) as any as I18NResource["filter"]["operator"];
+	}
+
+	i18nResource: I18NResource["filter"]["operator"];
+
 	toView(value: FilterOperator): string {
 		switch (value) {
-			case FilterOperator.Like: return "like";
-			case FilterOperator.NotLike: return "not like";
-			case FilterOperator.Is: return "is";
-			case FilterOperator.IsNot: return "is not";
+			case FilterOperator.Like: return this.i18nResource.like;
+			case FilterOperator.NotLike: return this.i18nResource.notLike;
+			case FilterOperator.Is: return this.i18nResource.is;
+			case FilterOperator.IsNot: return this.i18nResource.isNot;
 			case FilterOperator.LessThan: return "≤";
 			case FilterOperator.GreaterThan: return "≥";
-			case FilterOperator.IsBefore: return "is before";
-			case FilterOperator.IsAfter: return "is after";
+			case FilterOperator.IsBefore: return this.i18nResource.isBefore;
+			case FilterOperator.IsAfter: return this.i18nResource.isAfter;
 		}
 	}
 

src/elements/filter/filter.html

@@ -1,5 +1,10 @@
 <template>
 	<require from="./filter.scss"></require>
+	<style>
+		filter>.collection>.collection-item>.operator {
+			width: ${i18nResource.operatorWidth};
+		}
+	</style>
 	<div show.bind="false">
 		<slot></slot>
 	</div>
@@ -14,16 +19,16 @@
 
 	<div class="row">
 		<div class="col input-field" if.bind="!lock">
-			<a md-button md-dropdown="activates: dropdown; constrain-width: false; container: body">Add Filter</a>
+			<a md-button md-dropdown="activates: dropdown; constrain-width: false; container: body">${i18nResource.addFilter}</a>
 		</div>
 		<div class="col input-field">
-			<button md-button click.delegate="search()" class="primary">Search</button>
+			<button md-button click.delegate="search()" class="primary">${i18nResource.search}</button>
 		</div>
 		<div class="col right" if.bind="pageSizes">
 			<div style="width: 70px">
 				<select md-select="label: Page Size" value.bind="pageSize">
 					<option repeat.for="ps of pageSizes" model.bind="ps">${ps}</option>
-					<option model.bind="null">All</option>
+					<option model.bind="null">${i18nResource.all}</option>
 				</select>
 			</div>
 		</div>

src/elements/filter/filter.ts

@@ -1,16 +1,19 @@
 import * as au from "../../aurelia";
 import { IFilterLine } from "./i-filter-line";
 import { FilterLineContainer } from "./filter-line-container";
+import { I18NResource } from "../../interfaces/i18n-resource";
 
 @au.customElement("filter")
 export class Filter {
-	constructor(private element: Element, private templatingEngine: au.TemplatingEngine) {
+	constructor(private element: Element, private templatingEngine: au.TemplatingEngine, private i18n: au.I18N) {
 		this.filterId = Filter.id++;
+		this.i18nResource = this.i18n.tr("aurelia-toolkit:filter", { returnObjects: true }) as any as I18NResource["filter"];
 	}
 
 	static id: number = 1;
 	filterId: number;
 	itemsCollection: HTMLDivElement;
+	i18nResource: I18NResource["filter"];
 
 	@au.children("text-filter-line,lookup-filter-line,date-filter-line,number-filter-line,select-filter-line,bool-filter-line")
 	availableFilterLines: IFilterLine[];

src/index.ts

@@ -2,11 +2,13 @@ import * as au from "./aurelia";
 import { PLATFORM } from "./aurelia";
 import "aurelia-materialize-bridge/dist/native-modules/augmentation/aurelia-typed-observable";
 
-import "./validation/validation-rules";
-
-// this is for webpack ts-loader to see JQuery ambient declaration
+// this is for webpack ts-loader to see ambient declaration
 import "./augmentation/aurelia-router";
 import "./augmentation/element";
+import { I18N } from "aurelia-i18n";
+import { I18NResource } from "./interfaces/i18n-resource";
+import { Logger } from "aurelia-logging";
+import { addCustomValidationRules } from "./validation/validation-rules";
 
 export function configure(frameworkConfiguration: au.FrameworkConfiguration) {
 	frameworkConfiguration.globalResources([
@@ -54,6 +56,48 @@ export function configure(frameworkConfiguration: au.FrameworkConfiguration) {
 
 		PLATFORM.moduleName("./helpers/enhance-inputmask"),
 	]);
+
+	let i18n = frameworkConfiguration.container.get(I18N) as I18N;
+	// i18n might not be initialised yet
+	if (i18n.i18nextDeferred) {
+		i18n.i18nextDeferred.then(i18next => i18next.addResourceBundle("en", "aurelia-toolkit", {
+			alert: {
+				ok: "Ok",
+				no: "No",
+				yes: "Yes"
+			},
+			validation: {
+				requiredLength: "${$displayName} must have at least ${$config.length} characters",
+				requireDigit: "${$displayName} must include digits",
+				requireLowercase: "${$displayName} must include lowercase letters",
+				requireUppercase: "${$displayName} must include uppercase letters",
+				requireNonAlphanumeric: "${$displayName} must include special characters",
+				requiredUniqueChars: "${$displayName} must have at least ${$config.length} unique characters",
+				mustMatch: "${$displayName} must match the ${$config.otherPropertyName}"
+			},
+			filter: {
+				addFilter: "Add Filter",
+				all: "All",
+				operator: {
+					is: "is",
+					isAfter: "is after",
+					isBefore: "is before",
+					isNot: "is not",
+					like: "like",
+					notLike: "not like"
+				},
+				search: "Search",
+				operatorWidth: "80px"
+			}
+		} as I18NResource, true, false));
+	}
+	else {
+		let logger = frameworkConfiguration.container.get(Logger) as Logger;
+		logger.error("Did you forget to initialise I18N plugin?");
+		throw Error();
+	}
+
+	addCustomValidationRules(i18n);
 }
 
 export { IAppRouteConfig, AuthStatus } from "./interfaces/i-app-route-config";
@@ -62,6 +106,7 @@ export { IDisposable } from "./interfaces/i-disposable";
 export { IHaveId } from "./interfaces/i-have-id";
 export { IApiException } from "./interfaces/i-api-exception";
 export { IServerDateProvider } from "./interfaces/i-server-date-provider";
+export { I18NResource } from "./interfaces/i18n-resource";
 
 export { AlertService, using } from "./services/alert-service";
 export { AuthService } from "./services/auth-service";

src/interfaces/i18n-resource.ts

@@ -0,0 +1,32 @@
+export interface I18NResource {
+	alert?: {
+		ok: string;
+		yes: string;
+		no: string;
+	};
+
+	validation?: {
+		requiredLength: string;
+		requireDigit: string;
+		requireLowercase: string;
+		requireUppercase: string;
+		requireNonAlphanumeric: string;
+		requiredUniqueChars: string;
+		mustMatch: string;
+	};
+
+	filter?: {
+		operator?: {
+			like: string;
+			notLike: string;
+			is: string;
+			isNot: string;
+			isBefore: string;
+			isAfter: string;
+		},
+		search: string;
+		all: string;
+		addFilter: string;
+		operatorWidth: string;
+	};
+}

src/services/alert-service.ts

@@ -2,17 +2,20 @@
 import { ProgressHandle } from "./progress-handle";
 import { IDisposable } from "../interfaces/i-disposable";
 import { AlertModal } from "../elements/alert-modal/alert-modal";
+import { I18NResource } from "../interfaces/i18n-resource";
 
 @au.autoinject
 export class AlertService {
 	constructor(private toast: au.MdToastService, private eventAggregator: au.EventAggregator, private templatingEngine: au.TemplatingEngine,
-	private viewCompiler: au.ViewCompiler) {
+		private i18n: au.I18N) {
 		this.logger = au.getLogger("AlertService");
+		this.i18nResource = this.i18n.tr("aurelia-toolkit:alert", { returnObjects: true }) as any as I18NResource["alert"];
 	}
 
 	progressCounter: number = 0;
 	defaultTimeout: number = 4000;
 	logger: au.Logger;
+	i18nResource: I18NResource["alert"];
 
 	private showModal(message: string, icon: string, iconColour: string, button1Text: string, button2Text: string): Promise<boolean> {
 		let html = document.createElement("alert-modal");
@@ -38,11 +41,11 @@ export class AlertService {
 	}
 
 	alert(message: string, icon: string = "info", iconColour: string = "blue"): Promise<boolean> {
-		return this.showModal(message, icon, iconColour, "Ok", undefined);
+		return this.showModal(message, icon, iconColour, this.i18nResource.ok, undefined);
 	}
 
 	confirm(message: string, icon: string = "help", iconColour: string = "blue"): Promise<boolean> {
-		return this.showModal(message, icon, iconColour, "Yes", "No");
+		return this.showModal(message, icon, iconColour, this.i18nResource.yes, this.i18nResource.no);
 	}
 
 	error(message: string): Promise<boolean> {