From 224e2a344df5bf9ffd73e5715bda8ee0f588b40b Mon Sep 17 00:00:00 2001 From: Christoph Drechsler Date: Fri, 30 Aug 2019 12:54:43 -0400 Subject: [PATCH 01/12] Adds Go File Upload --- .../go-file-upload.component.html | 12 ++++++ .../go-file-upload.component.scss | 3 ++ .../go-file-upload.component.spec.ts | 25 ++++++++++++ .../go-file-upload.component.ts | 40 +++++++++++++++++++ .../go-file-upload/go-file-upload.module.ts | 21 ++++++++++ projects/go-lib/src/lib/go-shared.module.ts | 4 +- projects/go-lib/src/public_api.ts | 4 ++ projects/go-tester/src/app/app.module.ts | 2 + .../test-page-3/test-page-3.component.html | 4 ++ 9 files changed, 114 insertions(+), 1 deletion(-) create mode 100644 projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html create mode 100644 projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.scss create mode 100644 projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.spec.ts create mode 100644 projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts create mode 100644 projects/go-lib/src/lib/components/go-file-upload/go-file-upload.module.ts diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html new file mode 100644 index 000000000..0bd719ce8 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html @@ -0,0 +1,12 @@ +
+ + Upload File + + +
+ + \ No newline at end of file diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.scss b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.scss new file mode 100644 index 000000000..a69625cfe --- /dev/null +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.scss @@ -0,0 +1,3 @@ +input[type="file"] { + visibility: hidden; +} diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.spec.ts b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.spec.ts new file mode 100644 index 000000000..807fbbf89 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GoFileUploadComponent } from './go-file-upload.component'; + +describe('GoFileUploadComponent', () => { + let component: GoFileUploadComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GoFileUploadComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(GoFileUploadComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts new file mode 100644 index 000000000..e165a7154 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts @@ -0,0 +1,40 @@ +import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, FormArray, FormBuilder, AbstractControl } from '@angular/forms'; + +@Component({ + selector: 'go-file-upload', + templateUrl: './go-file-upload.component.html', + styleUrls: ['./go-file-upload.component.scss'] +}) +export class GoFileUploadComponent implements OnInit { + + form: FormGroup; + control: FormArray; + fb: FormBuilder; + filePreview: string; + hints: Array = []; + + constructor() { } + + ngOnInit(): void { + this.fb = new FormBuilder(); + this.form = this.fb.group({ + filesArray: this.fb.array([]) + }); + this.control = this.form.controls['filesArray']; + } + + onFilePicked(event: Event): void { + event.target.files.forEach((file: any) => { + this.control.push(this.patchValues(file)); + debugger; + }); + } + + private patchValues(file: any): AbstractControl { + return this.fb.group({ + file: [file] + }); + } + +} diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.module.ts b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.module.ts new file mode 100644 index 000000000..77844477a --- /dev/null +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.module.ts @@ -0,0 +1,21 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; + +import { GoHintModule } from '../go-hint/go-hint.module'; +import { GoFileUploadComponent } from './go-file-upload.component'; +import { GoButtonModule } from '../go-button/go-button.module'; + +@NgModule({ + declarations: [GoFileUploadComponent], + imports: [ + CommonModule, + FormsModule, + GoButtonModule, + GoHintModule, + ReactiveFormsModule + ], + exports: [GoFileUploadComponent] +}) + +export class GoFileUploadModule { } diff --git a/projects/go-lib/src/lib/go-shared.module.ts b/projects/go-lib/src/lib/go-shared.module.ts index df59b2a68..6cf40d143 100644 --- a/projects/go-lib/src/lib/go-shared.module.ts +++ b/projects/go-lib/src/lib/go-shared.module.ts @@ -5,6 +5,7 @@ import { GoBadgeModule } from './components/go-badge/go-badge.module'; import { GoButtonModule } from './components/go-button/go-button.module'; import { GoCardModule } from './components/go-card/go-card.module'; import { GoCopyModule } from './components/go-copy/go-copy.module'; +import { GoFileUploadComponent } from './components/go-file-upload/go-file-upload.component'; import { GoHeaderModule } from './components/go-header/go-header.module'; import { GoHintModule } from './components/go-hint/go-hint.module'; import { GoIconButtonModule } from './components/go-icon-button/go-icon-button.module'; @@ -81,7 +82,8 @@ import { GoFooterModule } from './components/go-footer/go-footer.module'; GoTextAreaModule, GoToastModule, GoToasterModule - ] + ], + declarations: [GoFileUploadComponent] }) export class GoSharedModule { } diff --git a/projects/go-lib/src/public_api.ts b/projects/go-lib/src/public_api.ts index 59d7f0d1d..63a7c0689 100644 --- a/projects/go-lib/src/public_api.ts +++ b/projects/go-lib/src/public_api.ts @@ -44,6 +44,10 @@ export * from './lib/components/go-datepicker/calendar-cell.model'; export * from './lib/components/go-datepicker/go-datepicker.component'; export * from './lib/components/go-datepicker/go-datepicker.module'; +// File Upload +export * from './lib/components/go-file-upload/go-file-upload.component'; +export * from './lib/components/go-file-upload/go-file-upload.module'; + // Footer export * from './lib/components/go-footer/go-footer.component'; export * from './lib/components/go-footer/go-footer.module'; diff --git a/projects/go-tester/src/app/app.module.ts b/projects/go-tester/src/app/app.module.ts index 90f12d0ff..2dd0a8105 100644 --- a/projects/go-tester/src/app/app.module.ts +++ b/projects/go-tester/src/app/app.module.ts @@ -14,6 +14,7 @@ import { GoCheckboxModule, GoCopyModule, GoDatepickerModule, + GoFileUploadModule, GoFooterModule, GoHeaderModule, GoIconButtonModule, @@ -74,6 +75,7 @@ import { AppGuard } from './app.guard'; GoCheckboxModule, GoCopyModule, GoDatepickerModule, + GoFileUploadModule, GoFooterModule, GoHeaderModule, GoIconModule, diff --git a/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html b/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html index 0e2182dfe..713223535 100644 --- a/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html +++ b/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html @@ -45,6 +45,10 @@

