photograph section introduce

This commit is contained in:
gayathri1990 2021-02-27 19:41:07 +05:30
parent 7c392fac1f
commit b7636c034d
9 changed files with 496 additions and 8 deletions

Binary file not shown.

View File

@ -0,0 +1,182 @@
<div style="position:sticky;top:0;z-index: 99;">
<h2 mat-dialog-title class="paragraph_change">
<div fxFlex="70" align="left" style="padding: 10px !important;">
<span>PD Photos</span>
</div>
<!-- <div fxFlex="30" align="end" *ngIf="imgReCaptureBucket.length > 0">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Clear Selected"
matTooltipPosition="right" (click)="clearSelected()">
<mat-icon>check_box_outline_blank</mat-icon>
</button>
</div> -->
<div fxFlex="30" align="end" style="padding: 10px !important;">
<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>
</div>
</h2>
</div>
<!-- <mat-dialog-content> -->
<!-- <input type="file" accept="image/*" capture="environment"> -->
<mat-card>
<div fxLayout="row">
<span fxLayout="column" fxFlex="85" fxFlex.xs = "70" fxLayoutAlign="flex-start" >
<!-- <mat-card-header >
<mat-card-title><h5>PD Images</h5></mat-card-title>
</mat-card-header> -->
</span>
<!-- <div fxLayout="column" fxFlex="15" fxFlex.xs = "30" fxLayoutAlign="flex-end" >
<button mat-button mat-raised-button class="mr-1 mb-1" color="primary" (click)="openVideoChat()">
<mat-icon>videocam</mat-icon>
<strong>Call</strong>
</button>
</div> -->
</div>
<!-- </span> -->
<mat-card-content class="scroll">
<div fxLayout="row wrap" fxLayoutAlign="start stretch" fxLayoutAlign.xs="space-between stretch" fxLayoutGap="25px" fxLayoutGap.xs="15px" style="flex-wrap: wrap">
<!-- {{records.img_data | json}} -->
<div *ngFor="let val of imageData;let i = index" [ngStyle]="{'flex-basis': val.is_multiple == 1 ? '100%' : ''}" >
<!-- {{val.is_multiple}} -->
<div *ngIf="(!val.hasOwnProperty('is_multiple')) || (val.hasOwnProperty('is_multiple') && val.is_multiple == '0')" style="flex-basis: 100%" class ="image-div" >
<img *ngIf="val.img_url != '' && val.img_url != null"
class="image-class" [src]="val.img_url" [alt]="val.img_key" alt="image" (click)="openImage(val)">
<div class="dummy-img" *ngIf="val.img_url == '' || val.img_url == null">
<p
style="justify-content: center;align-content: center;text-align: center;align-items: center; margin-top: 10%;">
<span>
Image is not Captured.
</span>
</p>
</div>
<div class="image-label" fxLayout ="row" >
<p fxFlex="80" >{{val.img_name || val.img_key}} </p>
<!-- <span fxFlex="20"> -->
<!-- <object style="height: 35px" type="image/svg+xml" data="../../../assets/spinner/spinner.svg">
Your browser does not support SVG
</object> -->
<!-- <img src="../../../assets/spinner/spinner.svg" alt="spinner"/> -->
<!-- </span> -->
<!-- <span *ngIf="val.is_saved == true && val.img_url != '' && val.img_url != null" fxFlex = "20" fxLayoutAlign="flex-end">
<mat-icon style="color:green;font-size: 20px;">done</mat-icon>
</span>
<span *ngIf="val.is_saved == false && val.is_loader == false" fxFlex = "20" fxLayoutAlign="flex-end">
<mat-icon style="color:rgb(255, 196, 0);font-size: 25px;">cloud_upload</mat-icon><br/> -->
<!-- <span><p style="font-size: 6px">Click to ReUpload</p></span> -->
<!-- </span> -->
<!-- <div> -->
</div>
<!-- </div> -->
<!-- <span (click)="getIndex(i)">
<app-capture-btn class="file-btn" (imageDataEmitter)="addImage($event,i)"></app-capture-btn>
</span> -->
</div>
<div *ngIf="val.is_multiple == 1" style="flex-basis: 100%;">
<br/> <br/>
<hr />
<h5>{{val.img_name}}</h5>
<div fxLayout="row wrap" fxLayoutAlign="start stretch" fxLayoutAlign.xs="space-between stretch">
<h6 style="font-weight: bold;font-size:1.2rem" *ngIf="!val.img_data || (val.img_data != null && val.img_data.length == 0) || (val.img_data == null)">No Images Captured</h6>
<div *ngFor="let multiple_img of val.img_data;let i=index" class ="image-div">
<img *ngIf="multiple_img.img_url != '' && multiple_img.img_url != null"
class="image-class" [src]="multiple_img.img_url" [alt]="val.img_key" alt="image" (click)="openImage(multiple_img)"/>
<div class="image-label" fxLayout ="row" >
<p fxFlex="60">{{val.img_name}} {{i+1}} </p>
<!-- <span *ngIf="multiple_img.is_loader == true" fxFlex="20">
<img src="../../../assets/spinner/spinner.svg" alt="spinner"/>
</span>
<span *ngIf="multiple_img.is_saved == true && multiple_img.img_url != '' && multiple_img.img_url != null" fxLayoutAlign="flex-end">
<mat-icon style="color:green;font-size: 20px;">done</mat-icon>
</span>
<span *ngIf="multiple_img.is_saved == false && multiple_img.is_loader == false" fxLayoutAlign="flex-end">
<mat-icon style="color:rgb(255, 196, 0);font-size: 25px;">cloud_upload</mat-icon><br/>
</span> -->
</div>
</div>
<!-- <div style="margin-right: -20px !important;padding:0!important;">
<div class="dummy-img" style="margin: 30px 0 0 4px;
padding: 1.4%;">
<p
style="justify-content: center;align-content: center;text-align: center;align-items: center; ">
<span>
Add More Image.<br /> Click to
</span>Capture <mat-icon>add_a_photo</mat-icon>
</p>
</div>
<div class="image-label" fxLayout ="column" >
<p fxFlex="80">Add More {{val.img_name}} </p>
</div>
</div> -->
</div>
<br/> <br/>
<hr *ngIf="imageData[i+1] && imageData[i+1].is_multiple != 1"/>
</div>
</div>
<!-- <div style="padding: 1.5%;margin-top: 10px;" fxLayoutAlign.xs="flex-start stretch" >
<div style="height: auto">
<div class="dummy-img-more" #dummy_img_more>
<p
style="justify-content: center;align-content: center;text-align: center;align-items: center; margin-top: 10%;">
<span>
Click to
</span>Capture More..<mat-icon>add_a_photo</mat-icon>
</p>
</div> -->
<!-- <div class="image-label" fxLayout ="column" >
<p fxFlex="60">Capture More</p>
</div> -->
<!-- <span (click)="getIndex('last')">
<app-capture-btn class="file-btn" addMoreBtn="true" (imageDataEmitter)="addImage($event,'last')"></app-capture-btn>
</span> -->
<!-- </div>
</div> -->
<!-- <div >
<img class="image-class" [src]="imageData"
alt="image"><br/>
<app-capture-btn class="file-btn" (imageDataEmitter)="addImage($event)"></app-capture-btn>
</div>
<div >
<div class="dummy-img">
<p style="justify-content: center;align-content: center;text-align: center;align-items: center; margin-top: 10%;"><span>
Image is not Captured.<br/>
</span>Capture <mat-icon >camera</mat-icon></p>
</div>
<button style="justify-content:center" mat-button mat-raised-button>Capture <mat-icon name="camera">camera</mat-icon></button>
</div> -->
</div>
</mat-card-content>
</mat-card>
<!-- </mat-dialog-content> -->
<!-- <mat-dialog-actions>
hi
</mat-dialog-actions> -->
<div style="position:sticky;background-color:black;float: right;bottom: 0;border:2px solid red;padding: 14px;color: white;border-radius: 10px" *ngIf="imgReCaptureBucket.length > 0">
<div fxLayout="row" fxLayoutGap="20px" fxLayoutGap.xs = "5px" style="max-height: 35px">
<span style="font-weight:bold">Total Re-capturing Images :
<span id="num_count">{{imgReCaptureBucket.length}}</span></span>
<button mat-raised-button (click)="submitQcImages()"><mat-icon>done_all</mat-icon> Submit</button>
</div>
</div>
<!-- <input type="file" id="input-file" name="file" accept="image/*" capture="user"> -->

