Fairoj : Restriction for video chat only on Tele PD and copy customer link with fab group for image and video chat

ng6-seed/src/app/layouts/admin/admin-layout.component.ts

@@ -332,7 +332,7 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
       if(res && res.hasOwnProperty('random_string') && res.random_string){
         if(pd_short_info.filter(val=>val.random_string == res.random_string).length > 0){
           let curr_pd_info= pd_short_info.filter(val=>val.random_string == res.random_string)[0]
-          if(curr_pd_info) {
+          if(curr_pd_info && curr_pd_info.pd_type == '3') {
             this.connectPeer(res,curr_pd_info);
           }
         }

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,41 @@
+.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;
+      }
+    }
+  }
+  
+  .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

@@ -130,18 +130,20 @@
                 <!-- <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> -->
-               <span> <button *ngIf="master.fk_pd_type == '3'"
+               <!-- <span> <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></span>
+                </button></span> -->
               <span> <button *ngIf="master.fk_pd_type == '3'"
                 mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="onClickSmsLink(master)"
                matTooltip="Send Link Via SMS" matTooltipPosition="above">
                <mat-icon>sms</mat-icon>
-           </button></span>
+           </button>&nbsp;&nbsp;</span>
-                  
+           <!-- <div class="fab-group" *ngIf="master.fk_pd_type == '3'"> -->
-                  <button mat-button mat-raised-button class="mr-1 mb-1"  color="primary" (click)="openVideoChat()">
+           <app-speed-dial-fab class="fab-group" *ngIf="master.fk_pd_type == '3'" [options]="FabOptions" (fabClick)="copyCusURL($event)"></app-speed-dial-fab>
+          <!-- </div> -->
+                  <button *ngIf="master.fk_pd_type == '3'" mat-button mat-raised-button class="mr-1 mb-1"  color="primary" (click)="openVideoChat()">
                       <mat-icon>videocam</mat-icon>
                       <strong>Call</strong>
                     </button>

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

@@ -79,3 +79,11 @@
 // }
 
 
+.fab-group{
+    // app-speed-dial-fab {
+    position: absolute;
+    @media(min-width:500px) {
+    right: 415px;
+    }
+    // }
+}

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

@@ -20,6 +20,7 @@ import { InitiateAdditionalPdComponent } from './../initiate-additional-pd/initi
 /**sweet alert */
 import Swal from 'sweetalert2';
 import { VideoChatComponent } from 'app/video-chat/video-chat.component';
