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:
venbatechnologies@gmail.com 2020-05-14 14:59:43 +05:30
parent 24f6e6c252
commit 3fc3d19e72
12 changed files with 245 additions and 13 deletions

View File

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

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

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

@ -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>&nbsp;&nbsp;</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>

View File

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

View File

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

View File

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

View File

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

View File

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