Added timer form component and small refactor

src/app/app.module.ts

@@ -1,14 +1,18 @@
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { TimerComponent } from './timer/timer.component';
 import { WrapperComponent } from './wrapper/wrapper.component';
 import { TimerChangerComponent } from './timerChanger/timerChanger.component';
-import { InputComponent } from './timerChanger/input/input.component';
-import { ButtonComponent } from './button/button.component';
+import { InputComponent } from './components/input/input.component';
+import { ButtonComponent } from './components/button/button.component';
+import { FormComponent } from './form/form.component';
+import { TimerFormComponent } from './components/timerform/timerform.component';
+import { ControlValueAccessorConnector } from './components/inputcontrol/control-value-accessor';
+import { InputControlComponent } from './components/inputcontrol/input-control.component';
 
 @NgModule({
   declarations: [
@@ -17,14 +21,19 @@ import { ButtonComponent } from './button/button.component';
     WrapperComponent,
     TimerChangerComponent,
     InputComponent,
-    ButtonComponent
+    ButtonComponent,
+    FormComponent,
+    TimerFormComponent,
+    InputControlComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    FormsModule
+    FormsModule,
+    ReactiveFormsModule
+  ],
+  providers: [ControlValueAccessorConnector,
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/components/button/button.component.html

@@ -0,0 +1,5 @@
+<button
+  [disabled]="btnType == 'submit' ? isDisabled : false"
+  [type] = "btnType == 'submit' ? btnType : 'button'"
+  [ngClass] = "btnType || {}"
+  (click)="onClickButton($event)">{{value}}</button>

src/app/button/button.component.ts → src/app/components/button/button.component.ts

@@ -1,19 +1,19 @@
-import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
   selector: 'app-button',
   templateUrl: './button.component.html',
-  styleUrls: ['./button.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush
 
 })
 export class ButtonComponent {
 
-  @Input() value: string = '';
+  @Input() value?: string;
   @Output() onClick: EventEmitter<object> = new EventEmitter();
+  @Input() btnType?: string;
+  @Input() isDisabled?: boolean;
 
   public onClickButton(event: Event): void {
     this.onClick.emit(event);
   }
-
 }

src/app/timerChanger/input/input.component.css → src/app/components/input/input.component.css

@@ -15,3 +15,15 @@
   border: none;
   border-radius: 50%;
 }
+
+.timer-count{
+  width: 200px;
+  height: 20px;
+  margin-left: 40px;
+  margin-top: 30px;
+  text-align: center;
+  font-size: 18px;
+  outline: none;
+  border: none;
+  border-radius: 15px;
+}

src/app/components/input/input.component.html

@@ -0,0 +1,6 @@
+<input
+  [ngClass]="type == 'text' ? 'timer-count' : 'input'"
+  [type]="type == 'form' ? 'text' : type"
+  ngModel
+  (ngModelChange)="onDetectChange($event)"
+  [ngModel]="value">

src/app/components/input/input.component.ts

@@ -0,0 +1,20 @@
+import { Component, Output, EventEmitter, ChangeDetectionStrategy, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-input',
+  templateUrl: './input.component.html',
+  styleUrls: ['./input.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class InputComponent {
+  @Output() modelChange: EventEmitter<string> = new EventEmitter();
+  @Input() type?: string;
+  @Input() value?: string;
+  @Output() timerFormSubmit: EventEmitter<object> = new EventEmitter();
+  @Output() popupOpened: EventEmitter<object> = new EventEmitter();
+  onDetectChange(event: string): void{
+    if (this.modelChange) {
+      this.modelChange.emit(event);
+    }
+  }
+}

src/app/components/inputcontrol/control-value-accessor.ts

@@ -0,0 +1,34 @@
+import { AbstractControl, ControlContainer, ControlValueAccessor, FormControl, FormControlDirective } from '@angular/forms';
+import { Injectable, Injector, Input, ViewChild } from '@angular/core';
+
+@Injectable()
+export class ControlValueAccessorConnector implements ControlValueAccessor {
+  @ViewChild(FormControlDirective, {static: true})
+  formControlDirective?: FormControlDirective;
+
+  @Input() formControl?: FormControl;
+  @Input() formControlName: string | (string | number[]) = '';
+
+  get control(): AbstractControl | any {
+    return this.formControl || this.controlContainer.control?.get(this.formControlName);
+  }
+
+  constructor(private injector: Injector) {
+  }
+
+  get controlContainer(): ControlContainer {
+    return  this.injector.get(ControlContainer) || {};
+  }
+
+  registerOnTouched(fn: any): void {
+    this.formControlDirective?.valueAccessor?.registerOnTouched(fn);
+  }
+
+  registerOnChange(fn: any): void {
+    this.formControlDirective?.valueAccessor?.registerOnChange(fn);
+  }
+
+  writeValue(obj: any): void {
+    this.formControlDirective?.valueAccessor?.writeValue(obj);
+  }
+}

src/app/components/inputcontrol/input-control.component.ts

@@ -0,0 +1,28 @@
+import { Component, Injector, Input } from '@angular/core';
+import { FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlValueAccessorConnector } from './control-value-accessor';
+
+interface InputStyle {
+  ['border-color']?: string;
+  ['box-shadow']?: string;
+}
+
+@Component({
+  selector: 'app-input-control',
+  template: `<input [type]="type" [ngStyle]="inputStyle || {}" [autocomplete]="autocomplete" [className]="inputClass" [formControl]="control">`,
+  providers: [{
+    provide: NG_VALUE_ACCESSOR, useExisting: InputControlComponent, multi: true
+  }]
+})
+export class InputControlComponent extends ControlValueAccessorConnector {
+  @Input() formControl?: FormControl;
+  @Input() formControlName: string = '';
+  @Input() type?: string;
+  @Input() inputClass?: string;
+  @Input() autocomplete?: string;
+  @Input() inputStyle?: InputStyle;
+
+  constructor(injector: Injector) {
+    super(injector);
+  }
+ }

src/app/components/timerform/timerform.component.css

@@ -0,0 +1,3 @@
+label{
+  font-family: sans-serif;
+}

src/app/components/timerform/timerform.component.html

@@ -0,0 +1,18 @@
+<div formGroupName="timerForm">
+  <div class="form-label-group">
+    <label>Timer Name</label>
+    <app-input-control [type]="'text'" [inputClass]="'input-control'" [inputStyle]="{'border-color':name?.dirty && !name?.valid ? '#ff8264' : '', 'box-shadow':!name?.valid && name?.dirty ? '0 0 0 0.2rem rgba(255, 20, 0, 0.25)' : ''}" [autocomplete]="'off'" [formControlName]="'name'"></app-input-control>
+  </div>
+  <div class="form-label-group">
+    <label>Description</label>
+    <app-input-control [type]="'text'" [inputClass]="'input-control'" [autocomplete]="'off'" [formControlName]="'description'"></app-input-control>
+  </div>
+  <div class="form-label-group">
+    <label>Comment</label>
+    <app-input-control [type]="'text'" [inputClass]="'input-control'" [autocomplete]="'off'" [formControlName]="'comment'"></app-input-control>
+  </div>
+  <div class="form-label-group">
+    <label>Timer Count</label>
+    <app-input-control [type]="'number'" [inputClass]="'input-control'" [autocomplete]="'off'" [formControlName]="'timerCount'" [inputStyle]="{'border-color':timerCount?.dirty && !timerCount?.valid ? '#ff8264' : '', 'box-shadow':!timerCount?.valid && timerCount?.dirty ? '0 0 0 0.2rem rgba(255, 20, 0, 0.25)' : ''}"></app-input-control>
+  </div>
+</div>

src/app/components/timerform/timerform.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+import {AbstractControl, ControlContainer, FormBuilder, FormGroup, FormGroupDirective, Validators} from '@angular/forms';
+
+@Component({
+  selector: 'app-timerform',
+  templateUrl: './timerform.component.html',
+  styleUrls: ['./timerform.component.css'],
+  viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }],
+})
+export class TimerFormComponent implements OnInit {
+  form: FormGroup = this.ctrlContainer.form;
+
+  constructor(
+    private ctrlContainer: FormGroupDirective,
+    private formBuilder: FormBuilder) { }
+
+    get name(): AbstractControl | null {
+    return this.form?.controls?.timerForm?.get('name');
+    }
+
+    get timerCount(): AbstractControl | null {
+      return this.form?.controls?.timerForm?.get('timerCount');
+    }
+
+  ngOnInit(): void {
+    this.form = this.ctrlContainer.form;
+    this.form.addControl('timerForm',
+      this.formBuilder.group({
+        name: [null, [ Validators.required,
+          Validators.pattern('^(?=.*[a-zA-Z])[a-zA-Z0-9 ]+$'),
+          Validators.maxLength(28)
+        ]],
+        description: [null, null],
+        comment: [null, null],
+        timerCount: [null, [Validators.required, Validators.min(1), Validators.max(50)]]
+      }));
+  }
+}

