Skip to content

Commit

Permalink
Merge pull request #9 from bolzplatzarena/translate-documentation
Browse files Browse the repository at this point in the history
Translate documentation
  • Loading branch information
rengert authored Aug 20, 2022
2 parents 64ca8b4 + bf3dfd1 commit 95056ae
Show file tree
Hide file tree
Showing 12 changed files with 319 additions and 234 deletions.
342 changes: 171 additions & 171 deletions package-lock.json

Large diffs are not rendered by default.

28 changes: 14 additions & 14 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,16 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^14.1.2",
"@angular/cdk": "^14.1.2",
"@angular/common": "^14.1.2",
"@angular/compiler": "^14.1.2",
"@angular/core": "^14.1.2",
"@angular/forms": "^14.1.2",
"@angular/material": "^14.1.2",
"@angular/platform-browser": "^14.1.2",
"@angular/platform-browser-dynamic": "^14.1.2",
"@angular/router": "^14.1.2",
"@angular/animations": "^14.1.3",
"@angular/cdk": "^14.1.3",
"@angular/common": "^14.1.3",
"@angular/compiler": "^14.1.3",
"@angular/core": "^14.1.3",
"@angular/forms": "^14.1.3",
"@angular/material": "^14.1.3",
"@angular/platform-browser": "^14.1.3",
"@angular/platform-browser-dynamic": "^14.1.3",
"@angular/router": "^14.1.3",
"@fortawesome/angular-fontawesome": "^0.11.1",
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
Expand All @@ -37,14 +37,14 @@
"zone.js": "~0.11.6"
},
"devDependencies": {
"@angular-devkit/build-angular": "^14.1.2",
"@angular-devkit/build-angular": "^14.1.3",
"@angular-eslint/builder": "14.0.2",
"@angular-eslint/eslint-plugin": "14.0.2",
"@angular-eslint/eslint-plugin-template": "14.0.2",
"@angular-eslint/schematics": "14.0.2",
"@angular-eslint/template-parser": "14.0.2",
"@angular/cli": "^14.1.2",
"@angular/compiler-cli": "^14.1.2",
"@angular/cli": "^14.1.3",
"@angular/compiler-cli": "^14.1.3",
"@types/jasmine": "~4.0.3",
"@types/jest": "^28.1.3",
"@types/node": "^12.11.1",
Expand All @@ -59,4 +59,4 @@
"ts-jest": "^28.0.5",
"typescript": "~4.7.4"
}
}
}
8 changes: 4 additions & 4 deletions projects/components/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@bolzplatzarena/components",
"version": "0.2.1",
"version": "0.3.0",
"author": "Thomas Renger",
"repository": {
"type": "git",
Expand All @@ -17,9 +17,9 @@
],
"license": "MIT",
"peerDependencies": {
"@angular/common": "^14.0.3",
"@angular/core": "^14.0.3",
"@angular/material": "^14.0.3",
"@angular/common": "^14.1.3",
"@angular/core": "^14.1.3",
"@angular/material": "^14.1.3",
"@fortawesome/angular-fontawesome": "^0.11.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@ngx-translate/core": "^14.0.0"
Expand Down
8 changes: 6 additions & 2 deletions src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
<section class="tw-px-8">
<h1>Bolzplatzarena Component Examples</h1>
<p>Collection of conmponents and utilities based on the angular material library.</p>
<mat-button-toggle-group>
<mat-button-toggle (click)="setLanguage('de')">Deutsch</mat-button-toggle>
<mat-button-toggle (click)="setLanguage('en')" [checked]="true">English</mat-button-toggle>
</mat-button-toggle-group>
<h1 translate>content.headline.first</h1>
<p translate>content.text.1</p>
</section>
<mat-tab-group>
<mat-tab label="Table">
Expand Down
10 changes: 9 additions & 1 deletion src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,16 @@
import { Component } from '@angular/core';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
constructor(private readonly translate: TranslateService) {
}

setLanguage(lang: string): void {
this.translate.use(lang);
}
}
4 changes: 4 additions & 0 deletions src/app/app.module.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { NgModule } from '@angular/core';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatSelectModule } from '@angular/material/select';
import { MatTabsModule } from '@angular/material/tabs';
Expand All @@ -11,6 +12,7 @@ import { AppComponent } from './app.component';
import { EnumComponent } from './components/enum/enum.component';
import { TableComponent } from './components/table/table.component';

import * as de from './i18n/de.json';
import * as en from './i18n/en.json';

