Auto save option with loader while closing the form implemented

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-questions/common-ques/common-ques.component.html

@@ -7,7 +7,7 @@
   </div>
   <div fxFlex="30" align="end" style="padding: 10px !important;">
       <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close"
-          matTooltipPosition="right" mat-dialog-close style="color:#e24533;background: white">
+          matTooltipPosition="right"  (click)="saveWithoutValidation();" style="color:#e24533;background: white">
           <mat-icon>close</mat-icon>
       </button>
   </div>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-questions/common-ques/common-ques.component.ts

@@ -1408,6 +1408,9 @@ onSubmit(flag?) {
   records.formid = "25";
   records.fk_createdby = this.users;
   records.is_form_validated = flag == 'go_back' ? '0' : '1'
+  if(flag == 'go_back') {
+    this.loaderService.showMatSpinnerDialog("Partial data save is in progress. Please wait...");
+}
   this.quesService.savePDFormDetailsWithID(records).subscribe(result=>{
     if(result['dataStatus']) {
       // if(flag != 'go_back') {
@@ -1424,10 +1427,12 @@ onSubmit(flag?) {
     else {
       this.notifier.notify('warning',"Something went wrong");
     }
+    this.loaderService.closeMatSpinnerDialog()
     this.spinner_access = false
   },err=>{
     console.log("Error in savePDFormDetails",err);
     this.notifier.notify('danger',"Network Error");
+    this.loaderService.closeMatSpinnerDialog()
     this.spinner_access = false
   })
 }
@@ -1671,6 +1676,15 @@ dynamicOnChangeValidations(choosed_value,controls_arr,value_compare) {
 })
   }
 }
+saveWithoutValidation() {
+  if(this.firstFormGroup.dirty){
+            this.onSubmit('go_back');
+        }
+        else{
+          this.dialogRef.close()
+        }
+}
+   
 ngOnDestroy() {
   console.log("Common ques component destroyed");
   if(this.firstFormGroup.dirty){

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-questions/employer-info/employer-info.component.html

@@ -7,7 +7,7 @@
   </div>
   <div fxFlex="30" align="end" style="padding: 10px !important;">
       <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close"
-          matTooltipPosition="right" mat-dialog-close style="color:#e24533;background: white">
+          matTooltipPosition="right" (click)="saveWithoutValidation();" style="color:#e24533;background: white">
           <mat-icon>close</mat-icon>
       </button>
   </div>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-questions/employer-info/employer-info.component.ts

@@ -1505,6 +1505,9 @@ records.questions = records.questions.filter(v=>v.form_id != '12.1' && v.form_id
   records.formid = "25";
   records.fk_createdby = this.users;
   records.is_form_validated = flag == 'go_back' ? '0' : '1'
+  if(flag == 'go_back') {
+      this.loaderService.showMatSpinnerDialog("Partial data save is in progress. Please wait...");
+  }
   this.quesService.savePDFormDetailsWithID(records).subscribe(result=>{
     if(result['dataStatus']) {
       // if(flag != 'go_back') {
@@ -1521,10 +1524,12 @@ records.questions = records.questions.filter(v=>v.form_id != '12.1' && v.form_id
     else {
       this.notifier.notify('info',"Something went wrong");
     }
+    this.loaderService.closeMatSpinnerDialog()
     this.spinner_access = false
   },err=>{
     console.log("Error in savePDFormDetails",err);
     this.notifier.notify('info',"Network Error");
+    this.loaderService.closeMatSpinnerDialog()
     this.spinner_access = false
   })
   }
@@ -1815,6 +1820,15 @@ records.questions = records.questions.filter(v=>v.form_id != '12.1' && v.form_id
   //         this.onSubmit('go_back');
   //     }
   //   }
+
+  saveWithoutValidation() {
+    if(this.employerForm.dirty){
+              this.onSubmit('go_back');
+          }
+          else{
+            this.dialogRef.close()
+          }
+  }
      
   
   formDate(value){

ng6-seed/src/app/shared/loaderService/loader.service.ts

@@ -36,9 +36,10 @@ export class LoaderService {
   hide() {
     this.loaderSubject.next(<LoaderState>{ show: false });
   }
-  showMatSpinnerDialog() {
+  showMatSpinnerDialog(message = '') {
      this.spinnerdialogRef = this.dialog.open(ProgressSpineerDialogComponent, {
       panelClass: 'transparent',
+      data:message,
       // minHeight:'20%',
       minWidth:'20%',
       disableClose: true

ng6-seed/src/app/shared/progress-spineer-dialog/progress-spineer-dialog.component.html

@@ -1 +1,4 @@
-<mat-spinner></mat-spinner>
+<div fxLayout="column" fxLayoutAlign="center">
+    <mat-spinner style="text-align: center;" fxLayoutAlign="center center"></mat-spinner>
+        <p style="font-weight: bold;color: white;text-align: center;"> {{spinnerMsg}}</p>
+    </div>

ng6-seed/src/app/shared/progress-spineer-dialog/progress-spineer-dialog.component.scss

@@ -2,4 +2,9 @@
     box-shadow: none;
     background: rgba(0, 0, 0, 0.0);
 }
+mat-spinner {
+    @media(min-width:600px) {
+        // margin-left: 75px;
+    }
+}
 }

ng6-seed/src/app/shared/progress-spineer-dialog/progress-spineer-dialog.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material';
 
 @Component({
   selector: 'app-progress-spineer-dialog',
@@ -6,8 +7,11 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./progress-spineer-dialog.component.scss']
 })
 export class ProgressSpineerDialogComponent implements OnInit {
+  spinnerMsg: any;
 
-  constructor() { }
+  constructor(@Inject(MAT_DIALOG_DATA) private data) {
+    this.spinnerMsg= this.data
+   }
 
   ngOnInit() {
   }

ng6-seed/src/environments/environment.prod.ts

@@ -30,7 +30,7 @@ export const environment = {
     },
     credential:{
       uname:"officerbot@sine.com",
-      pwd:"bot1234"
+      pwd:"bot12345"
     }
 
 };