+import { MastersComponent } from 'app/settings/masters/masters.component';
 
 @Component({
   selector: 'app-view-pd',
@@ -101,6 +102,31 @@ export class ViewPdComponent implements OnInit, OnDestroy {
   public _EditPDtriggerForm: FormGroup;
   existPDs: any=[];
   // no_qc_remarks: boolean;
+
+  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;
@@ -560,12 +586,21 @@ export class ViewPdComponent implements OnInit, OnDestroy {
     })
 
   }
-  copyCusURL(randomStr) {
+  copyCusURL(event) {
     // console.log(window.location);
-    let cus_link = window.location.origin+'/customer/#/pd-images/'+randomStr;
+    console.log(event)
-    console.log(randomStr)
+    let cus_link;
+    if(event && event.btnValue == 'video') {
+      cus_link = window.location.origin+'/vchat/#/chat/'+this.pdMasterData[0].random_string;
+    }
+    else if(event && event.btnValue == 'image') {
+      cus_link = window.location.origin+'/customer/#/pd-images/'+this.pdMasterData[0].random_string;
+    }
+    // return;
+    // let cus_link = window.location.origin+'/customer/#/pd-images/'+randomStr;
+    // console.log(randomStr)
     this._pd.copyToClipBoard(cus_link);
-    this.notifier.notify('info','Customer link copied');
+    this.notifier.notify('info',event.placeholder+' Customer link copied');
   }
 
   onClickSmsLink(master){

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

@@ -129,6 +129,7 @@ import {AngularSplitModule} from 'angular-split';
 import { ImageDocsComponent } from './list-pd/start-pd/forms/image-docs/image-docs.component'
 import { environment } from 'environments/environment'
 import { CustomTitleCaseDirective } from '../pd-directive/custom-title-case.directive';
+import { SpeedDialFabComponent } from './list-pd/view-pd/speed-dial-fab/speed-dial-fab.component';
 
 /**
  * Custom angular notifier options
@@ -175,7 +176,7 @@ const pdCustomNotifierOptions: NotifierOptions = {
 };
 
 @NgModule({
-    declarations: [TelePdAllocationComponent, FinancialInfoComponent, BusinessInfoComponent, EmploymentInfoComponent, StockComponent, BankingDetailsComponent, ListPdComponent, FamilyDetailsComponent, AddressComponent, ManagePdComponent, MapPdViewComponent, AddPdComponent, ViewPdComponent, PdAllocationComponent, SmartPdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent, StartPdComponent, InprogressPdComponent, AllPdComponent, ScheduledPdComponent, CompletedPdComponent, QcCompletedPdComponent, ClientInfoComponent, CurrentLoanComponent, AssetsInfoComponent, LoanDetailsComponent, OtherIncomeComponent, SupplierInfoComponent, PersonalInfoComponent, LenderRepresentativeComponent, PdReportComponent, AssessedIncomeComponent, AllocationViewMoreComponent, PdRequirementComponent,PdCollectedDocsComponent, GeneralInfoComponent, ModelEditPdReportComponent, OtherApplicantDetailsComponent, NeighbourHoodComponent, DialogChangeCurrentVenrsion, FinalRemarksComponent, BusinessOtherFamilyMemberComponent, QcReviewComponent, BusinessInfoGroupComponent, SearchRelationPipe, RupeeCurrencyFormatPipe, NumberToWordsPipe, DeleteRecordsCountPipe, BusinessAssetsInfoComponent, BusinessBankingDetailsComponent, SalesDetailsComponent, DailySalesDetailsComponent, SalesCalculationComponent, ManageSalesComponent, PurchaseDetailsComponent, BusinessExpenseDetailsComponent, HouseHoldDetailsComponent, OtherBusinessIncomeDetailsComponent, ManagePurchaseComponent, ManageBusinesExpenseComponent, ManageHouseHoldComponent, ManageOtherBusinessIncomeComponent, GrossProfitCalculationComponent, ManageDailySalesComponent, PdStatusChangeDialogueComponent, PdLocatedMapViewDirective, ViewLocationComponent, GetAnswerableFormsPipe, ConfirmAiDetailsComponent, RentalVerificationComponent, InitiateAdditionalPdComponent ,ManageDailyPurchaseComponent, DailyPurchaseDetailsComponent, ManageRentalVerificationComponent, FuturePlansAndBusinessEnvironmentComponent, ImageCropComponent,PurchaseCalculationComponent,QueriesDocsComponent, ImageDocsComponent,CustomTitleCaseDirective],
+    declarations: [TelePdAllocationComponent, FinancialInfoComponent, BusinessInfoComponent, EmploymentInfoComponent, StockComponent, BankingDetailsComponent, ListPdComponent, FamilyDetailsComponent, AddressComponent, ManagePdComponent, MapPdViewComponent, AddPdComponent, ViewPdComponent, PdAllocationComponent, SmartPdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent, StartPdComponent, InprogressPdComponent, AllPdComponent, ScheduledPdComponent, CompletedPdComponent, QcCompletedPdComponent, ClientInfoComponent, CurrentLoanComponent, AssetsInfoComponent, LoanDetailsComponent, OtherIncomeComponent, SupplierInfoComponent, PersonalInfoComponent, LenderRepresentativeComponent, PdReportComponent, AssessedIncomeComponent, AllocationViewMoreComponent, PdRequirementComponent,PdCollectedDocsComponent, GeneralInfoComponent, ModelEditPdReportComponent, OtherApplicantDetailsComponent, NeighbourHoodComponent, DialogChangeCurrentVenrsion, FinalRemarksComponent, BusinessOtherFamilyMemberComponent, QcReviewComponent, BusinessInfoGroupComponent, SearchRelationPipe, RupeeCurrencyFormatPipe, NumberToWordsPipe, DeleteRecordsCountPipe, BusinessAssetsInfoComponent, BusinessBankingDetailsComponent, SalesDetailsComponent, DailySalesDetailsComponent, SalesCalculationComponent, ManageSalesComponent, PurchaseDetailsComponent, BusinessExpenseDetailsComponent, HouseHoldDetailsComponent, OtherBusinessIncomeDetailsComponent, ManagePurchaseComponent, ManageBusinesExpenseComponent, ManageHouseHoldComponent, ManageOtherBusinessIncomeComponent, GrossProfitCalculationComponent, ManageDailySalesComponent, PdStatusChangeDialogueComponent, PdLocatedMapViewDirective, ViewLocationComponent, GetAnswerableFormsPipe, ConfirmAiDetailsComponent, RentalVerificationComponent, InitiateAdditionalPdComponent ,ManageDailyPurchaseComponent, DailyPurchaseDetailsComponent, ManageRentalVerificationComponent, FuturePlansAndBusinessEnvironmentComponent, ImageCropComponent,PurchaseCalculationComponent,QueriesDocsComponent, ImageDocsComponent,CustomTitleCaseDirective, SpeedDialFabComponent],
     imports: [
     CommonModule,
     ManagePdRoutingModule,

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

@@ -187,7 +187,7 @@ export class PdTrigerService {
         return this._http.get<any>(this.apiUrl + "listLessPDDetails/get")
         .map(res=>{
             if(res['dataStatus']) {
-                let pd_det = res['records'].map(val=>{ return {applicant_name:val.applicant_name,pd_id:val.pd_id,random_string:val.random_string,pd_sno:val.pd_sno}})
+                let pd_det = res['records'].map(val=>{ return {applicant_name:val.applicant_name,pd_id:val.pd_id,random_string:val.random_string,pd_sno:val.pd_sno,pd_type:val.fk_pd_type}})
                 localStorage.setItem('pd_short_info',JSON.stringify(pd_det));
                 return res
             }

ng6-seed/src/app/video-chat/incoming-call/incoming-call.component.html

@@ -4,7 +4,7 @@
   </div>
 <div class="call-animation">
     <div fxFlex="135px" fxLayout.xs ="100%">
-  <img class="img-circle" src="../../assets/spinner/notfound_blue.png" alt="Image"/>
+  <img class="img-circle" src="assets/spinner/notfound_blue.png" alt="Image"/>
 </div>
   </div>
   <div fxLayout="column" class="user-name" fxLayoutAlign="center center">