Merge pull request #6 from bolzplatzarena/structured-example

feat: separate different documentations
bolzplatzarena · Jun 12, 2022 · 862a6e2 · 862a6e2
2 parents 9703c7b + 99ed7a3
commit 862a6e2
Show file tree

Hide file tree

Showing 10 changed files with 183 additions and 150 deletions.
diff --git a/projects/components/.eslintrc.json b/projects/components/.eslintrc.json
@@ -10,8 +10,8 @@
       ],
       "parserOptions": {
         "project": [
-          "projects/components/tsconfig.lib.json",
-          "projects/components/tsconfig.spec.json"
+          "tsconfig.lib.json",
+          "tsconfig.spec.json"
         ],
         "createDefaultProgram": true
       },

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,42 +1,12 @@
 <section class="tw-p-4">
   <h1>Bolzplatzarena Component Examples</h1>
   <p>Collection of conmponents and utilities based on the angular material library.</p>
-  <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>
-  <ul>
-    <li>Date</li>
-    <li>Enumeration</li>
-  </ul>
-  <bpa-table [columnConfig]="config"
-             [columns]="['name', 'level', 'type', 'health', 'birthday']"
-             [dataset]="data"
-             (deleteEvent)="die()"
-             (editEvent)="view()"
-             translateKey="hero.components.hero-list."></bpa-table>
-  <h3>Options</h3>
-  sortable (default: true) - set to false to disable sorting
-  <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>
-  <mat-form-field>
-    <mat-label>Hero Type</mat-label>
-    <mat-select>
-      <mat-option *ngFor="let item of items" [value]="item.value">
-        {{ item.label ?? (item.labelTranslateKey ! | translate) }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
-  <h3>Pipe</h3>
-  Original value: {{ HeroType.Scientist }}
-  <code>
-    Original value: {{ '&#123;&#123; HeroType.Scientist &#125;&#125;' }}
-  </code>
-  <br>As String: {{ HeroType.Scientist | enumKey : HeroType }}
-  <code>
-    As String: {{ '&#123;&#123; HeroType.Scientist | enumKey : HeroType &#125;&#125;' }}
-  </code>
+  <mat-tab-group>
+    <mat-tab label="Table">
+      <app-table></app-table>
+    </mat-tab>
+    <mat-tab label="Enums">
+      <app-enum></app-enum>
+    </mat-tab>
+  </mat-tab-group>
 </section>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,118 +1,8 @@
 import { Component } from '@angular/core';
-import { ColumnConfig, ColumnType, translatableFrom } from '@bolzplatzarena/components';
-
-enum HeroType {
-  Fighter,
-  Hammer,
-  Scientist,
-  Spy
-}
-
-interface Hero {
-  name: string;
-  level: number;
-  type: HeroType;
-  health: number;
-  birthday: Date;
-}
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
 })
 export class AppComponent {
-  readonly data: Hero[] = [
-    {
-      name: 'Thor',
-      level: 100,
-      type: HeroType.Hammer,
-      health: 1000,
-      birthday: new Date(1970, 11, 14),
-    },
-    {
-      name: 'Captain',
-      level: 100,
-      type: HeroType.Fighter,
-      health: 1000,
-      birthday: new Date(1930, 1, 1),
-    },
-    {
-      name: 'Captain America',
-      level: 100,
-      type: HeroType.Fighter,
-      health: 12000,
-      birthday: new Date(1934, 8, 18),
-    },
-    {
-      name: 'Nick Fury',
-      level: 100,
-      type: HeroType.Fighter,
-      health: 10400,
-      birthday: new Date(1932, 7, 1),
-    },
-    {
-      name: 'Black Window',
-      level: 120,
-      type: HeroType.Spy,
-      health: 2000,
-      birthday: new Date(1931, 1, 1),
-    },
-    {
-      name: 'Iron Man',
-      level: 80,
-      type: HeroType.Scientist,
-      health: 3000,
-      birthday: new Date(1931, 1, 1),
-    },
-    {
-      name: 'Hulk',
-      level: 120,
-      type: HeroType.Fighter,
-      health: 1000,
-      birthday: new Date(1931, 1, 23),
-    },
-    {
-      name: 'Doc Brown',
-      level: 120,
-      type: HeroType.Scientist,
-      health: 1000,
-      birthday: new Date(1931, 1, 12),
-    },
-    {
-      name: 'Spider Man',
-      level: 120,
-      type: HeroType.Fighter,
-      health: 4000,
-      birthday: new Date(1991, 3, 1),
-    },
-    {
-      name: 'Hawk Eye',
-      level: 110,
-      type: HeroType.Fighter,
-      health: 6000,
-      birthday: new Date(1991, 2, 1),
-    },
-    {
-      name: 'Loki',
-      level: 110,
-      type: HeroType.Fighter,
-      health: 1000,
-      birthday: new Date(1991, 1, 1),
-    },
-  ];
-  readonly config: { [key: string]: ColumnConfig } = {
-    'birthday': { type: ColumnType.Date },
-    'type': { type: ColumnType.Enum, args: HeroType },
-  };
-
-  readonly items = translatableFrom(HeroType, 'hero.types');
-  readonly HeroType = HeroType;
-
-  die(): void {
-    alert('Die');
-  }
-
-  view() {
-    alert('View');
-  }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -7,17 +7,23 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { AppComponent } from './app.component';
 
 import * as en from './i18n/en.json';
+import { TableComponent } from './components/table/table.component';
+import { EnumComponent } from './components/enum/enum.component';
+import { MatTabsModule } from "@angular/material/tabs";
 
 @NgModule({
   declarations: [
     AppComponent,
+    TableComponent,
+    EnumComponent,
   ],
   imports: [
     BrowserModule,
     ComponentsModule,
     NoopAnimationsModule,
     TranslateModule.forRoot(),
     MatSelectModule,
+    MatTabsModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

diff --git a/src/app/components/enum/enum.component.html b/src/app/components/enum/enum.component.html
@@ -0,0 +1,23 @@
+<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>
+<mat-form-field>
+  <mat-label>Hero Type</mat-label>
+  <mat-select>
+    <mat-option *ngFor="let item of items" [value]="item.value">
+      {{ item.label ?? (item.labelTranslateKey ! | translate) }}
+    </mat-option>
+  </mat-select>
+</mat-form-field>
+<h3>Pipe</h3>
+Original value: {{ HeroType.Scientist }}
+<code>
+  Original value: {{ '&#123;&#123; HeroType.Scientist &#125;&#125;' }}
+</code>
+<br>As String: {{ HeroType.Scientist | enumKey : HeroType }}
+<code>
+  As String: {{ '&#123;&#123; HeroType.Scientist | enumKey : HeroType &#125;&#125;' }}
+</code>
diff --git a/src/app/components/enum/enum.component.ts b/src/app/components/enum/enum.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { translatableFrom } from "@bolzplatzarena/components";
+import { HeroType } from '../../models/hero-type';
+
+@Component({
+  selector: 'app-enum',
+  templateUrl: './enum.component.html',
+})
+export class EnumComponent {
+  readonly items = translatableFrom(HeroType, 'hero.types');
+  readonly HeroType = HeroType;
+}
diff --git a/src/app/components/table/table.component.html b/src/app/components/table/table.component.html
@@ -0,0 +1,15 @@
+<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>
+<ul>
+  <li>Date</li>
+  <li>Enumeration</li>
+</ul>
+<bpa-table [columnConfig]="config"
+           [columns]="['name', 'level', 'type', 'health', 'birthday']"
+           [dataset]="data"
+           (deleteEvent)="die()"
+           (editEvent)="view()"
+           translateKey="hero.components.hero-list."></bpa-table>
+<h3>Options</h3>
+sortable (default: true) - set to false to disable sorting
diff --git a/src/app/components/table/table.component.ts b/src/app/components/table/table.component.ts
@@ -0,0 +1,102 @@
+import { Component } from '@angular/core';
+import { ColumnConfig, ColumnType } from "@bolzplatzarena/components";
+import { Hero } from '../../models/hero';
+import { HeroType } from "../../models/hero-type";
+
+@Component({
+  selector: 'app-table',
+  templateUrl: './table.component.html',
+})
+export class TableComponent {
+  readonly data: Hero[] = [
+    {
+      name: 'Thor',
+      level: 100,
+      type: HeroType.Hammer,
+      health: 1000,
+      birthday: new Date(1970, 11, 14),
+    },
+    {
+      name: 'Captain',
+      level: 100,
+      type: HeroType.Fighter,
+      health: 1000,
+      birthday: new Date(1930, 1, 1),
+    },
+    {
+      name: 'Captain America',
+      level: 100,
+      type: HeroType.Fighter,
+      health: 12000,
+      birthday: new Date(1934, 8, 18),
+    },
+    {
+      name: 'Nick Fury',
+      level: 100,
+      type: HeroType.Fighter,
+      health: 10400,
+      birthday: new Date(1932, 7, 1),
+    },
+    {
+      name: 'Black Window',
+      level: 120,
+      type: HeroType.Spy,
+      health: 2000,
+      birthday: new Date(1931, 1, 1),
+    },
+    {
+      name: 'Iron Man',
+      level: 80,
+      type: HeroType.Scientist,
+      health: 3000,
+      birthday: new Date(1931, 1, 1),
+    },
+    {
+      name: 'Hulk',
+      level: 120,
+      type: HeroType.Fighter,
+      health: 1000,
+      birthday: new Date(1931, 1, 23),
+    },
+    {
+      name: 'Doc Brown',
+      level: 120,
+      type: HeroType.Scientist,
+      health: 1000,
+      birthday: new Date(1931, 1, 12),
+    },
+    {
+      name: 'Spider Man',
+      level: 120,
+      type: HeroType.Fighter,
+      health: 4000,
+      birthday: new Date(1991, 3, 1),
+    },
+    {
+      name: 'Hawk Eye',
+      level: 110,
+      type: HeroType.Fighter,
+      health: 6000,
+      birthday: new Date(1991, 2, 1),
+    },
+    {
+      name: 'Loki',
+      level: 110,
+      type: HeroType.Fighter,
+      health: 1000,
+      birthday: new Date(1991, 1, 1),
+    },
+  ];
+  readonly config: { [key: string]: ColumnConfig } = {
+    'birthday': { type: ColumnType.Date },
+    'type': { type: ColumnType.Enum, args: HeroType },
+  };
+
+  die(): void {
+    alert('Die');
+  }
+
+  view() {
+    alert('View');
+  }
+}
diff --git a/src/app/models/hero-type.ts b/src/app/models/hero-type.ts
@@ -0,0 +1,6 @@
+export enum HeroType {
+  Fighter,
+  Hammer,
+  Scientist,
+  Spy
+}
diff --git a/src/app/models/hero.ts b/src/app/models/hero.ts
@@ -0,0 +1,9 @@
+import { HeroType } from "./hero-type";
+
+export interface Hero {
+  name: string;
+  level: number;
+  type: HeroType;
+  health: number;
+  birthday: Date;
+}