Merge pull request #3 from bolzplatzarena/BOL-11

- support the enum as a property

package.json

@@ -8,6 +8,7 @@
     "watch": "node_modules/.bin/ng build --watch --configuration development",
     "test-component": "node_modules/.bin/jest --coverage --config ./projects/components/jest.config.js",
     "tailwind": "npx tailwindcss-cli@latest build -o ./projects/styles/tailwind.scss",
+    "lib": "ng build components",
     "build-lib": "npm run tailwind && ng build components",
     "lint": "ng lint"
   },
@@ -27,7 +28,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@ngx-translate/core": "^14.0.0",
     "rxjs": "~7.4.0",
-    "tailwindcss": "^2.2.19",
+    "tailwindcss": "^3.0.1",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },

projects/components/README.md

@@ -41,14 +41,28 @@ In the template of your components you can add the following
 
 The only inputs needed are `columns` and `dataset`.
 
+### Actions
+
 If you listen to the `delete` event, the corresponding action icon is automatically added to th columns.
 
 If you listen to the `edit` event, the corresponding action icon is automatically added to th columns.
 
+### Column Configuration
+
 The column configuration can be used for custom columns:
 
 ```
   readonly config: { [key: string]: ColumnConfig } = {
     'birthday': { type: ColumnType.Date },
+    'type': { type: ColumnType.Enum, args: MyEnum },
   };
 ```
+
+#### Date
+
+The input needs to be a date and will be formatted probably
+
+#### Enum
+
+This configuration can be used if a property of the data is an enum type. The tables generates are translate key
+automatically, so you can use the translate config file to give the enum value a term.

