Fairoj : Restriction for video chat only on Tele PD and copy customer link with fab group for image and video chat
This commit is contained in:
parent
24f6e6c252
commit
3fc3d19e72
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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}
|
||||
)
|
||||
|
||||
])
|
||||
])
|
||||
];
|
||||
|
||||
@ -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> -->
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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)
|
||||
}
|
||||
}
|
||||
@ -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 mat-button mat-raised-button class="mr-1 mb-1" color="primary" (click)="openVideoChat()">
|
||||
</button> </span>
|
||||
<!-- <div class="fab-group" *ngIf="master.fk_pd_type == '3'"> -->
|
||||
<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>
|
||||
|
||||
@ -79,3 +79,11 @@
|
||||
// }
|
||||
|
||||
|
||||
.fab-group{
|
||||
// app-speed-dial-fab {
|
||||
position: absolute;
|
||||
@media(min-width:500px) {
|
||||
right: 415px;
|
||||
}
|
||||
// }
|
||||
}
|
||||
@ -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(randomStr)
|
||||
console.log(event)
|
||||
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){
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user