diff options
author | Ittay Stern <ittay.stern@att.com> | 2018-08-29 17:01:32 +0300 |
---|---|---|
committer | Ittay Stern <ittay.stern@att.com> | 2019-02-18 18:35:30 +0200 |
commit | 6f900cc45d7dd7f97430812b86b5c1d1693c8ae3 (patch) | |
tree | 936005c364dc5a7264d6304d4777c3d83494db22 /vid-webpack-master/src/app/shared/components/formControls/component/file | |
parent | 67d99f816cc583643c35193197594cf78d8ce60a (diff) |
merge from ecomp a88f0072 - Modern UI
Issue-ID: VID-378
Change-Id: Ibcb23dd27f550cf32ce2fe0239f0f496ae014ff6
Signed-off-by: Ittay Stern <ittay.stern@att.com>
Diffstat (limited to 'vid-webpack-master/src/app/shared/components/formControls/component/file')
5 files changed, 205 insertions, 0 deletions
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.html b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.html new file mode 100644 index 000000000..bcbe91e5e --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.html @@ -0,0 +1,22 @@ +<div class="details-item file-form-control"> + <label [ngClass]="{'required': data.isRequired()}" for="{{data?.controlName}}">{{data?.displayName}}:</label> + <label for="{{data?.controlName}}" class="file-input-wrapper" [ngClass]="{'file-uploaded': fileUploader.files && fileUploader.files[0] || data.selectedFile != data.placeHolder}"> + <span data-tests-id="file-name" class="file-name"> + {{ fileUploader.files && fileUploader.files[0] ? fileUploader.files[0].name : data.selectedFile}} + </span> + <input id="{{data?.controlName}}" + name="{{data?.controlName}}" + class="form-control input-text" + [formControl]="form?.controls[data?.controlName]" + [ngClass]="{'error-style' : form?.controls[data?.controlName]?.touched && form?.controls[data?.controlName]?.errors}" + type="file" + #fileUploader + accept="{{data?.acceptedExtentions}}" + (change)="data?.onChange($event.target.files, form)"> + <input *ngFor="let hiddenFile of data?.hiddenFile" type="hidden" id="{{hiddenFile.controlName}}" name="{{hiddenFile.controlName}}" + [formControl]="form?.controls[hiddenFile.controlName]"/> + <span class="delete" data-tests-id="remove-uploaded-file" (click)="onDelete($event, data, form)">X</span> + <span class="icon-browse"></span> + </label> +</div> + diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.scss b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.scss new file mode 100644 index 000000000..98fae0249 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.scss @@ -0,0 +1,87 @@ +.file-form-control{ + label{ + color: #191919; + } + input[type=file] { + opacity: 0; + flex: 0; + } + .file-input-wrapper{ + display: flex; + background: #FFFFFF; + border: 1px solid #D2D2D2; + border-radius: 2px; + height: 38px; + &:hover{ + cursor: pointer; + border: 1px solid #009FDB; + .icon-browse{ + background: #E6F6FB; + border-left: 1px solid #009FDB; + &:before{ + color: #009FDB; + } + } + } + &:active{ + .icon-browse{ + background: #1EB9F3; + border-left: 1px solid #009FDB; + &:before{ + color: #ffffff; + } + } + } + .file-name { + font-family: OpenSans-Italic; + font-weight: normal; + font-size: 14px; + color: #959595; + margin: 9px; + width: 100%; + } + .icon-browse{ + z-index: 1; + margin-left: auto; + margin-bottom: 0; + cursor: pointer; + content: "\e90d"; + color: #5A5A5A; + font-size: 30px; + display: block; + text-align: center; + padding-top: 4px; + background: #F2F2F2; + border-left: 1px solid #D2D2D2; + width: 36px; + height:100%; + &:before{ + content: "\e90d"; + color: #5A5A5A; + } + } + .delete{ + visibility: hidden; + cursor: pointer; + font-size: 14px; + margin-right: 10px; + margin-top: 9px; + color: #5a5a5a; + margin-left: 10px; + z-index: 1; + &:hover{ + color: #000000; + } + } + &.file-uploaded{ + .file-name{ + font-family: OpenSans-Regular; + font-size: 14px; + color: #000000; + } + .delete{ + visibility: visible; + } + } + } +} diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.spec.ts b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.spec.ts new file mode 100644 index 000000000..e27f5115a --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.spec.ts @@ -0,0 +1,62 @@ +import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core' +import {FileFormControlComponent} from "./file.formControl.component"; +import {CommonModule} from "@angular/common"; +import {FormBuilder, FormControl, ReactiveFormsModule, Validators} from "@angular/forms"; +import {ValidatorModel, ValidatorOptions} from "../../../../models/formControlModels/formControl.model"; +import {FormControlMessageErrorComponent} from "../../errorMessage/formControlMessageError.component"; +import {BrowserModule} from "@angular/platform-browser"; +import {TooltipModule} from "ngx-tooltip"; +import {FileFormControl} from "../../../../models/formControlModels/fileFormControl.model"; + +describe('File Form Control Component', () => { + let component: FileFormControlComponent; + let fixture: ComponentFixture<FileFormControlComponent>; + let fb: FormBuilder; + + + beforeAll(done => (async () => { + TestBed.configureTestingModule({ + imports: [CommonModule, BrowserModule, ReactiveFormsModule, TooltipModule], + providers: [FormBuilder], + declarations: [FileFormControlComponent, FormControlMessageErrorComponent], + schemas: [CUSTOM_ELEMENTS_SCHEMA] + }); + await TestBed.compileComponents(); + + fixture = TestBed.createComponent(FileFormControlComponent); + component = fixture.componentInstance; + fb = TestBed.get(FormBuilder); + + })().then(done).catch(done.fail)); + + test('file component should initialize basic parameters', () => { + component.data = new FileFormControl({ + displayName: "display Name", + validations: [new ValidatorModel(ValidatorOptions.required, 'is required')], + dataTestId: "data-test-id", + placeHolder: "place holder", + controlName: 'testFile', + acceptedExtentions: "json" + }); + + component.form = fb.group({ + 'testFile': new FormControl({ + value: component.data.selectedFile, + disabled: false + }, + Validators.compose(component.data.validations.map(item => item.validator)) + ), + }); + + component.data.onDelete = function () { + component.form.controls['testFile'].setValue('onDelete'); + }; + + expect(component.form.controls['testFile'].value).toEqual("place holder"); + let event = new Event("onDelete", null); + component.data.onDelete(event, component.data, component.form); + expect(component.form.controls['testFile'].value).toEqual('onDelete'); + }) +}); + diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.ts b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.ts new file mode 100644 index 000000000..2c2172005 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.ts @@ -0,0 +1,27 @@ +import {Component, ElementRef, Input, ViewChild} from "@angular/core"; +import {FormGroup} from "@angular/forms"; +import {FileFormControl} from "../../../../models/formControlModels/fileFormControl.model"; + +@Component({ + selector : 'file-form-control', + templateUrl : './file.formControl.component.html', + styleUrls : ['./file.formControl.component.scss'] +}) + +export class FileFormControlComponent { + @Input() data: FileFormControl = null; + @Input() form: FormGroup; + @ViewChild('fileUploader') + fileUploader:ElementRef ; + + onDelete(event, data, form) { + event.stopPropagation(); + event.preventDefault(); + form.value[data.controlName] = this.fileUploader.nativeElement.value = ""; + data.selectedFile = data.placeHolder; + if (data.onDelete){ + data.onDelete(form); + } + + } +} diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/file/fileUnit.enum.ts b/vid-webpack-master/src/app/shared/components/formControls/component/file/fileUnit.enum.ts new file mode 100644 index 000000000..d875e486c --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/file/fileUnit.enum.ts @@ -0,0 +1,7 @@ +export enum FileUnit { + b, + B, + KB, + MB, + GB +} |