projects/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bolzplatzarena/components",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "author": "Thomas Renger",
   "repository": {
     "type": "git",

projects/components/src/lib/components.module.ts

@@ -8,10 +8,12 @@ import { faAddressCard } from '@fortawesome/free-solid-svg-icons/faAddressCard';
 import { faSkullCrossbones } from '@fortawesome/free-solid-svg-icons/faSkullCrossbones';
 import { TranslateModule } from '@ngx-translate/core';
 import { TableComponent } from './components/table/table.component';
+import { EnumKeyPipe } from './pipes/enum-key.pipe';
 
 @NgModule({
   declarations: [
     TableComponent,
+    EnumKeyPipe,
   ],
   imports: [
     CommonModule,

projects/components/src/lib/components/table/table.component.html

@@ -6,6 +6,9 @@
         <ng-container *ngSwitchCase="ColumnType.Date">
           {{ element[column] | date }}
         </ng-container>
+        <ng-container *ngSwitchCase="ColumnType.Enum">
+          {{ (translateKey + column + '.' + (element[column] | enumKey : columnConfig ![column].args !)) | lowercase | translate }}
+        </ng-container>
         <ng-container *ngSwitchDefault>
           {{ element[column] }}
         </ng-container>

projects/components/src/lib/components/table/table.component.ts

@@ -1,13 +1,16 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
 import { IconName } from '@fortawesome/fontawesome-svg-core';
+import { Dictionary } from '../../models/dictionary.model';
 
 export enum ColumnType {
   Date,
+  Enum,
 }
 
 export interface ColumnConfig {
   type: ColumnType,
+  args?: Dictionary<unknown>,
 }
 
 @Component({

projects/components/src/lib/models/dictionary.model.ts

@@ -0,0 +1,3 @@
+export interface Dictionary<T> {
+  [key: string]: T;
+}

projects/components/src/lib/pipes/enum-key.pipe.ts

@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Dictionary } from '../models/dictionary.model';
+import { keyString } from '../utils/utils';
+
+@Pipe({ name: 'enumKey' })
+export class EnumKeyPipe implements PipeTransform {
+  transform(value: unknown, type: Dictionary<unknown>): string {
+    return keyString(type, value) ?? '';
+  }
+}

projects/components/src/lib/utils/utils.ts

@@ -0,0 +1,8 @@
+import { Dictionary } from '../models/dictionary.model';
+
+export function keyString<T>(types: Dictionary<unknown>, enumValue: T): string | undefined {
+  return Object
+    .entries(types)
+    .filter(([key]) => isNaN(Number(key)))
+    .find(([, value]) => value === enumValue)?.[0];
+}

projects/components/src/public-api.ts

@@ -1,5 +1,5 @@
 // services
-export * from './lib/components.service';
+export * from './lib/services/components.service';
 //modules
 export * from './lib/components.module';
 // components

projects/styles/tailwind.scss

@@ -1,67 +1,3 @@
-*, ::before, ::after {
-  --tw-border-opacity: 1;
-  border-color: rgba(229, 231, 235, var(--tw-border-opacity))
-}
-
 .tw-w-full {
   width: 100% !important
 }
-
-@keyframes tw-spin {
-  to {
-    transform: rotate(360deg)
-  }
-}
-
-@keyframes tw-ping {
-  75%, 100% {
-    transform: scale(2);
-    opacity: 0
-  }
-}
-
-@keyframes tw-pulse {
-  50% {
-    opacity: .5
-  }
-}
-
-@keyframes tw-bounce {
-  0%, 100% {
-    transform: translateY(-25%);
-    animation-timing-function: cubic-bezier(0.8,0,1,1)
-  }
-
-  50% {
-    transform: none;
-    animation-timing-function: cubic-bezier(0,0,0.2,1)
-  }
-}
-
-*, ::before, ::after {
-  --tw-shadow: 0 0 #0000
-}
-
-*, ::before, ::after {
-  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgba(59, 130, 246, 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000
-}
-
-@media (min-width: 640px) {
-}
-
-@media (min-width: 768px) {
-}
-
-@media (min-width: 1024px) {
-}
-
-@media (min-width: 1280px) {
-}
-
-@media (min-width: 1536px) {
-}

src/app/app.component.ts

@@ -1,29 +1,40 @@
 import { Component } from '@angular/core';
 import { ColumnConfig, ColumnType } from '@bolzplatzarena/components';
 
+enum HeroType {
+  Fighter,
+  Hammer,
+}
+
 interface Hero {
   name: string;
   level: number;
-  type: string;
+  type: HeroType;
   health: number;
   birthday: Date;
 }
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
   readonly data: Hero[] = [{
     name: 'Thor',
     level: 100,
-    type: 'Hammer',
+    type: HeroType.Hammer,
     health: 1000,
     birthday: new Date(1970, 1, 1),
+  }, {
+    name: 'Captain',
+    level: 100,
+    type: HeroType.Fighter,
+    health: 1000,
+    birthday: new Date(1930, 1, 1),
   }];
   readonly config: { [key: string]: ColumnConfig } = {
     'birthday': { type: ColumnType.Date },
+    'type': { type: ColumnType.Enum, args: HeroType },
   };
 
   die(): void {

src/app/app.module.ts

@@ -3,8 +3,6 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ComponentsModule } from '@bolzplatzarena/components';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
-
-import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
 import * as en from './i18n/en.json';
@@ -14,7 +12,6 @@ import * as en from './i18n/en.json';
     AppComponent,
   ],
   imports: [
-    AppRoutingModule,
     BrowserModule,
     ComponentsModule,
     NoopAnimationsModule,

src/app/i18n/en.json

@@ -5,6 +5,8 @@
         "name": "Name",
         "level": "Level",
         "type": "Type",
+        "type.hammer": "Hammer",
+        "type.fighter": "Fighter",
         "health": "Health",
         "birthday": "Birthday",
         "actions": "Actions"

tailwind.config.js

@@ -7,7 +7,13 @@ module.exports = {
       "./projects/**/*.{html,ts}",
     ]
   },
-  darkMode: false, // or 'media' or 'class'
+  content: {
+    enabled: true,
+    content: [
+      "./src/**/*.{html,ts}",
+      "./projects/**/*.{html,ts}",
+    ]
+  },
   theme: {
     extend: {},
   },