Skip to content

Commit

Permalink
Migrate the library to use the structure proposed by cli. (#32)
Browse files Browse the repository at this point in the history
* Use the cli approach for the library
* Update to 9
* Update CI
* Split documentation in two files
* Add migration documentation
* Refactor Date methods.
* Add unit test
  • Loading branch information
alfonsserra committed Mar 25, 2020
1 parent e6163f5 commit e7cc494
Show file tree
Hide file tree
Showing 54 changed files with 3,472 additions and 7,081 deletions.
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ npm-debug.log
node_modules
coverage
build
lib
dist
css
html
sass
Expand Down
15 changes: 8 additions & 7 deletions .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,29 +4,30 @@ language: node_js
node_js:
- '10'
addons:
apt:
sources:
- google-chrome
chrome: stable

before_install:
- npm i -g makeshift && makeshift -s @systelab-technologies -r https://registry.npmjs.org
- export CHROME_BIN=chromium-browser
- export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start

before_script:
- npm install -g makeshift && makeshift -s @systelab-technologies -r https://registry.npmjs.org
- npm install -g codecov
- npm install -g codacy-coverage
- npm install
- ng build

script:
- ng test --watch=false --code-coverage
script:
- npm run test
- npm run build

after_success:
- cat coverage/lcov.info | codecov
- cat ./coverage/lcov.info | codacy-coverage

before_deploy:
- cd dist/systelab-translate

deploy:
skip_cleanup: true
provider: npm
Expand Down
193 changes: 25 additions & 168 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,189 +8,46 @@

Library with I18N tools to speed up our Angular developments

## Installing the library

```bash
npm install systelab-translate --save
```

## How to use the library
In order to use this library you must import the module SystelabTranslateModule. Remember to import SystelabTranslateModule.forRoot() in your application module.

Once done this, you can inject a I18NService and setup the initial locale calling the method 'use':

```javascript
this.i18nService.use('en-US').subscribe(() => console.log('Locale set to American English.'));
```

If you want to get the current language, call the method:

```javascript
this.i18nService.getCurrentLanguage()
```

If you want to get the browser language, call the method:

```javascript
this.i18nService.getBrowserLang()
```

### Translate

There are two convenient methods to set or append new keys to an specific locale:

```javascript
public setTranslation(locale: string, translations: Object)
public appendTranslation(locale: string, translations: Object)
```

In order to translate a key, you can call to the instant method:

```javascript
this.i18nService.instant('COMMON_CODE')
```

This method has an optional parameter interpolateParams that will allow you to provide some parameters. For example:

Provided the key "USER_AGE_AND_GENDER": "User age is {{USER_AGE}} and gender is {{USER_GENDER}}" you can set the parameters with the following call


```javascript
this.i18nService.instant('USER_AGE_AND_GENDER', {USER_AGE: 24, USER_GENDER: 'Male'})
```


In order to async translate a key, returning an Observable, you can call to the get method:

```javascript
this.i18nService.get('COMMON_CODE')
```

You can translate a key in your templates by using the 'translate' pipe:

```html
<p> {{ 'COMMON_CODE' | translate | async }} </p>
```

#### Provide the translation files

In order to provide the translation files, you must include several properties files in the /i18n/language and /i18n/error folders.

For the basic bundles, include a MessagesBundle_xx_XX.json file for each language and country (not mandatory).

For the error bundles, include a ErrorsBundle_xx_XX.json file for each language and country (not mandatory).

This two files are mandatory if you are going to use the language.

Sample files names are: MessageBundle_es.json, MessageBundle_en.json, MessageBundle_en_US.json or MessageBundle_pt_BR.json

Inside each file include a single line for each key and translation. For example:

```html
"COMMON_ABOUT": "About",
"COMMON_CODE": "Code to display",
```

### Working with dates

The are some convenient methods to work with dates:

```javascript
public getDateFormat(isFullYear = false): string
```
Returns the Date Format depending on the locale. If full year, the year will have 4 digits.

```javascript
public getTimeFormat(withSeconds = false): string
```
Returns the Time Format depending on the locale. If specified, seconds will be added.

```javascript
public formatDate(date: Date): string
```
Formats a Date depending on the locale.

```javascript
public formatDateFullYear(date: Date): string
```
Formats a Date with the year in 4 digits depending on the locale.

```javascript
public formatTime(date: Date, withSeconds?: boolean): string
```
Formats a Time depending on the locale.

```javascript
public formatDateTime(date: Date, fullYear?: boolean, withSeconds?: boolean): string
```
Formats a Date Time depending on the locale.
## Working with the repo

```javascript
public formatMonthAndYear(date: Date): string
```
Returns the month in text and the year.
To download the repository and setup all the dependencies, run the following script:

```javascript
public getDateFrom(date: Date)
```
Returns the date at the beginning of the day.

```javascript
public getDateTo(date: Date)
```bash
git clone https://github.com/systelab/systelab-translate.git
cd systelab-translate
npm install
```
Returns the date at the end of the day.

```javascript
public getDateMidDay(date: Date)
```
Returns the date at noon.
## Publish the library:

```javascript
public getFirstDayOfWeek()
```
Returns a 0 if the first day of the week for the locale is Sunday. Returs 1 if is Monday.
Given that you have a user with enough privileges, in order to publish the library in npmjs.com run the following script:

```javascript
public parseDate(currentDateValue: string, locale?: string): Date
```bash
npm run build
cd dist/systelab-translate
npm publish
```
Returns a Date from currentDateValue applying the Date Format of the locale.

See the source code to get more information.

### Working with numbers
Library will be published at: https://www.npmjs.com/package/systelab-translate

Use the method formatNumber to format a Number using the Java DecimalFormat.
## Documentation

```javascript
public formatNumber(numberToFormat: number, decimalFormat: string, applyLocale?: boolean): string
```
Read the [provided documentation](https://github.com/systelab/systelab-translate/blob/master/projects/systelab-translate/README.md) to use the library

### Working with numbers (using numberformat Pipe)
# Breaking changes

Use the pipe numberformat to get a value with a defined precision taking into accound the locale, units, priorSymbol and default symbol when undefined.
## Version 7
Few changes where introduce in version 7 in order to standardize the library and support Angular 9.
The following steps should be consider when migrating from version 6.

```html
<label>{{value | numberformat : '1.0-5':'%'}</label>
1. When importing the module do not use .forRoot(); In Webstorm, replace in path:
```
Returns the value rounded to 5 decimals and with units. For example: an output may be 5.23455%

```html
<label>{{value | numberformat : '1.0-2':'%':'<'':'-'}}</label>
- SystelabTranslateModule.forRoot\(\)
- SystelabTranslateModule
```
Returns the value rounded to 2 decimals, % as units and < as the previous symbol. For example: an output may be < 3.44% or just - in case the value is undefined.

```javascript
public transform(value: number, precision?: string, units?: string, priorSymbol?: string, defaultSymbolWhenNull?): string
2. When importing services and modules import them from systelab-translate root. In Webstorm, replace in path:
```
This pipe can be used from any component through the method transform.
## Working with the repo
```bash
git clone https://github.com/systelab/systelab-translate.git
cd systelab-translate
npm install
ng serve
- from 'systelab-translate/lib.+
- from 'systelab-translate';
```
Loading

0 comments on commit e7cc494

Please sign in to comment.