From d3a88424f9c74b1d14454e2cbf4de921b6d890d9 Mon Sep 17 00:00:00 2001
From: Sue Lockwood <deathbearbrown@gmail.com>
Date: Wed, 2 Sep 2020 13:54:57 -0700
Subject: [PATCH 1/3] Add demo field to form

---
 .../submission-form.component.html            |  8 +++
 .../submission-form.component.ts              | 56 ++++++++++++++++++-
 2 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/src/app/modules/sample-providers/components/submission-form/submission-form.component.html b/src/app/modules/sample-providers/components/submission-form/submission-form.component.html
index 2e8324c..a4eb366 100644
--- a/src/app/modules/sample-providers/components/submission-form/submission-form.component.html
+++ b/src/app/modules/sample-providers/components/submission-form/submission-form.component.html
@@ -23,6 +23,14 @@
       Email must be in a valid format.
     </div>
   </div>
+  <div>
+    <label>
+      Upload Demo track
+    </label>
+    <input #fileInput type="file"/>
+    <audio #player src="" type="audio/mp3" controls></audio>
+  </div>
+
   <button type="submit" [disabled]="!this.form.valid || !this.form.dirty">
   Save
   </button>
diff --git a/src/app/modules/sample-providers/components/submission-form/submission-form.component.ts b/src/app/modules/sample-providers/components/submission-form/submission-form.component.ts
index a6beea4..fbd0206 100644
--- a/src/app/modules/sample-providers/components/submission-form/submission-form.component.ts
+++ b/src/app/modules/sample-providers/components/submission-form/submission-form.component.ts
@@ -1,22 +1,74 @@
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Output,
+  EventEmitter,
+  Input,
+  ElementRef,
+  ViewChild,
+  HostListener,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+} from '@angular/core';
 import {
   AbstractControl,
   FormBuilder,
   FormGroup,
   Validators,
+  NG_VALUE_ACCESSOR,
+  ControlValueAccessor,
 } from '@angular/forms';
 
 @Component({
   selector: 'app-submission-form',
   templateUrl: './submission-form.component.html',
   styleUrls: ['./submission-form.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: SubmissionFormComponent,
+      multi: true,
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class SubmissionFormComponent implements OnInit {
+export class SubmissionFormComponent implements OnInit, ControlValueAccessor {
   form: FormGroup;
+  // demo file name
+  file: File;
+
+  @ViewChild('player', { read: ElementRef }) player: ElementRef;
 
   @Output()
   submitForm = new EventEmitter<any>();
 
+  @Input()
+  onChange = (file: File) => {};
+
+  @HostListener('change', ['$event.target.files'])
+  emitFiles(event: FileList) {
+    this.file = event && event.item(0);
+    this.addAudioFile();
+    this.onChange(this.file);
+  }
+
+  registerOnChange(fn) {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn) {}
+
+  /** @ignore */
+  writeValue(value) {
+    if (value === null && this.file) {
+      this.file = null;
+    }
+  }
+
+  addAudioFile() {
+    this.player.nativeElement.src = URL.createObjectURL(this.file);
+  }
+
   constructor(private formBuilder: FormBuilder) {}
 
   ngOnInit(): void {

From 8405b57107405c48f704dca2eab849744aa6c6f8 Mon Sep 17 00:00:00 2001
From: Sue Lockwood <deathbearbrown@gmail.com>
Date: Thu, 3 Sep 2020 07:24:38 -0700
Subject: [PATCH 2/3] Made code way more DRY ;)

---
 .../form-control/form-control.component.scss  | 16 +++++++++++
 .../form-control/form-control.component.ts    | 24 +++++++++++++++++
 .../submission-form.component.html            | 27 ++++++++++---------
 .../sample-providers.module.ts                |  7 ++++-
 4 files changed, 61 insertions(+), 13 deletions(-)
 create mode 100644 src/app/modules/sample-providers/components/form-control/form-control.component.scss
 create mode 100644 src/app/modules/sample-providers/components/form-control/form-control.component.ts

diff --git a/src/app/modules/sample-providers/components/form-control/form-control.component.scss b/src/app/modules/sample-providers/components/form-control/form-control.component.scss
new file mode 100644
index 0000000..ff087e4
--- /dev/null
+++ b/src/app/modules/sample-providers/components/form-control/form-control.component.scss
@@ -0,0 +1,16 @@
+:host {
+  input, textarea {
+    box-sizing: border-box;
+    padding: 10px;
+    border-radius: 5px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #555555;
+    &::placeholder {
+      border-color: #a0a0a0bd;
+    }
+    width: 100%;
+    display: block;
+    margin-bottom: 10px;
+  }
+}
diff --git a/src/app/modules/sample-providers/components/form-control/form-control.component.ts b/src/app/modules/sample-providers/components/form-control/form-control.component.ts
new file mode 100644
index 0000000..1aef52f
--- /dev/null
+++ b/src/app/modules/sample-providers/components/form-control/form-control.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+
+@Component({
+  selector: 'app-form-control',
+  template: `
+    <div class="form-control" *ngIf="textarea; else inputform">
+      <label>{{ label }}</label>
+      <textarea [formControl]="control"></textarea>
+    </div>
+    <ng-template #inputform>
+      <div class="form-control">
+        <label>{{ label }}</label>
+        <input type="text" [formControl]="control" />
+      </div>
+    </ng-template>
+  `,
+})
+export class FormControlComponent {
+  @Input() control: AbstractControl;
+  @Input() label: string;
+  @Input() textarea: boolean;
+  // TODO add @Input checkbox, @Input file, @Input radio etc
+}
diff --git a/src/app/modules/sample-providers/components/submission-form/submission-form.component.html b/src/app/modules/sample-providers/components/submission-form/submission-form.component.html
index a4eb366..e222704 100644
--- a/src/app/modules/sample-providers/components/submission-form/submission-form.component.html
+++ b/src/app/modules/sample-providers/components/submission-form/submission-form.component.html
@@ -1,24 +1,27 @@
 <form [formGroup]="form" (ngSubmit)="onSubmit()">
   <div>
-    <label for="label-name">
-      Name
-    </label>
-    <input  type="text"  id="label-name" formControlName="label_name"/>
+    <app-form-control
+      [control]="form.controls['label_name']"
+      [label]="'name'"
+      [textarea]='false'>
+    </app-form-control>
   </div>
   <div>
-    <label for="label-description">
-      Description
-    </label>
-    <textarea id="label-description" formControlName="label_description"></textarea>
+    <app-form-control
+    [control]="form.controls['label_description']"
+    [label]="'Description'"
+    [textarea]='true'>
+    </app-form-control>
     <div *ngIf="labelDescription.errors?.maxlength">
       Description cannot be over 200 characters.
     </div>
   </div>
   <div>
-    <label for="label-contact">
-      Contact email
-    </label>
-    <input  type="text" id="label-contact"formControlName="label_contact"/>
+    <app-form-control
+    [control]="form.controls['label_contact']"
+    [label]="'Contact email'"
+    [textarea]='false'>
+    </app-form-control>
     <div *ngIf="labelContact.errors?.email">
       Email must be in a valid format.
     </div>
diff --git a/src/app/modules/sample-providers/sample-providers.module.ts b/src/app/modules/sample-providers/sample-providers.module.ts
index 710cc63..e42d294 100644
--- a/src/app/modules/sample-providers/sample-providers.module.ts
+++ b/src/app/modules/sample-providers/sample-providers.module.ts
@@ -4,9 +4,14 @@ import { RouterModule } from '@angular/router';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FormContainerComponent } from './routes/form-container/form-container.component';
 import { SubmissionFormComponent } from './components/submission-form/submission-form.component';
+import { FormControlComponent } from './components/form-control/form-control.component';
 
 @NgModule({
-  declarations: [FormContainerComponent, SubmissionFormComponent],
+  declarations: [
+    FormContainerComponent,
+    SubmissionFormComponent,
+    FormControlComponent,
+  ],
   imports: [CommonModule, FormsModule, ReactiveFormsModule, RouterModule],
 })
 export class SampleProvidersModule {}

From 2cc489183bd7804fc112e09db4704ef7abf81c9d Mon Sep 17 00:00:00 2001
From: Sue Lockwood <deathbearbrown@gmail.com>
Date: Thu, 3 Sep 2020 07:51:54 -0700
Subject: [PATCH 3/3] OOPS lol

---
 .../form-control/form-control.component.scss  |  3 +++
 .../form-control/form-control.component.ts    | 17 ++++++------
 .../submission-form.component.html            | 25 +++++++++++-------
 .../submission-form.component.scss            | 14 ----------
 .../submission-form.component.ts              | 26 +++++++++----------
 5 files changed, 40 insertions(+), 45 deletions(-)

diff --git a/src/app/modules/sample-providers/components/form-control/form-control.component.scss b/src/app/modules/sample-providers/components/form-control/form-control.component.scss
index ff087e4..f8444c5 100644
--- a/src/app/modules/sample-providers/components/form-control/form-control.component.scss
+++ b/src/app/modules/sample-providers/components/form-control/form-control.component.scss
@@ -1,4 +1,7 @@
 :host {
+  label {
+    display: block;
+  }
   input, textarea {
     box-sizing: border-box;
     padding: 10px;
diff --git a/src/app/modules/sample-providers/components/form-control/form-control.component.ts b/src/app/modules/sample-providers/components/form-control/form-control.component.ts
index 1aef52f..dd502e1 100644
--- a/src/app/modules/sample-providers/components/form-control/form-control.component.ts
+++ b/src/app/modules/sample-providers/components/form-control/form-control.component.ts
@@ -4,21 +4,22 @@ import { AbstractControl } from '@angular/forms';
 @Component({
   selector: 'app-form-control',
   template: `
-    <div class="form-control" *ngIf="textarea; else inputform">
-      <label>{{ label }}</label>
-      <textarea [formControl]="control"></textarea>
+    <div class="form-control" *ngIf="t; else inputform">
+      <label>{{ l }}</label>
+      <textarea [formControl]="c"></textarea>
     </div>
     <ng-template #inputform>
       <div class="form-control">
-        <label>{{ label }}</label>
-        <input type="text" [formControl]="control" />
+        <label>{{ l }}</label>
+        <input type="text" [formControl]="c" />
       </div>
     </ng-template>
   `,
+  styleUrls: ['./form-control.component.scss'],
 })
 export class FormControlComponent {
-  @Input() control: AbstractControl;
-  @Input() label: string;
-  @Input() textarea: boolean;
+  @Input() c: AbstractControl; // control
+  @Input() l: string; // label
+  @Input() t: boolean; // is textarea
   // TODO add @Input checkbox, @Input file, @Input radio etc
 }
diff --git a/src/app/modules/sample-providers/components/submission-form/submission-form.component.html b/src/app/modules/sample-providers/components/submission-form/submission-form.component.html
index e222704..5e64dca 100644
--- a/src/app/modules/sample-providers/components/submission-form/submission-form.component.html
+++ b/src/app/modules/sample-providers/components/submission-form/submission-form.component.html
@@ -1,16 +1,16 @@
 <form [formGroup]="form" (ngSubmit)="onSubmit()">
   <div>
     <app-form-control
-      [control]="form.controls['label_name']"
-      [label]="'name'"
-      [textarea]='false'>
+      [c]="form.controls['label_name']"
+      [l]="'name'"
+      [t]='false'>
     </app-form-control>
   </div>
   <div>
     <app-form-control
-    [control]="form.controls['label_description']"
-    [label]="'Description'"
-    [textarea]='true'>
+    [c]="form.controls['label_description']"
+    [l]="'Description'"
+    [t]='true'>
     </app-form-control>
     <div *ngIf="labelDescription.errors?.maxlength">
       Description cannot be over 200 characters.
@@ -18,20 +18,25 @@
   </div>
   <div>
     <app-form-control
-    [control]="form.controls['label_contact']"
-    [label]="'Contact email'"
-    [textarea]='false'>
+    [c]="form.controls['label_contact']"
+    [l]="'Contact email'"
+    [t]='false'>
     </app-form-control>
     <div *ngIf="labelContact.errors?.email">
       Email must be in a valid format.
     </div>
   </div>
+
   <div>
     <label>
       Upload Demo track
     </label>
+    <br>
+    <br>
     <input #fileInput type="file"/>
-    <audio #player src="" type="audio/mp3" controls></audio>
+    <br>
+    <br>
+    <audio #p src="" type="audio/mp3" controls></audio>
   </div>
 
   <button type="submit" [disabled]="!this.form.valid || !this.form.dirty">
diff --git a/src/app/modules/sample-providers/components/submission-form/submission-form.component.scss b/src/app/modules/sample-providers/components/submission-form/submission-form.component.scss
index 31d6693..a93828f 100644
--- a/src/app/modules/sample-providers/components/submission-form/submission-form.component.scss
+++ b/src/app/modules/sample-providers/components/submission-form/submission-form.component.scss
@@ -1,18 +1,4 @@
 :host {
-  input, textarea {
-    box-sizing: border-box;
-    padding: 10px;
-    border-radius: 5px;
-    border-width: 1px;
-    border-style: solid;
-    border-color: #555555;
-    &::placeholder {
-      border-color: #a0a0a0bd;
-    }
-    width: 100%;
-    display: block;
-    margin-bottom: 10px;
-  }
   button {
     display: inline-flex;
     align-items: center;
diff --git a/src/app/modules/sample-providers/components/submission-form/submission-form.component.ts b/src/app/modules/sample-providers/components/submission-form/submission-form.component.ts
index fbd0206..7771085 100644
--- a/src/app/modules/sample-providers/components/submission-form/submission-form.component.ts
+++ b/src/app/modules/sample-providers/components/submission-form/submission-form.component.ts
@@ -34,22 +34,22 @@ import {
 })
 export class SubmissionFormComponent implements OnInit, ControlValueAccessor {
   form: FormGroup;
-  // demo file name
-  file: File;
 
-  @ViewChild('player', { read: ElementRef }) player: ElementRef;
+  f: File; // demo file
+
+  @ViewChild('p', { read: ElementRef }) p: ElementRef;
 
   @Output()
   submitForm = new EventEmitter<any>();
 
   @Input()
-  onChange = (file: File) => {};
+  onChange = (f: File) => {};
 
   @HostListener('change', ['$event.target.files'])
-  emitFiles(event: FileList) {
-    this.file = event && event.item(0);
-    this.addAudioFile();
-    this.onChange(this.file);
+  emitFiles(e: FileList) {
+    this.f = e && e.item(0);
+    this.a();
+    this.onChange(this.f);
   }
 
   registerOnChange(fn) {
@@ -60,13 +60,13 @@ export class SubmissionFormComponent implements OnInit, ControlValueAccessor {
 
   /** @ignore */
   writeValue(value) {
-    if (value === null && this.file) {
-      this.file = null;
+    if (value === null && this.f) {
+      this.f = null;
     }
   }
-
-  addAudioFile() {
-    this.player.nativeElement.src = URL.createObjectURL(this.file);
+  // add audioFile
+  a() {
+    this.p.nativeElement.src = URL.createObjectURL(this.f);
   }
 
   constructor(private formBuilder: FormBuilder) {}