> +
+ +
+
Date: Fri, 30 Aug 2019 15:02:24 -0400 Subject: [PATCH 02/12] Adds Go File Upload --- .../go-file-upload.component.html | 12 ++++++--- .../go-file-upload.component.ts | 27 ++++++++++++------- .../test-page-3/test-page-3.component.html | 8 +++++- .../test-page-3/test-page-3.component.ts | 1 + 4 files changed, 34 insertions(+), 14 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html index 0bd719ce8..a2a0c5732 100644 --- a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html @@ -1,12 +1,16 @@
- Upload File + {{label}}
- \ No newline at end of file + + + + + \ No newline at end of file diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts index e165a7154..a28d70564 100644 --- a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts @@ -1,5 +1,5 @@ -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup, FormArray, FormBuilder, AbstractControl } from '@angular/forms'; +import { Component, Input, OnInit } from '@angular/core'; +import { AbstractControl, FormArray, FormBuilder, FormGroup, FormControl } from '@angular/forms'; @Component({ selector: 'go-file-upload', @@ -9,10 +9,15 @@ import { FormControl, FormGroup, FormArray, FormBuilder, AbstractControl } from export class GoFileUploadComponent implements OnInit { form: FormGroup; - control: FormArray; + files: FormArray; fb: FormBuilder; - filePreview: string; - hints: Array = []; + filePreview: Array = []; + + @Input() buttonIcon: string; + @Input() control: FormControl; + @Input() buttonVariant: string; + @Input() label: string; + @Input() hints: Array = []; constructor() { } @@ -21,13 +26,17 @@ export class GoFileUploadComponent implements OnInit { this.form = this.fb.group({ filesArray: this.fb.array([]) }); - this.control = this.form.controls['filesArray']; + this.files = this.form.controls['filesArray']; + this.files.valueChanges.subscribe( (fileChanges: any) => { + this.control.setValue(fileChanges); + }); } onFilePicked(event: Event): void { - event.target.files.forEach((file: any) => { - this.control.push(this.patchValues(file)); - debugger; + const target: HTMLInputElement = event.target as HTMLInputElement; + Array.from(target.files).forEach((file: any) => { + this.files.push(this.patchValues(file)); + this.filePreview.push(file.name); }); } diff --git a/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html b/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html index 713223535..3b8b9d64b 100644 --- a/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html +++ b/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html @@ -46,7 +46,13 @@

- +
diff --git a/projects/go-tester/src/app/components/test-page-3/test-page-3.component.ts b/projects/go-tester/src/app/components/test-page-3/test-page-3.component.ts index a3adadbec..5582aeb91 100644 --- a/projects/go-tester/src/app/components/test-page-3/test-page-3.component.ts +++ b/projects/go-tester/src/app/components/test-page-3/test-page-3.component.ts @@ -23,6 +23,7 @@ export class TestPage3Component implements OnInit { name: 'Snake' }]; + fileControl: FormControl = new FormControl(); form: FormGroup = new FormGroup({ food: new FormGroup({ apples: new FormControl(''), From 1b36de1a9bb2b108cdfc189ac094d11995917431 Mon Sep 17 00:00:00 2001 From: Christoph Drechsler Date: Fri, 30 Aug 2019 15:04:54 -0400 Subject: [PATCH 03/12] Adds modules to spec file --- .../go-file-upload/go-file-upload.component.spec.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.spec.ts b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.spec.ts index 807fbbf89..eec030e51 100644 --- a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.spec.ts +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.spec.ts @@ -1,6 +1,10 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { GoFileUploadComponent } from './go-file-upload.component'; +import { CommonModule } from '@angular/common'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { GoButtonModule } from '../go-button/go-button.module'; +import { GoHintModule } from '../go-hint/go-hint.module'; describe('GoFileUploadComponent', () => { let component: GoFileUploadComponent; @@ -8,7 +12,14 @@ describe('GoFileUploadComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ GoFileUploadComponent ] + declarations: [GoFileUploadComponent], + imports: [ + CommonModule, + FormsModule, + GoButtonModule, + GoHintModule, + ReactiveFormsModule + ] }) .compileComponents(); })); From f332d9c8163a625d028eb53cbddce42250bc9ef7 Mon Sep 17 00:00:00 2001 From: Steven Ulmer Date: Mon, 30 Sep 2019 13:18:30 -0400 Subject: [PATCH 04/12] Adds ability to remove file from selected list --- .../go-file-upload.component.html | 18 ++++++++++-------- .../go-file-upload.component.spec.ts | 2 ++ .../go-file-upload/go-file-upload.component.ts | 17 +++++++++++------ .../go-file-upload/go-file-upload.module.ts | 2 ++ projects/go-lib/src/lib/go-shared.module.ts | 7 ++++--- projects/go-tester/src/app/app.module.ts | 2 +- 6 files changed, 30 insertions(+), 18 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html index a2a0c5732..95d3f65a5 100644 --- a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html @@ -1,16 +1,18 @@
+ [buttonIcon]="buttonIcon" + [buttonVariant]="buttonVariant" + (click)="filePicker.click()"> {{label}} - +
- - +

+ {{ file }} + +

+ - \ No newline at end of file + diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.spec.ts b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.spec.ts index eec030e51..bd174c765 100644 --- a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.spec.ts +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.spec.ts @@ -5,6 +5,7 @@ import { CommonModule } from '@angular/common'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { GoButtonModule } from '../go-button/go-button.module'; import { GoHintModule } from '../go-hint/go-hint.module'; +import { GoIconButtonModule } from '../go-icon-button/go-icon-button.module'; describe('GoFileUploadComponent', () => { let component: GoFileUploadComponent; @@ -18,6 +19,7 @@ describe('GoFileUploadComponent', () => { FormsModule, GoButtonModule, GoHintModule, + GoIconButtonModule, ReactiveFormsModule ] }) diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts index a28d70564..6cfc8e83c 100644 --- a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts @@ -1,5 +1,5 @@ -import { Component, Input, OnInit } from '@angular/core'; -import { AbstractControl, FormArray, FormBuilder, FormGroup, FormControl } from '@angular/forms'; +import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; +import { AbstractControl, FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms'; @Component({ selector: 'go-file-upload', @@ -7,7 +7,6 @@ import { AbstractControl, FormArray, FormBuilder, FormGroup, FormControl } from styleUrls: ['./go-file-upload.component.scss'] }) export class GoFileUploadComponent implements OnInit { - form: FormGroup; files: FormArray; fb: FormBuilder; @@ -19,6 +18,8 @@ export class GoFileUploadComponent implements OnInit { @Input() label: string; @Input() hints: Array = []; + @ViewChild('filePicker') filePicker: ElementRef; + constructor() { } ngOnInit(): void { @@ -32,14 +33,18 @@ export class GoFileUploadComponent implements OnInit { }); } - onFilePicked(event: Event): void { - const target: HTMLInputElement = event.target as HTMLInputElement; - Array.from(target.files).forEach((file: any) => { + onFilePicked(): void { + Array.from(this.filePicker.nativeElement.files).forEach((file: any) => { this.files.push(this.patchValues(file)); this.filePreview.push(file.name); }); } + removeFile(index: number): void { + this.files.removeAt(index); + this.filePreview.splice(index, 1); + } + private patchValues(file: any): AbstractControl { return this.fb.group({ file: [file] diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.module.ts b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.module.ts index 77844477a..ceb595687 100644 --- a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.module.ts +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.module.ts @@ -5,6 +5,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { GoHintModule } from '../go-hint/go-hint.module'; import { GoFileUploadComponent } from './go-file-upload.component'; import { GoButtonModule } from '../go-button/go-button.module'; +import { GoIconButtonModule } from '../go-icon-button/go-icon-button.module'; @NgModule({ declarations: [GoFileUploadComponent], @@ -13,6 +14,7 @@ import { GoButtonModule } from '../go-button/go-button.module'; FormsModule, GoButtonModule, GoHintModule, + GoIconButtonModule, ReactiveFormsModule ], exports: [GoFileUploadComponent] diff --git a/projects/go-lib/src/lib/go-shared.module.ts b/projects/go-lib/src/lib/go-shared.module.ts index 6cf40d143..4ec10239a 100644 --- a/projects/go-lib/src/lib/go-shared.module.ts +++ b/projects/go-lib/src/lib/go-shared.module.ts @@ -5,7 +5,7 @@ import { GoBadgeModule } from './components/go-badge/go-badge.module'; import { GoButtonModule } from './components/go-button/go-button.module'; import { GoCardModule } from './components/go-card/go-card.module'; import { GoCopyModule } from './components/go-copy/go-copy.module'; -import { GoFileUploadComponent } from './components/go-file-upload/go-file-upload.component'; +import { GoFileUploadModule } from './components/go-file-upload/go-file-upload.module'; import { GoHeaderModule } from './components/go-header/go-header.module'; import { GoHintModule } from './components/go-hint/go-hint.module'; import { GoIconButtonModule } from './components/go-icon-button/go-icon-button.module'; @@ -37,6 +37,7 @@ import { GoFooterModule } from './components/go-footer/go-footer.module'; GoCheckboxModule, GoCopyModule, GoDatepickerModule, + GoFileUploadModule, GoFooterModule, GoHeaderModule, GoHintModule, @@ -64,6 +65,7 @@ import { GoFooterModule } from './components/go-footer/go-footer.module'; GoCheckboxModule, GoCopyModule, GoDatepickerModule, + GoFileUploadModule, GoFooterModule, GoHeaderModule, GoHintModule, @@ -82,8 +84,7 @@ import { GoFooterModule } from './components/go-footer/go-footer.module'; GoTextAreaModule, GoToastModule, GoToasterModule - ], - declarations: [GoFileUploadComponent] + ] }) export class GoSharedModule { } diff --git a/projects/go-tester/src/app/app.module.ts b/projects/go-tester/src/app/app.module.ts index 2dd0a8105..5596e2f1c 100644 --- a/projects/go-tester/src/app/app.module.ts +++ b/projects/go-tester/src/app/app.module.ts @@ -33,7 +33,7 @@ import { GoTableModule, GoTextAreaModule, GoToasterModule, - GoToastModule, + GoToastModule } from '../../../go-lib/src/public_api'; import { AppRoutesModule } from './app-routing.module'; From a1b1c7bdd4c5a2b02684e1234acbc91cf4855fed Mon Sep 17 00:00:00 2001 From: Steven Ulmer Date: Tue, 8 Oct 2019 11:30:56 -0400 Subject: [PATCH 05/12] Add drag and drop ability to file upload *Updates styles of the file upload *Adds ability to differenciate between single and multiple file uploads --- .../go-dragon-drop.directive.ts | 39 ++++++++++++++ .../go-file-upload.component.html | 51 ++++++++++++++----- .../go-file-upload.component.scss | 43 ++++++++++++++++ .../go-file-upload.component.ts | 31 ++++++++--- .../go-file-upload/go-file-upload.module.ts | 10 +++- .../test-page-3/test-page-3.component.html | 1 + 6 files changed, 155 insertions(+), 20 deletions(-) create mode 100644 projects/go-lib/src/lib/components/go-file-upload/go-dragon-drop.directive.ts diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-dragon-drop.directive.ts b/projects/go-lib/src/lib/components/go-file-upload/go-dragon-drop.directive.ts new file mode 100644 index 000000000..d0122a830 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-file-upload/go-dragon-drop.directive.ts @@ -0,0 +1,39 @@ +import { Directive, EventEmitter, HostBinding, HostListener, Output } from '@angular/core'; + +@Directive({ + selector: '[goDragonDrop]' +}) +export class DragonDropDirective { + @Output() fileDropped: EventEmitter = new EventEmitter(); + + @HostBinding('style.background-color') private background: string = '#FFF'; + @HostBinding('style.opacity') private opacity: string = '1'; + + // Dragover listener + @HostListener('dragover', ['$event']) onDragOver(evt: Event): void { + evt.preventDefault(); + evt.stopPropagation(); + this.background = '#F0F0F0'; + this.opacity = '0.8'; + } + + // Dragleave listener + @HostListener('dragleave', ['$event']) public onDragLeave(evt: Event): void { + evt.preventDefault(); + evt.stopPropagation(); + this.background = '#FFF'; + this.opacity = '1'; + } + + // Drop listener + @HostListener('drop', ['$event']) public ondrop(evt: any): void { + evt.preventDefault(); + evt.stopPropagation(); + this.background = '#FFF'; + this.opacity = '1'; + const files: File[] = evt.dataTransfer.files; + if (files.length > 0) { + this.fileDropped.emit(files); + } + } +} diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html index 95d3f65a5..7107d8c7e 100644 --- a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html @@ -1,18 +1,43 @@ -
- - {{label}} - - + +
+
+ + Drag and Drop File or Click to Browse +
+
+ + Uploading File... +
+
+ + File Selected +
+
-

- {{ file }} - -

- +
+ Files + File Name +

+ {{ file }} + +

+
diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.scss b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.scss index a69625cfe..c26969a07 100644 --- a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.scss +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.scss @@ -1,3 +1,46 @@ +@import '../../../styles/variables'; + input[type="file"] { visibility: hidden; } + +.go-file-upload { + height: 10rem; + border: 2px dashed grey; + border-radius: 5px; + + &.go-file-upload--disabled { + color: lighten($theme-light-color, 40); + cursor: not-allowed; + pointer-events: none; + } +} + +.go-file-upload:hover { + cursor: pointer; + background-color: $theme-light-bg-hover !important; + opacity: 0.8; +} + +.go-file-upload__container { + justify-content: center; + display: flex; + flex-direction: column; + text-align: center; +} + +.go-file-upload__file-list { + display: flex; +} + +.go-file-upload__file-name { + margin-top: .5rem; +} + +.go-file-upload__container--loading-text { + padding-top: .5rem; +} + +.go-file-upload__container--loading { + padding-top: 1rem; +} diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts index 6cfc8e83c..baa727102 100644 --- a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts @@ -11,18 +11,22 @@ export class GoFileUploadComponent implements OnInit { files: FormArray; fb: FormBuilder; filePreview: Array = []; + id: string; @Input() buttonIcon: string; - @Input() control: FormControl; @Input() buttonVariant: string; - @Input() label: string; + @Input() control: FormControl; @Input() hints: Array = []; - - @ViewChild('filePicker') filePicker: ElementRef; + @Input() isLoading: boolean = false; + @Input() key: string; + @Input() label: string; + @Input() multiple: boolean = false; + @Input() state: 'selecting' | 'selected' = 'selecting'; constructor() { } ngOnInit(): void { + this.id = this.key || this.generateId(this.label); this.fb = new FormBuilder(); this.form = this.fb.group({ filesArray: this.fb.array([]) @@ -33,16 +37,22 @@ export class GoFileUploadComponent implements OnInit { }); } - onFilePicked(): void { - Array.from(this.filePicker.nativeElement.files).forEach((file: any) => { + onFilePicked(files: FileList): void { + Array.from(files).forEach((file: any) => { this.files.push(this.patchValues(file)); this.filePreview.push(file.name); }); + if (!this.multiple) { + this.state = 'selected'; + } } removeFile(index: number): void { this.files.removeAt(index); this.filePreview.splice(index, 1); + if (this.state === 'selected') { + this.state = 'selecting'; + } } private patchValues(file: any): AbstractControl { @@ -51,4 +61,13 @@ export class GoFileUploadComponent implements OnInit { }); } + private generateId(label: string): string { + const labelText: string = label || 'input'; + const idArray: Array = labelText.split(' '); + + // NOTE: There is only a one in a million chance that this number is not unique. + idArray.push(String(Math.round(Math.random() * 1000000))); + + return idArray.join('-'); + } } diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.module.ts b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.module.ts index ceb595687..e38f3590d 100644 --- a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.module.ts +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.module.ts @@ -6,15 +6,23 @@ import { GoHintModule } from '../go-hint/go-hint.module'; import { GoFileUploadComponent } from './go-file-upload.component'; import { GoButtonModule } from '../go-button/go-button.module'; import { GoIconButtonModule } from '../go-icon-button/go-icon-button.module'; +import { DragonDropDirective } from './go-dragon-drop.directive'; +import { GoIconModule } from '../go-icon/go-icon.module'; +import { GoLoaderModule } from '../go-loader/go-loader.module'; @NgModule({ - declarations: [GoFileUploadComponent], + declarations: [ + DragonDropDirective, + GoFileUploadComponent + ], imports: [ CommonModule, FormsModule, GoButtonModule, GoHintModule, + GoIconModule, GoIconButtonModule, + GoLoaderModule, ReactiveFormsModule ], exports: [GoFileUploadComponent] diff --git a/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html b/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html index 3b8b9d64b..22ca6e6c8 100644 --- a/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html +++ b/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html @@ -50,6 +50,7 @@

[control]="fileControl" buttonVariant="positive" buttonIcon="home" + [isLoading]="loading" label="Upload File" [hints]="['You can upload multiple files']" > From f005dff2f6ae19b79f8eebac8e4556716a6987a3 Mon Sep 17 00:00:00 2001 From: Steven Ulmer Date: Tue, 8 Oct 2019 15:02:29 -0400 Subject: [PATCH 06/12] add tests for file-upload --- .../go-file-upload.component.spec.ts | 77 ++++++++++++++++++- .../go-file-upload.component.ts | 2 +- 2 files changed, 77 insertions(+), 2 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.spec.ts b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.spec.ts index bd174c765..bf8a26d57 100644 --- a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.spec.ts +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.spec.ts @@ -2,10 +2,13 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { GoFileUploadComponent } from './go-file-upload.component'; import { CommonModule } from '@angular/common'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule, FormArray, FormGroup, FormControl } from '@angular/forms'; import { GoButtonModule } from '../go-button/go-button.module'; import { GoHintModule } from '../go-hint/go-hint.module'; import { GoIconButtonModule } from '../go-icon-button/go-icon-button.module'; +import { GoIconModule } from '../go-icon/go-icon.module'; +import { GoLoaderModule } from '../go-loader/go-loader.module'; +import { createHostListener } from '@angular/compiler/src/core'; describe('GoFileUploadComponent', () => { let component: GoFileUploadComponent; @@ -19,7 +22,9 @@ describe('GoFileUploadComponent', () => { FormsModule, GoButtonModule, GoHintModule, + GoIconModule, GoIconButtonModule, + GoLoaderModule, ReactiveFormsModule ] }) @@ -29,10 +34,80 @@ describe('GoFileUploadComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(GoFileUploadComponent); component = fixture.componentInstance; + component.control = new FormControl(''); fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); + + describe('removeFile', () => { + beforeEach(() => { + const file: FormGroup = new FormGroup({ + file: new FormControl('whatever') + }); + component.files = new FormArray([file]); + component.filePreview = ['whatever']; + }); + + it('should set state to selecting if it was previously selected', () => { + component.state = 'selected'; + component.removeFile(0); + expect(component.state).toBe('selecting'); + }); + + it('should not change the state if the state was selecting', () => { + component.state = 'selecting'; + component.removeFile(0); + expect(component.state).toBe('selecting'); + }); + + it('should remove the file at the given index from the form control', () => { + component.removeFile(0); + expect(component.control.value.length).toBe(0); + }); + + it('should remove the file at the given index from our file Preview Array', () => { + component.removeFile(0); + expect(component.filePreview.length).toBe(0); + }); + }); + + describe('ngOnInit()', () => { + beforeEach(() => { + component.id = undefined; + }); + + it('sets the id of the input to `key` if one is passed in', () => { + expect(component.id).toBeUndefined(); + + component.key = 'a-specific-id'; + component.ngOnInit(); + + expect(component.id).toBe(component.key); + }); + + it('generates a semi-random id based on the label if key is undefined', () => { + expect(component.key).toBeUndefined(); + expect(component.id).toBeUndefined(); + + component.label = 'test label'; + component.ngOnInit(); + + expect(component.id).toBeDefined(); + expect(component.id).toContain('test-label-'); + }); + + it('generates a semi-random id if a label and key are undefined', () => { + expect(component.key).toBeUndefined(); + expect(component.label).toBeUndefined(); + expect(component.id).toBeUndefined(); + + component.ngOnInit(); + + expect(component.id).toBeDefined(); + expect(component.id).toContain('file-upload-'); + }); + }); }); diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts index baa727102..99aae6573 100644 --- a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts @@ -62,7 +62,7 @@ export class GoFileUploadComponent implements OnInit { } private generateId(label: string): string { - const labelText: string = label || 'input'; + const labelText: string = label || 'file-upload'; const idArray: Array = labelText.split(' '); // NOTE: There is only a one in a million chance that this number is not unique. From da62d2a213b709adfc7b73b3893d7855be84dde2 Mon Sep 17 00:00:00 2001 From: Steven Ulmer Date: Tue, 8 Oct 2019 15:07:09 -0400 Subject: [PATCH 07/12] fix build errors on file upload --- .../lib/components/go-file-upload/go-dragon-drop.directive.ts | 4 ++-- .../components/go-file-upload/go-file-upload.component.html | 2 +- .../lib/components/go-file-upload/go-file-upload.component.ts | 1 + 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-dragon-drop.directive.ts b/projects/go-lib/src/lib/components/go-file-upload/go-dragon-drop.directive.ts index d0122a830..d6cf675ac 100644 --- a/projects/go-lib/src/lib/components/go-file-upload/go-dragon-drop.directive.ts +++ b/projects/go-lib/src/lib/components/go-file-upload/go-dragon-drop.directive.ts @@ -6,8 +6,8 @@ import { Directive, EventEmitter, HostBinding, HostListener, Output } from '@ang export class DragonDropDirective { @Output() fileDropped: EventEmitter = new EventEmitter(); - @HostBinding('style.background-color') private background: string = '#FFF'; - @HostBinding('style.opacity') private opacity: string = '1'; + @HostBinding('style.background-color') background: string = '#FFF'; + @HostBinding('style.opacity') opacity: string = '1'; // Dragover listener @HostListener('dragover', ['$event']) onDragOver(evt: Event): void { diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html index 7107d8c7e..370d4099a 100644 --- a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html @@ -39,5 +39,5 @@

- + diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts index 99aae6573..681397519 100644 --- a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts @@ -22,6 +22,7 @@ export class GoFileUploadComponent implements OnInit { @Input() label: string; @Input() multiple: boolean = false; @Input() state: 'selecting' | 'selected' = 'selecting'; + @Input() theme: 'light' | 'dark' = 'light'; constructor() { } From 1ee4e8ccadeb2d69709203adf080306d7e65fa88 Mon Sep 17 00:00:00 2001 From: Steven Ulmer Date: Wed, 9 Oct 2019 12:08:14 -0400 Subject: [PATCH 08/12] cleanup styles around file upload --- .../go-dragon-drop.directive.ts | 12 ++++------ .../go-file-upload.component.html | 4 ++-- .../go-file-upload.component.scss | 22 ++++++++++++++++--- .../test-page-3/test-page-3.component.html | 1 + 4 files changed, 26 insertions(+), 13 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-dragon-drop.directive.ts b/projects/go-lib/src/lib/components/go-file-upload/go-dragon-drop.directive.ts index d6cf675ac..73e931c35 100644 --- a/projects/go-lib/src/lib/components/go-file-upload/go-dragon-drop.directive.ts +++ b/projects/go-lib/src/lib/components/go-file-upload/go-dragon-drop.directive.ts @@ -6,31 +6,27 @@ import { Directive, EventEmitter, HostBinding, HostListener, Output } from '@ang export class DragonDropDirective { @Output() fileDropped: EventEmitter = new EventEmitter(); - @HostBinding('style.background-color') background: string = '#FFF'; - @HostBinding('style.opacity') opacity: string = '1'; + @HostBinding('class.go-file-upload--active') active: boolean = false; // Dragover listener @HostListener('dragover', ['$event']) onDragOver(evt: Event): void { evt.preventDefault(); evt.stopPropagation(); - this.background = '#F0F0F0'; - this.opacity = '0.8'; + this.active = true; } // Dragleave listener @HostListener('dragleave', ['$event']) public onDragLeave(evt: Event): void { evt.preventDefault(); evt.stopPropagation(); - this.background = '#FFF'; - this.opacity = '1'; + this.active = false; } // Drop listener @HostListener('drop', ['$event']) public ondrop(evt: any): void { evt.preventDefault(); evt.stopPropagation(); - this.background = '#FFF'; - this.opacity = '1'; + this.active = false; const files: File[] = evt.dataTransfer.files; if (files.length > 0) { this.fileDropped.emit(files); diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html index 370d4099a..55d575670 100644 --- a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html @@ -31,8 +31,8 @@
- Files - File Name + +

{{ file }} diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.scss b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.scss index c26969a07..f0d9e9680 100644 --- a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.scss +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.scss @@ -1,5 +1,11 @@ @import '../../../styles/variables'; +@mixin upload-active { + cursor: pointer; + background-color: $theme-light-bg-hover; + opacity: 0.8; +} + input[type="file"] { visibility: hidden; } @@ -13,13 +19,17 @@ input[type="file"] { color: lighten($theme-light-color, 40); cursor: not-allowed; pointer-events: none; + border-style: solid; } } .go-file-upload:hover { - cursor: pointer; - background-color: $theme-light-bg-hover !important; - opacity: 0.8; + @include upload-active; +} + +.go-file-upload--active { + @include upload-active; + border-style: solid; } .go-file-upload__container { @@ -31,10 +41,12 @@ input[type="file"] { .go-file-upload__file-list { display: flex; + justify-content: space-between; } .go-file-upload__file-name { margin-top: .5rem; + padding-right: .5rem; } .go-file-upload__container--loading-text { @@ -44,3 +56,7 @@ input[type="file"] { .go-file-upload__container--loading { padding-top: 1rem; } + +.file-name__label { + padding-bottom: .25rem; +} diff --git a/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html b/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html index 22ca6e6c8..caa614191 100644 --- a/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html +++ b/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html @@ -51,6 +51,7 @@

buttonVariant="positive" buttonIcon="home" [isLoading]="loading" + [multiple]="true" label="Upload File" [hints]="['You can upload multiple files']" > From 760779670000581618fb245f6c99b84d779364c0 Mon Sep 17 00:00:00 2001 From: Steven Ulmer Date: Wed, 9 Oct 2019 12:52:47 -0400 Subject: [PATCH 09/12] create docs for file upload --- .../go-file-upload.component.html | 10 + .../go-file-upload.component.ts | 2 - .../file-upload-docs.component.html | 242 ++++++++++++++++++ .../file-upload-docs.component.ts | 104 ++++++++ .../form-docs/form-docs.component.ts | 1 + .../ui-kit/routes/ui-kit-routing.module.ts | 2 + .../src/app/features/ui-kit/ui-kit.module.ts | 4 + 7 files changed, 363 insertions(+), 2 deletions(-) create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/file-upload-docs/file-upload-docs.component.html create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/file-upload-docs/file-upload-docs.component.ts diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html index 55d575670..c79946cd8 100644 --- a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html @@ -41,3 +41,13 @@ + +
+ +
diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts index 681397519..bd0a33cd6 100644 --- a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts @@ -13,8 +13,6 @@ export class GoFileUploadComponent implements OnInit { filePreview: Array = []; id: string; - @Input() buttonIcon: string; - @Input() buttonVariant: string; @Input() control: FormControl; @Input() hints: Array = []; @Input() isLoading: boolean = false; diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/file-upload-docs/file-upload-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/file-upload-docs/file-upload-docs.component.html new file mode 100644 index 000000000..b5dbcde0c --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/file-upload-docs/file-upload-docs.component.html @@ -0,0 +1,242 @@ +
+ + + +

Component Control

+
+ +

+ As with most of the form components, the only @Input + required of the file upload component is a FormControl. + The FormControl can be passed in via the [control] + attribute on the <go-file-upload> component. +

+
+
+

View

+ +
+
+

Code

+ +
+
+
+
+ + + +

Component Label

+
+ +

+ All form components include an @Input() label: string; + that can be used to add a label to the input components. + In addition to displaying an HTML label, the text passed + in via the [label] + attribute is used to generate a unique ID to associate the + label with the input. If no label is passed in, a generic, + but still unique ID will be generated. +

+
+
+

View

+ +
+
+

Code

+ +
+
+
+
+ + + +

Component Key

+
+ +

+ As stated above the label attribute is used to generate a + unique ID to associate the label with the input. As this might + not be desired, the @Input() key: string; + can be used to configure the ID attribute of the input directly. + Anything passed into the component via the [key] + attribute will be used to both assign the ID to the input and + associate the label with the input. +

+
+
+

View

+ +
+
+

Code

+ +
+
+

Example Output

+

+ Notice in the below example output that the key has been assigned + to both the id attribute on + the input and the for attribute + on the label. +

+ +
+
+
+
+ + + +

Component Hints

+
+ +

+ Form hints exist to help give more information about the + inputs they are attached to. The @Input() key: Array<string> + can be used to pass in an array of hints to the file upload component. +

+
+
+

View

+ +
+
+

Code

+ + +
+
+
+
+ + +

Component Errors

+
+ +

+ FormControls all have a consistent way of setting errors + via the setErrors() function. + All goponents use this API to display errors on our components, but the + data needs to be displayed in a specific structure. +

+

+ By default the input type is set to "Error", however this can be + overridden as shown below. +

+
+
+

View

+ +
+
+

Code

+ + +
+
+
+
+ + + +

Component Multiple

+
+ +

+ Sometimes we may want to be able to upload multiple files in an array. This can be achieved through + the @Input multiple: boolean = false; binding. Setting multiple + to true will allow the user to select multiple files instead of just one. +

+
+
+

View

+ +
+
+

Code

+ +
+
+
+
+ + + +

Component Loading

+
+ +

+ A loading state can be triggered through the @Input isLoading: boolean = false; + binding. Setting is-loading to true will disable the file upload and show + a loading spinner in the drop box. +

+
+
+

View

+ +
+
+

Code

+ +
+
+
+
+
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/file-upload-docs/file-upload-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/file-upload-docs/file-upload-docs.component.ts new file mode 100644 index 000000000..8da027978 --- /dev/null +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/file-upload-docs/file-upload-docs.component.ts @@ -0,0 +1,104 @@ +import { Component, OnInit } from '@angular/core'; +import { FormControl } from '@angular/forms'; + +@Component({ + selector: 'app-file-upload-docs', + templateUrl: './file-upload-docs.component.html' +}) +export class FileUploadDocsComponent implements OnInit { + fileControl: FormControl = new FormControl(''); + fileControl2: FormControl = new FormControl(''); + fileControl3: FormControl = new FormControl(''); + fileControl4: FormControl = new FormControl(''); + fileControl5: FormControl = new FormControl(''); + fileControl6: FormControl = new FormControl(''); + fileControl7: FormControl = new FormControl(''); + + hints: Array = [ + 'Please upload your best picture', + 'The absolute most awesome picture' + ]; + + basicExample: string = ` + + `; + + basicLabelExample: string = ` + + `; + + basicKeyExample: string = ` + + `; + + basicKeyExampleOutput: string = ` + + + `; + + basicHintsTemplate: string = ` + hints: Array = [ + 'Please upload your best picture', + 'The absolute most awesome picture' + ]; + `; + + basicHintsExample: string = ` + + `; + + basicErrorsExample: string = ` + this.fileControl.setErrors([ + { + message: 'An error occurred.' + }, + { + type: 'Required', + message: 'This is a required input.' + } + ]); + `; + + basicMultipleExample: string = ` + + `; + + basicLoadingExample: string = ` + + `; + + ngOnInit(): void { + setTimeout((): void => { + this.fileControl5.setErrors([ + { + message: 'An error occurred.' + }, + { + type: 'Required', + message: 'This is a required input.' + } + ]); + }, 500); + } +} diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts index 655233ea1..15711d6f7 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts @@ -12,6 +12,7 @@ export class FormDocsComponent { { route: './', routeTitle: 'Overview' }, { route: 'checkbox', routeTitle: 'Checkbox' }, { route: './datepicker', routeTitle: 'Datepicker' }, + { route: './file-upload', routeTitle: 'File Upload' }, { route: './input', routeTitle: 'Input' }, { route: './radio', routeTitle: 'Radio' }, { route: './select', routeTitle: 'Select' }, diff --git a/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts b/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts index ea2e3315a..cc5df2cdb 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts @@ -9,6 +9,7 @@ import { ButtonDocsComponent } from '../components/button-docs/button-docs.compo import { CardDocsComponent } from '../components/card-docs/card-docs.component'; import { CopyDocsComponent } from '../components/copy-docs/copy-docs.component'; import { DatepickerDocsComponent } from '../components/form-docs/components/datepicker-docs/datepicker-docs.component'; +import { FileUploadDocsComponent } from '../components/form-docs/components/file-upload-docs/file-upload-docs.component'; import { FormDocsComponent } from '../components/form-docs/form-docs.component'; import { FormsOverviewComponent } from '../components/form-docs/components/forms-overview/forms-overview.component'; import { IconButtonDocsComponent } from '../components/icon-button-docs/icon-button-docs.component'; @@ -66,6 +67,7 @@ const routes: Routes = [ { path: '', component: FormsOverviewComponent }, { path: 'checkbox', component: CheckboxDocsComponent }, { path: 'datepicker', component: DatepickerDocsComponent }, + { path: 'file-upload', component: FileUploadDocsComponent }, { path: 'input', component: InputDocsComponent }, { path: 'radio', component: RadioButtonDocsComponent }, { path: 'select', component: SelectDocsComponent }, diff --git a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts index 251bedf58..4fa88874f 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts @@ -14,6 +14,7 @@ import { GoConfigService, GoCopyModule, GoDatepickerModule, + GoFileUploadModule, GoIconButtonModule, GoIconModule, GoInputModule, @@ -44,6 +45,7 @@ import { CardDocsComponent } from './components/card-docs/card-docs.component'; import { ConfigurationDocsComponent } from './components/configuration-docs/configuration-docs.component'; import { CopyDocsComponent } from './components/copy-docs/copy-docs.component'; import { DatepickerDocsComponent } from './components/form-docs/components/datepicker-docs/datepicker-docs.component'; +import { FileUploadDocsComponent } from './components/form-docs/components/file-upload-docs/file-upload-docs.component'; import { FormControlDocsComponent } from './components/form-docs/components/form-control-docs/form-control-docs.component'; import { FormDocsComponent } from './components/form-docs/form-docs.component'; import { FormsOverviewComponent } from './components/form-docs/components/forms-overview/forms-overview.component'; @@ -95,6 +97,7 @@ import { CheckboxDocsComponent } from './components/form-docs/components/checkbo GoCheckboxModule, GoCopyModule, GoDatepickerModule, + GoFileUploadModule, GoIconButtonModule, GoIconModule, GoInputModule, @@ -122,6 +125,7 @@ import { CheckboxDocsComponent } from './components/form-docs/components/checkbo CopyDocsComponent, FormControlDocsComponent, DatepickerDocsComponent, + FileUploadDocsComponent, FormDocsComponent, FormsOverviewComponent, IconButtonDocsComponent, From 455ef065349f252ecccbff011409c1ba3d306e91 Mon Sep 17 00:00:00 2001 From: Steven Ulmer Date: Wed, 23 Oct 2019 13:07:48 -0400 Subject: [PATCH 10/12] add dark theme to file upload --- .../go-dragon-drop.directive.ts | 20 ++++--- .../go-file-upload.component.html | 57 ++++++++++--------- .../go-file-upload.component.scss | 39 ++++++++++--- .../go-file-upload.component.ts | 17 +++--- .../file-upload-docs.component.html | 30 ++++++++++ .../file-upload-docs.component.ts | 9 +++ .../test-page-3/test-page-3.component.html | 2 - 7 files changed, 122 insertions(+), 52 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-dragon-drop.directive.ts b/projects/go-lib/src/lib/components/go-file-upload/go-dragon-drop.directive.ts index 73e931c35..8f5ec478d 100644 --- a/projects/go-lib/src/lib/components/go-file-upload/go-dragon-drop.directive.ts +++ b/projects/go-lib/src/lib/components/go-file-upload/go-dragon-drop.directive.ts @@ -1,12 +1,21 @@ -import { Directive, EventEmitter, HostBinding, HostListener, Output } from '@angular/core'; +import { Directive, EventEmitter, HostBinding, HostListener, Input, Output } from '@angular/core'; @Directive({ selector: '[goDragonDrop]' }) export class DragonDropDirective { - @Output() fileDropped: EventEmitter = new EventEmitter(); + active: boolean = false; + @Input() class: string = ''; // override the standard class attr with a new one. + @Input() activeClass: string = ''; + @Output() dropped: EventEmitter = new EventEmitter(); - @HostBinding('class.go-file-upload--active') active: boolean = false; + @HostBinding('class') + get hostClasses(): string { + return [ + this.class, + this.active ? this.activeClass : '', + ].join(' '); + } // Dragover listener @HostListener('dragover', ['$event']) onDragOver(evt: Event): void { @@ -27,9 +36,6 @@ export class DragonDropDirective { evt.preventDefault(); evt.stopPropagation(); this.active = false; - const files: File[] = evt.dataTransfer.files; - if (files.length > 0) { - this.fileDropped.emit(files); - } + this.dropped.emit(evt); } } diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html index c79946cd8..2747cfb53 100644 --- a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html @@ -3,38 +3,41 @@ [ngClass]="{'go-form__label--dark': theme === 'dark'}"> {{ label }} -
-
- - Drag and Drop File or Click to Browse +
+
+
+ + Drag and Drop File or Click to Browse +
+
+ + Uploading File... +
+
+ + File Selected +
+
-
- - Uploading File... -
-
- - File Selected -
-
- - + +

- {{ file }} + {{ file }}

diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.scss b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.scss index f0d9e9680..8f4200135 100644 --- a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.scss +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.scss @@ -6,20 +6,37 @@ opacity: 0.8; } -input[type="file"] { +.go-file-upload__input { visibility: hidden; } .go-file-upload { height: 10rem; - border: 2px dashed grey; - border-radius: 5px; - - &.go-file-upload--disabled { - color: lighten($theme-light-color, 40); - cursor: not-allowed; - pointer-events: none; - border-style: solid; + border: 1px dashed $theme-light-border; + border-radius: $global-radius; +} + +.go-file-upload--disabled { + color: lighten($theme-light-color, 40); + cursor: not-allowed; + pointer-events: none; + border-style: solid; +} + +.go-file-upload--dark { + border: 1px dashed $theme-dark-border; + background-color: $theme-dark-bg; + border-radius: $global-radius; + color: $theme-dark-color; + + .go-file-upload:hover { + background-color: $theme-dark-bg-hover; + color: $theme-dark-color-hover + } + + .go-file-upload--active { + color: $theme-dark-color-hover; + background-color: $theme-dark-bg-hover; } } @@ -60,3 +77,7 @@ input[type="file"] { .file-name__label { padding-bottom: .25rem; } + +.go-file-upload__file-name--dark { + color: $theme-dark-color; +} diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts index bd0a33cd6..222d67f0a 100644 --- a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts @@ -36,13 +36,16 @@ export class GoFileUploadComponent implements OnInit { }); } - onFilePicked(files: FileList): void { - Array.from(files).forEach((file: any) => { - this.files.push(this.patchValues(file)); - this.filePreview.push(file.name); - }); - if (!this.multiple) { - this.state = 'selected'; + onFilePicked(evt: any): void { + const files: File[] = evt.dataTransfer.files; + if (files.length > 0) { + Array.from(files).forEach((file: any) => { + this.files.push(this.patchValues(file)); + this.filePreview.push(file.name); + }); + if (!this.multiple) { + this.state = 'selected'; + } } } diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/file-upload-docs/file-upload-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/file-upload-docs/file-upload-docs.component.html index b5dbcde0c..bf05686f6 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/file-upload-docs/file-upload-docs.component.html +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/file-upload-docs/file-upload-docs.component.html @@ -239,4 +239,34 @@

Code

+ + + +

Component Theme

+
+ +

+ A dark or light theme can be triggered through the @Input theme: 'dark' | 'light' = 'light'; + binding. The theme signifies which color of background the element is being placed upon. A light theme will be good for a light background, + while a dark theme would be better for something like being placed in the off canvas which has a dark background. +

+
+
+

View

+ +
+
+

Code

+ +
+
+
+
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/file-upload-docs/file-upload-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/file-upload-docs/file-upload-docs.component.ts index 8da027978..066a07fb5 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/file-upload-docs/file-upload-docs.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/file-upload-docs/file-upload-docs.component.ts @@ -13,6 +13,7 @@ export class FileUploadDocsComponent implements OnInit { fileControl5: FormControl = new FormControl(''); fileControl6: FormControl = new FormControl(''); fileControl7: FormControl = new FormControl(''); + fileControl8: FormControl = new FormControl(''); hints: Array = [ 'Please upload your best picture', @@ -88,6 +89,14 @@ export class FileUploadDocsComponent implements OnInit { > `; + basicThemeExample: string = ` + + `; + ngOnInit(): void { setTimeout((): void => { this.fileControl5.setErrors([ diff --git a/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html b/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html index caa614191..2e2ac085d 100644 --- a/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html +++ b/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html @@ -48,8 +48,6 @@

Date: Wed, 23 Oct 2019 13:12:02 -0400 Subject: [PATCH 11/12] export drag and drop directive --- projects/go-lib/src/public_api.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/go-lib/src/public_api.ts b/projects/go-lib/src/public_api.ts index 63a7c0689..2b4045d55 100644 --- a/projects/go-lib/src/public_api.ts +++ b/projects/go-lib/src/public_api.ts @@ -47,6 +47,7 @@ export * from './lib/components/go-datepicker/go-datepicker.module'; // File Upload export * from './lib/components/go-file-upload/go-file-upload.component'; export * from './lib/components/go-file-upload/go-file-upload.module'; +export * from './lib/components/go-file-upload/go-dragon-drop.directive'; // Footer export * from './lib/components/go-footer/go-footer.component'; From 63c737db900ded28118489722c5ccc4ec0fb9bce Mon Sep 17 00:00:00 2001 From: Steven Ulmer Date: Wed, 23 Oct 2019 13:35:08 -0400 Subject: [PATCH 12/12] add positive checkmark for file upload --- .../components/go-file-upload/go-file-upload.component.html | 2 +- .../components/go-file-upload/go-file-upload.component.scss | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html index 2747cfb53..8bacb9894 100644 --- a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html +++ b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html @@ -20,7 +20,7 @@ Uploading File...
- + File Selected