Tele PD Feature enabled and Trigger without Excel upload option enabled

This commit is contained in:
venbatechnologies@gmail.com 2020-12-10 19:08:00 +05:30
parent e78ee3663c
commit 3ad95c3f92
30 changed files with 626 additions and 89 deletions

View File

@ -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",

View File

@ -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",

View File

@ -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: [
{

View File

@ -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>

View File

@ -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>

View File

@ -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);
}

View File

@ -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)
}
}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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(()=>{

View File

@ -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}
)
])
])
];

View File

@ -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> -->

View File

@ -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;
}

View File

@ -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();
});
});

View File

@ -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)
}
}

View File

@ -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">

View File

@ -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;

View File

@ -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) {

View File

@ -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 {
}

View File

@ -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",[])))
}
}

View File

@ -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>

View File

@ -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)
}

View File

@ -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();
});
});

View File

@ -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'
}
}
})
}
}
}

View File

@ -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
}
]
}
],

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 247 KiB