Tele PD Feature enabled and Trigger without Excel upload option enabled

ng6-seed/package-lock.json

@@ -7836,6 +7836,14 @@
         "object-visit": "^1.0.0"
       }
     },
+    "mat-video": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/mat-video/-/mat-video-2.8.1.tgz",
+      "integrity": "sha512-HyLi0n9AE77BVbv3dfKMYB/CgH74+oLgneHjqTH9nSptqpIPhYD1YEbkCt4uVFrVW+LUs03qvNokslE7LRUpIw==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "math-random": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.1.tgz",

ng6-seed/package.json

@@ -52,6 +52,7 @@
     "jquery": "^3.5.1",
     "karma-jasmine": "^1.1.1",
     "leaflet": "^1.4.0",
+    "mat-video": "^2.8.1",
     "moment": "^2.24.0",
     "ng-pick-datetime": "^6.0.16",
     "ng2-charts": "1.6.0",

ng6-seed/src/app/app.module.ts

@@ -52,6 +52,7 @@ import { AdvanceFilterComponent } from './sales-pd/advance-filter/advance-filter
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
 import { ReqTokenInterceptor } from './_guard/req-token.interceptor';
+import { MatVideoModule } from 'mat-video';
 export function HttpLoaderFactory(http: HttpClient) {
     return new TranslateHttpLoader(http);
 }
@@ -108,6 +109,7 @@ export function createTranslateLoader(http: HttpClient) {
     }),
     FlexLayoutModule,
     ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
+    MatVideoModule
   ],
   providers: [
     {

ng6-seed/src/app/error/404/error-404-component.html

@@ -10,7 +10,7 @@
                 <p> Sorry, an error has occured, Requested page not found!</p>
             </div>
             <div class="error-actions">
-                <button class="mat-blue" mat-raised-button>Take me to home</button>
+                <button class="mat-blue" mat-raised-button [routerLink]="[ '/' ]" >Take me to home</button>
             </div>
         </div>
     </div>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/add-pd/add-pd.component.html

@@ -15,9 +15,9 @@
                             </div>
                             <div *ngIf="lenderShortName == 'MWISE'">
                             <mat-card-header>
-                                <mat-card-title> Step 1 : -Excel Upload </mat-card-title>
+                                <!-- <mat-card-title> Step 1 : -Excel Upload </mat-card-title> -->
                             </mat-card-header>
-                            <div fxLayoutAlign="center" >
+                            <div fxLayoutAlign="flex-end" >
                             <button [ngStyle.xs]="{'width':'100%'}" style="font-size: 1.5rem;width: 32%;" mat-raised-button color="primary" (click)="openExcelUploadModal()">
                                     Upload Excel <mat-icon>publish</mat-icon>
                             </button>
@@ -25,7 +25,7 @@
                             <br/>
                         </div>
          <!-- [ngStyle]="{'background':lenderShortName == 'MWISE' ? 'gray' : ''}" -->
-                 <mat-card *ngIf="(lenderShortName =='MWISE' && excel_file_id != null) || lenderShortName !='MWISE'">
+                 <mat-card >
                      <mat-card-header>
                          <mat-card-title> PD Details </mat-card-title>
                      </mat-card-header>
@@ -165,7 +165,16 @@
                    
     
             </mat-form-field> -->
-            <mat-form-field  fxFlex="60%%" fxFlex.xs="100%">
+            <div class="radio-gap" *ngIf="lenderShortName == 'MWISE'" fxFlex="30%" fxFlex.xs="100%">
+                    <mat-label>Is this Tele PD ?</mat-label>
+            <!-- <mat-radio-group formControlName="fk_pd_type">
+                    <mat-radio-button class="radio-btn-gap" *ngFor="let item of pdTypeList" [value]="item.pd_type_id">{{item.type_name}}</mat-radio-button>
+            </mat-radio-group> -->
+            <mat-slide-toggle color="primary" style="float: right;" [checked]="_PDtriggerForm.controls['fk_pd_type'] == '3' ? true : false"
+            (change)="changePDTypeSlideValue($event)" >
+            </mat-slide-toggle>
+        </div>
+            <mat-form-field  fxFlex="60%" fxFlex.xs="100%">
                     <mat-label>{{lenderShortName == 'MWISE' ? "Loan amount applied for (Rs)" :'Loan Amount'}}</mat-label>
                             <input matInput autocomplete="off"  formControlName="loan_amount" OnlyNumber required autocomplete="off">
                             <mat-hint align="start" style="font-size:90%" *ngIf="pdMain.loan_amount.value">{{"&#8377;"}} {{pdMain.loan_amount.value | numberToWords}} Only</mat-hint>
@@ -175,7 +184,7 @@
             </mat-form-field>
            </mat-card-content>
         </mat-card>
-        <mat-card *ngIf="(lenderShortName =='MWISE' && excel_file_id != null) || lenderShortName !='MWISE'">
+        <mat-card >
                 <mat-card-header>
                         <mat-card-title>Address Details</mat-card-title>
                 </mat-card-header>
@@ -250,7 +259,7 @@
                          </mat-card-actions>
                  </mat-card>
                  
-                 <mat-card *ngIf="(lenderShortName =='MWISE' && excel_file_id != null) || lenderShortName !='MWISE'">
+                 <mat-card >
                     <mat-card-header>
                         <mat-card-title>Applicant Details</mat-card-title>
                     </mat-card-header>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/add-pd/add-pd.component.scss

@@ -7,4 +7,34 @@ mat-form-field {
 .mat-error {
  float: right; 
 }
-  
+mat-radio-button,mat-checkbox{
+  margin-top: 13px;
+}
+.radio-gap{
+  // margin-top: 10px;
+  // margin-bottom: 10px;
+  margin: 20px;
+}
+.radio-btn-gap{
+  margin:10px;
+}
+
+::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{
+  border-color:rgb(212, 15, 15); 
+}
+
+::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle{
+  color:rgb(212, 15, 15);
+  background-color:rgb(212, 15, 15);
+}
+
+::ng-deep  .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
+    background-color:rgba(224, 22, 22, 0.308);
+}
+::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
+  background-color: rgb(212, 15, 15); 
+}
+
+::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
+  background-color:rgb(212, 15, 15); 
+}

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/add-pd/add-pd.component.ts