@NgModule({
Expand All @@ -28,13 +30,15 @@ import * as en from './i18n/en.json';
MatTabsModule,
FontAwesomeModule,
MatProgressBarModule,
MatButtonToggleModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {
constructor(translate: TranslateService) {
translate.setTranslation('en', en, true);
translate.setTranslation('de', de, true);
translate.use('en');
}
}
13 changes: 6 additions & 7 deletions src/app/components/enum/enum.component.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
<h2>Enum Helper</h2>
Sometimes it is hard to handle enums but it is important to use an enum instead of just using a number or a string.
<br>Here you can find some little helpers, which enable you to use enum for material select or in the tempalte as a
string very easily.
<h3>Select Options with enumeration</h3>
<p>Easy why to use a typescript enum as source of the material select.</p>
<h2 class="tw-p-4" translate>content.headline.enum</h2>
<p class="tw-px-4" [innerHtml]="'content.text.enum' | translate"></p>
<h3 class="tw-p-4" translate>content.headline.enum_options</h3>
<p class="tw-px-4" translate>content.text.enum_options</p>
<mat-form-field>
<mat-label>Hero Type</mat-label>
<mat-select>
Expand All @@ -12,7 +10,8 @@ <h3>Select Options with enumeration</h3>
</mat-option>
</mat-select>
</mat-form-field>
<h3>Pipe</h3>
<h3 class="tw-p-4" translate>content.headline.pipe</h3>
<p class="tw-px-4" translate>content.text.pipe</p>
Original value: {{ HeroType.Scientist }}
<code class="tw-block">
Original value: {{ '&#123;&#123; HeroType.Scientist &#125;&#125;' }}
Expand Down
5 changes: 3 additions & 2 deletions src/app/components/enum/enum.component.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { Component } from '@angular/core';
import { translatableFrom } from "@bolzplatzarena/components";
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { translatableFrom } from '@bolzplatzarena/components';
import { HeroType } from '../../models/hero-type';

@Component({
selector: 'app-enum',
templateUrl: './enum.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class EnumComponent {
readonly items = translatableFrom(HeroType, 'hero.types');
Expand Down
29 changes: 7 additions & 22 deletions src/app/components/table/table.component.html
Original file line number Diff line number Diff line change
@@ -1,39 +1,24 @@
<h2>Table</h2>
<p>Easy way to use a table, whitout the need to implement to headers and columns by you own.</p>
<p>Custom column configuration availble for:</p>
<h2 class="tw-p-4 tw-m-0" translate>content.headline.table</h2>
<p class="tw-px-4" translate>content.text.table</p>
<p class="tw-px-4" translate>content.text.column</p>
<ul>
<li>Date</li>
<li>Enumeration</li>
</ul>
<h3>Using static data</h3>
<h3 translate>content.headline.static_data</h3>
<bpa-table [columnConfig]="config"
[columns]="['name', 'level', 'type', 'health', 'birthday']"
[dataset]="data"
(deleteEvent)="die()"
(editEvent)="view()"
translateKey="hero.components.hero-list."></bpa-table>
<h3>Using observables</h3>
<h3 translate>content.headline.observables</h3>
<bpa-table [columnConfig]="config"
[columns]="['name', 'level', 'type', 'health', 'birthday']"
[dataset]="data$ | async"
progressBar="auto"
(deleteEvent)="die()"
(editEvent)="view()"
translateKey="hero.components.hero-list."></bpa-table>

<h3>Options</h3>
<table class="tw-w-full">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>sortable (default: true)</td>
<td>set to false to disable sorting</td>
</tbody>
</table>

<br>
<h3 class="tw-p-4" translate>content.headline.options</h3>
<p class="tw-px-4" translate>content.text.options</p>
3 changes: 2 additions & 1 deletion src/app/components/table/table.component.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ColumnConfig, ColumnType } from '@bolzplatzarena/components';
import { delay, interval, mergeMap, of, startWith } from 'rxjs';
import { Hero } from '../../models/hero';
Expand All @@ -7,6 +7,7 @@ import { HeroType } from '../../models/hero-type';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TableComponent {
readonly data: Hero[] = [
Expand Down
59 changes: 59 additions & 0 deletions src/app/i18n/de.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
{
"content": {
"text": {
"1": "Dies ist eine Sammlungen von Komponenten welche auf Basis von Angular Material gebaut wurden. Zudem finden sich hier noch diverse Helferlein, welche euch das Arbeiten möglichst vereinfachen sollen.",
"examples": "Hier findet man viele praktische Beispiele.",
"table": "Einfache Implementierung der Tabelle, welche viele Sachen abnimmt und es daher einfach machen die Material Table zu nutzen.",
"column": "Erweiterte Spaltenkonfiguration ist verfügbar für:",
"options": "sortable (default: true) - auf \"false\" setzen um zu deaktivieren",
"enum": "Enums sind toll, Enums sind wichtig. Aber manchmal sind sie schwer zu nutzen, vor allem in Tempülates.<br>Hier findet ihr Tools die euch unterstützen.",
"enum_options": "Dies ist eine Methode um aus einem Enum eine Datenquelle für ein Dropdown zu machen und dabei die Werte auch noch zu übersetzen.",
"pipe": "Die Pipe gibt euch die Möglichkeit den Enum-Schlüssel in einer View zu nutzen. Dies ist vor allem dann wichtig, wenn das Enum nicht auf einem String basiert."
},
"headline": {
"first": "Bolzplatzarena Components",
"examples": "Beispiele",
"table": "Die Tabelle",
"options": "Optionen",
"enum": "Enum Helferlein",
"enum_options": "Select Options mit Enumerationen",
"pipe": "Pipe",
"static_data": "Verwendung von statischen Daten",
"observables": "Verwendung von Observables"
}
},
"bpa": {
"components": {
"table": {
"items-per-page": "Einträge pro Seite",
"page": "Seite {{ page }} von {{ amountPages }}",
"next-page": "Nächste Seite",
"last-page": "Letzte Seite",
"first-page": "Erste Seite",
"previous-page": "Vorherige Seite"
}
}
},
"hero": {
"components": {
"hero-list": {
"name": "Name",
"level": "Level",
"type": "Type",
"type.hammer": "Hammer",
"type.fighter": "Fighter",
"type.spy": "Spion",
"type.scientist": "Wissenschaftler",
"health": "Health",
"birthday": "Birthday",
"actions": "Actions"
}
},
"types": {
"fighter": "Fighter",
"hammer": "Thor",
"scientist": "Wissenschaftler",
"spy": "Spion"
}
}
}
44 changes: 34 additions & 10 deletions src/app/i18n/en.json
Original file line number Diff line number Diff line change
@@ -1,13 +1,37 @@
{
"content": {
"text": {
"1": "This is a collection of components build on top of angular material to make it easier to use it. Additionally little helpers could be found.",
"examples": "Collection of conmponents and utilities based on the angular material library.",
"table": "Easy way to use a table, without the need to implement the headers and columns by your own.",
"column": "Custom column configuration available for:",
"options": "sortable (default: true) - set to false to disable sorting",
"enum": "Sometimes it is hard to handle enums, but it is important to use an enum instead of just using a number or a string.\n <br>Here you can find some little helpers, which enable you to use enum for material select or in the tempalte as a\n string very easily.",
"enum_options": "Easy way to use a typescript enum as source of the material select.",
"pipe": "The pipe provides an easy way to get the selected key of an enumeration in the template."
},
"headline": {
"first": "Bolzplatzarena Components",
"examples": "Examples",
"table": "The table",
"options": "Options",
"enum": "Enum Helper",
"enum_options": "Select Options with enumeration",
"select": "Select options with enumeration",
"pipe": "Pipe",
"static_data": "Using of static data",
"observables": "Using of observables"
}
},
"bpa": {
"components": {
"table": {
"items-per-page": "Einträge pro Seite",
"page": "Seite {{ page }} von {{ amountPages }}",
"next-page": "Nächste Seite",
"last-page": "Letzte Seite",
"first-page": "Erste Seite",
"previous-page": "Vorherige Seite"
"items-per-page": "Items per page",
"page": "Page {{ page }} of {{ amountPages }}",
"next-page": "Next page",
"last-page": "Previous page",
"first-page": "First page",
"previous-page": "Last page"
}
}
},
Expand All @@ -19,8 +43,8 @@
"type": "Type",
"type.hammer": "Hammer",
"type.fighter": "Fighter",
"type.spy": "Spion",
"type.scientist": "Wissenschaftler",
"type.spy": "Spy",
"type.scientist": "Scientist",
"health": "Health",
"birthday": "Birthday",
"actions": "Actions"
Expand All @@ -29,8 +53,8 @@
"types": {
"fighter": "Fighter",
"hammer": "Thor",
"scientist": "Wissenschaftler",
"spy": "Spion"
"scientist": "Scientist",
"spy": "Spy"
}
}
}

0 comments on commit 95056ae

Please sign in to comment.