Fairoj : Sales PD image section issue started

src/pages/sales_pd/components/ques-template/ques-template.html

@@ -73,9 +73,24 @@
                             <!-- <input  *ngIf="image.Name =='' && image.option != 'dummy'" width="20px" ion-input type="text" placeholder="Document Name" (blur)="changeName($event.target.value,i,image.image)"> -->
                             <!-- <button *ngIf="image.option != 'dummy'" ion-button clear color="optblue" (click)="removeImg(i)"><ion-icon style="font-size:22px" name="md-trash"></ion-icon></button> -->
                             </div>
-                            <div style="justify-content: center">
+                            <ion-row style="justify-content: center">
+                              <ion-col col-8>
                             <button ion-button clear color="optblue"  (click)="captureImg(p_i,parent_ques)"><ion-icon style="font-size: 30px" name="md-camera"></ion-icon></button>
-                              </div>
+                          </ion-col>
+                          <!-- IMAGE STATUS ICON FOR INPROGRESS, COMPLETED AND FAILED -->
+                          <ion-col col-4 *ngIf="parent_ques.get('is_image_status').value == true">
+                            <ion-spinner name="crescent" style="width: 20px;
+                            height: 20px;" *ngIf="parent_ques.get('is_loader').value == true"></ion-spinner>
+                             <ion-icon style="color: #008828;float: right;
+                             margin-right: 30%;" *ngIf="parent_ques.get('is_saved').value == true" name="checkmark-circle-outline"></ion-icon>
+                             <span style="margin:0px;" *ngIf="(parent_ques.get('is_saved').value == false &&
+                             parent_ques.get('is_loader').value == false) && (parent_ques.value.hasOwnProperty('is_saved') &&
+                             parent_ques.value.hasOwnProperty('is_loader'))" (click)="imageReupload(parent_ques)">
+                             <ion-row style="margin-top: -17px;padding:0px;"><button ion-button clear><ion-icon style="color:lightcoral;" name="refresh-circle"></ion-icon></button></ion-row>
+                             <ion-row style="margin-top: -20px;padding:0px;"><p style="font-size: 10px">Click to ReUpload</p></ion-row>
+                            </span>
+                          </ion-col>
+                            </ion-row>
                               <!-- <ng-container ngProjectAs="mat-hint">
                                 <mat-error >Please capture the image</mat-error>
                               </ng-container> -->
@@ -292,12 +307,28 @@
               
                     <ion-col align-self: center col-6 no-padding text-center  *ngFor="let single_ques of group_ques.controls.questions['controls'];let s_i=index;let s_l=last"
                     [formGroupName]="s_i">
-                        <div style="width: 100%;justify-content: center;text-align: center;align-content: center;" *ngIf="single_ques.get('answer_value').value != ''">
+                        <div style="width: 100%;justify-content: center;text-align: center;align-content: center;margin:2%;" *ngIf="single_ques.get('answer_value').value != ''">
                           <ion-row style="width: 100%">
                             <img [src]="single_ques.get('answer_value').value" imageViewer  class="doc-image-bucket" ><br/>
                           </ion-row>
                           <ion-row style="width: 130px;margin-bottom: 5px;text-align: left">
-                            <span style="font-size: 11px;padding: 0px;margin: 0px;">{{single_ques.get('question').value}} {{g_i+1}}</span>
+                            <ion-col col-8>
+                            <span style="font-size: 12px;padding: 0px;margin: 0px;">{{single_ques.get('question').value}} {{g_i+1}}</span>
+                          </ion-col>
+
+                          <!-- IMAGE STATUS ICON FOR INPROGRESS, COMPLETED AND FAILED -->
+                          <ion-col col-4 *ngIf="single_ques.get('is_image_status').value == true">
+                            <ion-spinner name="crescent" style="width: 20px;
+                            height: 20px;" *ngIf="single_ques.get('is_loader').value == true"></ion-spinner>
+                             <ion-icon style="color: #008828;float: right;
+                             margin-right: 30%;" *ngIf="single_ques.get('is_saved').value == true" name="checkmark-circle-outline"></ion-icon>
+                             <span style="margin:0px;" *ngIf="(single_ques.get('is_saved').value == false &&
+                             single_ques.get('is_loader').value == false) && (single_ques.value.hasOwnProperty('is_saved') &&
+                             single_ques.value.hasOwnProperty('is_loader'))" (click)="imageReupload(single_ques)">
+                             <ion-row style="margin-top: -17px;padding:0px;"><button ion-button clear><ion-icon style="color:lightcoral;" name="refresh-circle"></ion-icon></button></ion-row>
+                             <ion-row style="margin-top: -20px;padding:0px;"><p style="font-size: 10px">Click to ReUpload</p></ion-row>
+                            </span>
+                          </ion-col>
                             <!-- <input  *ngIf="image.Name =='' && image.option != 'dummy'" width="20px" ion-input type="text" placeholder="Document Name" (blur)="changeName($event.target.value,i,image.image)"> -->
                             <!-- <button  ion-button clear color="optblue" (click)="removeData(g_i,parent_ques)"><ion-icon style="font-size:22px" name="md-trash"></ion-icon></button> -->
                           </ion-row>

src/pages/sales_pd/providers/camera/camera.ts

@@ -54,7 +54,7 @@ export class CameraProvider {
     localStorage.removeItem('current_coordinates')
     
     const options = {
-      quality: 75,
+      quality: 50,
       destinationType: this.camera.DestinationType.DATA_URL,
       targetWidth: 600,
       targetHeight: 600,

src/pages/sales_pd/providers/ques-service/ques-service.ts

@@ -174,6 +174,9 @@ export class QuesServiceProvider {
       "onchange_properties":[data.onchange_properties],
       "answers":[answers_from_client.length != 0 ? answers_from_client: data.answers],
       "is_repeatable":[data.is_repeatable || null],
+      "is_loader":[''],
+      "is_saved":[''],
+      "is_image_status":[false],
       "group_title":[data.group_title || null]
     })
   }

src/pages/sales_pd/providers/sales-pd/sales-pd.ts

@@ -142,9 +142,16 @@ current_section:any;
             this.cameraService.getGeoTag().then(geoCords=>{
               params.location=geoCords
         params.fk_sales_pd_id=key_value,
-          this.http.post(this.apiUrl+'saveSalesPDImage',{records:params}).pipe().subscribe(result => {
+          this.http.post(this.apiUrl+'saveSalesPDImage',{records:params},{
+            reportProgress: true,
+          }).pipe().subscribe(result => {
           observer.next(result);
           observer.complete();
+        },err=>{
+          console.clear();
+          console.log("err>>>>",err)
+          observer.next(err);
+          observer.complete();
         })
     })
   })