@@ -1164,4 +1164,13 @@ searchFun(control:any,i:number,option){
         }
       })
     }
+    changePDTypeSlideValue(event) {
+      if(event.checked) {
+        this._PDtriggerForm.controls['fk_pd_type'].setValue('3')
+      }
+      else {
+        this._PDtriggerForm.controls['fk_pd_type'].setValue('1')
+      }
+      console.log(this._PDtriggerForm.value)
+    }
 }

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/all-pd/all-pd.component.html

@@ -80,7 +80,7 @@
                 <div fxFlex.xs="20" fxFlex.sm="20" class="webhide" style="text-align: center;">
                     <p class="lettericon">{{details.pd_sno_split.lender_name}}<br/>
                         <span style="font-size: 90%">{{details.pd_sno_split.serial_no}}</span></p>
-                         <!-- <span class="lettertext" style="color: #e2412f;">{{details.pd_type_name}}</span> -->
+                         <span  *ngIf="(details.lender_short_name == 'MWISE' && details.fk_pd_type == '3') || (details.lender_short_name != 'MWISE')" class="lettertext" style="color: #e2412f;">{{details.pd_type_name}}</span>
                 </div>
                 <div fxFlex.xs="80" fxFlex.sm="80" class="webhide">
                   <div fxLayout="row wrap" style="margin-left: 6px;">
@@ -124,7 +124,7 @@
              <div fxLayout="row wrap" *ngFor="let details of pagedList | async">
             <div fxFlex.xs="20" fxFlex.sm="20" fxFlex.md="12" fxFlex.lg="12" fxFlex.xl="12" class="cell" style="justify-content:flex-end">
                 <div [ngStyle]="{'color': '#e00201','font-weight': 'bold','font-size':'16px'}" mat-line>{{details.pd_sno}}</div>
-                <!-- <span mat-line class="cell">{{details.pd_type_name}}</span> -->
+                <span mat-line class="cell" *ngIf="(details.lender_short_name == 'MWISE' && details.fk_pd_type == '3') || (details.lender_short_name != 'MWISE')">{{details.pd_type_name}}</span>
             </div>           
             <div fxFlex.xs="30" fxFlex.sm="30" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25" class="cell" style="justify-content:flex-end">
                 <span *ngIf="details.is_child" mat-line>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/completed-pd/completed-pd.component.html

@@ -78,7 +78,7 @@
               <div fxFlex.xs="20" fxFlex.sm="20" class="webhide" style="text-align: center;">
                   <p class="lettericon">{{details.pd_sno_split.lender_name}}<br/>
                       <span style="font-size: 90%">{{details.pd_sno_split.serial_no}}</span></p>
-                       <!-- <span class="lettertext" style="color: #e2412f;">{{details.pd_type_name}}</span> -->
+                       <span *ngIf="(details.lender_short_name == 'MWISE' && details.fk_pd_type == '3') || (details.lender_short_name != 'MWISE')" class="lettertext" style="color: #e2412f;">{{details.pd_type_name}}</span>
               </div>
               <div fxFlex.xs="80" fxFlex.sm="80" class="webhide">
                 <div fxLayout="row wrap" style="margin-left: 6px;">
@@ -115,7 +115,7 @@
            <div fxLayout="row wrap" *ngFor="let details of pagedList">
             <div fxFlex.xs="20" fxFlex.sm="20" fxFlex.md="12" fxFlex.lg="12" fxFlex.xl="12" class="cell" style="justify-content:flex-end">
                 <div [ngStyle]="{'color': '#e00201','font-weight': 'bold','font-size':'16px'}" mat-line>{{details.pd_sno}}</div>
-                <!-- <span mat-line class="cell">{{details.pd_type_name}}</span> -->
+                <span *ngIf="(details.lender_short_name == 'MWISE' && details.fk_pd_type == '3') || (details.lender_short_name != 'MWISE')" mat-line class="cell">{{details.pd_type_name}}</span>
             </div>           
             <div fxFlex.xs="30" fxFlex.sm="30" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25" class="cell" style="justify-content:flex-end">
                 <span *ngIf="details.is_child" mat-line>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/inprogress-pd/inprogress-pd.component.html

@@ -77,7 +77,7 @@
                 <div fxFlex.xs="20" fxFlex.sm="20" class="webhide" style="text-align: center;">
                     <p class="lettericon">{{details.pd_sno_split.lender_name}}<br/>
                         <span style="font-size: 90%">{{details.pd_sno_split.serial_no}}</span></p>
-                         <!-- <span class="lettertext" style="color: #e2412f;">{{details.pd_type_name}}</span> -->
+                         <span *ngIf="(details.lender_short_name == 'MWISE' && details.fk_pd_type == '3') || (details.lender_short_name != 'MWISE')" class="lettertext" style="color: #e2412f;">{{details.pd_type_name}}</span>
                 </div>
                 <div fxFlex.xs="80" fxFlex.sm="80" class="webhide">
                   <div fxLayout="row wrap" style="margin-left: 6px;">
@@ -114,7 +114,7 @@
              <div fxLayout="row wrap" *ngFor="let details of pagedList">
                 <div fxFlex.xs="20" fxFlex.sm="20" fxFlex.md="12" fxFlex.lg="12" fxFlex.xl="12" class="cell" style="justify-content:flex-end">
                     <div [ngStyle]="{'color': '#e00201','font-weight': 'bold','font-size':'16px'}" mat-line>{{details.pd_sno}}</div>
-                    <!-- <span mat-line class="cell">{{details.pd_type_name}}</span> -->
+                    <span *ngIf="(details.lender_short_name == 'MWISE' && details.fk_pd_type == '3') || (details.lender_short_name != 'MWISE')" mat-line class="cell">{{details.pd_type_name}}</span>
                 </div>           
                 <div fxFlex.xs="30" fxFlex.sm="30" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25" class="cell" style="justify-content:flex-end">
                     <span *ngIf="details.is_child" mat-line>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/qc-completed-pd/qc-completed-pd.component.html