View File

@ -0,0 +1,160 @@
::ng-deep
.cus-images > mat-card-content {
overflow-y: scroll !important;
}
.scroll{
overflow-y: scroll !important;
overflow-y:auto;
}
.paragraph_change {
color: #fff !important;
background-color: #e00201 !important;
}
// .custom-file-input::-webkit-file-upload-button {
// visibility: hidden;
// }
// .custom-file-input::before {
// content: 'Select some files';
// display: inline-block;
// background: linear-gradient(top, #f9f9f9, #e3e3e3);
// border: 1px solid #999;
// border-radius: 3px;
// padding: 5px 8px;
// outline: none;
// white-space: nowrap;
// -webkit-user-select: none;
// cursor: pointer;
// text-shadow: 1px 1px #fff;
// font-weight: 700;
// font-size: 10pt;
// color:black;
// // width: 20px;
// }
// .custom-file-input:hover::before {
// border-color: black;
// }
// .custom-file-input:active::before {
// background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
// }
// input[type='file'] {
// // opacity:0
// color: transparent;
// width: 130px;
// }
.image-class{
width: 200px;
height: 170px;
border: 1px solid lavender;
border-radius: 7px;
}
.image-div {
max-width: 200px;
width: auto;
// height: 200px;
margin-top: 25px;
padding: 1.4%;
}
// .image-class:hover {
// -webkit-transform: scale(1.1);
// -ms-transform: scale(1.1);
// transform: scale(1.1);
// }
.dummy-img {
width: 200px;
height: 170px;
border: 3px dashed rgba(0, 0, 0, 0.2);
border-radius: 7px;
background: #eeee;
color: gray;
}
.dummy-img-more{
width: 170px;
height: 200px;
margin-top: 20px;
border: 4px dashed #03a9f470;
border-radius: 7px;
box-shadow : 0px 3px 6px 3px rgba(160, 161, 188, 0.53);
background: #eeee;
color: #b53f3f;
}
.file-btn{
display: flex;
justify-content: center;
}
@media (max-width: 600px){
.image-class {
width: 125px;
height: 120px;
}
.image-div {
width:auto;
max-width: 135px;
// height: 120px;
}
.dummy-img {
width: 125px;
height: 120px;
}
.dummy-img-more{
width: 125px;
height: 120px;
}
.image-label {
min-height: 58px;
p{
width: auto;
max-width: 67% !important;
}
}
}
.image-label {
min-height: 58px;
width: auto;
// max-width: 67%;
p{
margin: 7px;
font-weight: bold;
font-size : 14px;
max-width: 99%!important;
// overflow: hidden
white-space: pre-wrap;
text-overflow: ellipsis;
}
}
.object {
/* width: 110px; */
height: 45px;
}
hr {
background: #d23f2f;
padding: 0.03em;
margin: -2px;
}
.example-margin {
margin: 0 10px;
}
#num_count {
color: #00ffa7;
font-family: tahoma;
font-size: 1.3rem;
}
.num_count_animate {
animation: num_pad 0.3s 1
}
// #num_count.num_ani {
// -webkit-transition: 3s;
// -moz-transition: 3s;
// -ms-transition: 3s;
// -o-transition: 3s;
// transition: 3s;
// margin-left: 50% !important;
// }
@keyframes num_pad {
50% {font-size:1.7rem;}
}

