From b35e1bacd44faf9b10808ae39867edb701cbbd01 Mon Sep 17 00:00:00 2001
From: Jonas Winkler <jonas.winkler@jpwinkler.de>
Date: Wed, 28 Oct 2020 18:02:30 +0100
Subject: [PATCH] added some reusable form controls

---
 src-ui/src/app/app.module.ts                  |  8 +++-
 .../components/common/input/abstract-input.ts | 43 +++++++++++++++++++
 .../common/input/check/check.component.css    |  0
 .../common/input/check/check.component.html   |  5 +++
 .../input/check/check.component.spec.ts       | 25 +++++++++++
 .../common/input/check/check.component.ts     | 22 ++++++++++
 .../common/input/select/select.component.css  |  0
 .../common/input/select/select.component.html |  7 +++
 .../input/select/select.component.spec.ts     | 25 +++++++++++
 .../common/input/select/select.component.ts   | 31 +++++++++++++
 .../common/input/text/text.component.css      |  0
 .../common/input/text/text.component.html     |  5 +++
 .../common/input/text/text.component.spec.ts  | 25 +++++++++++
 .../common/input/text/text.component.ts       | 22 ++++++++++
 14 files changed, 217 insertions(+), 1 deletion(-)
 create mode 100644 src-ui/src/app/components/common/input/abstract-input.ts
 create mode 100644 src-ui/src/app/components/common/input/check/check.component.css
 create mode 100644 src-ui/src/app/components/common/input/check/check.component.html
 create mode 100644 src-ui/src/app/components/common/input/check/check.component.spec.ts
 create mode 100644 src-ui/src/app/components/common/input/check/check.component.ts
 create mode 100644 src-ui/src/app/components/common/input/select/select.component.css
 create mode 100644 src-ui/src/app/components/common/input/select/select.component.html
 create mode 100644 src-ui/src/app/components/common/input/select/select.component.spec.ts
 create mode 100644 src-ui/src/app/components/common/input/select/select.component.ts
 create mode 100644 src-ui/src/app/components/common/input/text/text.component.css
 create mode 100644 src-ui/src/app/components/common/input/text/text.component.html
 create mode 100644 src-ui/src/app/components/common/input/text/text.component.spec.ts
 create mode 100644 src-ui/src/app/components/common/input/text/text.component.ts

diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts
index 484fc5987..73c3244e3 100644
--- a/src-ui/src/app/app.module.ts
+++ b/src-ui/src/app/app.module.ts
@@ -33,6 +33,9 @@ import { AuthInterceptor } from './services/auth.interceptor';
 import { DocumentCardLargeComponent } from './components/document-list/document-card-large/document-card-large.component';
 import { DocumentCardSmallComponent } from './components/document-list/document-card-small/document-card-small.component';
 import { NgxFileDropModule } from 'ngx-file-drop';
