diff options
Diffstat (limited to 'vid-webpack-master/src/app/shared/components/genericForm/genericFormSharedComponent')
4 files changed, 109 insertions, 0 deletions
diff --git a/vid-webpack-master/src/app/shared/components/genericForm/genericFormSharedComponent/uploadFiles/upload-files-link.component.html b/vid-webpack-master/src/app/shared/components/genericForm/genericFormSharedComponent/uploadFiles/upload-files-link.component.html new file mode 100644 index 000000000..6f59c0ce2 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/genericForm/genericFormSharedComponent/uploadFiles/upload-files-link.component.html @@ -0,0 +1,15 @@ +<div> + <a [attr.data-tests-id]="uploadFilesModel.dataTestId" + (click)="uploadFilesTrigger()" + href="javascript:void(0)" + class="upload-text" + [class.disabled]="uploadFilesModel.isDisabled && uploadFilesModel.isDisabled(form)">{{uploadFilesModel.uploadText || 'Upload'}}</a> + <span class="hide-span"> + <input + type="file" + #fileInput + ng2FileSelect + [uploader]="uploader" + [attr.data-tests-id]="uploadFilesModel.dataTestId + '-input'"/> + </span> +</div> diff --git a/vid-webpack-master/src/app/shared/components/genericForm/genericFormSharedComponent/uploadFiles/upload-files-link.component.scss b/vid-webpack-master/src/app/shared/components/genericForm/genericFormSharedComponent/uploadFiles/upload-files-link.component.scss new file mode 100644 index 000000000..ce9e14fbe --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/genericForm/genericFormSharedComponent/uploadFiles/upload-files-link.component.scss @@ -0,0 +1,23 @@ +.upload-text { + margin-left: 30px; + font-family: OpenSans-Semibold; + font-size: 14px; + line-height: 23px; +} + +a.disabled { + color: gray; + cursor: not-allowed; + text-decoration: underline; +} + +.hide-span { + visibility: hidden; + position: absolute; + overflow: hidden; + width: 0px; + height: 0px; + border: none; + margin: 0; + padding: 0 +} diff --git a/vid-webpack-master/src/app/shared/components/genericForm/genericFormSharedComponent/uploadFiles/upload-files-link.component.ts b/vid-webpack-master/src/app/shared/components/genericForm/genericFormSharedComponent/uploadFiles/upload-files-link.component.ts new file mode 100644 index 000000000..803d5d053 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/genericForm/genericFormSharedComponent/uploadFiles/upload-files-link.component.ts @@ -0,0 +1,41 @@ +import {Component, ElementRef, Input, OnInit, ViewChild} from "@angular/core"; +import {FileItem, FileUploader} from "ng2-file-upload"; +import {UploadFilesLinkModel} from "./upload-files-link.model"; +import {FormGroup} from "@angular/forms"; + +@Component({ + selector: 'upload-files', + templateUrl: './upload-files-link.component.html', + styleUrls: ['./upload-files-link.component.scss'] +}) +export class UploadFilesLinkComponent implements OnInit { + uploader: FileUploader; + @Input() uploadFilesModel: UploadFilesLinkModel; + @Input() form: FormGroup; + @ViewChild('fileInput', {static: false}) fileInput: ElementRef; + + ngOnInit(): void { + this.uploader = new FileUploader({}); + + this.uploader.onAfterAddingAll = async (files: FileItem[]) => { + const result = await this.uploadFilesModel.uploadMethod.call(files, this.form); + if (result && this.uploadFilesModel.onSuccess) { + this.uploadFilesModel.onSuccess.call(this.form); + } else if (!result && this.uploadFilesModel.onFailed) { + this.uploadFilesModel.onFailed.call(this.form); + } + this.uploadFilesModel.uploadText = result ? 'Upload another' : 'Upload' + }; + this.resetUpload(); + } + + resetUpload(): void { + this.fileInput.nativeElement.value = ''; + } + + uploadFilesTrigger() { + if (this.uploadFilesModel.isDisabled && !this.uploadFilesModel.isDisabled(this.form)) { + this.fileInput.nativeElement.click(); + } + } +} diff --git a/vid-webpack-master/src/app/shared/components/genericForm/genericFormSharedComponent/uploadFiles/upload-files-link.model.ts b/vid-webpack-master/src/app/shared/components/genericForm/genericFormSharedComponent/uploadFiles/upload-files-link.model.ts new file mode 100644 index 000000000..beb54f43a --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/genericForm/genericFormSharedComponent/uploadFiles/upload-files-link.model.ts @@ -0,0 +1,30 @@ +import {FileItem} from "ng2-file-upload"; + +export class UploadFilesLinkModel { + uploadText?: string; + + /********************************************************************* + Implement success method - run after uploadMethod return true result + **********************************************************************/ + onSuccess?: (...args) => void; + + /********************************************************************* + Implement failed method - run after uploadMethod return false result + **********************************************************************/ + onFailed?: (...args) => void; + + /********************************************************************************* + Implement upload method and return the upload result status (false/true) + *********************************************************************************/ + uploadMethod: (file: FileItem[], ...args) => Promise<boolean>; + + /******************************** + Should upload file be disabled + ********************************/ + isDisabled?: (...args) => boolean; + + /******************************** + a tag data test id + ********************************/ + dataTestId : string; +} |