HIV-402: formentry pdf creation fix

Author: madvincy

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-file-uploader",
-  "version": "0.0.14",
+  "version": "0.0.17",
   "main": "ngx-file-uploader/dist/ngx-file-uploader",
   "scripts": {
     "ng": "ng",

projects/ngx-file-uploader/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-file-uploader",
-  "version": "0.0.14",
+  "version": "0.0.17",
   "peerDependencies": {
     "@angular/common": "^6.1.0",
     "@angular/core": "^6.1.0",

projects/ngx-file-uploader/src/lib/ngx-file-uploader.component.html

@@ -54,12 +54,12 @@
         </a>
        </div>
   </div>
-  <div class="panel-footer">
+  <div *ngIf="uploading" class="panel-footer">
       <button *ngIf="UploadCaptions" type="button" (click)="upload()" class="button pull-right">
           <span class="glyphicon glyphicon-upload"></span> Upload Files
       </button>
-      <button *ngIf="!pdfAvailable && fileUpload || liveCamera || merge" type="button" [disabled]="!urls[1]" (click)="mergeImages()"  title="merge the images as pages in one pdf document"  class="button">
-        <span class="glyphicon glyphicon-upload"></span> Merge Files
+      <button *ngIf="!pdfAvailable && fileUpload || liveCamera || merge" type="button" [hidden]="!urls[1]" (click)="mergeImages()"  title="merge the images as pages in one pdf document"  class="button">
+        <span class="glyphicon glyphicon-upload"></span> Merge or convert to PDF
       </button>
   </div>
 </div>
@@ -80,9 +80,9 @@
     <button *ngIf="value" type="button" (click)="clear()" class="btn btn-default image-preview-clear">
                       <span class="glyphicon glyphicon-remove"></span> Clear
   </button>
-  <button type="button" (click)="upload()" class="button">
+  <!-- <button  *ngIf="uploading" type="button" (click)="upload()" class="button">
     <span class="glyphicon glyphicon-upload"></span> Upload
-</button>
+</button> -->
   </div>
 </div>
 <div *ngIf="!mobile" class="image-upload-wrap">

projects/ngx-file-uploader/src/lib/ngx-file-uploader.component.scss

@@ -121,6 +121,24 @@
     margin: auto;
     padding: 20px;
   }
+  .buttonMerge {
+    display: inline-block;
+    padding: 6px 12px;
+    margin-bottom: 0;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.42857143;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    -ms-touch-action: manipulation;
+    touch-action: manipulation;
+    cursor: pointer;
+    background-color: greenyellow;
+    border: none;
+    color: #FFFFFF;
+    text-decoration: none;
+  }
   .button {
     display: inline-block;
     padding: 6px 12px;

projects/ngx-file-uploader/src/lib/ngx-file-uploader.component.ts

@@ -31,6 +31,7 @@ export class NgxFileUploaderComponent implements ControlValueAccessor, OnInit {
   public fileList = new Array<any>();
   public fileType: string;
   public message = '';
+  public pdfCreated = false;
   public messageType = '';
   public liveCamera = false;
   public pdfAvailable = false;
@@ -129,9 +130,6 @@ export class NgxFileUploaderComponent implements ControlValueAccessor, OnInit {
     const files = event.srcElement.files;
     this.uploading = true;
     // const fileToLoad = files;
-if (this.fieType === 'liveCamera') {
-this.UploadCaptions = true;
-}
     if (files) {
       for (const file of files) {
         const fileReader = new FileReader();
@@ -158,6 +156,10 @@ this.UploadCaptions = true;
             if (!this.singleFile) {
               this.urls.push(payload);
               this.fileList.push(payload);
+              this.UploadCaptions = true;
+              if (this.fieType === 'image' || 'liveCamera') {
+                this.checkFilesSelected();
+              }
             } else {
               this.fileChanged.emit(payload);
               this.back();
@@ -189,18 +191,14 @@ public messageViewTimeout () {
     this.UploadCaptions = false;
     this.singleFile = false;
     this.pdfAvailable = false;
+    this.uploading = false;
     this.merge = false;
     this.fileUpload = false;
     this.liveCamera = false;
   }
   public toggleVisibility(filetype: string) {
     this.fieType = filetype;
     if (filetype === 'image') {
-      if (this.formEntry) {
-        this.message = ' Images will be merged into one pdf when uploaded in formentry';
-        this.messageType = 'danger';
-        this.messageViewTimeout();
-      }
       this.fileType = 'image/png, image/jpeg, image/gif';
       this.fileUpload = true;
 
@@ -228,8 +226,10 @@ public messageViewTimeout () {
   }
 
   public upload() {
-    if (this.formEntry && this.pdfAvailable === false) {
-     this.mergeImages();
+    if (!this.pdfCreated) {
+      if (this.formEntry && !this.pdfAvailable) {
+        this.mergeImages();
+       }
     }
     this.uploadData.emit(this.fileList);
     this.back();
@@ -275,6 +275,8 @@ public messageViewTimeout () {
     this.urls.push(payload);
     this.singleFile = false;
     this.UploadCaptions = true;
+    this.pdfCreated = true;
+   this.pdfAvailable = true;
 
   }
   public delete(urls: any) {
@@ -330,14 +332,22 @@ public messageViewTimeout () {
     if (this.singleFile) {
       this.urls = [];
       this.fileList = [];
-      this.pushData(webcamImage);
-
     }
     this.pushData(webcamImage);
+    this.UploadCaptions = true;
+    this.uploading = true;
+  }
+  public checkFilesSelected() {
+    if (this.formEntry &&  this.urls.length > 1) {
+      this.message = '*Please click merge to convert and combine  Multipe images into one PDF file';
+      this.messageType = 'danger';
+      this.messageViewTimeout();
+    }
   }
   public pushData(webcamImage) {
     this.urls.push(webcamImage);
     this.fileList.push(webcamImage);
+    this.checkFilesSelected();
   }
 
   public cameraWasSwitched(deviceId: string): void {

src/app/app.component.html

@@ -1,3 +1,3 @@
-Image {{dataModel}} <lib-file-uploader
+<lib-file-uploader
   [(ngModel)]="dataModel" (onClear)="clear()" (fileChanged)="upload($event)">
   </lib-file-uploader>