@@ -79,7 +79,7 @@
               <div fxFlex.xs="20" fxFlex.sm="20" class="webhide" style="text-align: center;">
                   <p class="lettericon">{{details.pd_sno_split.lender_name}}<br/>
                       <span style="font-size: 90%">{{details.pd_sno_split.serial_no}}</span></p>
-                       <!-- <span class="lettertext" style="color: #e2412f;">{{details.pd_type_name}}</span> -->
+                       <span *ngIf="(details.lender_short_name == 'MWISE' && details.fk_pd_type == '3') || (details.lender_short_name != 'MWISE')" class="lettertext" style="color: #e2412f;">{{details.pd_type_name}}</span>
               </div>
               <div fxFlex.xs="80" fxFlex.sm="80" class="webhide">
                 <div fxLayout="row wrap" style="margin-left: 6px;">
@@ -116,7 +116,7 @@
            <div fxLayout="row wrap" *ngFor="let details of pagedList">
             <div fxFlex.xs="20" fxFlex.sm="20" fxFlex.md="12" fxFlex.lg="12" fxFlex.xl="12" class="cell" style="justify-content:flex-end">
                 <div [ngStyle]="{'color': '#e00201','font-weight': 'bold','font-size':'16px'}" mat-line>{{details.pd_sno}}</div>
-                <!-- <span mat-line class="cell">{{details.pd_type_name}}</span> -->
+                <span *ngIf="(details.lender_short_name == 'MWISE' && details.fk_pd_type == '3') || (details.lender_short_name != 'MWISE')" mat-line class="cell">{{details.pd_type_name}}</span>
             </div>           
             <div fxFlex.xs="30" fxFlex.sm="30" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25" class="cell" style="justify-content:flex-end">
                 <span *ngIf="details.is_child" mat-line>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/scheduled-pd/scheduled-pd.component.html

@@ -77,7 +77,7 @@
                         <div fxFlex.xs="20" fxFlex.sm="20" class="webhide" style="text-align: center;">
                             <p class="lettericon">{{details.pd_sno_split.lender_name}}<br/>
                                 <span style="font-size: 90%">{{details.pd_sno_split.serial_no}}</span></p>
-                                 <!-- <span class="lettertext" style="color: #e2412f;">{{details.pd_type_name}}</span> -->
+                                 <span *ngIf="(details.lender_short_name == 'MWISE' && details.fk_pd_type == '3') || (details.lender_short_name != 'MWISE')" class="lettertext" style="color: #e2412f;">{{details.pd_type_name}}</span>
                         </div>
                         <div fxFlex.xs="80" fxFlex.sm="80" class="webhide">
                           <div fxLayout="row wrap" style="margin-left: 6px;">
@@ -114,7 +114,7 @@
                      <div fxLayout="row wrap" *ngFor="let details of pagedList">
                         <div fxFlex.xs="20" fxFlex.sm="20" fxFlex.md="12" fxFlex.lg="12" fxFlex.xl="12" class="cell" style="justify-content:flex-end">
                             <div [ngStyle]="{'color': '#e00201','font-weight': 'bold','font-size':'16px'}" mat-line>{{details.pd_sno}}</div>
-                            <!-- <span mat-line class="cell">{{details.pd_type_name}}</span> -->
+                            <span *ngIf="(details.lender_short_name == 'MWISE' && details.fk_pd_type == '3') || (details.lender_short_name != 'MWISE')" mat-line class="cell">{{details.pd_type_name}}</span>
                         </div>           
                         <div fxFlex.xs="30" fxFlex.sm="30" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25" class="cell" style="justify-content:flex-end">
                             <span *ngIf="details.is_child" mat-line>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/image-capture/image-capture.component.ts

@@ -178,7 +178,7 @@ export class ImageCaptureComponent implements OnInit {
       "fk_smc_credit_pd_id": this.pdid,
       "img":imageData[index].is_multiple != 1 ? imageData[index].img_url :  imageData[index].img_data[multi_index].img_url,
       "img_name": imageData[index].img_key,
-      "location":imageData.is_multiple != 1 ? imageData[index].link :  imageData[index].img_data[multi_index].link,
+      "location":imageData[index].is_multiple != 1 ? imageData[index].link :  imageData[index].img_data[multi_index].link,
       "is_multiple":imageData[index].is_multiple
     }
       // setTimeout(()=>{

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/speed-dial-fab/speed-dial-fab.animations.ts