src/app/form/form.component.css

@@ -0,0 +1,26 @@
+.modal-form {
+  z-index: 1000;
+  position: fixed;
+  top: 150px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  font-family: sans-serif;
+  width: 500px;
+}
+
+.modal-form-body {
+  background: #fff;
+  margin: 40px;
+  padding: 20px;
+}
+
+.modal-form-background {
+  z-index: 900;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  opacity: 0.95;
+}

src/app/form/form.component.html

@@ -0,0 +1,12 @@
+<div class="modal-form">
+  <div class="modal-form-body">
+    <div>
+      <form [formGroup]="mainForm" novalidate (ngSubmit)="onSubmit()">
+        <app-timerform></app-timerform>
+        <app-button [value]="'Add Timer'" [btnType]="'submit'" [isDisabled]="mainForm.invalid"></app-button>
+        <app-button [btnType]="'closeForm'" (click)="closeDialog()" [value]="'Close'"></app-button>
+      </form>
+    </div>
+  </div>
+</div>
+<div class="modal-form-background"></div>

src/app/form/form.component.ts

@@ -0,0 +1,39 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { TimerInfo } from '../interfaces/timer';
+
+@Component({
+  selector: 'app-form',
+  templateUrl: './form.component.html',
+  styleUrls: ['./form.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+
+})
+export class FormComponent {
+
+  @Output() popupOpened: EventEmitter<object> = new EventEmitter();
+  @Output() timerFormSubmit: EventEmitter<TimerInfo> = new EventEmitter<TimerInfo>();
+  mainForm = new FormGroup({});
+
+  get timerName(): string {
+    return this.mainForm.value?.timerForm?.name;
+  }
+  get timerDescription(): string {
+    return this.mainForm.value?.timerForm?.description;
+  }
+  get timerComment(): string {
+    return this.mainForm.value?.timerForm?.comment;
+  }
+  get timerCount(): number {
+    return this.mainForm.value?.timerForm?.timerCount;
+  }
+  closeDialog(): void{
+    this.popupOpened.emit();
+  }
+
+  onSubmit(): void {
+    this.popupOpened.emit();
+    this.timerFormSubmit.emit({ name : this.timerName, description: this.timerDescription, comment: this.timerComment,
+      count: this.timerCount });
+  }
+}

src/app/interfaces/timer.ts

@@ -0,0 +1,6 @@
+export interface TimerInfo {
+  name: string;
+  description: string;
+  comment: string;
+  count: number;
+}