View File

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

File diff suppressed because one or more lines are too long

View File

@ -7,7 +7,7 @@ import {ListPdComponent} from './../list-pd.component';
import {PdTrigerService} from '../../../pd-service/pd-triger.service';
import {PersonalInfoComponent} from './forms/personal-info/personal-info.component';
import {AddressComponent } from './forms/address/address.component';
import {AddressComponent } from './forms/address/address.component';
import {OtherIncomeComponent} from './forms/other-income/other-income.component';
import {SupplierInfoComponent} from './forms/supplier-info/supplier-info.component';
import {ClientInfoComponent} from './forms/client-info/client-info.component';
@ -30,6 +30,9 @@ import {BusinessAssetsInfoComponent } from './forms/business-assets-info/busines
import {PdStatusChangeDialogueComponent } from './../pd-status-change-dialogue/pd-status-change-dialogue.component';
import {RentalVerificationComponent} from './forms/rental-verification/rental-verification.component';
import { QueriesDocsComponent } from './forms/queries-docs/queries-docs.component';
import { ImageDocsComponent } from './forms/image-docs/image-docs.component';
import { ImagesAllComponent } from './forms/images-all/images-all.component';
@Component({
selector: 'app-start-pd',
@ -78,9 +81,7 @@ export class StartPdComponent implements OnInit, OnDestroy {
}
ngOnInit() {
// start
// end
this.listPDComponent.showListView(false);
const elemSidebar = <HTMLElement>document.querySelector('.app-inner .mail-sidebar');
const elemContent = <HTMLElement>document.querySelector('.app-inner .main-content');
@ -173,6 +174,7 @@ export class StartPdComponent implements OnInit, OnDestroy {
// load pd status change dialogue
pdStatusDialogue(status: string, checkType: number): void {
const dialogRef = this.dialog.open(PdStatusChangeDialogueComponent, {
data: { pdid: this.startPD, pd_status: status ,random_string:this.randomString,pd_type:this.pdMasterList.fk_pd_type },
disableClose: true,
@ -183,6 +185,22 @@ export class StartPdComponent implements OnInit, OnDestroy {
.subscribe(dataresult => {
if(dataresult.update_status==true){
checkType==2 ? this.router.navigate(['../../viewpd', this.pdMasterList.parent_pd_id], {relativeTo: this.route}) : this.loadTemplates(this.startPD,2,this.randomString);
let data = {
"pd_id": this.startPD,
"regenerate":0,
"random_string":this.randomString
};
this._pd.archivePDImages(data).subscribe(data => {
})
let data1 = {
"pd_id": this.startPD,
"regenerate":0,
"random_string":this.randomString
};
this._pd.photoPDFDownload(data1).subscribe(data => {
})
}
else {
checkType==1 ? this.router.navigate(['../../viewpd', this.pdMasterList.parent_pd_id], {relativeTo: this.route}) : this.loadTemplates(this.startPD,2,this.randomString);
@ -196,9 +214,11 @@ export class StartPdComponent implements OnInit, OnDestroy {
// start
// direct form based questions
OnSelectDirectForms(details: any) {
// console.log(details)
// this.formsCategoryEnable = true;
this.selectedFormsCategory = details;
let curr_vendor_ans_fetch_status = null
if(this.pdMasterList.fk_pd_type == '2') {
if(this.vendor_status_arr && this.vendor_status_arr.length > 0 && this.selectedFormsCategory.form_id != 13) {
@ -553,6 +573,24 @@ export class StartPdComponent implements OnInit, OnDestroy {
this.loadTemplates(this.startPD,2,this.randomString);
});
}
else
if(this.selectedFormsCategory.form_id==26){
const dialogRef = this.dialog.open(ImagesAllComponent, {
data: this.pdFullDetails,
// position: { right: '0'},
maxWidth: '100vw',
maxHeight: '100vh',
height: '100%',
width: '100%',
disableClose: true
});
dialogRef.afterClosed()
.subscribe(dataresult => {
// this.notifier.notify('success', 'Successfully allocated.!');
this.loadTemplates(this.startPD,2,this.randomString);
});
}
}
ngOnDestroy(): void {

View File

@ -3,7 +3,7 @@
<div style="width: 100%; background-color: yellow; text-align: center;justify-content: center" *ngIf="existPDs.length > 0">
<span class="notify_duplicate">This PD is a possible duplicate of PD <span *ngFor="let pd of existPDs">&nbsp;&nbsp; <a class="exist_pd_link" target="_blank" [routerLink]="['../../',pd.pd_id,pd.random_string]">{{pd.pd_sno}}</a>&nbsp;&nbsp;</span></span>
</div>
<mat-card-content>
<mat-card-content>
<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">
<mat-card style="min-width: 80%;max-width: 100%;box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15) !important;margin-top:60px;">

View File

@ -138,6 +138,8 @@ import { DynamicQuestionTemplateComponent } from './list-pd/start-pd/forms/dynam
import { QuesFormService } from './list-pd/start-pd/forms/dynamic-form/ques-form/ques-form.service';
import { VideoPlayerComponent } from 'app/video-chat/video-player/video-player.component';
import { MatVideoModule } from 'mat-video';
import { ImagesAllComponent } from './list-pd/start-pd/forms/images-all/images-all.component';
/**
* Custom angular notifier options
@ -185,7 +187,7 @@ const pdCustomNotifierOptions: NotifierOptions = {
@NgModule({
declarations: [TelePdAllocationComponent, FinancialInfoComponent, BusinessInfoComponent, EmploymentInfoComponent, StockComponent, BankingDetailsComponent, ListPdComponent, FamilyDetailsComponent, AddressComponent, ManagePdComponent, MapPdViewComponent, AddPdComponent, ViewPdComponent,VendorPdAllocationComponent, DuplicatePdComponent, 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,VideoPlayerComponent,
DynamicFormComponent,DynamicQuestionTemplateComponent],
DynamicFormComponent,DynamicQuestionTemplateComponent, ImagesAllComponent],
imports: [
CommonModule,
ManagePdRoutingModule,
@ -229,7 +231,7 @@ const pdCustomNotifierOptions: NotifierOptions = {
entryComponents: [DuplicatePdComponent,VendorPdAllocationComponent,PdAllocationComponent, SmartPdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent, TelePdAllocationComponent, AllocationViewMoreComponent, PersonalInfoComponent,BusinessAssetsInfoComponent,
ClientInfoComponent, SupplierInfoComponent, CurrentLoanComponent, LoanDetailsComponent, OtherIncomeComponent, AssetsInfoComponent, AddressComponent, FamilyDetailsComponent, BankingDetailsComponent, StockComponent, EmploymentInfoComponent, BusinessInfoComponent, FinancialInfoComponent, LenderRepresentativeComponent, AssessedIncomeComponent, GeneralInfoComponent, PdRequirementComponent,PdCollectedDocsComponent, ModelEditPdReportComponent, OtherApplicantDetailsComponent, NeighbourHoodComponent, DialogChangeCurrentVenrsion, FinalRemarksComponent, BusinessOtherFamilyMemberComponent, QcReviewComponent, BusinessInfoGroupComponent,BusinessBankingDetailsComponent, ManageSalesComponent, ManagePurchaseComponent, ManageBusinesExpenseComponent, ManageHouseHoldComponent, ManageOtherBusinessIncomeComponent, ManageDailySalesComponent,PdStatusChangeDialogueComponent, ViewLocationComponent, ConfirmAiDetailsComponent, RentalVerificationComponent, InitiateAdditionalPdComponent, ManageDailyPurchaseComponent,ManageRentalVerificationComponent,FuturePlansAndBusinessEnvironmentComponent,ImageCropComponent,QueriesDocsComponent,
DynamicFormComponent,DynamicQuestionTemplateComponent,VideoPlayerComponent],
DynamicFormComponent,DynamicQuestionTemplateComponent,VideoPlayerComponent,ImageDocsComponent,ImagesAllComponent],
})
export class ManagePdModule {
}

View File

@ -382,6 +382,7 @@ export class PdTrigerService {
//load pd template details
loadPDTemplates(pdId: string,randomString): Observable<any> {
let httpParams = new HttpParams().set('pd_id', pdId);
httpParams = httpParams.append('random_string',randomString);
// console.log('loadFullTemplate api load httpParams are',httpParams);
@ -991,7 +992,12 @@ export class PdTrigerService {
getVendorAnswers(params):Observable<any> {
return this._http.post(this.apiUrl+'getVendorAnswers',params)
}
archivePDImages(Dtl : any): Observable<any> {
return this._http.post<any>(this.apiUrl + "archivePDImages", { "records": Dtl });
}
photoPDFDownload(params:any): Observable<any>{
return this._http.post<any>(this.apiUrl + "photoPDFDownload", { "records": params });
}
covid19Ques() {
return this._http.get('../../../assets/sample_covid19_ques.json')
@ -1017,4 +1023,8 @@ export class PdTrigerService {
return this._http.post(this.apiUrl+'updateTwlioVideoStatus',params)
.pipe(catchError(this.handleError("updateTwlioVideoStatus",[])))
}
getPDImgDetails(params):Observable<any> {
// let headers = this.createAuthorizationHeader()
return this._http.post(this.apiUrl+'getPDImgDetails',params);
}
}