+import { TextComponent } from './components/common/input/text/text.component';
+import { SelectComponent } from './components/common/input/select/select.component';
+import { CheckComponent } from './components/common/input/check/check.component';
 
 @NgModule({
   declarations: [
@@ -60,7 +63,10 @@ import { NgxFileDropModule } from 'ngx-file-drop';
     ToastsComponent,
     FilterEditorComponent,
     DocumentCardLargeComponent,
-    DocumentCardSmallComponent
+    DocumentCardSmallComponent,
+    TextComponent,
+    SelectComponent,
+    CheckComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src-ui/src/app/components/common/input/abstract-input.ts b/src-ui/src/app/components/common/input/abstract-input.ts
new file mode 100644
index 000000000..318b9de9f
--- /dev/null
+++ b/src-ui/src/app/components/common/input/abstract-input.ts
@@ -0,0 +1,43 @@
+import { Component, Directive, forwardRef, Input, OnInit } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { v4 as uuidv4 } from 'uuid';
+
+@Directive()
+export class AbstractInputComponent<T> implements OnInit, ControlValueAccessor {
+
+  constructor() { }
+
+  onChange = (newValue: T) => {};
+  
+  onTouched = () => {};
+
+  writeValue(newValue: any): void {
+    this.value = newValue
+  }
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  @Input()
+  title: string
+
+  @Input()
+  disabled = false;
+
+  value: T
+
+  ngOnInit(): void {
+    this.inputId = uuidv4()
+  }
+
+  inputId: string
+
+  @Input()
+  hint: string
+}
diff --git a/src-ui/src/app/components/common/input/check/check.component.css b/src-ui/src/app/components/common/input/check/check.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src-ui/src/app/components/common/input/check/check.component.html b/src-ui/src/app/components/common/input/check/check.component.html
new file mode 100644
index 000000000..4276eed7c
--- /dev/null
+++ b/src-ui/src/app/components/common/input/check/check.component.html
@@ -0,0 +1,5 @@
+<div class="form-group form-check">
+  <input type="checkbox" class="form-check-input" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" (blur)="onTouched()" [disabled]="disabled">
+  <label class="form-check-label" [for]="inputId">{{title}}</label>
+  <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
+</div>
\ No newline at end of file
diff --git a/src-ui/src/app/components/common/input/check/check.component.spec.ts b/src-ui/src/app/components/common/input/check/check.component.spec.ts
new file mode 100644
index 000000000..9649ed157
--- /dev/null
+++ b/src-ui/src/app/components/common/input/check/check.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CheckComponent } from './check.component';
+
+describe('CheckComponent', () => {
+  let component: CheckComponent;
+  let fixture: ComponentFixture<CheckComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CheckComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CheckComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src-ui/src/app/components/common/input/check/check.component.ts b/src-ui/src/app/components/common/input/check/check.component.ts
new file mode 100644
index 000000000..28b7ea4db
--- /dev/null
+++ b/src-ui/src/app/components/common/input/check/check.component.ts
@@ -0,0 +1,22 @@
+import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { v4 as uuidv4 } from 'uuid';
+import { AbstractInputComponent } from '../abstract-input';
+
+@Component({
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => CheckComponent),
+    multi: true
+  }],
+  selector: 'app-input-check',
+  templateUrl: './check.component.html',
+  styleUrls: ['./check.component.css']
+})
+export class CheckComponent extends AbstractInputComponent<boolean> {
+
+  constructor() { 
+    super()
+  }
+
+}
diff --git a/src-ui/src/app/components/common/input/select/select.component.css b/src-ui/src/app/components/common/input/select/select.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src-ui/src/app/components/common/input/select/select.component.html b/src-ui/src/app/components/common/input/select/select.component.html
new file mode 100644
index 000000000..7912423bd
--- /dev/null
+++ b/src-ui/src/app/components/common/input/select/select.component.html
@@ -0,0 +1,7 @@
+<div class="form-group">
+  <label [for]="inputId">{{title}}</label>
+  <select class="form-control" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" (blur)="onTouched()" [disabled]="disabled" [style.color]="textColor" [style.background]="backgroundColor">
+    <option *ngFor="let i of items" [ngValue]="i.id" class="form-control">{{i.name}}</option>
+  </select>
+  <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
+</div>
\ No newline at end of file
diff --git a/src-ui/src/app/components/common/input/select/select.component.spec.ts b/src-ui/src/app/components/common/input/select/select.component.spec.ts
new file mode 100644
index 000000000..2fb4207eb
--- /dev/null
+++ b/src-ui/src/app/components/common/input/select/select.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SelectComponent } from './select.component';
+
+describe('SelectComponent', () => {
+  let component: SelectComponent;
+  let fixture: ComponentFixture<SelectComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SelectComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SelectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src-ui/src/app/components/common/input/select/select.component.ts b/src-ui/src/app/components/common/input/select/select.component.ts
new file mode 100644
index 000000000..ba1dfe1c7
--- /dev/null
+++ b/src-ui/src/app/components/common/input/select/select.component.ts
@@ -0,0 +1,31 @@
+import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { v4 as uuidv4 } from 'uuid';
+import { AbstractInputComponent } from '../abstract-input';
+
+@Component({
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => SelectComponent),
+    multi: true
+  }],
+  selector: 'app-input-select',
+  templateUrl: './select.component.html',
+  styleUrls: ['./select.component.css']
+})
+export class SelectComponent extends AbstractInputComponent<number> {
+
+  constructor() {
+    super()
+   }
+
+  @Input()
+  items: any[]
+
+  @Input()
+  textColor: any
+
+  @Input()
+  backgroundColor: any
+
+}
diff --git a/src-ui/src/app/components/common/input/text/text.component.css b/src-ui/src/app/components/common/input/text/text.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src-ui/src/app/components/common/input/text/text.component.html b/src-ui/src/app/components/common/input/text/text.component.html
new file mode 100644
index 000000000..3a43b052f
--- /dev/null
+++ b/src-ui/src/app/components/common/input/text/text.component.html
@@ -0,0 +1,5 @@
+<div class="form-group">
+  <label [for]="inputId">{{title}}</label>
+  <input type="text" class="form-control" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)">
+  <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
+</div>
\ No newline at end of file
diff --git a/src-ui/src/app/components/common/input/text/text.component.spec.ts b/src-ui/src/app/components/common/input/text/text.component.spec.ts
new file mode 100644
index 000000000..24b1e9e65
--- /dev/null
+++ b/src-ui/src/app/components/common/input/text/text.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TextComponent } from './text.component';
+
+describe('TextComponent', () => {
+  let component: TextComponent;
+  let fixture: ComponentFixture<TextComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TextComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TextComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src-ui/src/app/components/common/input/text/text.component.ts b/src-ui/src/app/components/common/input/text/text.component.ts
new file mode 100644
index 000000000..d4dc1c587
--- /dev/null
+++ b/src-ui/src/app/components/common/input/text/text.component.ts
@@ -0,0 +1,22 @@
+import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { v4 as uuidv4 } from 'uuid';
+import { AbstractInputComponent } from '../abstract-input';
+
+@Component({
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => TextComponent),
+    multi: true
+  }],
+  selector: 'app-input-text',
+  templateUrl: './text.component.html',
+  styleUrls: ['./text.component.css']
+})
+export class TextComponent extends AbstractInputComponent<string> {
+
+  constructor() {
+    super()
+  }
+
+}