@@ -0,0 +1,52 @@
+import {
+    animate,
+    keyframes,
+    query,
+    stagger,
+    state,
+    style,
+    transition,
+    trigger
+  } from '@angular/animations';
+  
+  export const speedDialFabAnimations = [
+    trigger('fabToggler', [
+      state('inactive', style({
+        transform: 'rotate(0deg)'
+      })),
+      state('active', style({
+        transform: 'rotate(225deg)'
+      })),
+      transition('* <=> *', animate('200ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+    ]),
+    trigger('speedDialStagger', [
+      transition('* => *', [
+  
+        query(':enter', style({ opacity: 0 }), {optional: true}),
+  
+        query(':enter', stagger('40ms',
+          [
+            animate('200ms cubic-bezier(0.4, 0.0, 0.2, 1)',
+              keyframes(
+                [
+                  style({opacity: 0, transform: 'translateY(10px)'}),
+                  style({opacity: 1, transform: 'translateY(0)'}),
+                ]
+              )
+            )
+          ]
+        ), {optional: true}),
+  
+        query(':leave',
+          animate('200ms cubic-bezier(0.4, 0.0, 0.2, 1)',
+            keyframes([
+              style({opacity: 1}),
+              style({opacity: 0}),
+            ])
+          ), {optional: true}
+        )
+  
+      ])
+    ])
+  ];
+  

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/speed-dial-fab/speed-dial-fab.component.html

@@ -0,0 +1,26 @@
+<div id="fab-dismiss"
+     *ngIf="fabTogglerState==='active'"
+     (click)="onToggleFab()">
+</div>
+
+<div class="fab-container">
+<button mat-icon-button mat-raised-button class="fab-toggler mr-1 mb-1 hover-icon" color="optblue"
+        (click)="onToggleFab()"  matTooltip="Copy Customer Link" matTooltipPosition="above">
+  <!-- <i class="material-icons" [@fabToggler]="{value: fabTogglerState}">link</i> -->
+  <mat-icon  [@fabToggler]="{value: fabTogglerState}">link</mat-icon>
+</button>
+<div [@speedDialStagger]="buttons.length">
+  <button *ngFor="let btn of buttons"  (click)="onBtnClick(btn)"
+          mat-mini-fab
+          class="fab-secondary mr-1 mb-1 hover-icon"
+          color="secondary"
+          [matTooltip]="btn.placeholder" matTooltipPosition="above">
+    <mat-icon>{{btn.icon}}</mat-icon>
+  </button>
+</div>
+</div>
+<!-- <button *ngIf="master.fk_pd_type == '3'"
+                mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="copyCusURL(master.random_string)"
+                    matTooltip="Copy Customer Link" matTooltipPosition="above">
+                    <mat-icon>link</mat-icon>
+                </button> -->

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/speed-dial-fab/speed-dial-fab.component.scss

@@ -0,0 +1,50 @@
+.fab-container {
+    position: absolute;
+    // top: 1%;
+    // right: 35%;
+    z-index: 100;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  
+    > div {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      // margin-top: 5px;
+      // margin-top: 5px; 
+    position: absolute;
+    right: 67px;
+    // top: -13px;
+  
+      button {
+        // margin-top: 17px;
+        background: #cfdd49;
+        margin-left:10px;
+      }
+    }
+  }
+  @media(max-width:580px) {
+    .fab-container { 
+      > div { 
+        flex-direction: column !important;
+        right: 0px;
+        top: 53px;
+      }
+    }
+  }
+  
+  .fab-toggler {
+    float: right;
+    z-index: 100;
+  }
+  
+  #fab-dismiss {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 99;
+  }
+  

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/speed-dial-fab/speed-dial-fab.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SpeedDialFabComponent } from './speed-dial-fab.component';
+
+describe('SpeedDialFabComponent', () => {
+  let component: SpeedDialFabComponent;
+  let fixture: ComponentFixture<SpeedDialFabComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SpeedDialFabComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SpeedDialFabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/speed-dial-fab/speed-dial-fab.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { speedDialFabAnimations } from './speed-dial-fab.animations';
+
+@Component({
+  selector: 'app-speed-dial-fab',
+  templateUrl: './speed-dial-fab.component.html',
+  styleUrls: ['./speed-dial-fab.component.scss'],
+  animations: speedDialFabAnimations
+})
+export class SpeedDialFabComponent implements OnInit {
+
+  @Input() options;
+  @Output() fabClick = new EventEmitter()
+  buttons = [];
+  fabTogglerState = 'inactive';
+
+  constructor() { }
+
+  ngOnInit() {
+    const maxButtons = 6;
+    if (this.options.buttons.length > maxButtons) {
+      this.options.buttons.splice(5, this.options.buttons.length - maxButtons);
+    }
+  }
+
+  showItems() {
+    this.fabTogglerState = 'active';
+    this.buttons = this.options.buttons;
+  }
+
+  hideItems() {
+    this.fabTogglerState = 'inactive';
+    this.buttons = [];
+  }
+
+  onToggleFab() {
+    this.buttons.length ? this.hideItems() : this.showItems();
+  }
+  onBtnClick(btnValue) {
+    this.fabClick.emit(btnValue)
+  }
+}

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html

@@ -1,8 +1,26 @@
 
 <mat-card>
   <mat-card-content>
-    <div fxLayout="row" *ngFor="let master of pdMasterData">
+    <div fxLayout="row" *ngFor="let master of pdMasterData" fxLayoutAlign="flex-end">
+      <div fxLayout="row" fxLayoutAlign="flex-end" fxLayoutGap="68px" fxLayoutGap.xs="8px">
+         <!-- ENABLING THE FAB COPY LINK IMAGE CAPTURE AND VIDEO CALL BUTTON FOR TELE PD -->
+         <div fxLayout="column"  *ngIf="master.fk_pd_type == '3' && master.lender_short_name == 'MWISE'" >
+          <app-speed-dial-fab fxFlex="30" class="fab-group" [options]="FabOptions" (fabClick)="copyCusURL($event)"></app-speed-dial-fab>
+        </div>
+          <!-- END OF COPY LINK IMAGE CAPTURE AND VIDEO CALL BUTTON FOR TELE PD -->
       <div fxFlex="100" align="right"> 
+        <!-- <span  matTooltip="{{!videoplayback.enableBtn ? 'Recorded video is available after the PD is completed' : 'Play Recorded Video'}}" matTooltipPosition="above"> -->
+          <!--  [disabled]="!videoplayback.enableBtn" -->
+          <button  mat-stroked-button class="mr-1 mb-1"  color="primary" (click)="openPlayer()" *ngIf="master.fk_pd_type == '3' && master.lender_short_name == 'MWISE'" >
+              <mat-icon>play_circle_filled</mat-icon>&nbsp;
+            <strong>Play</strong>
+            </button>
+          <!-- </span> -->
+          <!-- *ngIf="master.fk_pd_type == '3' || master.fk_pd_type == '2'" -->
+                <button  mat-button mat-raised-button class="mr-1 mb-1"  color="primary" (click)="openVideoChat()" *ngIf="master.fk_pd_type == '3' && master.lender_short_name == 'MWISE'" >
+                    <mat-icon>videocam</mat-icon>&nbsp;
+                    <strong>Call</strong>
+                  </button>
           <button mat-raised-button class="mr-1 mb-1"  color="primary" style="cursor: not-allowed !important;">
         <strong> {{master.pd_status==pdStatusCheck.QC_COMPLETED ? 'QC Completed' : master.pd_status==pdStatusCheck.ADD_ON_PENDING ? 'Addon Pending' : master.pd_status | titlecase}}</strong>
       </button>
@@ -11,6 +29,7 @@
                 <button *ngIf="master.lender_short_name == 'MWISE' && LenderRoleID != '25' && roleAccessDetails.reports && master.pd_type_name && (currentPDStatus==pdStatusCheck.QC_COMPLETED || currentPDStatus==pdStatusCheck.COMPLETED)" mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="PD Report" matTooltipPosition="above" (click)="smcCreditPDReport(viewID)"><mat-icon>ballot</mat-icon></button>
                 <span><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon"  type="button" matTooltip="Close" matTooltipPosition="above" (click)="loadPdListCompoent()"><mat-icon>close</mat-icon></button></span>
       </div>
+      </div>
      </div>
     <div fxLayout="row wrap">
       <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40" fxFlex.lg="30" fxFlex.xl="30" *ngFor="let master of pdMasterData">
@@ -20,7 +39,7 @@
                     <mat-list-item role="listitem" style="background-color:#e00201;height:48px !important;">
                   <div fxFlex="row">
                            <div fxFlex="100">
-                      <div fxFlex="100" align="center" *ngIf="master.pd_type_name" style="color:#fff;">
+                      <div fxFlex="100" align="center" *ngIf="master.pd_sno" style="color:#fff;">
                               <i class="fa-1x fa fa-check-circle"></i><small style="margin-left: 2%; font-size: inherit">{{master.pd_sno}}</small>
                       </div>
                            </div>
@@ -30,7 +49,8 @@
                    <div fxFlex="row">
                   <div fxFlex="100">
                       <div fxFlex="50" align="left">
-                     <strong>{{master.lender_short_name}}</strong>
+                     <strong>{{master.lender_short_name}}</strong><br/>
+                     <p  style="color:#e00201;margin: 0px;" *ngIf="(master.lender_short_name == 'MWISE' && master.fk_pd_type == '3') || (master.lender_short_name != 'MWISE')" >{{master.pd_type_name}}</p>
                       </div>
                       <div fxFlex="50" align="right"> 
                         {{master.branch_name}} 
@@ -53,7 +73,7 @@
                    </div>
                    </mat-list-item>
                   
-                   <mat-list-item role="listitem" style="height:48px !important;">
+                   <mat-list-item role="listitem" style="height:auto !important;">
                   <div fxFlex="row">
                            <div fxFlex="100">
                       <div fxFlex="100" align="left" *ngIf="master.product_name">

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.scss

@@ -41,6 +41,14 @@
         text-align: center;
     }
 }
+.fab-group{
+    // app-speed-dial-fab {
+    position: absolute;
+    @media(min-width:500px) {
+    // right: 415px;
+    }
+    // }
+}
 
 // .mat-list .mat-list-item.center .mat-list-item-content{
 //     justify-content: center;

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.ts

@@ -18,6 +18,7 @@ import { InitiateAdditionalPdComponent } from './../initiate-additional-pd/initi
 
 /**sweet alert */
 import Swal from 'sweetalert2';
+import { VideoPlayerComponent } from 'app/video-player/video-player.component';
 
 @Component({
   selector: 'app-view-pd',
@@ -96,6 +97,31 @@ export class ViewPdComponent implements OnInit, OnDestroy {
   // @Output() loadParent = new EventEmitter<string>();
   public _EditPDtriggerForm: FormGroup;
   masterRandomString: any;
+
+  FabOptions = {
+    buttons: [
+      {
+        icon: 'camera',
+        placeholder:'Image Capture',
+        btnValue:'image'
+      },
+      {
+        icon: 'videocam',
+        placeholder:'Video Chat',
+        btnValue:'video'
+      },
+      // {
+      //   icon: 'room'
+      // },
+      // {
+      //   icon: 'lightbulb_outline'
+      // },
+      // {
+      //   icon: 'lock'
+      // }
+    ]
+  };
+
   constructor(notifier: NotifierService, private dialog: MatDialog, private _fb: FormBuilder,
     private _pd: PdTrigerService, private route: ActivatedRoute, private router: Router, private ListPdComponent: ListPdComponent) {
     this.notifier = notifier;
@@ -420,6 +446,59 @@ export class ViewPdComponent implements OnInit, OnDestroy {
       this.notifier.notify('error',"Network Error!!")
     })
   }
+  copyCusURL(event) {
+    // console.log(window.location);
+    console.log(event)
+    let cus_link;
+    if(event && event.btnValue == 'video') {
+      cus_link = window.location.origin+'/vchat/#/chat/'+this.pdMasterData[0].random_string+';id='+this.viewID+';type=1'
+    }
+    else if(event && event.btnValue == 'image') {
+      cus_link = window.location.origin+'/customer/#/pd-images/'+this.pdMasterData[0].random_string+'/'+this.pdMasterData[0].lender_short_name;
+    }
+    // return;
+    // let cus_link = window.location.origin+'/customer/#/pd-images/'+randomStr;
+    // console.log(randomStr)
+    this._pd.copyToClipBoard(cus_link);
+    this.notifier.notify('info',event.placeholder+' Customer link copied');
+  }
+
+  openVideoChat(){
+    // let dialogRef  = this.dialog.open(VideoChatComponent,{
+    //   data:{type:'init',random_string:this.pdMasterData[0].random_string,pd_id:this.viewID},
+    //   maxWidth: '100vw',
+    //   maxHeight: '100vh',
+    //   height: '100%',
+    //   width: '100%',
+    //   disableClose: true,
+    //   panelClass:'video-chat'
+    // })
+    let url = window.location.origin+'/vchat/#/chat/'+this.pdMasterData[0].random_string+';id='+this.viewID+';type=2'
+    window.open(url,'_blank')
+  }
+  openPlayer(){
+    // if(this.videoplayback.url == null) {
+    //   this.notifier.notify('info',"No Videos Found");
+    //   return;
+    // }
+    let params = {"pd_id":this.viewID,"random_string":this.masterRandomString}
+    this._pd.getRecordedPlaybackUrl(params).subscribe(result=>{
+      if(result && result['dataStatus'] && result['records'] && result['records'].length > 0) {
+  let dialogRef  = this.dialog.open(VideoPlayerComponent,{
+    data:{videoUrl:result['records'],masterData:this.pdMasterData[0]},
+    maxWidth: '90vw',
+    maxHeight: '100vh',
+    height: '90%',
+    // width: '70%',
+    disableClose: false,
+    panelClass:'video-player'
+  })
+}
+else {
+  this.notifier.notify('info',"No Videos Found");
+}
+})
+}
 
 
   //   updateViewComponent(editBack:string) {

ng6-seed/src/app/personal-discussion/manage-pd/manage-pd.module.ts

@@ -124,6 +124,9 @@ import { GetAnswerableFormsPipe } from './../pd-pipes/get-answerable-forms.pipe'
 // import { ImageCropComponent } from './list-pd/start-pd/forms/dialogue/image-crop/image-crop.component';
 import {AngularSplitModule} from 'angular-split';
 import { ExcelUploadDialogComponent } from './list-pd/add-pd/excel-upload-dialog/excel-upload-dialog.component'
+import { SpeedDialFabComponent } from './list-pd/view-pd/speed-dial-fab/speed-dial-fab.component';
+import { VideoPlayerComponent } from 'app/video-player/video-player.component';
+import { MatVideoModule } from 'mat-video';
 
 /**
  * Custom angular notifier options
@@ -170,7 +173,8 @@ const pdCustomNotifierOptions: NotifierOptions = {
 };
 
 @NgModule({
-    declarations: [TelePdAllocationComponent, ListPdComponent,  ManagePdComponent, MapPdViewComponent, AddPdComponent, ViewPdComponent,  SmartPdAllocationComponent,  EditPdApplicantComponent, EditPdMasterComponent, InprogressPdComponent, AllPdComponent, ScheduledPdComponent, CompletedPdComponent, QcCompletedPdComponent,  PdReportComponent,  PdRequirementComponent,  ModelEditPdReportComponent,  DialogChangeCurrentVenrsion,  QcReviewComponent,  SearchRelationPipe, RupeeCurrencyFormatPipe, DeleteRecordsCountPipe, PdLocatedMapViewDirective, ViewLocationComponent, GetAnswerableFormsPipe,PdStatusChangeDialogueComponent,InitiateAdditionalPdComponent, ExcelUploadDialogComponent],
+    declarations: [TelePdAllocationComponent, ListPdComponent,  ManagePdComponent, MapPdViewComponent, AddPdComponent, ViewPdComponent,  SmartPdAllocationComponent,  EditPdApplicantComponent, EditPdMasterComponent, InprogressPdComponent, AllPdComponent, ScheduledPdComponent, CompletedPdComponent, QcCompletedPdComponent,  PdReportComponent,  PdRequirementComponent,  ModelEditPdReportComponent,  DialogChangeCurrentVenrsion,  QcReviewComponent,  SearchRelationPipe, RupeeCurrencyFormatPipe, DeleteRecordsCountPipe, PdLocatedMapViewDirective, ViewLocationComponent, GetAnswerableFormsPipe,PdStatusChangeDialogueComponent,InitiateAdditionalPdComponent, ExcelUploadDialogComponent,
+    SpeedDialFabComponent,VideoPlayerComponent],
     imports: [
     CommonModule,
     ManagePdRoutingModule,
@@ -203,7 +207,8 @@ const pdCustomNotifierOptions: NotifierOptions = {
     NgxMatSelectSearchModule,MatTooltipModule, MatExpansionModule,ResizableModule,
     AgmCoreModule.forRoot({apiKey: 'AIzaSyCXsHTus6hyIB8jYvt9ZEIbZve-2vWeQRg'}),OwlDateTimeModule, 
          OwlNativeDateTimeModule,
-         AngularSplitModule.forRoot()
+         AngularSplitModule.forRoot(),
+         MatVideoModule
 
   ],
   exports: [PdLocatedMapViewDirective,  SmartPdAllocationComponent, TelePdAllocationComponent ,EditPdApplicantComponent, EditPdMasterComponent, CompletedPdComponent, QcCompletedPdComponent, PdRequirementComponent, ViewLocationComponent,PdStatusChangeDialogueComponent,InitiateAdditionalPdComponent],
@@ -211,7 +216,7 @@ const pdCustomNotifierOptions: NotifierOptions = {
             {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
             {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS}, PdLocatedMapViewDirective],
 
-  entryComponents: [SmartPdAllocationComponent,  EditPdApplicantComponent, EditPdMasterComponent, TelePdAllocationComponent, PdRequirementComponent, ModelEditPdReportComponent, DialogChangeCurrentVenrsion, QcReviewComponent, ViewLocationComponent,PdStatusChangeDialogueComponent,InitiateAdditionalPdComponent,ExcelUploadDialogComponent],
+  entryComponents: [SmartPdAllocationComponent,  EditPdApplicantComponent, EditPdMasterComponent, TelePdAllocationComponent, PdRequirementComponent, ModelEditPdReportComponent, DialogChangeCurrentVenrsion, QcReviewComponent, ViewLocationComponent,PdStatusChangeDialogueComponent,InitiateAdditionalPdComponent,ExcelUploadDialogComponent,VideoPlayerComponent],
 })
 export class ManagePdModule {
 }

ng6-seed/src/app/personal-discussion/pd-service/pd-triger.service.ts

@@ -858,5 +858,27 @@ loadTemplate(form_id) {
     .pipe(catchError(this.handleError("smcCreditPDReport",[])))
   }
 
+     // copy to clipboard functionality
+     copyToClipBoard(message) {
+        const selBox = document.createElement('textarea');
+        selBox.style.position = 'fixed';
+        selBox.style.left = '0';
+        selBox.style.top = '0';
+        selBox.style.opacity = '0';
+        selBox.value = message;
+        document.body.appendChild(selBox);
+        selBox.focus();
+        selBox.select();
+        document.execCommand('copy');
+        document.body.removeChild(selBox);
+      }
+        getRecordedPlaybackUrl(params){
+        return this._http.post(this.apiUrl+'getVideoURL',params)
+    }
+    updateTwlioVideoStatus(params) {
+        return this._http.post(this.apiUrl+'updateTwlioVideoStatus',params)
+        .pipe(catchError(this.handleError("updateTwlioVideoStatus",[])))
+      }
+
 
 }

ng6-seed/src/app/video-player/video-player.component.html

@@ -0,0 +1,63 @@
+<div  align="end" style="position: absolute;right: 16%;z-index: 999" fxLayoutAlign="flex-end">
+  <!-- <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="reset"
+  matTooltipPosition="right" (click)="clearRandomString()"  *ngIf="!is_video_enable" >
+  <mat-icon>cached</mat-icon>
+  </button> -->
+    <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close"
+        matTooltipPosition="right" mat-dialog-close>
+        <mat-icon>close</mat-icon>
+    </button>
+   
+    <!-- <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close"
+        matTooltipPosition="right" (click)="stopRecording()">
+        <mat-icon>stop</mat-icon>
+    </button> -->
+</div>
+<!-- <mat-video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></mat-video> -->
+<div #videoPlayer></div>
+<div style="height: 70% !important;position: sticky;top:0px" >
+<!-- <mat-video title="Recorded Video" [autoplay]="true" [preload]="true" [fullscreen]="true" [download]="true" color="primary" spinner="spin" poster="../../assets/images/img/video-icon.png">
+  <source matVideoSource [src]="videoSrc" type="video/webm">
+
+</mat-video> -->
+<mat-video title="Recorded Video" [autoplay]="true" [preload]="true" [src]="videoSrc" [fullscreen]="true" [download]="true" color="primary" spinner="spin" poster="../../assets/images/img/video-icon.png"></mat-video>
+</div>
+  <!-- <source src="tutorial.webm" type="video/webm"> -->
+  <!-- <track matVideoTrack src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> -->
+  <!-- <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"> -->
+<mat-card style="background-color: black;margin:0px;margin-top: 3px;">
+  <mat-card-content >
+  <div  fxLayout="row" *ngFor="let item of playbackList;let i=index" fxLayoutGap.xs="1%" fxLayoutGap="9%">
+    <div  class="playbackListClass" fxLayout="column" fxFlex="70%"  (click)="playVideo(i,item)">
+      <span>
+      <p style="color:white;margin:0px;font-size: 20px;font-weight: bold;white-space:pre-wrap;overflow: hidden;text-overflow: ellipsis;">{{item.video_name}}</p>
+      <p *ngIf="item.date" style="color:white;margin:0px;font-size:16px;">{{item.date}}</p>
+      </span>
+      </div>
+      <div fxLayout="column"   align="start" >
+        <img *ngIf="selectedVideoIndex == i" src="assets/spinner/equalizer.gif" style="height:48px"/>
+        <div align="end"  *ngIf="selectedVideoIndex != i">
+          <!-- <button align="end" style="float: right" mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Download Video"
+        matTooltipPosition="right"  (click)="downloadVideo(item.url)">
+        <mat-icon>file_download</mat-icon>
+    </button> -->
+  </div>
+    <p *ngIf="item.duration" style="color:white;margin:0px;font-size:14px;">{{item.duration}}</p>
+    <p *ngIf="item.status" style="color:white;margin:0px;font-size:14px;">{{item.status}}</p>
+      </div>
+      <div fxLayout="column" align="end" fxLayoutAlign="flex-end" style="margin-right: 0px;">
+         <button  *ngIf="item.url != '' && item.url" align="end" style="float: right" mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Copy Link" 
+        matTooltipPosition="right"  (click)="_pd.copyToClipBoard(item.url)">
+        <mat-icon>link</mat-icon>
+    </button>
+    <!-- <button *ngIf="item.url == '' || !item.url" align="end"  style="float: right" mat-stroked-button  class="mr-1 mb-1 hover-icon" type="button" 
+     (click)="checkVideoStatus(i,item)">
+   Check Status
+</button> -->
+      </div>
+      <mat-divider style="border-top:1px solid rgb(105, 105, 105) !important"></mat-divider>
+  </div>
+</mat-card-content>
+</mat-card>
+
+<notifier-container></notifier-container>

ng6-seed/src/app/video-player/video-player.component.scss

@@ -0,0 +1,26 @@
+::ng-deep { .video-player > mat-dialog-container {
+    background: black;
+    padding: 0;
+    overflow-y: scroll !important;
+  }
+}
+.mat-raised-button{
+    color: #ffffff;
+    background: #ffffff5c;
+}
+.mat-stroked-button{
+  color: #ffffff;
+  // background: #ffffff5c;
+  border-color: #ffffff;
+}
+.playbackListClass{
+  cursor: pointer;
+  // padding:5px;
+  min-height: 50px;
+}
+.playbackListClass :hover{
+  background-color: darkred;
+  padding-bottom:5px;
+  padding-top: 5px;
+  // box-shadow: 2px 3px rgba(255, 0, 0, 0.308)
+}

ng6-seed/src/app/video-player/video-player.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VideoPlayerComponent } from './video-player.component';
+
+describe('VideoPlayerComponent', () => {
+  let component: VideoPlayerComponent;
+  let fixture: ComponentFixture<VideoPlayerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ VideoPlayerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VideoPlayerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ng6-seed/src/app/video-player/video-player.component.ts

@@ -0,0 +1,98 @@
+import { Component, OnInit, Inject, ViewChild, ElementRef } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { NotifierService } from 'angular-notifier';
+import { PdTrigerService } from 'app/personal-discussion/pd-service/pd-triger.service';
+
+@Component({
+  selector: 'app-video-player',
+  templateUrl: './video-player.component.html',
+  styleUrls: ['./video-player.component.scss']
+})
+export class VideoPlayerComponent implements OnInit {
+  playbackList = []
+  //  [{name:"Playback 1",duration:"20:01",date:"2020-05-20"},
+  // {name:"Playback 2",duration:"20:01",date:"2020-05-20"},
+  // {name:"Playback 3",duration:"20:01",date:"2020-05-20"},
+  // {name:"Playback 4",duration:"20:01",date:"2020-05-20"},
+  // {name:"Playback 5",duration:"20:01",date:"2020-05-20"},
+  // {name:"Playback 6",duration:"20:01",date:"2020-05-20"},
+  // {name:"Playback 7",duration:"20:01",date:"2020-05-20"},]
+  videoSrc 
+  selectedVideoIndex: Number;
+  // videos_arr: any;
+  // = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
+  // = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4'
+  @ViewChild('videoPlayer') videoPlayerEle:ElementRef
+  notifier: NotifierService;
+  pdMasterData: any = {};
+  constructor( @Inject(MAT_DIALOG_DATA) public data:any,private matDialogRef:MatDialogRef<VideoPlayerComponent>,
+  notifier:NotifierService,private _pd:PdTrigerService) { 
+    this.notifier=notifier
+    if(data) {
+      if(data.hasOwnProperty('videoUrl') && data.videoUrl && data.videoUrl.length > 0) {
+        this.playbackList = data.videoUrl
+        // this.playbackList.push({video_name:"Sample 1",url : "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"},
+        // {video_name:"Sample 2",url : "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"})
+        // this.videoSrc = data.videoUrl
+        if(data && data.hasOwnProperty('masterData')) {
+          this.pdMasterData = data.masterData
+          console.log(this.pdMasterData)
+        }
+        if(this.playbackList.length > 0) {
+          let processingStatus = this.playbackList.filter(vv=>vv.url == '') 
+          if(processingStatus.length > 0 ){
+            processingStatus.forEach((re,index)=>{
+              if(re && re.url == '') {
+                this.checkVideoStatus(index,re)
+              }
+            })
+          }
+          
+        }
+        if(this.playbackList[0].url != ''){
+        this.playVideo(0,this.playbackList[0]);
+        }
+      }
+    }
+    
+  }
+
+  ngOnInit() {
+    let video_blob = localStorage.getItem('blob_url');
+    if(video_blob) {
+    //  this.videoSrc = video_blob;
+     console.log(this.videoSrc);
+    }
+  }
+  playVideo(i,obj) {
+    console.log(obj,this.videoPlayerEle);
+    if(obj.url == '' || !obj.url) {
+      this.notifier.notify("info","Status of the playback is "+obj.status+' try again later!!')
+      return
+    }
+    this.selectedVideoIndex= i;
+    this.videoSrc = obj.url
+
+    if(this.videoPlayerEle && this.videoPlayerEle.nativeElement) {
+    this.videoPlayerEle.nativeElement.scrollIntoView({ behavior: "smooth", block: "start" })
+    }
+  }
+  downloadVideo(url) {
+    console.log(url)
+    window.open(url);
+  }
+  checkVideoStatus(i,obj) {
+    if(obj && obj.hasOwnProperty('room_id') && obj.room_id) {
+      this._pd.updateTwlioVideoStatus({"pd_id":this.pdMasterData.pd_id,"random_string":this.pdMasterData.random_string,"room_id":obj.room_id}).subscribe(result=>{
+           if(result && result['dataStatus']){
+             if(result['records']) {
+               this.playbackList[i].url = result['records']
+               this.playbackList[i].status = 'completed'
+             }
+            }
+      })
+    }
+
+  }
+
+}

ng6-seed/src/assets/data/SMC_CREDIT_TEMPLATES/LFMP/15.json

@@ -15,13 +15,6 @@
                    "onchange_properties": null,
                    "is_repeatable": null,
                    "validations": [
-                       {
-                           "name": "required",
-                           "isactive": "1",
-                           "validator": "Validators.required",
-                           "message": "Field Required",
-                           "value": null
-                       }
                    ]
                },
                {
@@ -35,13 +28,6 @@
                    "answers": null,
                    "is_repeatable": null,
                    "validations": [
-                       {
-                           "name": "required",
-                           "isactive": "1",
-                           "validator": "Validators.required",
-                           "message": "Field Required",
-                           "value": null
-                       }
                    ]
                },
                {
@@ -54,13 +40,6 @@
                    "onchange_properties": null,
                    "is_repeatable": null,
                    "validations": [
-                       {
-                           "name": "required",
-                           "isactive": "1",
-                           "validator": "Validators.required",
-                           "message": "Field Required",
-                           "value": null
-                       }
                    ]
                },
                {
@@ -73,13 +52,6 @@
                    "onchange_properties": null,
                    "is_repeatable": null,
                    "validations": [
-                       {
-                           "name": "required",
-                           "isactive": "1",
-                           "validator": "Validators.required",
-                           "message": "Field Required",
-                           "value": null
-                       }
                    ]
                },
                {
@@ -93,13 +65,6 @@
                    "onchange_properties": null,
                    "is_repeatable": null,
                    "validations": [
-                       {
-                           "name": "required",
-                           "isactive": "1",
-                           "validator": "Validators.required",
-                           "message": "Field Required",
-                           "value": null
-                       }
                    ]
                },
                {
@@ -141,13 +106,6 @@
                    "onchange_properties": null,
                    "is_repeatable": null,
                    "validations": [
-                       {
-                           "name": "required",
-                           "isactive": "1",
-                           "validator": "Validators.required",
-                           "message": "Field Required",
-                           "value": null
-                       }
                    ]
                },
                {
@@ -170,13 +128,6 @@
                    ],
                    "is_repeatable": null,
                    "validations": [
-                       {
-                           "name": "required",
-                           "isactive": "1",
-                           "validator": "Validators.required",
-                           "message": "Field Required",
-                           "value": null
-                       }
                    ]
                },
                {
@@ -199,13 +150,6 @@
                    ],
                    "is_repeatable": null,
                    "validations": [
-                       {
-                           "name": "required",
-                           "isactive": "1",
-                           "validator": "Validators.required",
-                           "message": "Field Required",
-                           "value": null
-                       }
                    ]
                },
                {
@@ -228,13 +172,6 @@
                    ],
                    "is_repeatable": null,
                    "validations": [
-                       {
-                           "name": "required",
-                           "isactive": "1",
-                           "validator": "Validators.required",
-                           "message": "Field Required",
-                           "value": null
-                       }
                    ]
                }
            ],