Sineedge/sparqsineedge
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of https://bitbucket.org/sriramv18/sparqsineedge

Browse Source
This commit is contained in:
venbatechnologies@gmail.com 2018-12-05 18:10:31 +05:30
commit 4ad50910c9
56 changed files with 6749 additions and 2623 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ng6-seed/src/app/dashboard/dashboard.component.html
View File

@ -80,7 +80,9 @@
<div *ngIf="total3 != 0" class="donut-inner"><span>Tele - {{total3}}</span></div>
</div>
</div>
<div fxLayout="row" class="pt-3" *ngIf="total3 != 0 && total2 != 0 && total1 != 0">
<div fxLayout="row" class="pt-3">
<div fxFlex.gt-sm="100" fxFlex="100" style="text-align:center">
<ul class="lengend-list">
<li class="lengend-element"><span class="oval" style="background-color:#c1c1c1"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; Draft</li>

475
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.html
View File

@ -1,169 +1,322 @@
<mat-card style="min-height: 550px;">
<mat-card-content>
<p>PD Address Details</p>
<!-- <form [formGroup]="_personalForm" (submit)="submitPersonalForm(_personalForm.value)" novalidate> -->
<form class="address" [formGroup]="addressForm">
<mat-form-field>
<input matInput placeholder="Address" formControlName="address" required>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Address Type" formControlName="address_type" required>
<mat-option value="{{m_addressType.address_type_id}}"
*ngFor="let m_addressType of addressData">{{m_addressType.address_type}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="addressForm.controls['address_type'].value == 12">
<input matInput placeholder="Address Type Others" formControlName="address_type_others">
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Locality" formControlName="locality" required>
<mat-option value="{{m_locality.locality_id}}"
*ngFor="let m_locality of localityData">{{m_locality.locality_name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="addressForm.controls.locality.value == 'Others'">
<input matInput placeholder="Specify Locality"
formControlName="locality_others">
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Approach to PD Location" formControlName="pd_location" required>
<mat-option value="{{data.pd_location_approach_id}}"
*ngFor="let data of locationdata">{{data.description}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Comment on Locality" formControlName="comment_locality" required>
<mat-option value="{{data.comments_on_locality_id}}"
*ngFor="let data of commentData">{{data.rating}}
</mat-option>
</mat-select>
</mat-form-field>
<!-- Don't Remove To replace atlast of the PD Completion and creating new form (Customer Behaviour 221118 review doc : s.no 3.e )
<mat-form-field>
<mat-select placeholder="Customer Behaviour"
formControlName="customer_behaviour" required>
<mat-option value="{{data.customer_behaviour_id}}"
*ngFor="let data of customerData">{{data.description}}
</mat-option>
</mat-select>
</mat-form-field>--(Customer Behaviour)-->
<mat-form-field>
<mat-select placeholder="Ownership" formControlName="address_ownership">
<mat-option value="{{ownerShip.id}}"
*ngFor="let ownerShip of ownerShipData">
{{ownerShip.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Is there any business activity is being run?"
formControlName="bussiness_activity" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="addressForm.controls['bussiness_activity'].value == 'yes'">
<mat-select placeholder="Bussiness Type" formControlName="bussiness_address_type">
<mat-option value="{{m_addressType.address_type_id}}"
*ngFor="let m_addressType of addressData">{{m_addressType.address_type}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="addressForm.controls['bussiness_address_type'].value == 12">
<input matInput placeholder="Bussiness Address Type Others" formControlName="bussiness_address_type_others">
</mat-form-field>
<!--- Don't Remove To replace atlast of the PD Completion and creating new form (Neighbourhood check) --
<mat-card>
<mat-card-header>
<p>Neighbourhood</p>
</mat-card-header>
<div formArrayName="neighbourhood">
<div *ngFor="let item of addressForm.controls.neighbourhood['controls']; let i=index" >
<mat-card-content class="matcard" [formGroup]="item">
<div>
<mat-form-field>
<input matInput placeholder="Neighbour Name"
formControlName="name" required>
</mat-form-field>
</div>
<div>
<mat-form-field>
<mat-select placeholder="Do you know"
formControlName="do_you_know" required>
<mat-option value="{{m_neighbourStatus}}"
*ngFor="let m_neighbourStatus of neighbourStatusData">{{m_neighbourStatus}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Is the applicant owner"
formControlName="is_owner" required>
<mat-option value="{{m_applicantOwner}}"
*ngFor="let m_applicantOwner of applicantOwnerData">{{m_applicantOwner}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<!-- <mat-form-field>
<input matInput placeholder="How long do you know the applicant"
formControlName="how_long">
</mat-form-field> ->-
<div>
<label>How long do you know the applicant?</label>
<br>
<mat-form-field>
<input matInput type="number" placeholder="Year" formControlName="how_long_year" required min='0'>
</mat-form-field>
<mat-form-field>
<input matInput type="number" placeholder="Month" formControlName="how_long_month" required min='0' max='12'>
</mat-form-field>
</div>
<button type="button" matTooltip="Add More Neighbour Details" class="mr-1 mb-1 hover-icon" matTooltipPosition="above" mat-raised-button mat-icon-button *ngIf="i==0"
(click)="addNeighbour($event)"
color="primary" style="float: right;">
<mat-icon>add</mat-icon>
</button>
<button type="button" matTooltip="Delete" class="mr-1 mb-1 hover-icon" matTooltipPosition="above" mat-raised-button mat-icon-button *ngIf="i>0"
(click)="removeNeighbour(i)"
style="float: right;">
<mat-icon>delete</mat-icon>
</button>
</mat-card-content>
<h2 mat-dialog-title class="paragraph_change">
<div fxFlex="70" align="left">
{{pageTitle}}
</div>
<div fxFlex="30" align="end">
<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>
<mat-dialog-content>
<mat-tab-group>
<mat-tab label="Questions">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="100">
<mat-card>
<!-- <mat-card-title>Address Details</mat-card-title> -->
<mat-card-content>
<mat-form-field>
<!-- <input matInput placeholder="Name" formControlName="name_ans" type="text" required> -->
<input matInput placeholder="Address" formControlName="address" required>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Address Type" formControlName="address_type" required>
<mat-option value="{{m_addressType.address_type_id}}"
*ngFor="let m_addressType of addressData">{{m_addressType.address_type}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="addressForm.controls['address_type'].value == 12">
<input matInput placeholder="Address Type Others" formControlName="address_type_others">
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Locality" formControlName="locality" required>
<mat-option value="{{m_locality.locality_id}}"
*ngFor="let m_locality of localityData">{{m_locality.locality_name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="addressForm.controls.locality.value == 'Others'">
<input matInput placeholder="Specify Locality"
formControlName="locality_others">
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Approach to PD Location" formControlName="pd_location" required>
<mat-option value="{{data.pd_location_approach_id}}"
*ngFor="let data of locationdata">{{data.description}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Comment on Locality" formControlName="comment_locality" required>
<mat-option value="{{data.comments_on_locality_id}}"
*ngFor="let data of commentData">{{data.rating}}
</mat-option>
</mat-select>
</mat-form-field>
<!-- Don't Remove To replace atlast of the PD Completion and creating new form (Customer Behaviour 221118 review doc : s.no 3.e )
<mat-form-field>
<mat-select placeholder="Customer Behaviour"
formControlName="customer_behaviour" required>
<mat-option value="{{data.customer_behaviour_id}}"
*ngFor="let data of customerData">{{data.description}}
</mat-option>
</mat-select>
</mat-form-field>--(Customer Behaviour)-->
<mat-form-field>
<mat-select placeholder="Ownership" formControlName="address_ownership">
<mat-option value="{{ownerShip.id}}"
*ngFor="let ownerShip of ownerShipData">
{{ownerShip.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="addressForm.controls['address_ownership'].value == 4 ">
<input matInput placeholder="Specify Other Ownership" formControlName="other_ownership">
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Is there any business activity is being run?"
formControlName="bussiness_activity" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="addressForm.controls['bussiness_activity'].value == 'yes'">
<mat-select placeholder="Bussiness Type" formControlName="bussiness_address_type">
<mat-option value="{{m_addressType.address_type_id}}"
*ngFor="let m_addressType of addressData">{{m_addressType.address_type}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="addressForm.controls['bussiness_address_type'].value == 12">
<input matInput placeholder="Bussiness Address Type Others" formControlName="bussiness_address_type_others">
</mat-form-field>
<!--- Don't Remove To replace atlast of the PD Completion and creating new form (Neighbourhood check) --
<mat-card>
<mat-card-header>
<p>Neighbourhood</p>
</mat-card-header>
<div formArrayName="neighbourhood">
<div *ngFor="let item of addressForm.controls.neighbourhood['controls']; let i=index" >
<mat-card-content class="matcard" [formGroup]="item">
<div>
<mat-form-field>
<input matInput placeholder="Neighbour Name"
formControlName="name" required>
</mat-form-field>
</div>
<div>
<mat-form-field>
<mat-select placeholder="Do you know"
formControlName="do_you_know" required>
<mat-option value="{{m_neighbourStatus}}"
*ngFor="let m_neighbourStatus of neighbourStatusData">{{m_neighbourStatus}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Is the applicant owner"
formControlName="is_owner" required>
<mat-option value="{{m_applicantOwner}}"
*ngFor="let m_applicantOwner of applicantOwnerData">{{m_applicantOwner}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<!-- <mat-form-field>
<input matInput placeholder="How long do you know the applicant"
formControlName="how_long">
</mat-form-field> ->-
<div>
<label>How long do you know the applicant?</label>
<br>
<mat-form-field>
<input matInput type="number" placeholder="Year" formControlName="how_long_year" required min='0'>
</mat-form-field>
<mat-form-field>
<input matInput type="number" placeholder="Month" formControlName="how_long_month" required min='0' max='12'>
</mat-form-field>
</div>
<button type="button" matTooltip="Add More Neighbour Details" class="mr-1 mb-1 hover-icon" matTooltipPosition="above" mat-raised-button mat-icon-button *ngIf="i==0"
(click)="addNeighbour($event)"
color="primary" style="float: right;">
<mat-icon>add</mat-icon>
</button>
<button type="button" matTooltip="Delete" class="mr-1 mb-1 hover-icon" matTooltipPosition="above" mat-raised-button mat-icon-button *ngIf="i>0"
(click)="removeNeighbour(i)"
style="float: right;">
<mat-icon>delete</mat-icon>
</button>
</mat-card-content>
</div>
</div>
</mat-card>
End of Neighbourhood Check-->
</mat-card-content>
</mat-card>
</div>
</div>
</ng-template>
</mat-tab>
<mat-tab label="Docs">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions>
<div fxFlex="60" class="pb-0 text-sm-left" align="left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="address_form_remark"></textarea>
</mat-form-field>
</div>
<div fxFlex="40" align="end">
<!-- <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="submit" matTooltip="Save" matTooltipPosition="above"><mat-icon>save</mat-icon></button> -->
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit" (click)="onSubmit()"><mat-icon>save</mat-icon></button>
</div>
</mat-card>
End of Neighbourhood Check-->
<div fxLayout="row">
<div fxFlex="60" class="pb-0 text-sm-left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="address_form_remark"></textarea>
</mat-form-field>
</div>
</div>
<div class="row" style="text-align:right;">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit" (click)="onSubmit()"><mat-icon>save</mat-icon></button>
</div>
</mat-dialog-actions>
</form>
<notifier-container></notifier-container>
</mat-card-content>
</mat-card>

118
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.scss
View File

@ -1,19 +1,103 @@
.address {
display: flex;
padding: 0 2%;
flex-direction: column;
.paragraph_change {
color: #e00201 !important;
}
.mat-card-content {
background-color: white;
}
.mat-card-actions {
background-color: white;
}
mat-form-field {
margin: 0 2%;
}
$base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
$product-bg-color-hover: rgba(103, 58, 183, 0.7);
.p-list-main {
background: white;
margin: auto;
position: relative;
overflow: hidden !important;
border-radius: 10px 10px 10px 10px;
box-shadow: $base-card-box-shadow;
transform: scale(0.95);
transition: box-shadow 0.5s, transform 0.5s;
&:hover {
transform: scale(1);
box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}
.p-list {
position: relative;
.top {
height: 100%;
width: 100%;
// background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
.bottom {
width: 200%;
height: 15%;
transition: transform 0.5s;
h1 {
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.left {
height: 100%;
width: 50%;
background: #f4f4f4;
position: relative;
float: left;
.details {
padding: 5px;
float: left;
// width: calc(70% - 40px);
}
}
.right {
width: 50%;
background: #A6CDDE;
color: white;
float: right;
height: 200%;
overflow: hidden;
.details {
padding: 20px;
float: right;
width: calc(70% - 40px);
}
}
}
}
}
.address > * {
width: 100%;
}
.matcard mat-form-field {
margin: 0 2%;
width:40%;
}
.address .button {
float: right;
width: 10px;
background: #62B013;
color: white;
}
// .address {
// display: flex;
// padding: 0 2%;
// flex-direction: column;
// }
// .address > * {
// width: 100%;
// }
// .matcard mat-form-field {
// margin: 0 2%;
// width:40%;
// }
// .address .button {
// float: right;
// width: 10px;
// background: #62B013;
// color: white;
// }

40
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.ts
View File

@ -1,13 +1,11 @@
import {
Component,
OnInit,
Inject,
Component,OnInit,
Inject, Output,
Input, ElementRef
} from '@angular/core';
import {
FormBuilder,
FormGroup,
FormBuilder, FormGroup,
Validators,
FormArray, FormControl, AbstractControl,
} from '@angular/forms';
@ -28,8 +26,16 @@ import {ActivatedRoute, Router} from "@angular/router";
templateUrl: './address.component.html',
styleUrls: ['./address.component.scss']
})
export class AddressComponent implements OnInit {
@Input() pdid: number;
pageTitle: string ="PD Address Details";
//@Input() pdid: number;
pdid : number;
form_id: number;
loadDataStatus: boolean=true;
locationdata: any = [];
commentData: any = [];
@ -44,25 +50,31 @@ export class AddressComponent implements OnInit {
public currentLoanForm: FormGroup;
private notifier: NotifierService;
public addressForm: FormGroup;
public address: AbstractControl;
public addressType: AbstractControl;
public locality: AbstractControl;
public pdLocation: AbstractControl;
public commentlocality: AbstractControl;
public customerBehaviour: AbstractControl;
public ownership: AbstractControl;
public other_ownership: AbstractControl;
public bussinessActivity: AbstractControl;
constructor(private el: ElementRef, notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
//constructor(notifier: NotifierService,private _fb: FormBuilder,private _pd: PdTrigerService , ) {
constructor(private el: ElementRef, notifier: NotifierService,
private fb: FormBuilder,
private route: ActivatedRoute,
private router: Router,
private _pd: PdTrigerService) {
private _pd: PdTrigerService,
@Inject(MAT_DIALOG_DATA) public pd_all_details: any)
{
this.pdid = this.pd_all_details.pdmaster_details.pd_id;
this.form_id = 5;
this.notifier = notifier;
}
ngOnInit() {
console.clear();
this.getMasterDetails('PDLOCATIONAPPROACH',1);
this.getMasterDetails('COMMENTSONLOCALITY',2);
//this.getMasterDetails('CUSTOMERBEHAVIOUR',3);review doc s.no 3.e
@ -91,6 +103,7 @@ export class AddressComponent implements OnInit {
this.addressForm.controls.locality.setValue(data.records.locality);
this.addressForm.controls.address_form_remark.setValue(data.records.address_form_remark);
this.addressForm.controls.address_ownership.setValue(data.records.address_ownership);
this.addressForm.controls.other_ownership.setValue(data.records.other_ownership);
this.addressForm.controls.bussiness_activity.setValue(data.records.bussiness_activity);
if(data.records.bussiness_activity == 'yes') {
this.addressForm.controls.bussiness_address_type.setValue(data.records.bussiness_address_type);
@ -127,6 +140,7 @@ export class AddressComponent implements OnInit {
//neighbourhood: this.fb.array([]),
address_form_remark:[''],
address_ownership:[''],
other_ownership:[''],
bussiness_activity:[''],
bussiness_address_type:[''],
bussiness_address_type_others: ['']
@ -138,6 +152,7 @@ export class AddressComponent implements OnInit {
this.commentlocality = this.addressForm.controls['comment_locality'];
//this.customerBehaviour = this.addressForm.controls['customer_behaviour'];
this.ownership = this.addressForm.controls['address_ownership'];
this.other_ownership = this.addressForm.controls['other_ownership'];
this.bussinessActivity = this.addressForm.controls['bussiness_activity'];
// this.bussiessAddressType = this.addressForm.controls['bussiness_address_type'];
}
@ -207,6 +222,7 @@ export class AddressComponent implements OnInit {
//records.neighbourhood = this.addressForm.controls.neighbourhood.value;
records.address_form_remark = this.addressForm.controls.address_form_remark.value;
records.address_ownership = this.ownership.value;
records.other_ownership = this.other_ownership.value;
records.bussiness_activity = this.bussinessActivity.value;
if (this.bussinessActivity.value == 'yes') {
records.bussiness_address_type = this.addressForm.controls.bussiness_address_type.value;

657
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/assessed-income.component.html
View File

@ -1,309 +1,408 @@
<form [formGroup]="_assessedIncomeFormFrom">
<!-- house hold expenses start-->
<!-- hide table based start -->
<!-- <mat-card>
<mat-card-content *ngFor="let tbl of salesMonthWiseTable; let tableIndex=index">
<table>
<caption>{{tbl.salesItem}}</caption>
<thead>
<tr>
<th *ngFor="let tblHeader of tbl.headerElement; let tableHeaderIndex=index">
{{tblHeader.header}}
</th>
</tr>
</thead>
<tbody>
<tr>
<td *ngFor="let tblBody of tbl.bodyElements;">
<table>
<tbody>
<tr *ngFor="let tblBodyTr of tblBody.bodyElement;">
<td>{{tblBodyTr.sales_date | date: 'dd-MM-yyyy'}}</td>
<td>{{tblBodyTr.sales_value}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">{{tblBody.bodyElementTotal}}</td>
</tr>
<h2 mat-dialog-title class="paragraph_change">
<div fxFlex="70" align="left">
{{pageTitle}}
</div>
<div fxFlex="30" align="end">
<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>
<mat-dialog-content>
</tfoot>
</table>
</td>
<mat-tab-group>
<mat-tab label="Questions">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="100">
</tr>
<mat-card>
<mat-card-content>
<mat-form-field>
<input matInput placeholder="Sales Declared By Customer" formControlName="sales_declared_by_customer">
</mat-form-field>
<mat-accordion multi="false">
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
<small class="expan_table_header">Sales Calculate Item Wise</small>
</mat-panel-title>
<mat-panel-description class="subtitle_message">
{{salesCaluatedItem.length}} &nbsp;Items
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div class="example-container mat-elevation-z8">
<table mat-table [dataSource]="salesCaluatedItem">
<!-- Item Column -->
<ng-container matColumnDef="Item">
<th mat-header-cell *matHeaderCellDef>Item</th>
<td mat-cell *matCellDef="let salesItem">{{salesItem.sales_item}} </td>
</ng-container>
<!-- Qty/Uom Column-->
<ng-container matColumnDef="Qty/UOM">
<th mat-header-cell *matHeaderCellDef>Qty/UOM</th>
<td mat-cell *matCellDef="let salesItem">{{salesItem.sales_qty }}/{{salesItem.uom_name }} </td>
</ng-container>
<!-- Rate/Unit Column-->
<ng-container matColumnDef="Rate/Unit">
<th mat-header-cell *matHeaderCellDef>Rate/Unit</th>
<td mat-cell *matCellDef="let salesItem"> {{salesItem.rate_per_unit }} </td>
</ng-container>
<!-- Frequency Name Column -->
<ng-container matColumnDef="Frequency">
<th mat-header-cell *matHeaderCellDef>Frequency</th>
<td mat-cell *matCellDef="let salesItem"> {{salesItem.frequency_name}} </td>
</ng-container>
<!-- Annual Sale Value Column-->
<ng-container matColumnDef="Annual Sale Value">
<th mat-header-cell *matHeaderCellDef>Annual Sale Value</th>
<td mat-cell *matCellDef="let salesItem"> {{salesItem.annual_sale_value}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="salesCaluatedItemColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: salesCaluatedItemColumns;"></tr>
</table>
</div>
</ng-template>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
<small class="expan_table_header">Sales Calculate Month Wise</small>
</mat-panel-title>
<mat-panel-description class="subtitle_message">
{{salesMonthWiseExpandedItems.length}} &nbsp;Items
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<!-- <mat-accordion multi="true">
<mat-expansion-panel *ngFor="let expandDetails of salesMonthWiseExpandedItems">
<mat-expansion-panel-header>
<mat-panel-title>
<small class="expan_table_header">{{expandDetails.salesItem}}</small>
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
</ng-template>
</tbody>
<mat-action-row *ngFor="let footer of expandDetails.footerMessage">
<div fxFlex="50" >
<small class="expan_footer">{{footer.month_message}}</small>
</div>
<div fxFlex="50" >
<small class="expan_footer">{{footer.year_message}}</small>
</div>
</mat-action-row>
</mat-expansion-panel>
</mat-accordion> -->
<mat-card *ngFor="let expandDetails of salesMonthWiseExpandedItems">
<mat-card-header>
<mat-card-title><small class="expan_table_header">{{expandDetails.salesItem}}</small></mat-card-title>
<mat-card-subtitle class="subtitle_message" *ngFor="let footer of expandDetails.footerMessage">
<div fxFlex="100">
{{footer.month_message}} &nbsp;&nbsp;{{footer.year_message}}
</div>
<tfoot>
<tr *ngFor="let parentTabFooter of tbl.parentTableFooter">
<td colspan="parentTabFooter.cols_span_length">{{parentTabFooter.message}}</td>
<td>{{parentTabFooter.value}}</td>
</tr>
</mat-card-subtitle>
</mat-card-header>
<mat-divider></mat-divider>
<mat-card-content style="display: flex;margin-top: -20px;">
<!-- <div fxLayout="row wrap">
</div> -->
<div fxFlex="50" *ngFor="let eachItem of expandDetails.expandElements" class="m-gap p-gap">
<h4 align="center" class="h4_font">{{eachItem.header}}</h4>
<table mat-table [dataSource]="eachItem.value" class="mat-elevation-z8">
<ng-container matColumnDef="Date">
<th mat-header-cell *matHeaderCellDef>Date</th>
<td mat-cell *matCellDef="let itemValue">{{itemValue.sales_date | date: 'dd-MM-yyyy'}} </td>
<td mat-footer-cell *matFooterCellDef> Total </td>
</ng-container>
<!-- Value Column-->
<ng-container matColumnDef="Amount">
<th mat-header-cell *matHeaderCellDef>Amount</th>
<td mat-cell *matCellDef="let itemValue">{{itemValue.sales_value}}</td>
<td mat-footer-cell *matFooterCellDef> {{getTotalCost(eachItem.value)}} </td>
</ng-container>
</tfoot>
<tr mat-header-row *matHeaderRowDef="salesMonthItemColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: salesMonthItemColumns;"></tr>
<tr mat-footer-row *matFooterRowDef="salesMonthItemColumns; sticky: true"></tr>
</table>
</div>
</table>
</mat-card-content>
</mat-card> -->
<!-- hide table based end -->
</mat-card-content>
<mat-card>
<mat-card-content>
<mat-form-field>
<input matInput placeholder="Sales Declared By Customer" formControlName="sales_declared_by_customer">
</mat-form-field>
<mat-accordion multi="false">
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
<small class="expan_table_header">Sales Calculate Item Wise</small>
</mat-panel-title>
<mat-panel-description class="subtitle_message">
{{salesCaluatedItem.length}} &nbsp;Items
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div class="example-container mat-elevation-z8">
<table mat-table [dataSource]="salesCaluatedItem">
<!-- Item Column -->
<ng-container matColumnDef="Item">
<th mat-header-cell *matHeaderCellDef>Item</th>
<td mat-cell *matCellDef="let salesItem">{{salesItem.sales_item}} </td>
</ng-container>
<!-- Qty/Uom Column-->
<ng-container matColumnDef="Qty/UOM">
<th mat-header-cell *matHeaderCellDef>Qty/UOM</th>
<td mat-cell *matCellDef="let salesItem">{{salesItem.sales_qty }}/{{salesItem.uom_name }} </td>
</ng-container>
<!-- Rate/Unit Column-->
<ng-container matColumnDef="Rate/Unit">
<th mat-header-cell *matHeaderCellDef>Rate/Unit</th>
<td mat-cell *matCellDef="let salesItem"> {{salesItem.rate_per_unit }} </td>
</ng-container>
<!-- Frequency Name Column -->
</mat-card>
<ng-container matColumnDef="Frequency">
<th mat-header-cell *matHeaderCellDef>Frequency</th>
<td mat-cell *matCellDef="let salesItem"> {{salesItem.frequency_name}} </td>
</ng-container>
<!-- Annual Sale Value Column-->
<ng-container matColumnDef="Annual Sale Value">
<th mat-header-cell *matHeaderCellDef>Annual Sale Value</th>
<td mat-cell *matCellDef="let salesItem"> {{salesItem.annual_sale_value}} </td>
</ng-container>
</ng-template>
</mat-expansion-panel>
<tr mat-header-row *matHeaderRowDef="salesCaluatedItemColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: salesCaluatedItemColumns;"></tr>
</table>
</div>
</ng-template>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
<small class="expan_table_header">Sales Calculate Month Wise</small>
</mat-panel-title>
<mat-panel-description class="subtitle_message">
{{salesMonthWiseExpandedItems.length}} &nbsp;Items
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<!-- <mat-accordion multi="true">
<mat-expansion-panel *ngFor="let expandDetails of salesMonthWiseExpandedItems">
<mat-expansion-panel-header>
<mat-panel-title>
<small class="expan_table_header">{{expandDetails.salesItem}}</small>
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
<small class="expan_table_header">Purchase Details</small>
</mat-panel-title>
<mat-panel-description class="subtitle_message">
{{purchaseDetails.length}} &nbsp;Items
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div class="example-container mat-elevation-z8">
<table mat-table [dataSource]="purchaseDetails">
<!-- Item Column -->
<ng-container matColumnDef="Item">
<th mat-header-cell *matHeaderCellDef>Item</th>
<td mat-cell *matCellDef="let purchaseItem">{{purchaseItem.purchase_item}} </td>
</ng-container>
<!-- Qty/Uom Column-->
<ng-container matColumnDef="Qty/UOM">
<th mat-header-cell *matHeaderCellDef>Qty/UOM</th>
<td mat-cell *matCellDef="let purchaseItem">{{purchaseItem.purchase_qty }}/{{purchaseItem.uom_name }} </td>
</ng-container>
<!-- Rate/Unit Column-->
<ng-container matColumnDef="Rate/Unit">
<th mat-header-cell *matHeaderCellDef>Rate/Unit</th>
<td mat-cell *matCellDef="let purchaseItem"> {{purchaseItem.rate_per_unit }} </td>
</ng-container>
<!-- Frequency Name Column -->
<ng-container matColumnDef="Frequency">
<th mat-header-cell *matHeaderCellDef>Frequency</th>
<td mat-cell *matCellDef="let purchaseItem"> {{purchaseItem.frequency_name}} </td>
</ng-container>
<!-- Annual Sale Value Column-->
<ng-container matColumnDef="Annual Purchase Value">
<th mat-header-cell *matHeaderCellDef>Annual Purchase Value</th>
<td mat-cell *matCellDef="let purchaseItem"> {{purchaseItem.annual_purchase_value}} </td>
</ng-container>
</ng-template>
<tr mat-header-row *matHeaderRowDef="purchaseDetailsColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: purchaseDetailsColumns;"></tr>
</table>
</div>
</ng-template>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
<small class="expan_table_header">Business Expenses</small>
</mat-panel-title>
<mat-panel-description class="subtitle_message">
{{businessExpenses.length}} &nbsp;Items
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div class="example-container mat-elevation-z8">
<table mat-table [dataSource]="businessExpenses">
<!-- Expense Item Column -->
<ng-container matColumnDef="Item">
<th mat-header-cell *matHeaderCellDef>Item</th>
<td mat-cell *matCellDef="let businessEx"> {{businessEx.expense_item}} </td>
</ng-container>
<mat-action-row *ngFor="let footer of expandDetails.footerMessage">
<div fxFlex="50" >
<small class="expan_footer">{{footer.month_message}}</small>
</div>
<div fxFlex="50" >
<small class="expan_footer">{{footer.year_message}}</small>
</div>
</mat-action-row>
</mat-expansion-panel>
</mat-accordion> -->
<mat-card *ngFor="let expandDetails of salesMonthWiseExpandedItems">
<mat-card-header>
<mat-card-title><small class="expan_table_header">{{expandDetails.salesItem}}</small></mat-card-title>
<mat-card-subtitle class="subtitle_message" *ngFor="let footer of expandDetails.footerMessage">
<div fxFlex="100">
{{footer.month_message}} &nbsp;&nbsp;{{footer.year_message}}
</div>
<!-- Expense Value Column-->
<ng-container matColumnDef="Value">
<th mat-header-cell *matHeaderCellDef>Value</th>
<td mat-cell *matCellDef="let businessEx"> {{businessEx.expense_value }} </td>
</ng-container>
<!-- Frequency Name Column -->
<ng-container matColumnDef="Frequency">
<th mat-header-cell *matHeaderCellDef>Frequency</th>
<td mat-cell *matCellDef="let businessEx"> {{businessEx.frequency_name}} </td>
</ng-container>
<!-- Annual Expenses Value Column-->
<ng-container matColumnDef="Annual Expenses Value">
<th mat-header-cell *matHeaderCellDef>Annual Expenses Value</th>
<td mat-cell *matCellDef="let businessEx"> {{businessEx.annual_expenses_value}} </td>
</ng-container>
</mat-card-subtitle>
</mat-card-header>
<mat-divider></mat-divider>
<mat-card-content style="display: flex;margin-top: -20px;">
<!-- <div fxLayout="row wrap">
</div> -->
<div fxFlex="50" *ngFor="let eachItem of expandDetails.expandElements" class="m-gap p-gap">
<tr mat-header-row *matHeaderRowDef="businessExpensesColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: businessExpensesColumns;"></tr>
</table>
</div>
</ng-template>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
<small class="expan_table_header">House Hold Expenses</small>
</mat-panel-title>
<mat-panel-description class="subtitle_message">
{{houseHoldExpenses.length}} &nbsp;Items
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div class="example-container mat-elevation-z8">
<table mat-table [dataSource]="houseHoldExpenses">
<!-- Item Column -->
<ng-container matColumnDef="Item">
<th mat-header-cell *matHeaderCellDef>Item</th>
<td mat-cell *matCellDef="let householdItem">{{householdItem.expense_item}} </td>
</ng-container>
<!-- Value Column-->
<ng-container matColumnDef="Value">
<th mat-header-cell *matHeaderCellDef>Value</th>
<td mat-cell *matCellDef="let householdItem">{{householdItem.expense_value }}</td>
</ng-container>
<!-- Frequency Name Column -->
<ng-container matColumnDef="Frequency">
<th mat-header-cell *matHeaderCellDef>Frequency</th>
<td mat-cell *matCellDef="let householdItem"> {{householdItem.frequency_name}} </td>
</ng-container>
<!-- Annual Expense Value Column-->
<ng-container matColumnDef="Annual Expenses Value">
<th mat-header-cell *matHeaderCellDef>Annual Expenses Value</th>
<td mat-cell *matCellDef="let householdItem"> {{householdItem.annual_expense_value}} </td>
</ng-container>
<h4 align="center" class="h4_font">{{eachItem.header}}</h4>
<table mat-table [dataSource]="eachItem.value" class="mat-elevation-z8">
<ng-container matColumnDef="Date">
<th mat-header-cell *matHeaderCellDef>Date</th>
<td mat-cell *matCellDef="let itemValue">{{itemValue.sales_date | date: 'dd-MM-yyyy'}} </td>
<td mat-footer-cell *matFooterCellDef> Total </td>
</ng-container>
<!-- Value Column-->
<ng-container matColumnDef="Amount">
<th mat-header-cell *matHeaderCellDef>Amount</th>
<td mat-cell *matCellDef="let itemValue">{{itemValue.sales_value}}</td>
<td mat-footer-cell *matFooterCellDef> {{getTotalCost(eachItem.value)}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="houseHoldExpensesColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: houseHoldExpensesColumns;"></tr>
</table>
</div>
</ng-template>
</mat-expansion-panel>
</mat-accordion>
<tr mat-header-row *matHeaderRowDef="salesMonthItemColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: salesMonthItemColumns;"></tr>
<tr mat-footer-row *matFooterRowDef="salesMonthItemColumns; sticky: true"></tr>
</table>
</div>
</mat-card-content>
</mat-card>
</mat-card-content>
</mat-card>
</div>
</div>
</ng-template>
</mat-expansion-panel>
</mat-tab>
<mat-tab label="Docs">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
<small class="expan_table_header">Purchase Details</small>
</mat-panel-title>
<mat-panel-description class="subtitle_message">
{{purchaseDetails.length}} &nbsp;Items
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div class="example-container mat-elevation-z8">
<table mat-table [dataSource]="purchaseDetails">
<!-- Item Column -->
<ng-container matColumnDef="Item">
<th mat-header-cell *matHeaderCellDef>Item</th>
<td mat-cell *matCellDef="let purchaseItem">{{purchaseItem.purchase_item}} </td>
</ng-container>
<!-- Qty/Uom Column-->
<ng-container matColumnDef="Qty/UOM">
<th mat-header-cell *matHeaderCellDef>Qty/UOM</th>
<td mat-cell *matCellDef="let purchaseItem">{{purchaseItem.purchase_qty }}/{{purchaseItem.uom_name }} </td>
</ng-container>
<!-- Rate/Unit Column-->
<ng-container matColumnDef="Rate/Unit">
<th mat-header-cell *matHeaderCellDef>Rate/Unit</th>
<td mat-cell *matCellDef="let purchaseItem"> {{purchaseItem.rate_per_unit }} </td>
</ng-container>
<!-- Frequency Name Column -->
<div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<ng-container matColumnDef="Frequency">
<th mat-header-cell *matHeaderCellDef>Frequency</th>
<td mat-cell *matCellDef="let purchaseItem"> {{purchaseItem.frequency_name}} </td>
</ng-container>
<!-- Annual Sale Value Column-->
<ng-container matColumnDef="Annual Purchase Value">
<th mat-header-cell *matHeaderCellDef>Annual Purchase Value</th>
<td mat-cell *matCellDef="let purchaseItem"> {{purchaseItem.annual_purchase_value}} </td>
</ng-container>
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<tr mat-header-row *matHeaderRowDef="purchaseDetailsColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: purchaseDetailsColumns;"></tr>
</table>
</div>
</ng-template>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
<small class="expan_table_header">Business Expenses</small>
</mat-panel-title>
<mat-panel-description class="subtitle_message">
{{businessExpenses.length}} &nbsp;Items
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div class="example-container mat-elevation-z8">
<table mat-table [dataSource]="businessExpenses">
<!-- Expense Item Column -->
<ng-container matColumnDef="Item">
<th mat-header-cell *matHeaderCellDef>Item</th>
<td mat-cell *matCellDef="let businessEx"> {{businessEx.expense_item}} </td>
</ng-container>
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<!-- Expense Value Column-->
<ng-container matColumnDef="Value">
<th mat-header-cell *matHeaderCellDef>Value</th>
<td mat-cell *matCellDef="let businessEx"> {{businessEx.expense_value }} </td>
</ng-container>
<!-- Frequency Name Column -->
<ng-container matColumnDef="Frequency">
<th mat-header-cell *matHeaderCellDef>Frequency</th>
<td mat-cell *matCellDef="let businessEx"> {{businessEx.frequency_name}} </td>
</ng-container>
<!-- Annual Expenses Value Column-->
<ng-container matColumnDef="Annual Expenses Value">
<th mat-header-cell *matHeaderCellDef>Annual Expenses Value</th>
<td mat-cell *matCellDef="let businessEx"> {{businessEx.annual_expenses_value}} </td>
</ng-container>
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<tr mat-header-row *matHeaderRowDef="businessExpensesColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: businessExpensesColumns;"></tr>
</table>
</div>
</ng-template>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
<small class="expan_table_header">House Hold Expenses</small>
</mat-panel-title>
<mat-panel-description class="subtitle_message">
{{houseHoldExpenses.length}} &nbsp;Items
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div class="example-container mat-elevation-z8">
<table mat-table [dataSource]="houseHoldExpenses">
<!-- Item Column -->
<ng-container matColumnDef="Item">
<th mat-header-cell *matHeaderCellDef>Item</th>
<td mat-cell *matCellDef="let householdItem">{{householdItem.expense_item}} </td>
</ng-container>
<!-- Value Column-->
<ng-container matColumnDef="Value">
<th mat-header-cell *matHeaderCellDef>Value</th>
<td mat-cell *matCellDef="let householdItem">{{householdItem.expense_value }}</td>
</ng-container>
<!-- Frequency Name Column -->
<ng-container matColumnDef="Frequency">
<th mat-header-cell *matHeaderCellDef>Frequency</th>
<td mat-cell *matCellDef="let householdItem"> {{householdItem.frequency_name}} </td>
</ng-container>
<!-- Annual Expense Value Column-->
<ng-container matColumnDef="Annual Expenses Value">
<th mat-header-cell *matHeaderCellDef>Annual Expenses Value</th>
<td mat-cell *matCellDef="let householdItem"> {{householdItem.annual_expense_value}} </td>
</ng-container>
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<tr mat-header-row *matHeaderRowDef="houseHoldExpensesColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: houseHoldExpensesColumns;"></tr>
</table>
</div>
</ng-template>
</mat-expansion-panel>
</mat-accordion>
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions>
<!-- <div fxFlex="60" class="pb-0 text-sm-left" align="left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="personal_info_form_remark" required></textarea>
</mat-form-field>
</div>
<div fxFlex="40" align="end">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="submit" matTooltip="Save" matTooltipPosition="above"><mat-icon>save</mat-icon></button>
</div> -->
</mat-dialog-actions>
</mat-card-content>
</mat-card>
</form>
<notifier-container></notifier-container>

86
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/assessed-income.component.scss
View File

@ -33,6 +33,92 @@ tr.mat-footer-row {
color:#e00201 !important;
}
.paragraph_change {
color: #e00201 !important;
}
.mat-card-content {
background-color: white;
}
.mat-card-actions {
background-color: white;
}
mat-form-field {
margin: 0 2%;
}
$base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
$product-bg-color-hover: rgba(103, 58, 183, 0.7);
.p-list-main {
background: white;
margin: auto;
position: relative;
overflow: hidden !important;
border-radius: 10px 10px 10px 10px;
box-shadow: $base-card-box-shadow;
transform: scale(0.95);
transition: box-shadow 0.5s, transform 0.5s;
&:hover {
transform: scale(1);
box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}
.p-list {
position: relative;
.top {
height: 100%;
width: 100%;
// background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
.bottom {
width: 200%;
height: 15%;
transition: transform 0.5s;
h1 {
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.left {
height: 100%;
width: 50%;
background: #f4f4f4;
position: relative;
float: left;
.details {
padding: 5px;
float: left;
// width: calc(70% - 40px);
}
}
.right {
width: 50%;
background: #A6CDDE;
color: white;
float: right;
height: 200%;
overflow: hidden;
.details {
padding: 20px;
float: right;
width: calc(70% - 40px);
}
}
}
}
}
// table, th, td {
// border: 1px solid rgba(0, 0, 0, 0.12);
// border-collapse: collapse;

21
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/assessed-income.component.ts
View File

@ -1,6 +1,11 @@
import {Component,OnInit,Inject,Input, ViewChild } from '@angular/core';
import {FormBuilder,FormGroup,Validators,FormArray, FormControl,} from '@angular/forms';
import { NotifierService } from 'angular-notifier';
import {
MatDialog,
MatDialogRef,
MAT_DIALOG_DATA
} from '@angular/material';
/** Service */
import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
import { ActivatedRoute, Router } from "@angular/router";
@ -13,8 +18,11 @@ import { ActivatedRoute, Router } from "@angular/router";
export class AssessedIncomeComponent implements OnInit {
public _assessedIncomeFormFrom: FormGroup;
private notifier: NotifierService;
@Input() pdid: number;
@Input() form_id: number;
pageTitle: string ="Assessed Income Details";
// @Input() pdid: number;
// @Input() form_id: number;
pdid: number;
form_id: number;
salesCaluatedItemColumns: string[] = ['Item', 'Qty/UOM','Rate/Unit','Frequency','Annual Sale Value'];
public salesCaluatedItem:any= [];
salesItemMonthWiseColumns: string[] = ['Item', 'Value','Frequency','Annual Expenses Value'];
@ -39,9 +47,12 @@ salesMonthWiseExpandedItems: any=[]
constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
private router: Router,
private _pd: PdTrigerService) {
}
private _pd: PdTrigerService,
@Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
this.pdid = this.pd_all_details.pdmaster_details.pd_id;
this.notifier = notifier;
this.form_id = 16;
}
ngOnInit() {

165
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.html
View File

@ -1,9 +1,26 @@
<!--<pre> {{ m_group | json}}</pre>-->
<form *ngIf="apiLoadFinish && loadDetails" [formGroup]="_assetsQuesFrom" (submit)="onSubmit()" novalidate>
<h2 mat-dialog-title class="paragraph_change">
<div fxFlex="70" align="left">
{{pageTitle}}
</div>
<div fxFlex="30" align="end">
<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>
<mat-dialog-content>
<mat-tab-group>
<mat-tab label="Questions">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="100">
<mat-card style="min-height: 550px;">
<mat-card-content>
<p>Assets Details</p>
<form *ngIf="apiLoadFinish && loadDetails" [formGroup]="_assetsQuesFrom" (submit)="onSubmit()" novalidate>
<div fxLayout="row" fxLayoutAlign="start none">
<div formArrayName="assets_details" fxFill>
<div *ngFor="let sup of _assetsQuesFrom.controls.assets_details['controls']; let i=index">
@ -272,24 +289,146 @@
</div>
</div>
</div>
<div fxLayout="row">
<div fxFlex="60" class="pb-0 text-sm-left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="assets_form_remark"></textarea>
</mat-form-field>
</div>
</div>
<div class="row" style="text-align:right;">
<button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Asset Details" matTooltipPosition="above"
class="mr-1 mb-1 hover-icon" (click)="addSupplierDetails($event); false"><mat-icon>add</mat-icon></button>
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" (click)="onReset(); false"><mat-icon>settings_backup_restore</mat-icon></button>
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
</div>
</form>
</mat-card-content>
</mat-card>
</div>
</div>
</ng-template>
</mat-tab>
<mat-tab label="Docs">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions>
<div fxFlex="60" class="pb-0 text-sm-left" align="left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="assets_form_remark"></textarea>
</mat-form-field>
</div>
<div fxFlex="40" align="end">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
</div>
</mat-dialog-actions>
</form>

83
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.scss
View File

@ -0,0 +1,83 @@
.paragraph_change {
color: #e00201 !important;
}
.mat-card-content {
background-color: white;
}
.mat-card-actions {
background-color: white;
}
mat-form-field {
margin: 0 2%;
}
$base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
$product-bg-color-hover: rgba(103, 58, 183, 0.7);
.p-list-main {
background: white;
margin: auto;
position: relative;
overflow: hidden !important;
border-radius: 10px 10px 10px 10px;
box-shadow: $base-card-box-shadow;
transform: scale(0.95);
transition: box-shadow 0.5s, transform 0.5s;
&:hover {
transform: scale(1);
box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}
.p-list {
position: relative;
.top {
height: 100%;
width: 100%;
// background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
.bottom {
width: 200%;
height: 15%;
transition: transform 0.5s;
h1 {
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.left {
height: 100%;
width: 50%;
background: #f4f4f4;
position: relative;
float: left;
.details {
padding: 5px;
float: left;
// width: calc(70% - 40px);
}
}
.right {
width: 50%;
background: #A6CDDE;
color: white;
float: right;
height: 200%;
overflow: hidden;
.details {
padding: 20px;
float: right;
width: calc(70% - 40px);
}
}
}
}
}

15
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.ts
View File

@ -28,8 +28,9 @@ import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
styleUrls: ['./assets-info.component.scss']
})
export class AssetsInfoComponent implements OnInit {
@Input() pdid: number;
pageTitle: string ="Assets Details";
//@Input() pdid: number;
pdid:string;
public _assetsQuesFrom: FormGroup;
public submitted = false;
@ -163,9 +164,13 @@ public m_investmentType = [];
constructor(
notifier: NotifierService,
private _formBuilder: FormBuilder,
private pdTrigerService: PdTrigerService) {
this.notifier = notifier;
}
private pdTrigerService: PdTrigerService,
@Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
this.pdid = this.pd_all_details.pdmaster_details.pd_id;
this.notifier = notifier;
}
ngOnInit() {

165
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.html
View File

@ -67,10 +67,20 @@
<!--</form>-->
<!--</mat-card>-->
<!--=======-->
<mat-card style="min-height: 550px;">
<form [formGroup]="bankingForm" class="bankForm">
<h2 mat-dialog-title class="paragraph_change">
<div fxFlex="70" align="left">{{pageTitle}}</div>
<div fxFlex="30" align="end">
<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>
<mat-dialog-content>
<mat-tab-group>
<mat-tab label="Questions">
<mat-card>
<mat-card-content>
<p>Banking Information</p>
<form [formGroup]="bankingForm" class="bankForm">
<div formArrayName="itemRows" autocomplete="off">
<mat-accordion
*ngFor="let itemrow of bankingForm.controls.itemRows['controls']; let i=index"
@ -175,24 +185,139 @@
</button></div>
</mat-accordion>
</div>
<div fxLayout="row" class="pt-1">
<div fxFlex="60" class="pb-0 text-sm-left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="banking_form_remark" required></textarea>
</mat-form-field>
</div>
</div>
<div style="text-align: right;" class="pt-1">
<!-- <button class="mr-1 mb-1" color="primary" mat-raised-button mat-icon-button matTooltip="Add More Banking Details" matTooltipPosition="above" (click)="addBankdetails(i)">
<mat-icon >add</mat-icon>
</button> -->
<button class="mr-1 mb-1 hover-icon" type="submit" mat-raised-button mat-icon-button type="submit" matTooltip="Submit" matTooltipPosition="above" (click)="bankSubmit()"><mat-icon>save</mat-icon>
</button>
</div>
</form>
<notifier-container></notifier-container>
</mat-card-content>
</mat-card>
</mat-tab>
<mat-tab label="Docs">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions>
<div fxFlex="60" class="pb-0 text-sm-left" align="left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="banking_form_remark" required></textarea>
</mat-form-field>
</div>
<div fxFlex="40" align="end">
<button class="mr-1 mb-1 hover-icon" type="submit" mat-raised-button mat-icon-button type="submit" matTooltip="Submit" matTooltipPosition="above" (click)="bankSubmit()"><mat-icon>save</mat-icon>
</button>
</div>
</mat-dialog-actions>
</form>
<notifier-container></notifier-container>

85
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.scss
View File

@ -8,3 +8,88 @@
background: #62B013;
color: white;
}
.paragraph_change {
color: #e00201 !important;
}
.mat-card-content {
background-color: white;
}
.mat-card-actions {
background-color: white;
}
mat-form-field {
margin: 0 2%;
}
$base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
$product-bg-color-hover: rgba(103, 58, 183, 0.7);
.p-list-main {
background: white;
margin: auto;
position: relative;
overflow: hidden !important;
border-radius: 10px 10px 10px 10px;
box-shadow: $base-card-box-shadow;
transform: scale(0.95);
transition: box-shadow 0.5s, transform 0.5s;
&:hover {
transform: scale(1);
box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}
.p-list {
position: relative;
.top {
height: 100%;
width: 100%;
// background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
.bottom {
width: 200%;
height: 15%;
transition: transform 0.5s;
h1 {
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.left {
height: 100%;
width: 50%;
background: #f4f4f4;
position: relative;
float: left;
.details {
padding: 5px;
float: left;
// width: calc(70% - 40px);
}
}
.right {
width: 50%;
background: #A6CDDE;
color: white;
float: right;
height: 200%;
overflow: hidden;
.details {
padding: 20px;
float: right;
width: calc(70% - 40px);
}
}
}
}
}

29
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.ts
View File

@ -28,8 +28,8 @@ import {ActivatedRoute, Router} from "@angular/router";
styleUrls: ['./banking-details.component.scss']
})
export class BankingDetailsComponent implements OnInit {
@Input() pdid: number;
@Input() pd_all_details:any;
pdid: number;
pageTitle: string ="Banking Information";
public bankingForm: FormGroup;
step: number;
private notifier: NotifierService;
@ -40,22 +40,29 @@ export class BankingDetailsComponent implements OnInit {
constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
private router: Router,
private _pd: PdTrigerService) {
this.notifier = notifier;
private _pd: PdTrigerService,
@Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
this.pdid = this.pd_all_details.pdmaster_details.pd_id;
this.pd_cus_segment = this.pd_all_details.pdmaster_details.customer_segment_abbr.toUpperCase();
this.pd_cus_segment = this.pd_cus_segment.substring(0,3);
this.applicants = this.pd_all_details.pdapplicants_detials;
this.notifier = notifier;
}
}
ngOnInit() {
this.step = 0;
this.initBankingForm();
this.getM_AccountType();
this.getM_BTLenderList();
this.pd_cus_segment = this.pd_all_details.pdmaster_details.customer_segment_abbr.toUpperCase();
// console.log("(0,3): " + this.pd_cus_segment.substring(0,3));
// console.log(this.pd_all_details.pdmaster_details);
// console.log(this.pd_cus_segment);
this.pd_cus_segment = this.pd_cus_segment.substring(0,3);
this.applicants = this.pd_all_details.pdapplicants_detials;
// this.pd_cus_segment = this.pd_all_details.pdmaster_details.customer_segment_abbr.toUpperCase();
// // console.log("(0,3): " + this.pd_cus_segment.substring(0,3));
// // console.log(this.pd_all_details.pdmaster_details);
// // console.log(this.pd_cus_segment);
// this.pd_cus_segment = this.pd_cus_segment.substring(0,3);
// this.applicants = this.pd_all_details.pdapplicants_detials;
let params: any = {};
params.pd_id = this.pdid;
params.pd_form_id = '7';

873
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-info/business-info.component.html
View File

@ -1,378 +1,519 @@
<mat-card style="padding: 12px;">
<p>Business Details</p>
<form [formGroup]="businessForm" class="address">
<mat-form-field>
<input matInput placeholder="Name of Business / Profession" formControlName="profession_name" required>
</mat-form-field>
<div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
<mat-form-field>
<input matInput type="number" placeholder="Business Experience in Year" formControlName="business_years" required min='0'>
</mat-form-field>
<mat-form-field>
<input matInput type="number" placeholder="Business Experience in Month" formControlName="business_month" required min='0' max='12'>
</mat-form-field>
<h2 mat-dialog-title class="paragraph_change">
<div fxFlex="70" align="left">{{pageTitle}}</div>
<div fxFlex="30" align="end">
<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>
<mat-form-field>
<mat-select placeholder="Industry"
formControlName="industry" required>
<mat-option value="{{list.industry_classification_id}}" *ngFor="let list of industryData">{{list.name}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Type of Activity"
formControlName="type_of_activity" requried>
<mat-option value="{{type.type_of_activity_id}}" *ngFor="let type of activityData">{{type.name}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="businessForm.controls['type_of_activity'].value == 5">
<input matInput placeholder="Specify Other Activity"
formControlName="other_activity_type">
</mat-form-field>
<mat-form-field>
<!-- <input matInput placeholder="Seasonality" formControlName="seasonality" required> -->
<mat-select placeholder="Is the business Seasonal?"
formControlName="seasonality" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-dialog-content>
<mat-form-field *ngIf="businessForm.controls['seasonality'].value == 'yes'">
<input matInput placeholder="How many months in a year does the business run?" formControlName="month_of_business_run">
</mat-form-field>
<mat-tab-group>
<mat-form-field *ngIf="businessForm.controls['seasonality'].value == 'yes'">
<mat-select multiple placeholder="What is the peak period of business ? "
formControlName="peak_period_of_business" required>
<mat-option value="1">January</mat-option>
<mat-option value="2">February</mat-option>
<mat-option value="3">March</mat-option>
<mat-option value="4">April</mat-option>
<mat-option value="5">May</mat-option>
<mat-option value="6">June</mat-option>
<mat-option value="7">July</mat-option>
<mat-option value="8">August</mat-option>
<mat-option value="9">September</mat-option>
<mat-option value="10">October</mat-option>
<mat-option value="11">November</mat-option>
<mat-option value="12">December</mat-option>
<mat-tab label="Questions">
<ng-template matTabContent>
</mat-select>
</mat-form-field>
<div fxLayout="row wrap">
<div fxFlex="100">
<mat-card style="padding: 12px;">
<!--<mat-card>
<mat-card-header>
<p>Designation
</p>
</mat-card-header>
<div formArrayName="designation">
<div *ngFor="let members of businessForm.controls.designation['controls']; let i=index"
[formGroupName]="i">
<mat-card-content class="card">
<mat-form-field>
<input matInput placeholder="Name" formControlName="sec_name" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Designation" formControlName="sec_designation" required>
</mat-form-field>
<button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="addDesignation()"
matTooltip="Add More Designation" matTooltipPosition="above" color="primary" *ngIf="i==0">
<mat-icon>add</mat-icon>
</button>
<button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="deleteDesignation(i)"
matTooltip="Delete" matTooltipPosition="above" *ngIf="i>0">
<mat-icon>delete</mat-icon>
</button>
</mat-card-content>
</div>
</div>
</mat-card>-->
<mat-form-field>
<mat-select placeholder="Who started the business / professions"
formControlName="who_started" required>
<mat-option value="applicant">Started by Applicants</mat-option>
<mat-option value="family_business">Family Business</mat-option>
<mat-option value="others">Others</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="businessForm.controls['who_started'].value == 'others'">
<input matInput placeholder="Specify Other Bussiness Started"
formControlName="other_bussiness_who_started">
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Main person running the businesss"
formControlName="main_person" required>
<!-- <mat-option value="applicants">One of the applicants</mat-option> -->
<mat-option value="{{owner.pd_co_applicant_id}}" *ngFor="let owner of applicants">{{owner.applicant_name}}</mat-option>
<mat-option value="Relative">Relative of an applicant</mat-option>
<mat-option value="Others">Others</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="businessForm.controls['main_person'].value == 'Others'">
<input matInput placeholder="Specify other person"
formControlName="other_main_person">
</mat-form-field>
<mat-form-field>
<mat-select multiple placeholder="Other family members invovled"
formControlName="family_members_involved" (selectionChange)="relationChanged($event)" required>
<mat-option value="{{member.relationship_id}}" *ngFor="let member of relationData">{{member.name}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<!-- <input matInput placeholder="Any other business before"
formControlName="before_business" required> -->
<mat-select placeholder="Were the loan applicants involved in any other business before starting this business?"
formControlName="before_business" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="businessForm.controls['before_business'].value == 'yes'">
<input matInput placeholder="Description for before starting this business"
formControlName="before_business_description">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Any delays"
formControlName="any_delays" required>
</mat-form-field>
<mat-card>
<mat-card-header>
<p>Partners / Directors / Shareholders
</p>
</mat-card-header>
<div formArrayName="partners">
<div *ngFor="let members of businessForm.controls.partners['controls']; let i=index"
[formGroupName]="i">
<mat-card-content class="card">
<mat-form-field>
<input matInput placeholder="Name"
formControlName="partner_name" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Share of Profit / Shareholding (%)" (keypress)="keyPress($event)"
formControlName="shareholding" required>
</mat-form-field>
<div>
<label>How many years and month in this business</label>
<br>
<div fxLayout="col" fxLayoutGap="2px" fxLayoutAlign="start none">
<mat-form-field>
<input matInput type="number" placeholder="Year" formControlName="current_business_experiance_year" required min='0'>
</mat-form-field>
<mat-form-field>
<input matInput type="number" placeholder="Month" formControlName="current_business_experiance_month" required min='0' max='12'>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Name of Business / Profession" formControlName="profession_name" required>
</mat-form-field>
<div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
<mat-form-field>
<input matInput type="number" placeholder="Business Experience in Year" formControlName="business_years" required min='0'>
</mat-form-field>
<mat-form-field>
<input matInput type="number" placeholder="Business Experience in Month" formControlName="business_month" required min='0' max='12'>
</mat-form-field>
</div>
<mat-form-field>
<mat-select placeholder="Industry"
formControlName="industry" required>
<mat-option value="{{list.industry_classification_id}}" *ngFor="let list of industryData">{{list.name}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Type of Activity"
formControlName="type_of_activity" requried>
<mat-option value="{{type.type_of_activity_id}}" *ngFor="let type of activityData">{{type.name}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="businessForm.controls['type_of_activity'].value == 5">
<input matInput placeholder="Specify Other Activity"
formControlName="other_activity_type">
</mat-form-field>
<mat-form-field>
<!-- <input matInput placeholder="Seasonality" formControlName="seasonality" required> -->
<mat-select placeholder="Is the business Seasonal?"
formControlName="seasonality" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="businessForm.controls['seasonality'].value == 'yes'">
<input matInput placeholder="How many months in a year does the business run?" formControlName="month_of_business_run">
</mat-form-field>
<mat-form-field *ngIf="businessForm.controls['seasonality'].value == 'yes'">
<mat-select multiple placeholder="What is the peak period of business ? "
formControlName="peak_period_of_business" required>
<mat-option value="1">January</mat-option>
<mat-option value="2">February</mat-option>
<mat-option value="3">March</mat-option>
<mat-option value="4">April</mat-option>
<mat-option value="5">May</mat-option>
<mat-option value="6">June</mat-option>
<mat-option value="7">July</mat-option>
<mat-option value="8">August</mat-option>
<mat-option value="9">September</mat-option>
<mat-option value="10">October</mat-option>
<mat-option value="11">November</mat-option>
<mat-option value="12">December</mat-option>
</mat-select>
</mat-form-field>
<!--<mat-card>
<mat-card-header>
<p>Designation
</p>
</mat-card-header>
<div formArrayName="designation">
<div *ngFor="let members of businessForm.controls.designation['controls']; let i=index"
[formGroupName]="i">
<mat-card-content class="card">
<mat-form-field>
<input matInput placeholder="Name" formControlName="sec_name" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Designation" formControlName="sec_designation" required>
</mat-form-field>
<button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="addDesignation()"
matTooltip="Add More Designation" matTooltipPosition="above" color="primary" *ngIf="i==0">
<mat-icon>add</mat-icon>
</button>
<button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="deleteDesignation(i)"
matTooltip="Delete" matTooltipPosition="above" *ngIf="i>0">
<mat-icon>delete</mat-icon>
</button>
</mat-card-content>
</div>
</div>
</mat-card>-->
<mat-form-field>
<mat-select placeholder="Who started the business / professions"
formControlName="who_started" required>
<mat-option value="applicant">Started by Applicants</mat-option>
<mat-option value="family_business">Family Business</mat-option>
<mat-option value="others">Others</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="businessForm.controls['who_started'].value == 'others'">
<input matInput placeholder="Specify Other Bussiness Started"
formControlName="other_bussiness_who_started">
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Main person running the businesss"
formControlName="main_person" required>
<!-- <mat-option value="applicants">One of the applicants</mat-option> -->
<mat-option value="{{owner.pd_co_applicant_id}}" *ngFor="let owner of applicants">{{owner.applicant_name}}</mat-option>
<mat-option value="Relative">Relative of an applicant</mat-option>
<mat-option value="Others">Others</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="businessForm.controls['main_person'].value == 'Others'">
<input matInput placeholder="Specify other person"
formControlName="other_main_person">
</mat-form-field>
<mat-form-field>
<mat-select multiple placeholder="Other family members invovled"
formControlName="family_members_involved" (selectionChange)="relationChanged($event)" required>
<mat-option value="{{member.relationship_id}}" *ngFor="let member of relationData">{{member.name}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<!-- <input matInput placeholder="Any other business before"
formControlName="before_business" required> -->
<mat-select placeholder="Were the loan applicants involved in any other business before starting this business?"
formControlName="before_business" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="businessForm.controls['before_business'].value == 'yes'">
<input matInput placeholder="Description for before starting this business"
formControlName="before_business_description">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Any delays"
formControlName="any_delays" required>
</mat-form-field>
<mat-card>
<mat-card-header>
<p>Partners / Directors / Shareholders
</p>
</mat-card-header>
<div formArrayName="partners">
<div *ngFor="let members of businessForm.controls.partners['controls']; let i=index"
[formGroupName]="i">
<mat-card-content class="card">
<mat-form-field>
<input matInput placeholder="Name"
formControlName="partner_name" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Share of Profit / Shareholding (%)" (keypress)="keyPress($event)"
formControlName="shareholding" required>
</mat-form-field>
<div>
<label>How many years and month in this business</label>
<br>
<div fxLayout="col" fxLayoutGap="2px" fxLayoutAlign="start none">
<mat-form-field>
<input matInput type="number" placeholder="Year" formControlName="current_business_experiance_year" required min='0'>
</mat-form-field>
<mat-form-field>
<input matInput type="number" placeholder="Month" formControlName="current_business_experiance_month" required min='0' max='12'>
</mat-form-field>
</div>
</div>
<mat-form-field>
<input matInput placeholder="Total Business Experience"
formControlName="total_business_experiance" required>
</mat-form-field>
<button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="addPartnerDetails()"
matTooltip="Add More Partners / Directors / Shareholders" matTooltipPosition="above" color="primary" *ngIf="i==0">
<mat-icon>add</mat-icon>
</button>
<button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="deletePartnerDetails(i)"
matTooltip="Delete" matTooltipPosition="above" *ngIf="i>0">
<mat-icon>delete</mat-icon>
</button>
</mat-card-content>
</div>
</div>
</mat-card>
<mat-card>
<mat-card-header>
<p>Employees As per applicant
</p>
</mat-card-header>
<mat-card-content class="matcard">
<mat-form-field>
<input matInput placeholder="Total"
formControlName="employees_total" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Permanent"
formControlName="employees_permanent" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Temporary"
formControlName="employees_temporary" required>
</mat-form-field>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-header>
<p>No of Employees sighted by PD officer during his visit
</p>
</mat-card-header>
<mat-card-content class="matcard">
<mat-form-field>
<input matInput placeholder="Total"
formControlName="officer_total" required>
</mat-form-field>
<!-- <mat-form-field>
<input matInput placeholder="Permanent"
formControlName="officer_permanent" required>
</mat-form-field> -->
<!-- <mat-form-field>
<input matInput placeholder="Temporary"
formControlName="officer_temporary" required>
</mat-form-field> -->
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-header>
<p>Investment in business by Applicants
</p>
</mat-card-header>
<mat-card-content class="matcard">
<mat-form-field>
<input matInput placeholder="Amount Invested by Applicant"
formControlName="invested_amount" required>
</mat-form-field>
<!-- <mat-form-field>
<input matInput placeholder="Monthly Working Capital Needed"
formControlName="working_capital" required>
</mat-form-field> -->
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-header>
<p>Location
</p>
</mat-card-header>
<mat-card-content class="matcards">
<mat-form-field>
<mat-select
placeholder="Is the location of the business / profession suited to the nature of business / service provided? "
formControlName="is_service_provided" required>
<mat-option value="well_suited.">Well Suited.</mat-option>
<mat-option value="fairly_suited">Fairly Suited</mat-option>
<mat-option value="not_suited">Not Suited</mat-option>
</mat-select>
</mat-form-field>
</mat-card-content>
</mat-card>
<!-- <mat-card>
<mat-card-header>
<p>Business Setup
</p>
</mat-card-header>
<mat-card-content class="matcards">
<mat-form-field>
<mat-select placeholder="What is the ownership of the setup ?"
formControlName="ownership_setup" required>
<mat-option value="self_owned">self owned</mat-option>
<mat-option value="rented">Rented</mat-option>
<mat-option value="family_owned">Family Owned</mat-option>
<mat-option value="others">others</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="businessForm.controls['ownership_setup'].value == 'others'">
<input matInput placeholder="Please Specify"
formControlName="ownership_others">
</mat-form-field>
<mat-form-field *ngIf="businessForm.controls['ownership_setup'].value == 'rented'">
<input matInput placeholder="Provide Rent Paid?"
formControlName="rent_paid" (keypress)="keyPress($event)">
</mat-form-field>
</mat-card-content>
</mat-card> -->
<mat-card>
<mat-card-header>
<p>Documents Sighted
</p>
</mat-card-header>
<mat-card-content class="matcard">
<mat-form-field>
<mat-select placeholder="Shop and Eat Act Cert"
formControlName="shop_eat_act_cert" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="GST Regn Cert"
formControlName="gst_Regn_cert" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Export / Import cert"
formControlName="export_import_cert" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Factory Cert"
formControlName="factory_cert" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Cert of Practice"
formControlName="practice_cert" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="PF Regn"
formControlName="pf_regn" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="ESIC Regn"
formControlName="esic_regn" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Do you want to add other documents?"
formControlName="other_documents" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
<mat-option value="not applicable">Not Applicable</mat-option>
</mat-select>
</mat-form-field>
<div formArrayName="documents" *ngIf="businessForm.controls['other_documents'].value == 'yes'">
<div *ngFor="let members of businessForm.controls.documents['controls']; let i=index"
[formGroupName]="i">
<mat-form-field style="width:86%">
<input matInput placeholder="Specify Document Details"
formControlName="document">
</mat-form-field>
<button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="addDocuments()"
matTooltip="Add More Document Details" matTooltipPosition="above" color="primary" *ngIf="i==0">
<mat-icon>add</mat-icon>
</button>
<button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="deleteDocuments(i)"
matTooltip="Delete" matTooltipPosition="above" *ngIf="i>0">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</mat-card-content>
</mat-card>
</mat-card>
</div>
</div>
<mat-form-field>
<input matInput placeholder="Total Business Experience"
formControlName="total_business_experiance" required>
</ng-template>
</mat-tab>
<mat-tab label="Docs">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions>
<div fxFlex="60" class="pb-0 text-sm-left" align="left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="business_remarks" required></textarea>
</mat-form-field>
<button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="addPartnerDetails()"
matTooltip="Add More Partners / Directors / Shareholders" matTooltipPosition="above" color="primary" *ngIf="i==0">
<mat-icon>add</mat-icon>
</button>
<button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="deletePartnerDetails(i)"
matTooltip="Delete" matTooltipPosition="above" *ngIf="i>0">
<mat-icon>delete</mat-icon>
</button>
</mat-card-content>
</div>
</div>
</mat-card>
<mat-card>
<mat-card-header>
<p>Employees As per applicant
</p>
</mat-card-header>
<mat-card-content class="matcard">
<mat-form-field>
<input matInput placeholder="Total"
formControlName="employees_total" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Permanent"
formControlName="employees_permanent" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Temporary"
formControlName="employees_temporary" required>
</mat-form-field>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-header>
<p>No of Employees sighted by PD officer during his visit
</p>
</mat-card-header>
<mat-card-content class="matcard">
<mat-form-field>
<input matInput placeholder="Total"
formControlName="officer_total" required>
</mat-form-field>
<!-- <mat-form-field>
<input matInput placeholder="Permanent"
formControlName="officer_permanent" required>
</mat-form-field> -->
<!-- <mat-form-field>
<input matInput placeholder="Temporary"
formControlName="officer_temporary" required>
</mat-form-field> -->
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-header>
<p>Investment in business by Applicants
</p>
</mat-card-header>
<mat-card-content class="matcard">
<mat-form-field>
<input matInput placeholder="Amount Invested by Applicant"
formControlName="invested_amount" required>
</mat-form-field>
<!-- <mat-form-field>
<input matInput placeholder="Monthly Working Capital Needed"
formControlName="working_capital" required>
</mat-form-field> -->
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-header>
<p>Location
</p>
</mat-card-header>
<mat-card-content class="matcards">
<mat-form-field>
<mat-select
placeholder="Is the location of the business / profession suited to the nature of business / service provided? "
formControlName="is_service_provided" required>
<mat-option value="well_suited.">Well Suited.</mat-option>
<mat-option value="fairly_suited">Fairly Suited</mat-option>
<mat-option value="not_suited">Not Suited</mat-option>
</mat-select>
</mat-form-field>
</mat-card-content>
</mat-card>
<!-- <mat-card>
<mat-card-header>
<p>Business Setup
</p>
</mat-card-header>
<mat-card-content class="matcards">
<mat-form-field>
<mat-select placeholder="What is the ownership of the setup ?"
formControlName="ownership_setup" required>
<mat-option value="self_owned">self owned</mat-option>
<mat-option value="rented">Rented</mat-option>
<mat-option value="family_owned">Family Owned</mat-option>
<mat-option value="others">others</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="businessForm.controls['ownership_setup'].value == 'others'">
<input matInput placeholder="Please Specify"
formControlName="ownership_others">
</mat-form-field>
<mat-form-field *ngIf="businessForm.controls['ownership_setup'].value == 'rented'">
<input matInput placeholder="Provide Rent Paid?"
formControlName="rent_paid" (keypress)="keyPress($event)">
</mat-form-field>
</mat-card-content>
</mat-card> -->
<mat-card>
<mat-card-header>
<p>Documents Sighted
</p>
</mat-card-header>
<mat-card-content class="matcard">
<mat-form-field>
<mat-select placeholder="Shop and Eat Act Cert"
formControlName="shop_eat_act_cert" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="GST Regn Cert"
formControlName="gst_Regn_cert" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Export / Import cert"
formControlName="export_import_cert" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Factory Cert"
formControlName="factory_cert" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Cert of Practice"
formControlName="practice_cert" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="PF Regn"
formControlName="pf_regn" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="ESIC Regn"
formControlName="esic_regn" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Do you want to add other documents?"
formControlName="other_documents" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
<mat-option value="not applicable">Not Applicable</mat-option>
</mat-select>
</mat-form-field>
<div formArrayName="documents" *ngIf="businessForm.controls['other_documents'].value == 'yes'">
<div *ngFor="let members of businessForm.controls.documents['controls']; let i=index"
[formGroupName]="i">
<mat-form-field style="width:86%">
<input matInput placeholder="Specify Document Details"
formControlName="document">
</mat-form-field>
<button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="addDocuments()"
matTooltip="Add More Document Details" matTooltipPosition="above" color="primary" *ngIf="i==0">
<mat-icon>add</mat-icon>
</button>
<button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="deleteDocuments(i)"
matTooltip="Delete" matTooltipPosition="above" *ngIf="i>0">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</mat-card-content>
</mat-card>
<div fxLayout="row">
<div fxFlex="60" class="pb-0 text-sm-left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="business_remarks" required></textarea>
</mat-form-field>
</div>
</div>
<div style="text-align: right;">
<button type="submit" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button matTooltip="Submit" matTooltipPosition="above" (click)="submitDetails()"><mat-icon>save</mat-icon>
</button>
</div>
</div>
<div fxFlex="40" align="end">
<button type="submit" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button matTooltip="Submit" matTooltipPosition="above" (click)="submitDetails()"><mat-icon>save</mat-icon>
</button>
</div>
</mat-dialog-actions>
</form>
</mat-card>

87
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-info/business-info.component.scss
View File

@ -28,3 +28,90 @@
background: #62B013;
color: white;
}
.paragraph_change {
color: #e00201 !important;
}
.mat-card-content {
background-color: white;
}
.mat-card-actions {
background-color: white;
}
mat-form-field {
margin: 0 2%;
}
$base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
$product-bg-color-hover: rgba(103, 58, 183, 0.7);
.p-list-main {
background: white;
margin: auto;
position: relative;
overflow: hidden !important;
border-radius: 10px 10px 10px 10px;
box-shadow: $base-card-box-shadow;
transform: scale(0.95);
transition: box-shadow 0.5s, transform 0.5s;
&:hover {
transform: scale(1);
box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}
.p-list {
position: relative;
.top {
height: 100%;
width: 100%;
// background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
.bottom {
width: 200%;
height: 15%;
transition: transform 0.5s;
h1 {
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.left {
height: 100%;
width: 50%;
background: #f4f4f4;
position: relative;
float: left;
.details {
padding: 5px;
float: left;
// width: calc(70% - 40px);
}
}
.right {
width: 50%;
background: #A6CDDE;
color: white;
float: right;
height: 200%;
overflow: hidden;
.details {
padding: 20px;
float: right;
width: calc(70% - 40px);
}
}
}
}
}

25
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-info/business-info.component.ts
View File

@ -29,9 +29,9 @@ import {ActivatedRoute, Router} from "@angular/router";
styleUrls: ['./business-info.component.scss']
})
export class BusinessInfoComponent implements OnInit {
@Input() pdid: number;
@Input() form_id: number;
@Input() applicant_details: any;
pdid: number;
form_id: number;
pageTitle: string ="Business Details";
relationData: any = [];
industryData: any = [];
activityData: any = [];
@ -40,13 +40,20 @@ export class BusinessInfoComponent implements OnInit {
public businessForm: FormGroup;
private notifier: NotifierService;
constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
private router: Router,
private _pd: PdTrigerService) {
this.notifier = notifier;
}
constructor(notifier: NotifierService,
private fb: FormBuilder,
private route: ActivatedRoute,
private router: Router,
private _pd: PdTrigerService,
@Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
this.pdid = this.pd_all_details.pdmaster_details.pd_id;
this.applicants = this.pd_all_details.pdapplicants_detials;
this.form_id = 13;
this.notifier = notifier;
}
ngOnInit() {
this.applicants = this.applicant_details.pdapplicants_detials;
this.getRelation();
this.getIndustry();
this.getActivity();

257
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.html
View File

@ -1,4 +1,245 @@
<!--<pre> {{ m_group | json}}</pre>-->
<form *ngIf="apiLoadFinish" [formGroup]="_clientQuesFrom" (submit)="onSubmit()" novalidate>
<h2 mat-dialog-title class="paragraph_change">
<div fxFlex="70" align="left">{{pageTitle}}</div>
<div fxFlex="30" align="end">
<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>
<mat-dialog-content>
<mat-tab-group>
<mat-tab label="Questions">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="100">
<mat-card>
<!-- <mat-card-title></mat-card-title> -->
<mat-card-content formArrayName="client_details" fxFill>
<div *ngFor="let sup of _clientQuesFrom.controls.client_details['controls']; let i=index" [formGroupName]="i">
<!-- <div [formGroupName]="i"> -->
<div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none">
<div>
<mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Client Name" formControlName="client_name" required>
<!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
</mat-form-field>
</div>
<div>
<mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Contact Person Name" formControlName="contact_person" required>
<!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
</mat-form-field>
</div>
<div>
<mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Contact Mobile Number" formControlName="mobile_number" (keypress)="keyPress($event)" minlength=10 maxlength=10 required>
<!-- <mat-error *ngIf="sup.controls['mobile_number'].hasError('requried') && sup.controls['mobile_number'].touched" class="mat-text-warn">Mobile Number Requried</mat-error> -->
<mat-error *ngIf="sup.controls['mobile_number'].hasError('minlength') && sup.controls['mobile_number'].touched" class="mat-text-warn">Valid Mobile Number Requried</mat-error>
<mat-error *ngIf="sup.controls['mobile_number'].hasError('maxlength') && sup.controls['mobile_number'].touched" class="mat-text-warn">Valid Mobile Number Requried</mat-error>
</mat-form-field>
</div>
</div>
<div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none">
<div>
<mat-form-field>
<mat-select (selectionChange)="selectedPM($event)" placeholder="Payment Mode" formControlName="payment_mode" required>
<mat-option *ngFor="let pm of m_paymentModeType" [value]="pm.id">{{ pm.name }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="sup.get('payment_mode').value == 1 || sup.get('payment_mode').value == 3">
<mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="% of immediate / Advance Payment Purchase to Total Purchase?" formControlName="per_of_immediate_advance_payment" type="number" min="0">
<!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
</mat-form-field>
</div>
<div *ngIf="sup.get('payment_mode').value == 2 || sup.get('payment_mode').value == 3">
<mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Credit Period" formControlName="credit_period">
<!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
</mat-form-field>
</div>
</div>
<div fxLayout="row" fxLayoutGap="12px" fxLayoutAlign="start none">
<div>
<mat-form-field>
<mat-select (selectionChange)="selectedFreqPurchase($event)" placeholder="Frequency of Purchase" formControlName="frequency_of_purchase" required>
<mat-option *ngFor="let feq of m_freqOfPurchase" [value]="feq.frequency_id">{{ feq.name }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="sup.get('frequency_of_purchase').value == 8">
<mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Others Details" formControlName="freq_purchase_others_text_value">
<!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
</mat-form-field>
</div>
<div fxFlex="20">
<span *ngIf="_clientQuesFrom.controls.client_details.controls.length > 1" (click)="removeLanguage(i)">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
</span>
</div>
</div>
<!-- </div> -->
</div>
</mat-card-content>
<mat-card-actions align="end">
<!-- <span *ngIf="_supplierQuesFrom.controls.supplier_details.controls.length > 1" (click)="removeLanguage(i)">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" color="primary" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
</span> -->
</mat-card-actions>
</mat-card>
</div>
</div>
</ng-template>
</mat-tab>
<mat-tab label="Docs">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions>
<div fxFlex="60" class="pb-0 text-sm-left" align="left">
<!-- <mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="personal_info_form_remark" required></textarea>
</mat-form-field> -->
</div>
<div fxFlex="40" align="end">
<button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Client Details" matTooltipPosition="above"
class="mr-1 mb-1 hover-icon" (click)="addSupplierDetails($event); false"><mat-icon>add</mat-icon></button>
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" type="reset"><mat-icon>settings_backup_restore</mat-icon></button>
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
</div>
</mat-dialog-actions>
</form>
<notifier-container></notifier-container>
<!--<pre> {{ m_group | json}}</pre>--
<mat-card style="padding: 12px;">
<p>Client Details</p>
<form *ngIf="apiLoadFinish" [formGroup]="_clientQuesFrom" (submit)="onSubmit()" novalidate>
@ -10,19 +251,19 @@
<div>
<mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Client Name" formControlName="client_name" required>
<!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
<!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>---
</mat-form-field>
</div>
<div>
<mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Contact Person Name" formControlName="contact_person" required>
<!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
<!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>---
</mat-form-field>
</div>
<div>
<mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Contact Mobile Number" formControlName="mobile_number" (keypress)="keyPress($event)" minlength=10 maxlength=10 required>
<!-- <mat-error *ngIf="sup.controls['mobile_number'].hasError('requried') && sup.controls['mobile_number'].touched" class="mat-text-warn">Mobile Number Requried</mat-error> -->
<!-- <mat-error *ngIf="sup.controls['mobile_number'].hasError('requried') && sup.controls['mobile_number'].touched" class="mat-text-warn">Mobile Number Requried</mat-error> --
<mat-error *ngIf="sup.controls['mobile_number'].hasError('minlength') && sup.controls['mobile_number'].touched" class="mat-text-warn">Valid Mobile Number Requried</mat-error>
<mat-error *ngIf="sup.controls['mobile_number'].hasError('maxlength') && sup.controls['mobile_number'].touched" class="mat-text-warn">Valid Mobile Number Requried</mat-error>
</mat-form-field>
@ -39,13 +280,13 @@
<div *ngIf="sup.get('payment_mode').value == 1 || sup.get('payment_mode').value == 3">
<mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="% of immediate / Advance Payment Purchase to Total Purchase?" formControlName="per_of_immediate_advance_payment" type="number" min="0">
<!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
<!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>--
</mat-form-field>
</div>
<div *ngIf="sup.get('payment_mode').value == 2 || sup.get('payment_mode').value == 3">
<mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Credit Period" formControlName="credit_period">
<!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
<!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>--
</mat-form-field>
</div>
</div>
@ -60,7 +301,7 @@
<div *ngIf="sup.get('frequency_of_purchase').value == 8">
<mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Others Details" formControlName="freq_purchase_others_text_value">
<!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
<!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>--
</mat-form-field>
</div>
@ -82,4 +323,4 @@
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
</div>
</form>
</mat-card>
</mat-card>-->

83
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.scss
View File

@ -0,0 +1,83 @@
.paragraph_change {
color: #e00201 !important;
}
.mat-card-content {
background-color: white;
}
.mat-card-actions {
background-color: white;
}
mat-form-field {
margin: 0 2%;
}
$base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
$product-bg-color-hover: rgba(103, 58, 183, 0.7);
.p-list-main {
background: white;
margin: auto;
position: relative;
overflow: hidden !important;
border-radius: 10px 10px 10px 10px;
box-shadow: $base-card-box-shadow;
transform: scale(0.95);
transition: box-shadow 0.5s, transform 0.5s;
&:hover {
transform: scale(1);
box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}
.p-list {
position: relative;
.top {
height: 100%;
width: 100%;
// background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
.bottom {
width: 200%;
height: 15%;
transition: transform 0.5s;
h1 {
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.left {
height: 100%;
width: 50%;
background: #f4f4f4;
position: relative;
float: left;
.details {
padding: 5px;
float: left;
// width: calc(70% - 40px);
}
}
.right {
width: 50%;
background: #A6CDDE;
color: white;
float: right;
height: 200%;
overflow: hidden;
.details {
padding: 20px;
float: right;
width: calc(70% - 40px);
}
}
}
}
}

19
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.ts
View File

@ -30,7 +30,14 @@ import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
})
export class ClientInfoComponent implements OnInit {
@Input() pdid: number;
pageTitle: string ="Client Details";
//@Input() pdid: number;
pdid : number;
form_id: number;
loadDataStatus: boolean=true;
public _clientQuesFrom: FormGroup;
public submitted = false;
@ -88,10 +95,14 @@ export class ClientInfoComponent implements OnInit {
private notifier: NotifierService;
constructor(
notifier: NotifierService,
notifier: NotifierService,
private _formBuilder: FormBuilder,
private pdTrigerService: PdTrigerService) {
this.notifier = notifier;}
private pdTrigerService: PdTrigerService,
@Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
this.pdid = this.pd_all_details.pdmaster_details.pd_id;
this.form_id = 2;
this.notifier = notifier;
}
ngOnInit() {
this.getM_FreqOfPurchase();

263
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.html
View File

@ -1,29 +1,272 @@
<mat-card style="min-height: 550px;">
<form [formGroup]="currentLoanForm" class="address">
<h2 mat-dialog-title class="paragraph_change">
<div fxFlex="70" align="left">{{pageTitle}}</div>
<div fxFlex="30" align="end">
<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>
<mat-dialog-content>
<mat-tab-group>
<mat-tab label="Questions">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="100">
<mat-card>
<!-- <mat-card-title></mat-card-title> -->
<mat-card-content>
<mat-form-field style="width:60% !important;">
<mat-select (selectionChange)="selectedLoanChanges($event)" placeholder="Do you have any other existing loan"
formControlName="existing_loan" required>
<mat-option value="Yes">Yes</mat-option>
<mat-option value="No">No</mat-option>
</mat-select>
</mat-form-field>
<mat-card *ngIf="currentLoanForm.controls.existing_loan.value == 'Yes'">
<mat-card-header>
<p>Loan Details<p>
</mat-card-header>
<div formArrayName="loan_details">
<div *ngFor="let details of currentLoanForm.get('loan_details').controls; let i=index"
[formGroupName]="i">
<!-- {{frequencyData | json}} -->
<mat-card-content class="matcard">
<mat-form-field>
<input matInput placeholder="Loan Amount" formControlName="loan_amount" (keypress)="keyPress($event)" required>
</mat-form-field>
<mat-form-field>
<mat-select (selectionChange)="selectedfrequency($event.value,i)" placeholder="Frequency"
formControlName="frequency" required>
<mat-option *ngFor="let freq of frequencyData" value="{{freq.frequency_id}}">{{freq.name}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<input matInput [placeholder]="placeholderName[i] != '' ? placeholderName[i] : 'Instalment Amount' " formControlName="emi" (keypress)="keyPress($event)" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Loan Type" formControlName="loan_type" required>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Loan Taken By" formControlName="loan_taken_by" required>
<mat-option value="{{owner.pd_co_applicant_id}}" *ngFor="let owner of applicants">{{owner.applicant_name}}</mat-option>
<mat-option value="Others">Others</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="details.get('loan_taken_by').value == 'Others'">
<input matInput placeholder="Specify Others Loan Taken" formControlName="others_loan_taken">
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Lender" formControlName="lender" required>
<mat-option *ngFor="let btLen of lenderData" [value]="btLen.bt_lender_list_id">{{ btLen.lender_name }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="details.get('lender').value == 3">
<input matInput placeholder="Specify Others Loan Taken" formControlName="others_loan_taken">
</mat-form-field>
<!-- <mat-form-field>
<input matInput placeholder="Lender" formControlName="lender" required>
</mat-form-field> -->
<mat-form-field>
<input matInput placeholder="Original Tenure in Months" formControlName="original_tenure" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Current Balance Tenure in Months" formControlName="current_balance_tenure" required>
</mat-form-field>
<button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button matTooltip="Add More Loan Details" matTooltipPosition="above" color="primary" (click)="addLoanDetails()"
*ngIf="i==0">
<mat-icon>add</mat-icon>
</button>
<button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button matTooltip="Delete" matTooltipPosition="above" (click)="deleteLoanDetails(i)"
*ngIf="i>0">
<mat-icon>delete</mat-icon>
</button>
</mat-card-content>
</div>
</div>
</mat-card>
</mat-card-content>
<mat-card-actions align="end">
<!-- <span *ngIf="_supplierQuesFrom.controls.supplier_details.controls.length > 1" (click)="removeLanguage(i)">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" color="primary" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
</span> -->
</mat-card-actions>
</mat-card>
</div>
</div>
</ng-template>
</mat-tab>
<mat-tab label="Docs">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions>
<div fxFlex="60" class="pb-0 text-sm-left" align="left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="currentloan_remarks" required></textarea>
</mat-form-field>
</div>
<div fxFlex="40" align="end">
<button type="submit" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button matTooltip="Submit" matTooltipPosition="above" (click)="submitCurrentloan()"><mat-icon>save</mat-icon>
</button>
</div>
</mat-dialog-actions>
</form>
<notifier-container></notifier-container>
<!-- <mat-card style="min-height: 550px;">
<mat-card-content>
<p>Existing Loan Obligations</p>
<form [formGroup]="currentLoanForm" class="address">
<form [formGroup]="currentLoanForm" class="address"> -->
<!-- <div fxLayout="row">
<div fxFlex="60" class="pb-0 text-sm-left"> -->
<mat-form-field style="width:60% !important;">
<!-- <mat-form-field style="width:60% !important;">
<mat-select (selectionChange)="selectedLoanChanges($event)" placeholder="Do you have any other existing loan"
formControlName="existing_loan" required>
<mat-option value="Yes">Yes</mat-option>
<mat-option value="No">No</mat-option>
</mat-select>
</mat-form-field>
</mat-form-field> -->
<!-- </div>
</div> -->
<mat-card *ngIf="currentLoanForm.controls.existing_loan.value == 'Yes'">
<!-- <mat-card *ngIf="currentLoanForm.controls.existing_loan.value == 'Yes'">
<mat-card-header>
<p>Loan Details<p>
</mat-card-header>
<div formArrayName="loan_details">
<div *ngFor="let details of currentLoanForm.get('loan_details').controls; let i=index"
[formGroupName]="i">
[formGroupName]="i"> -->
<!-- {{frequencyData | json}} -->
<mat-card-content class="matcard">
<!-- <mat-card-content class="matcard">
<mat-form-field>
<input matInput placeholder="Loan Amount" formControlName="loan_amount" (keypress)="keyPress($event)" required>
</mat-form-field>
@ -55,11 +298,11 @@
</mat-form-field>
<mat-form-field *ngIf="details.get('lender').value == 3">
<input matInput placeholder="Specify Others Loan Taken" formControlName="others_loan_taken">
</mat-form-field>
</mat-form-field> -->
<!-- <mat-form-field>
<input matInput placeholder="Lender" formControlName="lender" required>
</mat-form-field> -->
<mat-form-field>
<!-- <mat-form-field>
<input matInput placeholder="Original Tenure in Months" formControlName="original_tenure" required>
</mat-form-field>
<mat-form-field>
@ -92,5 +335,5 @@
</form>
</mat-card-content>
</mat-card>
</mat-card> -->

116
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.scss
View File

@ -1,19 +1,103 @@
.address {
display: flex;
padding: 0 2%;
flex-direction: column;
}
// .address {
// display: flex;
// padding: 0 2%;
// flex-direction: column;
// }
.address > * {
width: 100%;
// .address > * {
// width: 100%;
// }
// .matcard mat-form-field {
// margin: 0 2%;
// width:26%;
// }
// .address .button {
// float: right;
// width: 10px;
// background: #62B013;
// color: white;
// }
.paragraph_change {
color: #e00201 !important;
}
.matcard mat-form-field {
margin: 0 2%;
width:26%;
}
.address .button {
float: right;
width: 10px;
background: #62B013;
color: white;
.mat-card-content {
background-color: white;
}
.mat-card-actions {
background-color: white;
}
mat-form-field {
margin: 0 2%;
}
$base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
$product-bg-color-hover: rgba(103, 58, 183, 0.7);
.p-list-main {
background: white;
margin: auto;
position: relative;
overflow: hidden !important;
border-radius: 10px 10px 10px 10px;
box-shadow: $base-card-box-shadow;
transform: scale(0.95);
transition: box-shadow 0.5s, transform 0.5s;
&:hover {
transform: scale(1);
box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}
.p-list {
position: relative;
.top {
height: 100%;
width: 100%;
// background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
.bottom {
width: 200%;
height: 15%;
transition: transform 0.5s;
h1 {
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.left {
height: 100%;
width: 50%;
background: #f4f4f4;
position: relative;
float: left;
.details {
padding: 5px;
float: left;
// width: calc(70% - 40px);
}
}
.right {
width: 50%;
background: #A6CDDE;
color: white;
float: right;
height: 200%;
overflow: hidden;
.details {
padding: 20px;
float: right;
width: calc(70% - 40px);
}
}
}
}
}

22
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.ts
View File

@ -31,21 +31,27 @@ import { ActivatedRoute, Router } from "@angular/router";
export class CurrentLoanComponent implements OnInit {
public currentLoanForm: FormGroup;
private notifier: NotifierService;
@Input() pdid: number;
@Input() form_id: number;
@Input() applicant_details: any;
pageTitle: string ="Existing Loan Obligations";
pdid : number;
form_id: number;
applicant_details: any;
// @Input() pdid: number;
// @Input() form_id: number;
//@Input() applicant_details: any;
lenderData: any = [];
frequencyData: any = [];
applicants: any;
placeholderName : any = [];
holder: any = 'amount';
IDXval : any;
constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
private router: Router,
private _pd: PdTrigerService) {
this.notifier = notifier;
private _pd: PdTrigerService,
@Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
this.pdid = this.pd_all_details.pdmaster_details.pd_id;
this.form_id = 8;
this.notifier = notifier;
this.applicants = this.pd_all_details.pdapplicants_detials;
}
ngOnInit() {
this.getMasterDetails('BTLENDERLIST',1);
@ -54,7 +60,7 @@ export class CurrentLoanComponent implements OnInit {
let params: any = {};
params.pd_id = this.pdid;
params.pd_form_id = this.form_id;
this.applicants = this.applicant_details.pdapplicants_detials;
this._pd.retriveForm(params).subscribe(value => {
console.log('value', value);
const control = <FormArray>this.currentLoanForm.controls['loan_details'];

369
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/employment-info/employment-info.component.html
View File

@ -1,122 +1,257 @@
<mat-card style="padding: 12px;">
<p>Employement Information</p>
<form [formGroup]="employmentForm" class="address">
<mat-form-field>
<input matInput placeholder="Name of Employer" formControlName="employer_name" required>
</mat-form-field>
<div>
<label>Since how long working with this employer?</label>
<br>
<div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
<mat-form-field>
<input matInput type="number" placeholder="Year" formControlName="how_long_year" required min='0'>
</mat-form-field>
<mat-form-field>
<input matInput type="number" placeholder="Month" formControlName="how_long_month" required min='0' max='12'>
</mat-form-field>
</div>
</div>
<mat-form-field *ngIf="pd_cus_segment!='SAL-CHQ'">
<mat-select placeholder="Was the employer met?"
formControlName="was_met" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none" *ngIf="employmentForm.controls['was_met'].value == 'yes'">
<mat-form-field fxFlex="50">
<input matInput placeholder="Name of Person Met" formControlName="name_person_met" required>
</mat-form-field>
<mat-form-field fxFlex="50">
<input matInput placeholder="Designation of Person Met" formControlName="designation_person_met" required>
</mat-form-field>
</div>
<mat-form-field *ngIf="pd_cus_segment!='SAL-CHQ'">
<mat-select placeholder="Salary amount confirmed ?"
formControlName="confirm_salary" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="employmentForm.controls['confirm_salary'].value == 'yes'">
<input matInput placeholder="What is the salary amount confirmed?" formControlName="confirm_salary_amount" (keypress)="keyPress($event)">
</mat-form-field>
<mat-form-field *ngIf="pd_cus_segment!='SAL-CHQ'">
<mat-select placeholder="Attendance register seen ?"
formControlName="attendance_seen" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="pd_cus_segment!='SAL-CHQ'">
<mat-select placeholder="Salary register seen ?"
formControlName="sal_reg_seen" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-card>
<mat-card-header>
<p>Salary Details<p>
</mat-card-header>
<mat-card-content class="matcard">
<mat-form-field>
<input matInput placeholder="Date of Salary" formControlName="which_date_the_salary_is_rcv" type="number" min='1' max='31'>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Gross Monthly Salary" formControlName="gross_monthly_salary" (keypress)="keyPress($event)" required>
</mat-form-field>
<h2 mat-dialog-title class="paragraph_change">
<div fxFlex="70" align="left">
{{pageTitle}}
</div>
<div fxFlex="30" align="end">
<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>
<mat-form-field>
<input matInput placeholder="Net Monthly Salary"
formControlName="net_monthly_salary" (keypress)="keyPress($event)" required>
<!-- <input matInput placeholder="Net Take Home"
formControlName="net_take_home"> -->
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Bonus or Incentive"
formControlName="bonus_incentive" (keypress)="keyPress($event)" required>
</mat-form-field>
<mat-dialog-content>
<mat-tab-group>
<mat-tab label="Questions">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="100">
<mat-card>
<mat-form-field *ngIf="employmentForm.controls['bonus_incentive'].value != '' && employmentForm.controls['bonus_incentive'].value != '0' ">
<mat-select placeholder="Bonus Frequency" formControlName="bonus_frequency">
<mat-option *ngFor="let fd of frequency_data" [value]="fd.frequency_id">{{ fd.name }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Name of Employer" formControlName="employer_name" required>
</mat-form-field>
<div>
<label>Since how long working with this employer?</label>
<br>
<div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
<mat-form-field>
<input matInput type="number" placeholder="Year" formControlName="how_long_year" required min='0'>
</mat-form-field>
<mat-form-field>
<input matInput type="number" placeholder="Month" formControlName="how_long_month" required min='0' max='12'>
</mat-form-field>
</div>
</div>
<mat-form-field *ngIf="pd_cus_segment!='SAL-CHQ'">
<mat-select placeholder="Was the employer met?"
formControlName="was_met" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none" *ngIf="employmentForm.controls['was_met'].value == 'yes'">
<mat-form-field fxFlex="50">
<input matInput placeholder="Name of Person Met" formControlName="name_person_met" required>
</mat-form-field>
<mat-form-field fxFlex="50">
<input matInput placeholder="Designation of Person Met" formControlName="designation_person_met" required>
</mat-form-field>
</div>
<mat-form-field *ngIf="pd_cus_segment!='SAL-CHQ'">
<mat-select placeholder="Salary amount confirmed ?"
formControlName="confirm_salary" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="employmentForm.controls['confirm_salary'].value == 'yes'">
<input matInput placeholder="What is the salary amount confirmed?" formControlName="confirm_salary_amount" (keypress)="keyPress($event)">
</mat-form-field>
<mat-form-field *ngIf="pd_cus_segment!='SAL-CHQ'">
<mat-select placeholder="Attendance register seen ?"
formControlName="attendance_seen" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="pd_cus_segment!='SAL-CHQ'">
<mat-select placeholder="Salary register seen ?"
formControlName="sal_reg_seen" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-card>
<mat-card-header>
<p>Salary Details<p>
</mat-card-header>
<mat-card-content class="matcard">
<mat-form-field>
<input matInput placeholder="Date of Salary" formControlName="which_date_the_salary_is_rcv" type="number" min='1' max='31'>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Gross Monthly Salary" formControlName="gross_monthly_salary" (keypress)="keyPress($event)" required>
</mat-form-field>
<mat-form-field *ngIf="employmentForm.controls['bonus_incentive'].value != '' && employmentForm.controls['bonus_incentive'].value != '0' ">
<mat-select placeholder="Type of Bonus"
formControlName="bonus_type">
<mat-option value="fixed">Fixed</mat-option>
<mat-option value="variable depending on performance">Variable depending on performance</mat-option>
<mat-option value="others">Others</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="employmentForm.controls['bonus_type'].value == 'others'">
<input matInput placeholder="Bonus Type Others" formControlName="bonus_type_other">
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Any Delays"
formControlName="any_delays">
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
<!-- <input matInput placeholder="Any Delays"
formControlName="any_delays"> -->
</mat-form-field>
</mat-card-content>
</mat-card>
<div fxLayout="row">
<div fxFlex="60" class="pb-0 text-sm-left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="employment_remarks" required></textarea>
</mat-form-field>
</div>
</div>
<div style="text-align: right;">
<button type="submit" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button matTooltip="Submit" matTooltipPosition="above" (click)="submitDetails()"><mat-icon>save</mat-icon>
</button>
</div>
<mat-form-field>
<input matInput placeholder="Net Monthly Salary"
formControlName="net_monthly_salary" (keypress)="keyPress($event)" required>
<!-- <input matInput placeholder="Net Take Home"
formControlName="net_take_home"> -->
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Bonus or Incentive"
formControlName="bonus_incentive" (keypress)="keyPress($event)" required>
</mat-form-field>
<mat-form-field *ngIf="employmentForm.controls['bonus_incentive'].value != '' && employmentForm.controls['bonus_incentive'].value != '0' ">
<mat-select placeholder="Bonus Frequency" formControlName="bonus_frequency">
<mat-option *ngFor="let fd of frequency_data" [value]="fd.frequency_id">{{ fd.name }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="employmentForm.controls['bonus_incentive'].value != '' && employmentForm.controls['bonus_incentive'].value != '0' ">
<mat-select placeholder="Type of Bonus"
formControlName="bonus_type">
<mat-option value="fixed">Fixed</mat-option>
<mat-option value="variable depending on performance">Variable depending on performance</mat-option>
<mat-option value="others">Others</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="employmentForm.controls['bonus_type'].value == 'others'">
<input matInput placeholder="Bonus Type Others" formControlName="bonus_type_other">
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Any Delays"
formControlName="any_delays">
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
<!-- <input matInput placeholder="Any Delays"
formControlName="any_delays"> -->
</mat-form-field>
</mat-card-content>
</mat-card>
</mat-card>
</div>
</div>
</ng-template>
</mat-tab>
<mat-tab label="Docs">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions>
<div fxFlex="60" class="pb-0 text-sm-left" align="left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="employment_remarks" required></textarea>
</mat-form-field>
</div>
<div fxFlex="40" align="end">
<!-- <button type="submit" mat-raised-button mat-icon-button type="submit" matTooltip="Submit" matTooltipPosition="above" (click)="submitFamily()"><mat-icon>save</mat-icon></button> -->
<button type="submit" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button matTooltip="Submit" matTooltipPosition="above" (click)="submitDetails()"><mat-icon>save</mat-icon>
</button>
</div>
</mat-dialog-actions>
</form>
</mat-card>
<notifier-container></notifier-container>

83
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/employment-info/employment-info.component.scss
View File

@ -19,3 +19,86 @@
background: #62B013;
color: white;
}
.paragraph_change {
color: #e00201 !important;
}
.mat-card-content {
background-color: white;
}
.mat-card-actions {
background-color: white;
}
mat-form-field {
margin: 0 2%;
}
$base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
$product-bg-color-hover: rgba(103, 58, 183, 0.7);
.p-list-main {
background: white;
margin: auto;
position: relative;
overflow: hidden !important;
border-radius: 10px 10px 10px 10px;
box-shadow: $base-card-box-shadow;
transform: scale(0.95);
transition: box-shadow 0.5s, transform 0.5s;
&:hover {
transform: scale(1);
box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}
.p-list {
position: relative;
.top {
height: 100%;
width: 100%;
// background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
.bottom {
width: 200%;
height: 15%;
transition: transform 0.5s;
h1 {
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.left {
height: 100%;
width: 50%;
background: #f4f4f4;
position: relative;
float: left;
.details {
padding: 5px;
float: left;
// width: calc(70% - 40px);
}
}
.right {
width: 50%;
background: #A6CDDE;
color: white;
float: right;
height: 200%;
overflow: hidden;
.details {
padding: 20px;
float: right;
width: calc(70% - 40px);
}
}
}
}
}

19
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/employment-info/employment-info.component.ts
View File

@ -29,9 +29,11 @@ import {ActivatedRoute, Router} from '@angular/router';
styleUrls: ['./employment-info.component.scss']
})
export class EmploymentInfoComponent implements OnInit {
@Input() pdid: number;
@Input() form_id: number;
@Input() pd_all_details:any;
pageTitle: string ="Employement Information";
pdid: number;
form_id: number;
//pd_all_details:any;
public employmentForm: FormGroup;
private notifier: NotifierService;
@ -40,11 +42,14 @@ export class EmploymentInfoComponent implements OnInit {
constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
private router: Router,
private _pd: PdTrigerService) {
this.notifier = notifier;
//getAllMasterDatas();
private _pd: PdTrigerService,
@Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
this.pdid = this.pd_all_details.pdmaster_details.pd_id;
this.form_id = 12;
this.notifier = notifier;
}
}
ngOnInit() {
this.pd_cus_segment=this.pd_all_details.pdmaster_details.customer_segment_abbr.toUpperCase();
this.initemploymentForm();

316
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.html
View File

@ -1,8 +1,316 @@
<form class="address" [formGroup]="familyForm">
<h2 mat-dialog-title class="paragraph_change">
<div fxFlex="70" align="left">
{{pageTitle}}
</div>
<div fxFlex="30" align="end">
<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>
<mat-card style="min-height: 550px;">
<mat-dialog-content>
<mat-tab-group>
<mat-tab label="Questions">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="100">
<mat-card>
<!-- <mat-card-title>Address Details</mat-card-title> -->
<mat-card-content>
<mat-form-field>
<input matInput placeholder="Number Of Family Members" formControlName="members" required>
</mat-form-field>
<mat-card>
<mat-card-header>
<p>Earning Members
</p>
</mat-card-header>
<div formArrayName="earningMembers">
<div *ngFor="let item of familyForm.controls.earningMembers['controls']; let i=index"
[formGroupName]="i">
<mat-card-content class="matcards">
<mat-form-field>
<input matInput placeholder="Name"
formControlName="earning_member_name" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Age" (keypress)="keyPress($event)"
formControlName="earning_member_age" required>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Relation" formControlName="relation" required>
<mat-option value="{{relations.relationship_id}}"
*ngFor="let relations of relationData">
{{relations.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Segment" formControlName="segment" required>
<mat-option value="{{cusSeg.customer_segment_id}}"
*ngFor="let cusSeg of customerSegData">
{{cusSeg.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Income / Revenue"
formControlName="income" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Name of Employer / Business"
formControlName="employer_name" required>
</mat-form-field>
<button type="button" mat-raised-button mat-icon-button *ngIf="i==0" color="primary"
matTooltip="Add More Earning Members" matTooltipPosition="above" (click)="addearningMembers()">
<mat-icon>add</mat-icon>
</button>
<button type="button" mat-raised-button mat-icon-button
matTooltip="Delete" matTooltipPosition="above" (click)="deleteEarningMembers(i)" *ngIf="i>0">
<mat-icon>delete</mat-icon>
</button>
</mat-card-content>
</div>
</div>
</mat-card>
<mat-card>
<mat-card-header>
<p>Non Earning Members
</p>
</mat-card-header>
<div formArrayName="nonEarningMembers">
<div *ngFor="let members of familyForm.controls.nonEarningMembers['controls']; let i=index"
[formGroupName]="i">
<mat-card-content class="matcard">
<mat-form-field>
<input matInput placeholder="Name"
formControlName="non_earning_member_name" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Age" (keypress)="keyPress($event)"
formControlName="non_earning_member_age" required>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Relation"
formControlName="relationship" required>
<mat-option value="{{relation.relationship_id}}"
*ngFor="let relation of relationData">
{{relation.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Occupation"
formControlName="occupation" required>
<mat-option value="{{occupation.occupation_non_earning_member_id}}"
*ngFor="let occupation of occupationData">{{occupation.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="members['controls'].occupation.value==3">
<input matInput placeholder="Retired From"
formControlName="retired">
</mat-form-field>
<mat-form-field *ngIf="members['controls'].occupation.value==9">
<input matInput placeholder="Specify Others Occupation"
formControlName="others_occupation">
</mat-form-field>
<button type="button" mat-raised-button mat-icon-button (click)="addMembers()" color="primary"
matTooltip="Add More Non Earning Members" matTooltipPosition="above" *ngIf="i==0">
<mat-icon>add</mat-icon>
</button>
<button type="button" mat-raised-button mat-icon-button (click)="deleteMembers(i)"
matTooltip="Delete" matTooltipPosition="above" *ngIf="i>0">
<mat-icon>delete</mat-icon>
</button>
</mat-card-content>
</div>
</div>
</mat-card>
<mat-card>
<mat-card-header>
<p>Residence </p>
</mat-card-header>
<mat-card-content class="matcard">
<mat-form-field>
<input matInput placeholder="Residence Address"
formControlName="residence" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Number of yrs" formControlName="years" required>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Ownership" formControlName="ownership" required>
<mat-option value="{{ownerShip.id}}"
*ngFor="let ownerShip of ownerShipData">
{{ownerShip.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="ownership.value ==4">
<input matInput placeholder="Please specify" formControlName="ownershipOther">
</mat-form-field>
<mat-form-field *ngIf="ownership.value ==3">
<input matInput placeholder="Rent Amount"
formControlName="rent">
</mat-form-field>
</mat-card-content>
</mat-card>
</mat-card-content>
</mat-card>
</div>
</div>
</ng-template>
</mat-tab>
<mat-tab label="Docs">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions>
<div fxFlex="60" class="pb-0 text-sm-left" align="left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="family_details_form_remark"></textarea>
</mat-form-field>
</div>
<div fxFlex="40" align="end">
<!-- <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="submit" matTooltip="Save" matTooltipPosition="above"><mat-icon>save</mat-icon></button> -->
<button type="submit" mat-raised-button mat-icon-button type="submit" matTooltip="Submit" matTooltipPosition="above" (click)="submitFamily()"><mat-icon>save</mat-icon></button>
</div>
</mat-dialog-actions>
</form>
<notifier-container></notifier-container>
<!-- <mat-card style="min-height: 550px;">
<mat-card-content>
<p>Family Details</p>
<form class="address" [formGroup]="familyForm">
<form class="address" [formGroup]="familyForm"> -->
<!-- <mat-form-field>
<mat-select placeholder="Person Met" formControlName="person" required>
<mat-option *ngFor="let personMet of personMetData" [value]="personMet.person_met_id">
@ -13,7 +321,7 @@
<mat-form-field *ngIf="person.value ==8">
<input matInput placeholder="Enter the relationship" formControlName="personOther">
</mat-form-field> -->
<mat-form-field>
<!-- <mat-form-field>
<input matInput placeholder="Number Of Family Members" formControlName="members" required>
</mat-form-field>
<mat-card>
@ -169,4 +477,4 @@
</mat-card-content>
</mat-card>
</mat-card> -->

125
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.scss
View File

@ -1,23 +1,108 @@
.address {
display: flex;
padding: 0 2%;
flex-direction: column;
}
// .address {
// display: flex;
// padding: 0 2%;
// flex-direction: column;
// }
.address > * {
width: 100%;
// .address > * {
// width: 100%;
// }
// .matcard mat-form-field {
// margin: 0 2%;
// width:27%;
// }
// .matcards mat-form-field {
// margin: 0 2%;
// width:40%;
// }
// .address .button {
// float: right;
// width: 10px;
// background: #62B013;
// color: white;
// }
.paragraph_change {
color: #e00201 !important;
}
.matcard mat-form-field {
margin: 0 2%;
width:27%;
}
.matcards mat-form-field {
margin: 0 2%;
width:40%;
}
.address .button {
float: right;
width: 10px;
background: #62B013;
color: white;
.mat-card-content {
background-color: white;
}
.mat-card-actions {
background-color: white;
}
mat-form-field {
margin: 0 2%;
}
$base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
$product-bg-color-hover: rgba(103, 58, 183, 0.7);
.p-list-main {
background: white;
margin: auto;
position: relative;
overflow: hidden !important;
border-radius: 10px 10px 10px 10px;
box-shadow: $base-card-box-shadow;
transform: scale(0.95);
transition: box-shadow 0.5s, transform 0.5s;
&:hover {
transform: scale(1);
box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}
.p-list {
position: relative;
.top {
height: 100%;
width: 100%;
// background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
.bottom {
width: 200%;
height: 15%;
transition: transform 0.5s;
h1 {
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.left {
height: 100%;
width: 50%;
background: #f4f4f4;
position: relative;
float: left;
.details {
padding: 5px;
float: left;
// width: calc(70% - 40px);
}
}
.right {
width: 50%;
background: #A6CDDE;
color: white;
float: right;
height: 200%;
overflow: hidden;
.details {
padding: 20px;
float: right;
width: calc(70% - 40px);
}
}
}
}
}

14
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.ts
View File

@ -2,7 +2,7 @@ import {
Component,
OnInit,
Inject,
Input
Input, Output
} from '@angular/core';
import {
@ -29,7 +29,10 @@ import {ActivatedRoute, Router} from "@angular/router";
styleUrls: ['./family-details.component.scss']
})
export class FamilyDetailsComponent implements OnInit {
@Input() pdid: number;
//@Input() pdid: number;
pageTitle: string ="Family Details";
pdid : string;
form_id : number;
public currentLoanForm: FormGroup;
private notifier: NotifierService;
@ -54,8 +57,11 @@ export class FamilyDetailsComponent implements OnInit {
count : number;
constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
private router: Router,
private _pd: PdTrigerService) {
this.notifier = notifier;
private _pd: PdTrigerService,
@Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
this.pdid = this.pd_all_details.pdmaster_details.pd_id;
this.form_id = 6;
this.notifier = notifier;
}
ngOnInit() {
this.getMasterDetails('RELATIONSHIPS',1);

247
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/financial-info/financial-info.component.html
View File

@ -1,4 +1,245 @@
<mat-card style="padding: 12px;">
<!-- <form [formGroup]="_personalForm" (submit)="submitPersonalForm(_personalForm.value)" novalidate> -->
<form [formGroup]="financialForm" class="address">
<h2 mat-dialog-title class="paragraph_change">
<div fxFlex="70" align="left">
{{pageTitle}}
</div>
<div fxFlex="30" align="end">
<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>
<mat-dialog-content>
<mat-tab-group>
<mat-tab label="Questions">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="100">
<mat-card>
<mat-card-header>
<p>Data as Per Financial Statements<p>
</mat-card-header>
<div formArrayName="date_per_financial">
<div *ngFor="let details of financialForm.controls.date_per_financial['controls']; let i=index"
[formGroupName]="i">
<mat-card-content class="matcard">
<mat-form-field>
<input matInput placeholder="Year (format: 2015-16)" formControlName="financial_year" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Annual Sale" formControlName="financial_annual_sale" (change)="calMargin(i, details)" type="number" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Net Profit / Loss" formControlName="financial_net_profit" (change)="calMargin( i, details); calYearVariation( i, details)" type="number" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Net Profit to Sales %" formControlName="financial_margin" (keypress)="keyPress($event)" required>
</mat-form-field>
<mat-form-field *ngIf="i != 0">
<input matInput [ngClass]="{'highlight': (details.controls['financial_variation'].value > 40) || (details.controls['financial_variation'].value < -40)}" placeholder="Variation from Previous Year" formControlName="financial_variation" (keypress)="keyPress($event)">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Reason For Major Difference" formControlName="financial_reason" required>
</mat-form-field>
<button type="button" mat-raised-button mat-icon-button (click)="addDate()"
matTooltip="Add More Financial Statements" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary" *ngIf="i==0">
<mat-icon>add</mat-icon>
</button>
<button type="button" mat-raised-button mat-icon-button (click)="deleteDate(i)"
matTooltip="Delete" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" *ngIf="i>0">
<mat-icon>delete</mat-icon>
</button>
</mat-card-content>
</div>
</div>
</mat-card>
</div>
</div>
<div fxLayout="row wrap">
<div fxFlex="100">
<!-- start co applicant form details -->
<mat-card>
<mat-card-header>
<p>Actual Values as per Customer<p>
</mat-card-header>
<div formArrayName="estimated_value">
<div *ngFor="let details of financialForm.controls.estimated_value['controls']; let i=index"
[formGroupName]="i">
<mat-card-content class="matcard">
<mat-form-field>
<input matInput placeholder="Year (format: 2015-16)" formControlName="estimate_year" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Annual Sale" formControlName="estimate_annual_sale" (change)="calMarginVal( i, details)" type="number" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Net Profit / Loss" formControlName="estimate_net_profit" (change)="calMarginVal( i, details); calVariation( i, details)" type="number" required>
</mat-form-field>
<mat-form-field>
<input matInput disabled placeholder="Margin" formControlName="estimate_margin" (keypress)="keyPress($event)" required>
</mat-form-field>
<mat-form-field *ngIf="i != 0">
<input matInput [ngClass]="{'highlight': details.controls['estimate_variation'].value >= 40 || details.controls['estimate_variation'].value >= -40}" placeholder="Variation from Previous Year" formControlName="estimate_variation" (keypress)="keyPress($event)">
</mat-form-field>
<!--<mat-form-field>
<input matInput placeholder="Reason For Major Difference" formControlName="estimate_reason" required>
</mat-form-field>-->
<button type="button" mat-raised-button mat-icon-button (click)="addGoods()"
matTooltip="Add More Estimated Value" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary" *ngIf="i==0">
<mat-icon>add</mat-icon>
</button>
<button type="button" mat-raised-button mat-icon-button (click)="deleteGoods(i)"
matTooltip="Delete" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" *ngIf="i>0">
<mat-icon>delete</mat-icon>
</button>
</mat-card-content>
</div>
</div>
</mat-card>
<!-- end co apllicant -->
</div>
</div>
</ng-template>
</mat-tab>
<mat-tab label="Docs">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions>
<div fxFlex="60" class="pb-0 text-sm-left" align="left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="financial_remarks" required></textarea>
</mat-form-field>
</div>
<div fxFlex="40" align="end">
<button type="submit" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button matTooltip="Submit" matTooltipPosition="above" (click)="submitDetails()"><mat-icon>save</mat-icon>
</button>
</div>
</mat-dialog-actions>
</form>
<notifier-container></notifier-container>
<!-- <mat-card style="padding: 12px;">
<p>Financial Information</p>
<form [formGroup]="financialForm" class="address">
<mat-card>
@ -66,7 +307,7 @@
<!--<mat-form-field>
<input matInput placeholder="Reason For Major Difference" formControlName="estimate_reason" required>
</mat-form-field>-->
<button type="button" mat-raised-button mat-icon-button (click)="addGoods()"
<!-- <button type="button" mat-raised-button mat-icon-button (click)="addGoods()"
matTooltip="Add More Estimated Value" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary" *ngIf="i==0">
<mat-icon>add</mat-icon>
</button>
@ -91,4 +332,4 @@
</button>
</div>
</form>
</mat-card>
</mat-card> -->

126
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/financial-info/financial-info.component.scss
View File

@ -1,22 +1,108 @@
.address {
display: flex;
padding: 0 2%;
flex-direction: column;
// .address {
// display: flex;
// padding: 0 2%;
// flex-direction: column;
// }
// .address > * {
// width: 100%;
// }
// .matcard mat-form-field {
// margin: 0 2%;
// width:26%
// }
// .address .button {
// float: right;
// width: 10px;
// background: #62B013;
// color: white;
// }
// .highlight {
// color: red;
// }
.paragraph_change {
color: #e00201 !important;
}
.mat-card-content {
background-color: white;
}
.mat-card-actions {
background-color: white;
}
mat-form-field {
margin: 0 2%;
}
$base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
$product-bg-color-hover: rgba(103, 58, 183, 0.7);
.p-list-main {
background: white;
margin: auto;
position: relative;
overflow: hidden !important;
border-radius: 10px 10px 10px 10px;
box-shadow: $base-card-box-shadow;
transform: scale(0.95);
transition: box-shadow 0.5s, transform 0.5s;
&:hover {
transform: scale(1);
box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}
.p-list {
position: relative;
.top {
height: 100%;
width: 100%;
// background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
.bottom {
width: 200%;
height: 15%;
transition: transform 0.5s;
h1 {
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.left {
height: 100%;
width: 50%;
background: #f4f4f4;
position: relative;
float: left;
.details {
padding: 5px;
float: left;
// width: calc(70% - 40px);
}
}
.right {
width: 50%;
background: #A6CDDE;
color: white;
float: right;
height: 200%;
overflow: hidden;
.details {
padding: 20px;
float: right;
width: calc(70% - 40px);
}
}
}
}
}
.address > * {
width: 100%;
}
.matcard mat-form-field {
margin: 0 2%;
width:26%
}
.address .button {
float: right;
width: 10px;
background: #62B013;
color: white;
}
.highlight {
color: red;
}

17
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/financial-info/financial-info.component.ts
View File

@ -29,18 +29,25 @@ import {ActivatedRoute, Router} from '@angular/router';
styleUrls: ['./financial-info.component.scss']
})
export class FinancialInfoComponent implements OnInit {
@Input() pdid: number;
@Input() form_id: number;
pageTitle: string ="Financial Information";
pdid: string;
form_id: number;
public financialForm: FormGroup;
private notifier: NotifierService;
marginVal: any = [] ;
setmargin: AbstractControl;
constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
constructor(notifier: NotifierService,
private fb: FormBuilder,
private route: ActivatedRoute,
private router: Router,
private _pd: PdTrigerService) {
this.notifier = notifier;
private _pd: PdTrigerService,
@Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
this.pdid = this.pd_all_details.pdmaster_details.pd_id;
this.form_id = 14;
this.notifier = notifier;
}
ngOnInit() {
this.initstockForm();
let params: any = {};
params.pd_id = this.pdid;

216
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/lender-representative/lender-representative.component.html
View File

@ -1,43 +1,181 @@
<mat-card style="min-height: 550px;">
<mat-card-content>
<p>Lender Representative Details</p>
<form [formGroup]="representativeForm" class="address">
<mat-form-field>
<mat-select (selectionChange)="selectedLoanChanges($event)" placeholder="Did the lender representative accompany the PD officer for PD?"
formControlName="lender_representative_accompany">
<mat-option value="Yes">Yes</mat-option>
<mat-option value="No">No</mat-option>
</mat-select>
</mat-form-field>
<div *ngIf="representativeForm.controls.lender_representative_accompany.value == 'Yes'">
<div formArrayName="lender_representative_details">
<div *ngFor="let details of representativeForm.get('lender_representative_details').controls; let i=index"
[formGroupName]="i">
<mat-form-field>
<input matInput placeholder="What is the name of lender representative who accompanies the PD officer, If any?" formControlName="lender_representative_who_accompanies" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Did the lender representative carry the loan file during PD?" formControlName="lender_representative_carry_loan_files" required>
</mat-form-field>
</div>
</div>
</div>
<form [formGroup]="representativeForm" class="address">
<h2 mat-dialog-title class="paragraph_change">
<div fxFlex="70" align="left">
{{pageTitle}}
</div>
<div fxFlex="30" align="end">
<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 fxLayout="row">
<div fxFlex="60" class="pb-0 text-sm-left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="representative_remarks"></textarea>
</mat-form-field>
</div>
</div>
<div style="text-align: right;">
<button type="submit" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button matTooltip="Submit" matTooltipPosition="above" type="button" (click)="submitLRForm()"><mat-icon>save</mat-icon>
</button>
</div>
</div>
</h2>
</form>
</mat-card-content>
</mat-card>
<mat-dialog-content>
<mat-tab-group>
<mat-tab label="Questions">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="100">
<mat-card>
<mat-card-content>
<mat-form-field>
<mat-select (selectionChange)="selectedLoanChanges($event)" placeholder="Did the lender representative accompany the PD officer for PD?"
formControlName="lender_representative_accompany">
<mat-option value="Yes">Yes</mat-option>
<mat-option value="No">No</mat-option>
</mat-select>
</mat-form-field>
<div *ngIf="representativeForm.controls.lender_representative_accompany.value == 'Yes'">
<div formArrayName="lender_representative_details">
<div *ngFor="let details of representativeForm.get('lender_representative_details').controls; let i=index"
[formGroupName]="i">
<mat-form-field>
<input matInput placeholder="What is the name of lender representative who accompanies the PD officer, If any?" formControlName="lender_representative_who_accompanies" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Did the lender representative carry the loan file during PD?" formControlName="lender_representative_carry_loan_files" required>
</mat-form-field>
</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</ng-template>
</mat-tab>
<mat-tab label="Docs">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions>
<div fxFlex="60" class="pb-0 text-sm-left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="representative_remarks"></textarea>
</mat-form-field>
</div>
<div fxFlex="40" align="end">
<button type="submit" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button matTooltip="Submit" matTooltipPosition="above" type="button" (click)="submitLRForm()"><mat-icon>save</mat-icon>
</button>
</div>
</mat-dialog-actions>
</form>

86
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/lender-representative/lender-representative.component.scss
View File

@ -1,5 +1,5 @@
.mat-form-field {
width: 100%;
width: 97%;
}
// .address > * {
@ -9,3 +9,87 @@
// margin: 0 2%;
// width:100%;
// }
.paragraph_change {
color: #e00201 !important;
}
.mat-card-content {
background-color: white;
}
.mat-card-actions {
background-color: white;
}
mat-form-field {
margin: 0 2%;
}
$base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
$product-bg-color-hover: rgba(103, 58, 183, 0.7);
.p-list-main {
background: white;
margin: auto;
position: relative;
overflow: hidden !important;
border-radius: 10px 10px 10px 10px;
box-shadow: $base-card-box-shadow;
transform: scale(0.95);
transition: box-shadow 0.5s, transform 0.5s;
&:hover {
transform: scale(1);
box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}
.p-list {
position: relative;
.top {
height: 100%;
width: 100%;
// background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
.bottom {
width: 200%;
height: 15%;
transition: transform 0.5s;
h1 {
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.left {
height: 100%;
width: 50%;
background: #f4f4f4;
position: relative;
float: left;
.details {
padding: 5px;
float: left;
// width: calc(70% - 40px);
}
}
.right {
width: 50%;
background: #A6CDDE;
color: white;
float: right;
height: 200%;
overflow: hidden;
.details {
padding: 20px;
float: right;
width: calc(70% - 40px);
}
}
}
}
}

23
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/lender-representative/lender-representative.component.ts
View File

@ -1,6 +1,11 @@
import {Component,OnInit,Inject,Input } from '@angular/core';
import {FormBuilder,FormGroup,Validators,FormArray, FormControl,} from '@angular/forms';
import { NotifierService } from 'angular-notifier';
import {
MatDialog,
MatDialogRef,
MAT_DIALOG_DATA
} from '@angular/material';
/** Service */
import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
import { ActivatedRoute, Router } from "@angular/router";
@ -13,15 +18,21 @@ import { ActivatedRoute, Router } from "@angular/router";
export class LenderRepresentativeComponent implements OnInit {
public representativeForm: FormGroup;
private notifier: NotifierService;
@Input() pdid: number;
@Input() form_id: number;
pageTitle: string ="Lender Representative Details";
pdid: number;
form_id: number;
constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
private router: Router,
private _pd: PdTrigerService) {
constructor(notifier: NotifierService,
private fb: FormBuilder,
private route: ActivatedRoute,
private router: Router,
private _pd: PdTrigerService,
@Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
this.pdid = this.pd_all_details.pdmaster_details.pd_id;
this.form_id = 15;
this.notifier = notifier;
}
ngOnInit() {
this.initRepresentative();
let params: any = {};

334
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.html
View File

@ -1,71 +1,87 @@
<mat-card style="padding: 12px;">
<p>Loan Details</p>
<form [formGroup]="loanDetailsForm" class="address">
<mat-form-field>
<input matInput placeholder="Loan Amount Applied for ? " formControlName="loan_amount" (keypress)="keyPress($event)" (keyup)="inWords($event,1)" required >
<mat-hint align="end" *ngIf="loanDetailsForm.controls['loan_amount'].value != ''">{{"&#8377;"}} {{loanAmtInWords}} Only</mat-hint>
</mat-form-field>
<mat-form-field>
<mat-select multiple (selectionChange)="endUserChange($event)" placeholder="What is the end use" formControlName="end_use" required>
<mat-option *ngFor="let enduse of m_endUseofLoad" [value]="enduse.id">{{ enduse.name }}</mat-option>
</mat-select>
<!--<mat-select multiple placeholder="What is the end use"
formControlName="end_use" (selectionChange)="endUserChange($event)">
<mat-option value="purchase_of_property"> Puchase of property</mat-option>
<mat-option value="construction">Construction</mat-option>
<mat-option value="extention">Extention</mat-option>
<mat-option value="improvement">Improvement</mat-option>
<mat-option value="working_capital">Working capital</mat-option>
<mat-option value="purchase_of_business_asset">Purchase of business asset</mat-option>
<mat-option value="to_close_an_existing_debt">to close an existing debt</mat-option>
<mat-option value="other">Other purpose</mat-option>
</mat-select>-->
</mat-form-field>
<mat-form-field *ngIf="isOtherPurpose">
<input matInput placeholder="Specify End Use" formControlName="end_use_other">
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Is there a balance transfer ? " (selectionChange)="selectedBalancesTransferChanges($event)"
formControlName="is_transfer" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<h2 mat-dialog-title class="paragraph_change">
<div fxFlex="70" align="left">
{{pageTitle}}
</div>
<div fxFlex="30" align="end">
<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>
<mat-form-field *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes'">
<input matInput placeholder="What is the amount required for Balance Transfer ? " (keypress)="keyPress($event)" formControlName="balance_transfer_amount" (keyup)="inWords($event,2)">
<mat-hint align="end" *ngIf="loanDetailsForm.controls['loan_amount'].value != ''">{{"&#8377;"}} {{balTxrfAmtInWords}} Only</mat-hint>
</mat-form-field>
<mat-form-field *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes'">
<mat-select placeholder="Is there a Top Up"
formControlName="is_topup" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes'">
<mat-select placeholder="Lender from where balance transfer done"
formControlName="lender">
<mat-option *ngFor="let btLen of m_btLenderList" [value]="btLen.bt_lender_list_id">{{ btLen.lender_name }}</mat-option>
</div>
</h2>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="loanDetailsForm.controls['lender'].value == 3">
<input matInput placeholder="Specify Others Lender" formControlName="other_bt_lender">
</mat-form-field>
<mat-form-field *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes' && loanDetailsForm.controls['is_topup'].value == 'yes'">
<input matInput placeholder="Top Up Amt" (keypress)="keyPress($event)" formControlName="topup_amount" (keyup)="inWords($event,5)">
<mat-hint align="end" *ngIf="loanDetailsForm.controls['topup_amount'].value != ''">{{"&#8377;"}} {{topUpAmtInWords}} Only</mat-hint>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Amount of Own Contribution" formControlName="own_contribution" (keypress)="keyPress($event)" required (keyup)="inWords($event,4)">
<mat-hint align="end" *ngIf="loanDetailsForm.controls['own_contribution'].value != ''">{{"&#8377;"}} {{ownContributionInWords}} Only</mat-hint>
</mat-form-field>
<mat-dialog-content>
<mat-form-field>
<mat-select placeholder="Source" formControlName="source" required>
<mat-option *ngFor="let sour of m_sourceofamount" [value]="sour.id">{{ sour.name }}</mat-option>
</mat-select>
<mat-tab-group>
<mat-tab label="Questions">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="100">
<mat-card>
<mat-form-field>
<input matInput placeholder="Loan Amount Applied for ? " formControlName="loan_amount" (keypress)="keyPress($event)" (keyup)="inWords($event,1)" required >
<mat-hint align="end" *ngIf="loanDetailsForm.controls['loan_amount'].value != ''">{{"&#8377;"}} {{loanAmtInWords}} Only</mat-hint>
</mat-form-field>
<mat-form-field>
<mat-select multiple (selectionChange)="endUserChange($event)" placeholder="What is the end use" formControlName="end_use" required>
<mat-option *ngFor="let enduse of m_endUseofLoad" [value]="enduse.id">{{ enduse.name }}</mat-option>
</mat-select>
<!--<mat-select multiple placeholder="What is the end use"
formControlName="end_use" (selectionChange)="endUserChange($event)">
<mat-option value="purchase_of_property"> Puchase of property</mat-option>
<mat-option value="construction">Construction</mat-option>
<mat-option value="extention">Extention</mat-option>
<mat-option value="improvement">Improvement</mat-option>
<mat-option value="working_capital">Working capital</mat-option>
<mat-option value="purchase_of_business_asset">Purchase of business asset</mat-option>
<mat-option value="to_close_an_existing_debt">to close an existing debt</mat-option>
<mat-option value="other">Other purpose</mat-option>
</mat-select>-->
</mat-form-field>
<mat-form-field *ngIf="isOtherPurpose">
<input matInput placeholder="Specify End Use" formControlName="end_use_other">
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Is there a balance transfer ? " (selectionChange)="selectedBalancesTransferChanges($event)"
formControlName="is_transfer" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes'">
<input matInput placeholder="What is the amount required for Balance Transfer ? " (keypress)="keyPress($event)" formControlName="balance_transfer_amount" (keyup)="inWords($event,2)">
<mat-hint align="end" *ngIf="loanDetailsForm.controls['loan_amount'].value != ''">{{"&#8377;"}} {{balTxrfAmtInWords}} Only</mat-hint>
</mat-form-field>
<mat-form-field *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes'">
<mat-select placeholder="Is there a Top Up"
formControlName="is_topup" required>
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes'">
<mat-select placeholder="Lender from where balance transfer done"
formControlName="lender">
<mat-option *ngFor="let btLen of m_btLenderList" [value]="btLen.bt_lender_list_id">{{ btLen.lender_name }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="loanDetailsForm.controls['lender'].value == 3">
<input matInput placeholder="Specify Others Lender" formControlName="other_bt_lender">
</mat-form-field>
<mat-form-field *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes' && loanDetailsForm.controls['is_topup'].value == 'yes'">
<input matInput placeholder="Top Up Amt" (keypress)="keyPress($event)" formControlName="topup_amount" (keyup)="inWords($event,5)">
<mat-hint align="end" *ngIf="loanDetailsForm.controls['topup_amount'].value != ''">{{"&#8377;"}} {{topUpAmtInWords}} Only</mat-hint>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Amount of Own Contribution" formControlName="own_contribution" (keypress)="keyPress($event)" required (keyup)="inWords($event,4)">
<mat-hint align="end" *ngIf="loanDetailsForm.controls['own_contribution'].value != ''">{{"&#8377;"}} {{ownContributionInWords}} Only</mat-hint>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Source" formControlName="source" required>
<mat-option *ngFor="let sour of m_sourceofamount" [value]="sour.id">{{ sour.name }}</mat-option>
</mat-select>
<!--<mat-select placeholder="Source"
formControlName="source">
@ -123,46 +139,172 @@
<mat-form-field>
<mat-select placeholder="Status of Construction" formControlName="construction_status" required>
<mat-option *ngFor="let status of m_statusofCunstruction" [value]="status.id">{{ status.name }} {{status.id}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="loanDetailsForm.controls['construction_status'].value == 4">
<input matInput placeholder="What is the approximate stage of construction (%)?"
formControlName="percentage_of_construction" (keypress)="keyPress($event)" required>
</mat-form-field>
<mat-select placeholder="Status of Construction" formControlName="construction_status" required>
<mat-option *ngFor="let status of m_statusofCunstruction" [value]="status.id">{{ status.name }} {{status.id}}</mat-option>
</mat-select>
</mat-form-field>
<!--<mat-select placeholder="Status of construction"
formControlName="construction_status">
<mat-option value="other_purpose">Under-construction</mat-option>
<mat-option value="other_purpose">Complete</mat-option>
<mat-option value="other_purpose">Vacant Land</mat-option>
</mat-select>-->
<mat-form-field *ngIf="loanDetailsForm.controls['construction_status'].value == 4">
<input matInput placeholder="What is the approximate stage of construction (%)?"
formControlName="percentage_of_construction" (keypress)="keyPress($event)" required>
</mat-form-field>
<!--<mat-select placeholder="Status of construction"
formControlName="construction_status">
<mat-option value="other_purpose">Under-construction</mat-option>
<mat-option value="other_purpose">Complete</mat-option>
<mat-option value="other_purpose">Vacant Land</mat-option>
</mat-select>-->
<mat-form-field>
<input matInput placeholder="Estimate Market Value as Per Customer"
formControlName="emv_per_customer" (keypress)="keyPress($event)" required>
</mat-form-field>
<!-- <mat-form-field>
<input matInput placeholder="Value as Per Agreement"
formControlName="value_per_agreement" (keypress)="keyPress($event)" required (keyup)="inWords($event,3)">
<mat-hint align="end" *ngIf="loanDetailsForm.controls['loan_amount'].value != ''">{{"&#8377;"}} {{valAsPerAgmtInWords}} Only</mat-hint>
</mat-form-field> -->
<mat-form-field>
<input matInput placeholder="Estimate Market Value as Per Customer"
formControlName="emv_per_customer" (keypress)="keyPress($event)" required>
</mat-form-field>
</mat-card-content>
</mat-card>
</mat-card>
</div>
</div>
</ng-template>
</mat-tab>
<mat-tab label="Docs">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions>
<mat-form-field>
<input matInput placeholder="Estimate Market Value as Per Customer"
formControlName="emv_per_customer" (keypress)="keyPress($event)" required>
</mat-form-field>
<!-- <mat-form-field>
<input matInput placeholder="Value as Per Agreement"
formControlName="value_per_agreement" (keypress)="keyPress($event)" required (keyup)="inWords($event,3)">
<mat-hint align="end" *ngIf="loanDetailsForm.controls['loan_amount'].value != ''">{{"&#8377;"}} {{valAsPerAgmtInWords}} Only</mat-hint>
</mat-form-field> -->
</mat-card-content>
</mat-card>
<!-- </div> -->
<div fxLayout="row">
<div fxFlex="60" class="pb-0 text-sm-left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="loandetails_remarks" required></textarea>
</mat-form-field>
</div>
</div>
<div style="text-align: right;">
<div fxFlex="40" align="end">
<button type="submit" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button matTooltip="Submit" matTooltipPosition="above" (click)="submitLoanDetails()"><mat-icon>save</mat-icon>
</button>
</div>
</form>
</mat-card>
</div>
</mat-dialog-actions>
</form>
<notifier-container></notifier-container>

85
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.scss
View File

@ -20,3 +20,88 @@
background: #62B013;
color: white;
}
.paragraph_change {
color: #e00201 !important;
}
.mat-card-content {
background-color: white;
}
.mat-card-actions {
background-color: white;
}
mat-form-field {
margin: 0 2%;
}
$base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
$product-bg-color-hover: rgba(103, 58, 183, 0.7);
.p-list-main {
background: white;
margin: auto;
position: relative;
overflow: hidden !important;
border-radius: 10px 10px 10px 10px;
box-shadow: $base-card-box-shadow;
transform: scale(0.95);
transition: box-shadow 0.5s, transform 0.5s;
&:hover {
transform: scale(1);
box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}
.p-list {
position: relative;
.top {
height: 100%;
width: 100%;
// background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
.bottom {
width: 200%;
height: 15%;
transition: transform 0.5s;
h1 {
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.left {
height: 100%;
width: 50%;
background: #f4f4f4;
position: relative;
float: left;
.details {
padding: 5px;
float: left;
// width: calc(70% - 40px);
}
}
.right {
width: 50%;
background: #A6CDDE;
color: white;
float: right;
height: 200%;
overflow: hidden;
.details {
padding: 20px;
float: right;
width: calc(70% - 40px);
}
}
}
}
}

40
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.ts
View File

@ -31,9 +31,10 @@ import {ActivatedRoute, Router} from '@angular/router';
export class LoanDetailsComponent implements OnInit {
public loanDetailsForm: FormGroup;
private notifier: NotifierService;
@Input() pdid: number;
@Input() form_id: number;
@Input() applicant_details: any;
pdid: number;
form_id: number;
exist_loan_amt: any;
applicants: any;
productAbbr: any;
isOtherPurpose: boolean = false;
@ -52,19 +53,24 @@ export class LoanDetailsComponent implements OnInit {
valAsPerAgmtInWords : any;
ownContributionInWords : any;
topUpAmtInWords: any;
pageTitle: string ="Loan Details";
constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
private router: Router,
private _pd: PdTrigerService) {
this.notifier = notifier;
constructor(notifier: NotifierService,
private fb: FormBuilder,
private route: ActivatedRoute,
private router: Router,
private _pd: PdTrigerService,
@Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
this.applicants = this.pd_all_details.pdapplicants_detials;
this.productAbbr = this.pd_all_details.pdmaster_details.product_abbr;
this.exist_loan_amt = this.pd_all_details.pdmaster_details.loan_amount != '' ? this.pd_all_details.pdmaster_details.loan_amount :'';
this.loanAmtInWords = this._pd.convertNumberToWords(this.exist_loan_amt);
this.form_id = 10;
this.pdid= this.pd_all_details.pdmaster_details.pd_id;
this.notifier = notifier;
}
ngOnInit() {
console.log(this.applicant_details.pdapplicants_detials);
console.log(this.applicant_details);
this.applicants = this.applicant_details.pdapplicants_detials;
this.productAbbr = this.applicant_details.pdmaster_details.product_abbr;
ngOnInit() {
this.initloanDetailsForm();
this.getM_EndUseofLoad();
@ -176,10 +182,9 @@ getM_sourceofamount() {
// this._pd.getAllMasterDatas('MORTAGEPROPERTYTYPE').subscribe(
this._pd.getAllMasterDatas('MORTAGEPROPERTIES').subscribe(
data => {
console.log('sadfdfads',this.productAbbr);
// console.log('sadfdfads',this.productAbbr);
this.m_mortageTypeProperty = data.records.filter(data => data.isactive == 1);
this.m_mortageTypeProperty = data.records.filter(data => data.group == this.productAbbr);
this.m_mortageTypeProperty = data.records.filter(data => data.group_name == this.productAbbr);
},
error => {
// this.notifier.notify('warning', 'No Category Records Found.!');
@ -211,7 +216,8 @@ getM_sourceofamount() {
// ==================
public initloanDetailsForm(): void {
this.loanDetailsForm = this.fb.group({
loan_amount: [this.applicant_details.loan_amount, Validators.compose([Validators.required])],
loan_amount: [this.exist_loan_amt, Validators.compose([Validators.required])],
end_use: ['', Validators.compose([Validators.required])],
end_use_other: [''],
is_transfer: ['', Validators.compose([Validators.required])],

238
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.html
View File

@ -1,3 +1,225 @@
<form [formGroup]="otherIncomeForm" class="address">
<h2 mat-dialog-title class="paragraph_change">
<div fxFlex="70" align="left">
{{pageTitle}}
</div>
<div fxFlex="30" align="end">
<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>
<mat-dialog-content>
<mat-tab-group>
<mat-tab label="Questions">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="100">
<mat-card>
<!-- <mat-card-title></mat-card-title> -->
<mat-card-content>
<mat-form-field style="width:25% !important;">
<mat-select (selectionChange)="selectedLoanChanges($event)" placeholder="Other Income"
formControlName="other_income">
<mat-option value="Yes">Yes</mat-option>
<mat-option value="No">No</mat-option>
</mat-select>
</mat-form-field>
</mat-card-content>
</mat-card>
<mat-card *ngIf="otherIncomeForm.controls.other_income.value == 'Yes'">
<mat-card-header><p>Income Details<p></mat-card-header>
<div formArrayName="income_details">
<div *ngFor="let details of otherIncomeForm.get('income_details').controls; let i=index"
[formGroupName]="i">
<mat-card-content class="matcard">
<mat-form-field>
<mat-select placeholder="Source"
formControlName="source" required>
<mat-option value="rental_income">Rental Income</mat-option>
<mat-option value="interest_income">Interest Income</mat-option>
<mat-option value="agricultural_income">Agricultural Income</mat-option>
<mat-option value="dividend_income">Dividend Income</mat-option>
<mat-option value="others">Others</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="details.get('source').value == 'others'">
<input matInput placeholder="Specify Others Source"
formControlName="others_source">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Amount" formControlName="amount" (keypress)="keyPress($event)" required>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Frequency" formControlName="frequency" required>
<mat-option value="{{frq.frequency_id}}" *ngFor="let frq of frequencyData">{{frq.name}}</mat-option>
</mat-select>
</mat-form-field>
<!-- {{otherIncomeForm.controls.frequency.value}} -->
<mat-form-field *ngIf="details.get('frequency').value == 8">
<input matInput placeholder="Specify Others Frequency"
formControlName="others_frequency">
</mat-form-field>
<button type="button" matTooltip="Add More Income Details" class="mr-1 mb-1 hover-icon" matTooltipPosition="above" mat-raised-button mat-icon-button (click)="addIncomeDetails()"
color="primary" *ngIf="i==0">
<mat-icon>add</mat-icon>
</button>
<button type="button" matTooltip="Delete" class="mr-1 mb-1 hover-icon" matTooltipPosition="above" mat-raised-button mat-icon-button (click)="deleteIncomeDetails(i)"
*ngIf="i>0">
<mat-icon>delete</mat-icon>
</button>
</mat-card-content>
</div>
</div>
</mat-card>
</div>
</div>
</ng-template>
</mat-tab>
<mat-tab label="Docs">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions>
<div fxFlex="60" class="pb-0 text-sm-left" align="left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="otherincome_remarks" required></textarea>
</mat-form-field>
</div>
<div fxFlex="40" align="end">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="submit" matTooltip="Save" matTooltipPosition="above" (click)="submitCurrentDetails()"><mat-icon>save</mat-icon></button>
</div>
</mat-dialog-actions>
</form>
<notifier-container></notifier-container>
<!--<mat-card style="padding: 12px;">-->
<!--<form [formGroup]="otherIncomeForm" class="address">-->
<!--<mat-form-field>-->
@ -16,7 +238,7 @@
<!--[formGroupName]="i">-->
<!--<mat-card-content class="matcard">-->
<mat-card style="min-height: 550px;">
<!--<mat-card style="min-height: 550px;">
<mat-card-content>
<p>Other Income Details</p>
<form [formGroup]="otherIncomeForm" class="address">
@ -26,7 +248,7 @@
<mat-option value="Yes">Yes</mat-option>
<mat-option value="No">No</mat-option>
</mat-select>
</mat-form-field>
</mat-form-field>-->
<!--<mat-form-field>-->
<!--<input matInput placeholder="Amount" formControlName="amount">-->
@ -55,7 +277,7 @@
<!--</form>-->
<!--</mat-card>-->
<mat-card *ngIf="otherIncomeForm.controls.other_income.value == 'Yes'">
<!--<mat-card *ngIf="otherIncomeForm.controls.other_income.value == 'Yes'">
<mat-card-header>
<p>Income Details<p>
</mat-card-header>
@ -74,7 +296,7 @@
<mat-option value="agricultural_income">Agricultural Income</mat-option>
<mat-option value="dividend_income">Dividend Income</mat-option>
<mat-option value="others">Others</mat-option> -->
</mat-select>
<!-- </mat-select>
</mat-form-field>
<mat-form-field *ngIf="details.get('source').value == 5 ">
<input matInput placeholder="Specify Others Source"
@ -87,12 +309,12 @@
<mat-form-field>
<mat-select placeholder="Frequency" formControlName="frequency" required>
<mat-option value="{{frq.frequency_id}}" *ngFor="let frq of frequencyData">{{frq.name}}</mat-option>
</mat-select>
</mat-form-field>
</mat-select> --
</mat-form-field>-->
<!-- {{otherIncomeForm.controls.frequency.value}} -->
<mat-form-field *ngIf="details.get('frequency').value == 8">
<!-- <mat-form-field *ngIf="details.get('frequency').value == 8">
<input matInput placeholder="Specify Others Frequency"
formControlName="others_frequency">
</mat-form-field>
@ -122,4 +344,4 @@
</div>
</form>
</mat-card-content>
</mat-card>
</mat-card>-->

117
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.scss
View File

@ -1,18 +1,103 @@
.address {
display: flex;
padding: 0 2%;
flex-direction: column;
// .address {
// display: flex;
// padding: 0 2%;
// flex-direction: column;
// }
// .address > * {
// width: 100%;
// }
// .matcard mat-form-field {
// margin: 0 2%;
// }
// .address .button {
// float: right;
// width: 10px;
// background: #62B013;
// color: white;
// }
.paragraph_change {
color: #e00201 !important;
}
.mat-card-content {
background-color: white;
}
.mat-card-actions {
background-color: white;
}
mat-form-field {
margin: 0 2%;
}
$base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
$product-bg-color-hover: rgba(103, 58, 183, 0.7);
.p-list-main {
background: white;
margin: auto;
position: relative;
overflow: hidden !important;
border-radius: 10px 10px 10px 10px;
box-shadow: $base-card-box-shadow;
transform: scale(0.95);
transition: box-shadow 0.5s, transform 0.5s;
&:hover {
transform: scale(1);
box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}
.p-list {
position: relative;
.top {
height: 100%;
width: 100%;
// background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
.bottom {
width: 200%;
height: 15%;
transition: transform 0.5s;
h1 {
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.left {
height: 100%;
width: 50%;
background: #f4f4f4;
position: relative;
float: left;
.details {
padding: 5px;
float: left;
// width: calc(70% - 40px);
}
}
.right {
width: 50%;
background: #A6CDDE;
color: white;
float: right;
height: 200%;
overflow: hidden;
.details {
padding: 20px;
float: right;
width: calc(70% - 40px);
}
}
}
}
}
.address > * {
width: 100%;
}
.matcard mat-form-field {
margin: 0 2%;
}
.address .button {
float: right;
width: 10px;
background: #62B013;
color: white;
}

28
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.ts
View File

@ -2,7 +2,7 @@ import {
Component,
OnInit,
Inject,
Input
Input, Output
} from '@angular/core';
import {
@ -19,6 +19,7 @@ import {
MatDialogRef,
MAT_DIALOG_DATA
} from '@angular/material';
/** Service */
import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
import {ActivatedRoute, Router} from '@angular/router';
@ -28,20 +29,35 @@ import {ActivatedRoute, Router} from '@angular/router';
templateUrl: './other-income.component.html',
styleUrls: ['./other-income.component.scss']
})
export class OtherIncomeComponent implements OnInit {
@Input() pdid: number;
@Input() form_id: number;
pageTitle: string ="Other Income Details";
loadDataStatus: boolean=true;
// @Input() pdid: number;
// @Input() form_id: number;
pdid : string;
form_id:number;
public otherIncomeForm: FormGroup;
private notifier: NotifierService;
frequencyData: any = [];
sourceData : any = [];
constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
constructor(notifier: NotifierService,
private fb: FormBuilder,
private route: ActivatedRoute,
private router: Router,
private _pd: PdTrigerService) {
this.notifier = notifier;
private _pd: PdTrigerService,
@Inject(MAT_DIALOG_DATA) public pd_all_details: any)
{
this.pdid = this.pd_all_details.pdmaster_details.pd_id;
this.form_id = 9;
this.notifier = notifier;
}
ngOnInit() {
console.clear();
this.getFrequency();
this.getSourceOtherIncome();
this.initOtherincomeForm();

380
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.html
View File

@ -1,145 +1,267 @@
<mat-card style="padding: 12px;">
<p>Personal Details</p>
<form *ngIf="loadDataStatus" [formGroup]="_personalForm" (submit)="submitPersonalForm(_personalForm.value)" novalidate>
<!-- start main applicant -->
<mat-card>
<mat-card-title>Main Applicant</mat-card-title>
<mat-card-content formArrayName="main_applicant_details">
<div *ngFor="let mainDetails of _personalForm.controls.main_applicant_details['controls']; let i = index;" [formGroupName]="i">
<mat-form-field style="width: 35%">
<input matInput placeholder="Name" formControlName="name_ans" type="text" required>
</mat-form-field>
<mat-form-field style="width: 10%">
<input matInput placeholder="Age" formControlName="age_ans" type="text" required (keypress)="keyPress($event)">
<mat-error *ngIf="mainDetails['controls'].age_ans.hasError('pattern') || mainDetails['controls'].age_ans.hasError('maxlength') || mainDetails['controls'].age_ans.hasError('minlength')">Enter Valid Age. </mat-error>
</mat-form-field>
<mat-form-field style="width: 42%">
<input matInput placeholder="Entity" formControlName="entity_ans" type="text" required>
</mat-form-field>
<mat-form-field style="width: 49%">
<mat-select placeholder="Earning Status" formControlName="earning_ans" required>
<mat-option *ngFor="let earning of earningStatus" [value]="earning.earning_member_status_id" >
{{earning.earning_member_status}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field style="width: 42%">
<mat-select placeholder="Educational Qualification" formControlName="qualification_ans" required>
<mat-option *ngFor="let education of qualifications" [value]="education.qualification_id" >
{{education.qualification_name}}
</mat-option>
</mat-select>
</mat-form-field>
<form [formGroup]="_personalForm" (submit)="submitPersonalForm(_personalForm.value)" novalidate>
<h2 mat-dialog-title class="paragraph_change">
<div fxFlex="70" align="left">
{{pageTitle}}
</div>
<div fxFlex="30" align="end">
<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>
</mat-card-content>
</mat-card>
<!-- end main applicant -->
<!-- start co applicant form details -->
<mat-card>
<mat-card-title>Co Applicant</mat-card-title>
<mat-card-content formArrayName="co_applicant_details">
<mat-card *ngFor="let coDetails of _personalForm.controls.co_applicant_details['controls']; let c = index;" [formGroupName]="c">
<mat-card-content>
<mat-form-field style="width: 20%">
<!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
<input matInput placeholder="Name" formControlName="name_ans" type="text" required>
</mat-form-field>
<mat-form-field style="width: 10%">
<!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
<input matInput placeholder="Age" formControlName="age_ans" type="text" required>
<mat-error *ngIf="coDetails['controls'].age_ans.hasError('pattern') || coDetails['controls'].age_ans.hasError('maxlength') || coDetails['controls'].age_ans.hasError('minlength')">Enter Valid Age. </mat-error>
</mat-form-field>
<mat-form-field style="width: 20%">
<!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
<input matInput placeholder="Entity" formControlName="entity_ans" type="text" required>
</mat-form-field>
<mat-form-field style="width: 34%">
<!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
<mat-select placeholder="Earning Status" formControlName="earning_ans" required>
<mat-option *ngFor="let earning of earningStatus" [value]="earning.earning_member_status_id" >
{{earning.earning_member_status}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field style="width: 34%">
<!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
<mat-select placeholder="Educational Qualification" formControlName="qualification_ans" required>
<mat-option *ngFor="let education of qualifications" [value]="education.qualification_id" >
{{education.qualification_name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-dialog-content>
<mat-form-field style="width: 48%">
<!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
<mat-select placeholder="Relationship With Main Applicant" formControlName="relation_ans" required>
<mat-option *ngFor="let rel of relationShipList" [value]="rel.relationship_id" >
{{rel.name}}
</mat-option>
</mat-select>
</mat-form-field>
<button type="button" mat-raised-button mat-icon-button (click)="removeCoApplicant(c)"
matTooltip="Remove Co Applicant" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary" *ngIf="coDetails.controls.current_added_status.value==1">
<mat-icon>delete</mat-icon>
</button>
<mat-tab-group>
<mat-tab label="Questions">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="100">
<!-- start main applicant -->
<mat-card>
<mat-card-title>Main Applicant</mat-card-title>
<mat-card-content formArrayName="main_applicant_details">
<div *ngFor="let mainDetails of _personalForm.controls.main_applicant_details['controls']; let i = index;" [formGroupName]="i">
</mat-card-content>
</mat-card>
<mat-form-field style="width: 20%">
<input matInput placeholder="Name" formControlName="name_ans" type="text" required>
</mat-form-field>
<mat-form-field style="width: 5%">
<input matInput placeholder="Age" formControlName="age_ans" type="text" required (keypress)="keyPress($event)">
<mat-error *ngIf="mainDetails['controls'].age_ans.hasError('pattern') || mainDetails['controls'].age_ans.hasError('maxlength') || mainDetails['controls'].age_ans.hasError('minlength')">Enter Valid Age. </mat-error>
</mat-form-field>
<mat-form-field style="width: 15%">
<input matInput placeholder="Entity" formControlName="entity_ans" type="text" required>
</mat-form-field>
<mat-form-field style="width: 20%">
<mat-select placeholder="Earning Status" formControlName="earning_ans" required>
<mat-option *ngFor="let earning of earningStatus" [value]="earning.earning_member_status_id" >
{{earning.earning_member_status}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field style="width: 20%">
<mat-select placeholder="Educational Qualification" formControlName="qualification_ans" required>
<mat-option *ngFor="let education of qualifications" [value]="education.qualification_id" >
{{education.qualification_name}}
</mat-option>
</mat-select>
</mat-form-field>
</mat-card-content>
<mat-card-actions align="end">
<button type="button" mat-raised-button mat-icon-button (click)="addCoApplicant()"
matTooltip="Add More Co Applicant" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary">
<mat-icon>add</mat-icon>
</button>
</div>
</mat-card-actions>
</mat-card-content>
</mat-card>
<!-- end main applicant -->
</div>
</div>
<div fxLayout="row wrap">
<div fxFlex="100">
<!-- start co applicant form details -->
<mat-card>
<mat-card-title>Co Applicant</mat-card-title>
<mat-card-content formArrayName="co_applicant_details">
<mat-card *ngFor="let coDetails of _personalForm.controls.co_applicant_details['controls']; let c = index;" [formGroupName]="c">
<mat-card-content>
<mat-form-field style="width: 20%">
<!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
<input matInput placeholder="Name" formControlName="name_ans" type="text" required>
</mat-form-field>
<mat-form-field style="width: 10%">
<!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
</mat-card>
<input matInput placeholder="Age" formControlName="age_ans" type="text" required>
<mat-error *ngIf="coDetails['controls'].age_ans.hasError('pattern') || coDetails['controls'].age_ans.hasError('maxlength') || coDetails['controls'].age_ans.hasError('minlength')">Enter Valid Age. </mat-error>
</mat-form-field>
<mat-form-field style="width: 25%">
<!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
<input matInput placeholder="Entity" formControlName="entity_ans" type="text" required>
</mat-form-field>
<mat-form-field style="width: 25%">
<!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
<mat-select placeholder="Earning Status" formControlName="earning_ans" required>
<mat-option *ngFor="let earning of earningStatus" [value]="earning.earning_member_status_id" >
{{earning.earning_member_status}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field style="width: 34%">
<!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
<mat-select placeholder="Educational Qualification" formControlName="qualification_ans" required>
<mat-option *ngFor="let education of qualifications" [value]="education.qualification_id" >
{{education.qualification_name}}
</mat-option>
</mat-select>
</mat-form-field>
<!-- end co apllicant -->
<mat-form-field style="width: 40%">
<!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
<mat-select placeholder="Relationship With Main Applicant" formControlName="relation_ans" required>
<mat-option *ngFor="let rel of relationShipList" [value]="rel.relationship_id" >
{{rel.name}}
</mat-option>
</mat-select>
</mat-form-field>
<button type="button" mat-raised-button mat-icon-button (click)="removeCoApplicant(c)"
matTooltip="Remove Co Applicant" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary" *ngIf="coDetails.controls.current_added_status.value==1">
<mat-icon>delete</mat-icon>
</button>
<!-- <div fxLayout="row">
<div fxFlex="60" class="pb-0 text-sm-left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="personal_info_form_remark" required></textarea>
</mat-form-field>
</div>
</div> -->
<!-- end co applicant form details -->
<!-- </mat-card-content> -->
</mat-card-content>
</mat-card>
<mat-card-actions>
<div fxFlex="60" class="pb-0 text-sm-left" align="left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="personal_info_form_remark" required></textarea>
</mat-form-field>
</div>
<div fxFlex="40" align="end">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="submit" matTooltip="Save" matTooltipPosition="above"><mat-icon>save</mat-icon></button>
</div>
</mat-card-actions>
</form>
</mat-card>
</mat-card-content>
<mat-card-actions align="end">
<button type="button" mat-raised-button mat-icon-button (click)="addCoApplicant()"
matTooltip="Add More Co Applicant" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary">
<mat-icon>add</mat-icon>
</button>
</mat-card-actions>
</mat-card>
<!-- end co apllicant -->
</div>
</div>
</ng-template>
</mat-tab>
<mat-tab label="Docs">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions>
<div fxFlex="60" class="pb-0 text-sm-left" align="left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="personal_info_form_remark" required></textarea>
</mat-form-field>
</div>
<div fxFlex="40" align="end">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="submit" matTooltip="Save" matTooltipPosition="above"><mat-icon>save</mat-icon></button>
</div>
</mat-dialog-actions>

74
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.scss
View File

@ -1,3 +1,6 @@
.paragraph_change {
color: #e00201 !important;
}
.mat-card-content {
background-color: white;
}
@ -9,3 +12,74 @@
margin: 0 2%;
}
$base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
$product-bg-color-hover: rgba(103, 58, 183, 0.7);
.p-list-main {
background: white;
margin: auto;
position: relative;
overflow: hidden !important;
border-radius: 10px 10px 10px 10px;
box-shadow: $base-card-box-shadow;
transform: scale(0.95);
transition: box-shadow 0.5s, transform 0.5s;
&:hover {
transform: scale(1);
box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}
.p-list {
position: relative;
.top {
height: 100%;
width: 100%;
// background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
.bottom {
width: 200%;
height: 15%;
transition: transform 0.5s;
h1 {
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.left {
height: 100%;
width: 50%;
background: #f4f4f4;
position: relative;
float: left;
.details {
padding: 5px;
float: left;
// width: calc(70% - 40px);
}
}
.right {
width: 50%;
background: #A6CDDE;
color: white;
float: right;
height: 200%;
overflow: hidden;
.details {
padding: 20px;
float: right;
width: calc(70% - 40px);
}
}
}
}
}

14
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.ts
View File

@ -1,5 +1,6 @@
import { Component, OnInit , Input, Output } from '@angular/core';
import { Component, OnInit, Input, Output, Inject } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl, FormArray } from '@angular/forms';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA , DialogPosition} from '@angular/material';
import { NotifierService } from 'angular-notifier';
import { PdTrigerService } from './../../../../../pd-service/pd-triger.service';
import { Key } from 'protractor';
@ -9,8 +10,10 @@ import { Key } from 'protractor';
templateUrl: './personal-info.component.html',
styleUrls: ['./personal-info.component.scss']
})
export class PersonalInfoComponent implements OnInit {
pageTitle: string ="Personal Details";
//qualifications:any=["Graduate","Under Graduate","Post Graduate","Professional"];
//earningStatus:any=["Earning Member","House Wife","Student","Retired","Pensioner","Other Non earning member"];
loadDataStatus: boolean=true;
@ -18,8 +21,9 @@ export class PersonalInfoComponent implements OnInit {
qualifications:any=[];
relationShipList:any=[];
@Input() pdid : string;
@Input() pd_all_details:any;
// @Input() pdid : string;
// @Input() pd_all_details:any;
pdid : string;
form_id:number;
private notifier: NotifierService;
public _personalForm: FormGroup;
@ -47,7 +51,9 @@ export class PersonalInfoComponent implements OnInit {
public coApplicantDetails :any=[];
errorMessage:any;
constructor(notifier: NotifierService,private _fb: FormBuilder,private _pd: PdTrigerService) {
constructor(notifier: NotifierService,private _fb: FormBuilder,private _pd: PdTrigerService , @Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
this.pdid = this.pd_all_details.pdmaster_details.pd_id;
this.notifier = notifier;
this.form_id = 3;
}

502
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-info/rental-info.component.html
View File

@ -1,190 +1,330 @@
<mat-card style="min-height: 550px;">
<mat-card-content>
<p>Rental Information Form</p>
<form class="address" [formGroup]="rentalForm">
<mat-form-field>
<input matInput placeholder="Person Met / Shown the Property(if he is not applicant or co-applicant)" formControlName="person_met">
</mat-form-field>
<form class="address" [formGroup]="rentalForm">
<mat-form-field>
<mat-select placeholder="Property Owner" formControlName="property_own">
<mat-option value="applicant">Applicant</mat-option>
<mat-option value="co_applicant">co-applicant</mat-option>
<mat-option value="parental">Parental</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Nature of the let out property" formControlName="nature_property">
<mat-option value="residentail/commercial">Residential/commercial</mat-option>
<mat-option value="other">other</mat-option>
</mat-select>
</mat-form-field>
<div formArrayName="rental_home">
<mat-accordion
*ngFor="let item of rentalForm.controls.rental_home['controls']; let i=index"
[formGroupName]="i">
<mat-expansion-panel class="fields" [expanded]="step == i">
<mat-expansion-panel-header>
<mat-panel-title>
<h5>{{i+1}} Rental Home Details</h5>
</mat-panel-title>
<button type="button" class="mr-1 mb-1 hover-icon" matTooltip="Add More Property" matTooltipPosition="above" mat-raised-button mat-icon-button *ngIf="i==0"
color="primary" style="float: right;" (click)="addProperty($event)">
<mat-icon>add</mat-icon>
</button>
<button type="button" class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above" mat-raised-button mat-icon-button *ngIf="i>0"
style="float: right;" (click)="deleteProperty(i)">
<mat-icon>delete</mat-icon>
</button>
</mat-expansion-panel-header>
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Complete address of the property</mat-label>
<textarea matInput placeholder="Address" formControlName="complete_add"></textarea>
</mat-form-field>
<mat-form-field style="width: 100%">
<input matInput placeholder="Area of the Property(in sq yd or Sq ft)"
formControlName="area_of_property">
</mat-form-field>
<mat-form-field style="width: 100%">
<input matInput placeholder="Structure of the let out property (eg. No of floors in total,G,FF,SF etc, let out floors from them)"
formControlName="structure_property">
</mat-form-field>
<mat-form-field style="width: 100%">
<input type="number" matInput placeholder="Total rooms let out (eg single room,2 BHK, let out rooms on each floor)"
formControlName="total_room">
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Is Rent Agreement Available"
formControlName="is_rent">
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<div *ngIf="item.controls['is_rent'].value == 'yes'">
<mat-form-field>
<input matInput [matDatepicker]="picker" formControlName="date_agreement"
placeholder="Date of Agreement">
<mat-datepicker-toggle matSuffix
[for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Validity"
formControlName="date_validity">
</mat-form-field>
<mat-form-field>
<input type="number" matInput placeholder="Rent as per Agreement"
formControlName="rent_agreement">
</mat-form-field>
<mat-form-field>
<input type="number" matInput placeholder="Actual Rent"
formControlName="actual_rent">
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Photo of agreement taken ?"
formControlName="photo_areegment">
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<h2 mat-dialog-title class="paragraph_change">
<div fxFlex="70" align="left">
{{pageTitle}}
</div>
<mat-card>
<mat-card-header>
<p>How is rent received? (Is it in bank or cash, how much in which mode)</p>
</mat-card-header>
<mat-card-content>
<mat-form-field>
<input type="number" matInput placeholder="Bank"
formControlName="bank">
</mat-form-field>
<mat-form-field>
<input type="number" matInput placeholder="Cash"
formControlName="cash">
</mat-form-field>
</mat-card-content>
</mat-card>
<mat-form-field style="width: 100%">
<input matInput placeholder="Rent received from each floor and or Rooms (eg FF has 4 rooms, rent per room are Rs 2500, Rs 4000 and Rs 3200 respectively)"
formControlName="rent_each_floor">
</mat-form-field>
<mat-form-field style="width: 100%">
<input matInput placeholder="Total rent received (Total montly rental from property/ies, with break up)"
formControlName="total_rent">
</mat-form-field>
<mat-form-field style="width: 100%">
<input matInput placeholder="Property paper or other related document to prove ownership (eg. Property registry etc)"
formControlName="related_doc_owner">
</mat-form-field>
<div fxFlex="30" align="end">
<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>
<mat-card>
<mat-card-header>
<p>Details of the tenants (eg Name and Mobile No and other details)</p>
</mat-card-header>
<div formArrayName="details_tenants">
<div *ngFor="let deatil of item.controls.details_tenants['controls']; let idx=index" [formGroupName]="idx">
<mat-card-content>
</div>
</h2>
<mat-form-field>
<input matInput placeholder="Name"
formControlName="name">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Mobile No"
formControlName="mobile_no">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Tenant Seen"
formControlName="tenants_seen">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Tenant Confirmed Owner"
formControlName="tenants_con_owner">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Rent Paid"
formControlName="rent_paid">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Staying Since"
formControlName="staying_since">
</mat-form-field>
<button type="button" class="mr-1 mb-1 hover-icon" matTooltip="Add More Tenant" matTooltipPosition="above" mat-raised-button mat-icon-button *ngIf="idx==0"
color="primary" style="float: right;" (click)="addTenant(i)">
<mat-icon>add</mat-icon>
</button>
<button type="button" (click)="deleteTenant(idx, i)" matTooltip="Delete" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button *ngIf="idx>0"
<mat-dialog-content>
style="float: right;">
<mat-icon>delete</mat-icon>
</button>
</mat-card-content>
<mat-tab-group>
<mat-tab label="Questions">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="100">
<mat-form-field>
<input matInput placeholder="Person Met / Shown the Property(if he is not applicant or co-applicant)" formControlName="person_met">
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Property Owner" formControlName="property_own">
<mat-option value="applicant">Applicant</mat-option>
<mat-option value="co_applicant">co-applicant</mat-option>
<mat-option value="parental">Parental</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Nature of the let out property" formControlName="nature_property">
<mat-option value="residentail/commercial">Residential/commercial</mat-option>
<mat-option value="other">other</mat-option>
</mat-select>
</mat-form-field>
<div formArrayName="rental_home">
<mat-accordion
*ngFor="let item of rentalForm.controls.rental_home['controls']; let i=index"
[formGroupName]="i">
<mat-expansion-panel class="fields" [expanded]="step == i">
<mat-expansion-panel-header>
<mat-panel-title>
<h5>{{i+1}} Rental Home Details</h5>
</mat-panel-title>
<button type="button" class="mr-1 mb-1 hover-icon" matTooltip="Add More Property" matTooltipPosition="above" mat-raised-button mat-icon-button *ngIf="i==0"
color="primary" style="float: right;" (click)="addProperty($event)">
<mat-icon>add</mat-icon>
</button>
<button type="button" class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above" mat-raised-button mat-icon-button *ngIf="i>0"
style="float: right;" (click)="deleteProperty(i)">
<mat-icon>delete</mat-icon>
</button>
</mat-expansion-panel-header>
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Complete address of the property</mat-label>
<textarea matInput placeholder="Address" formControlName="complete_add"></textarea>
</mat-form-field>
<mat-form-field style="width: 100%">
<input matInput placeholder="Area of the Property(in sq yd or Sq ft)"
formControlName="area_of_property">
</mat-form-field>
<mat-form-field style="width: 100%">
<input matInput placeholder="Structure of the let out property (eg. No of floors in total,G,FF,SF etc, let out floors from them)"
formControlName="structure_property">
</mat-form-field>
<mat-form-field style="width: 100%">
<input type="number" matInput placeholder="Total rooms let out (eg single room,2 BHK, let out rooms on each floor)"
formControlName="total_room">
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Is Rent Agreement Available"
formControlName="is_rent">
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<div *ngIf="item.controls['is_rent'].value == 'yes'">
<mat-form-field>
<input matInput [matDatepicker]="picker" formControlName="date_agreement"
placeholder="Date of Agreement">
<mat-datepicker-toggle matSuffix
[for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Validity"
formControlName="date_validity">
</mat-form-field>
<mat-form-field>
<input type="number" matInput placeholder="Rent as per Agreement"
formControlName="rent_agreement">
</mat-form-field>
<mat-form-field>
<input type="number" matInput placeholder="Actual Rent"
formControlName="actual_rent">
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Photo of agreement taken ?"
formControlName="photo_areegment">
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
</div>
<mat-card>
<mat-card-header>
<p>How is rent received? (Is it in bank or cash, how much in which mode)</p>
</mat-card-header>
<mat-card-content>
<mat-form-field>
<input type="number" matInput placeholder="Bank"
formControlName="bank">
</mat-form-field>
<mat-form-field>
<input type="number" matInput placeholder="Cash"
formControlName="cash">
</mat-form-field>
</mat-card-content>
</mat-card>
<mat-form-field style="width: 100%">
<input matInput placeholder="Rent received from each floor and or Rooms (eg FF has 4 rooms, rent per room are Rs 2500, Rs 4000 and Rs 3200 respectively)"
formControlName="rent_each_floor">
</mat-form-field>
<mat-form-field style="width: 100%">
<input matInput placeholder="Total rent received (Total montly rental from property/ies, with break up)"
formControlName="total_rent">
</mat-form-field>
<mat-form-field style="width: 100%">
<input matInput placeholder="Property paper or other related document to prove ownership (eg. Property registry etc)"
formControlName="related_doc_owner">
</mat-form-field>
<mat-card>
<mat-card-header>
<p>Details of the tenants (eg Name and Mobile No and other details)</p>
</mat-card-header>
<div formArrayName="details_tenants">
<div *ngFor="let deatil of item.controls.details_tenants['controls']; let idx=index" [formGroupName]="idx">
<mat-card-content>
<mat-form-field>
<input matInput placeholder="Name"
formControlName="name">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Mobile No"
formControlName="mobile_no">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Tenant Seen"
formControlName="tenants_seen">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Tenant Confirmed Owner"
formControlName="tenants_con_owner">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Rent Paid"
formControlName="rent_paid">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Staying Since"
formControlName="staying_since">
</mat-form-field>
<button type="button" class="mr-1 mb-1 hover-icon" matTooltip="Add More Tenant" matTooltipPosition="above" mat-raised-button mat-icon-button *ngIf="idx==0"
color="primary" style="float: right;" (click)="addTenant(i)">
<mat-icon>add</mat-icon>
</button>
<button type="button" (click)="deleteTenant(idx, i)" matTooltip="Delete" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button *ngIf="idx>0"
style="float: right;">
<mat-icon>delete</mat-icon>
</button>
</mat-card-content>
</div>
</div>
</mat-card>
<mat-form-field>
<mat-select placeholder="Photogaraphs of the Property"
formControlName="property_photographs">
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Third party check of prevailing rent in the neighbour hood (TPC with whom, how much rent quoted)"
formControlName="third_party_check">
</mat-form-field>
</mat-expansion-panel>
</mat-accordion>
</div>
</div>
</div>
</ng-template>
</mat-tab>
<mat-tab label="Docs">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</mat-card>
<mat-form-field>
<mat-select placeholder="Photogaraphs of the Property"
formControlName="property_photographs">
<mat-option value="yes">Yes</mat-option>
<mat-option value="no">No</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Third party check of prevailing rent in the neighbour hood (TPC with whom, how much rent quoted)"
formControlName="third_party_check">
</mat-form-field>
</mat-expansion-panel>
</ng-template>
</mat-tab>
</mat-tab-group>
</mat-accordion>
</div>
<div style="text-align: right;" class="pt-1">
<button class="mr-1 mb-1 hover-icon" type="submit" mat-raised-button mat-icon-button type="submit" matTooltip="Submit" matTooltipPosition="above" (click)="rentalSubmit()"><mat-icon>save</mat-icon>
</button>
</div>
</form>
</mat-card-content>
</mat-card>
</mat-dialog-content>
<mat-dialog-actions>
<div fxFlex="60" class="pb-0 text-sm-left" align="left">
<!-- <mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="personal_info_form_remark" required></textarea>
</mat-form-field> -->
</div>
<div fxFlex="40" align="end">
<button class="mr-1 mb-1 hover-icon" type="submit" mat-raised-button mat-icon-button type="submit" matTooltip="Submit" matTooltipPosition="above" (click)="rentalSubmit()"><mat-icon>save</mat-icon>
</button>
</div>
</mat-dialog-actions>
</form>

135
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-info/rental-info.component.scss
View File

@ -1,27 +1,112 @@
.address {
display: flex;
padding: 0 2%;
flex-direction: column;
// .address {
// display: flex;
// padding: 0 2%;
// flex-direction: column;
// }
// .address > * {
// width: 100%;
// }
// .matcard mat-form-field {
// margin: 0 2%;
// width:40%;
// }
// .address .button {
// float: right;
// width: 10px;
// background: #62B013;
// color: white;
// }
// mat-form-field {
// width: 27%;
// margin: 0 2%;
// }
// .fields mat-form-field {
// width: 45%;
// margin: 0 2%;
// }
.paragraph_change {
color: #e00201 !important;
}
.mat-card-content {
background-color: white;
}
.mat-card-actions {
background-color: white;
}
mat-form-field {
margin: 0 2%;
}
$base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
$product-bg-color-hover: rgba(103, 58, 183, 0.7);
.p-list-main {
background: white;
margin: auto;
position: relative;
overflow: hidden !important;
border-radius: 10px 10px 10px 10px;
box-shadow: $base-card-box-shadow;
transform: scale(0.95);
transition: box-shadow 0.5s, transform 0.5s;
&:hover {
transform: scale(1);
box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}
.p-list {
position: relative;
.top {
height: 100%;
width: 100%;
// background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
.bottom {
width: 200%;
height: 15%;
transition: transform 0.5s;
h1 {
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.left {
height: 100%;
width: 50%;
background: #f4f4f4;
position: relative;
float: left;
.details {
padding: 5px;
float: left;
// width: calc(70% - 40px);
}
}
.right {
width: 50%;
background: #A6CDDE;
color: white;
float: right;
height: 200%;
overflow: hidden;
.details {
padding: 20px;
float: right;
width: calc(70% - 40px);
}
}
}
}
}
.address > * {
width: 100%;
}
.matcard mat-form-field {
margin: 0 2%;
width:40%;
}
.address .button {
float: right;
width: 10px;
background: #62B013;
color: white;
}
mat-form-field {
width: 27%;
margin: 0 2%;
}
.fields mat-form-field {
width: 45%;
margin: 0 2%;
}

25
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/rental-info/rental-info.component.ts
View File

@ -1,7 +1,9 @@
import {Component, OnInit, Input, Output} from '@angular/core';
import {Component, OnInit, Input, Output, Inject} from '@angular/core';
import {FormBuilder, FormGroup, Validators, FormControl, FormArray} from '@angular/forms';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA , DialogPosition} from '@angular/material';
import {NotifierService} from 'angular-notifier';
import {PdTrigerService} from './../../../../../pd-service/pd-triger.service';
import {AwsService} from '../../../../../../AwsService/aws.service';
import {Key} from 'protractor';
@Component({
@ -14,8 +16,9 @@ export class RentalInfoComponent implements OnInit {
// @Input() pdid: string;
// @Input() pd_all_details: any;
// form_id: number;
@Input() pdid: number;
@Input() form_id: number;
pageTitle: string ="Rental Information";
pdid: number;
form_id: number;
step: number;
public rentalForm: FormGroup;
@ -23,10 +26,16 @@ export class RentalInfoComponent implements OnInit {
propertyList: FormGroup;
private notifier: NotifierService;
constructor(notifier: NotifierService, private _fb: FormBuilder, private _pd: PdTrigerService) {
this.notifier = notifier;
// this.form_id = 3;
}
constructor(
notifier: NotifierService,
private _fb: FormBuilder,
private _pd: PdTrigerService,
private _aws:AwsService,
@Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
this.pdid = this.pd_all_details.pdmaster_details.pd_id;
this.notifier = notifier;
this.form_id = 17;
}
ngOnInit() {
this.step = 0;
@ -68,7 +77,7 @@ export class RentalInfoComponent implements OnInit {
rentalinfo.rental_home = result;
rentalinfo.pdid = this.pdid;
rentalinfo.formid = this.form_id;
rentalinfo.fk_createdby = this.pdid;
rentalinfo.fk_createdby = this._aws.getlocale();
this.rentalForm.setValue(rentalinfo);
} else {
control.push(this.createpropertyArray());

370
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/stock/stock.component.html
View File

@ -1,109 +1,267 @@
<mat-card style="padding: 12px;">
<p>Stock Details</p>
<form [formGroup]="stockForm" class="address">
<h2 mat-dialog-title class="paragraph_change">
<div fxFlex="70" align="left">
{{pageTitle}}
</div>
<div fxFlex="30" align="end">
<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>
<mat-dialog-content>
<mat-tab-group>
<mat-tab label="Questions">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="100">
<!-- start main applicant -->
<mat-card>
<mat-card-header>
<p>Raw Materials<p>
</mat-card-header>
<div formArrayName="raw_materials">
<div *ngFor="let details of stockForm.controls.raw_materials['controls']; let i=index"
[formGroupName]="i">
<mat-card-content class="matcard">
<mat-form-field>
<input matInput placeholder="Name" formControlName="raw_name" required>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="is the Stock is Observed ?"
formControlName="stock_observed" required>
<mat-option value="yes" >Yes</mat-option>
<mat-option value="no" >No</mat-option>
</mat-select>
</mat-form-field>
<div *ngIf="details.get('stock_observed').value == 'no'" >
<mat-form-field>
<input matInput placeholder="Estimated Quantity" formControlName="raw_quantity" required>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Unit of Mearsurement"
formControlName="raw_uom" required>
<mat-option value="{{uom.uom_id}}" *ngFor="let uom of uomData">{{uom.name}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="details.get('raw_uom').value == 61" >
<input matInput placeholder="Specify Other UOM" formControlName="other_uom" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Value" formControlName="raw_value" (keypress)="keyPress($event)" required>
</mat-form-field>
<mat-form-field style="width:76%">
<input matInput placeholder="Value of raw materials as per latest financial Statements" formControlName="rawmaterial_value" (keypress)="keyPress($event)" required>
</mat-form-field>
<mat-form-field style="width:76%">
<input matInput placeholder="Is the stock of raw materials observed ?" formControlName="is_sufficiant_raw" required>
</mat-form-field>
</div>
<button type="button" mat-raised-button mat-icon-button (click)="addRawMaterials()"
matTooltip="Add More Raw Materials" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary" *ngIf="i==0">
<mat-icon>add</mat-icon>
</button>
<button type="button" mat-raised-button mat-icon-button (click)="deleteRawMaterials(i)"
matTooltip="Delete" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" *ngIf="i>0">
<mat-icon>delete</mat-icon>
</button>
</mat-card-content>
</div>
</div>
</mat-card>
<!-- end main applicant -->
</div>
</div>
<div fxLayout="row wrap">
<div fxFlex="100">
<!-- start co applicant form details -->
<mat-card>
<mat-card-header>
<p>Finished Goods<p>
</mat-card-header>
<div formArrayName="finished_goods">
<div *ngFor="let details of stockForm.controls.finished_goods['controls']; let i=index"
[formGroupName]="i">
<mat-card-content class="matcard">
<mat-form-field>
<input matInput placeholder="Name" formControlName="goods_name" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Estimated Quantity" formControlName="goods_quantity" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Value" formControlName="goods_value" (keypress)="keyPress($event)" required>
</mat-form-field>
<mat-form-field style="width:76%">
<input matInput placeholder="Value of finished goods as per latest financial statements" formControlName="finished_goods_value" (keypress)="keyPress($event)" required>
</mat-form-field>
<mat-form-field style="width:76%">
<input matInput placeholder="Is the stock of finished goods observed ?" formControlName="is_sufficiant_goods" required>
</mat-form-field>
<button type="button" mat-raised-button mat-icon-button (click)="addGoods()"
matTooltip="Add More Finished Goods" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary" *ngIf="i==0">
<mat-icon>add</mat-icon>
</button>
<button type="button" mat-raised-button mat-icon-button (click)="deleteGoods(i)"
matTooltip="Delete" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" *ngIf="i>0">
<mat-icon>delete</mat-icon>
</button>
</mat-card-content>
</div>
</div>
</mat-card>
<!-- end co apllicant -->
</div>
</div>
</ng-template>
</mat-tab>
<mat-tab label="Docs">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions>
<div fxFlex="60" class="pb-0 text-sm-left" align="left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Please comment on the stock level observed?</mat-label>
<textarea matInput placeholder="Remarks" formControlName="stock_remarks"></textarea>
</mat-form-field>
</div>
<div fxFlex="40" align="end">
<button type="submit" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button matTooltip="Submit" matTooltipPosition="above" (click)="submitDetails()"><mat-icon>save</mat-icon>
</button>
</div>
</mat-dialog-actions>
</form>
<notifier-container></notifier-container>
<!-- <mat-card style="padding: 12px;">
<p>Stock Details</p>
<form [formGroup]="stockForm" class="address"> -->
<!-- {{uomData | json}} -->
<!-- <mat-card>
=======
<!-- {{uomData | json}} -->
<mat-card>
<mat-card-header>
<p>Raw Materials<p>
</mat-card-header>
<div formArrayName="raw_materials">
<div *ngFor="let details of stockForm.controls.raw_materials['controls']; let i=index"
[formGroupName]="i">
<mat-card-content class="matcard">
<mat-form-field>
<input matInput placeholder="Name" formControlName="raw_name" required>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="is the Stock is Observed ?"
formControlName="stock_observed" required>
<mat-option value="yes" >Yes</mat-option>
<mat-option value="no" >No</mat-option>
</mat-select>
</mat-form-field>
<div *ngIf="details.get('stock_observed').value == 'no'" >
<mat-form-field>
<input matInput placeholder="Estimated Quantity" formControlName="raw_quantity" required>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Unit of Mearsurement"
formControlName="raw_uom" required>
<mat-option value="{{uom.uom_id}}" *ngFor="let uom of uomData">{{uom.name}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="details.get('raw_uom').value == 61" >
<input matInput placeholder="Specify Other UOM" formControlName="other_uom" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Value" formControlName="raw_value" (keypress)="keyPress($event)" required>
</mat-form-field>
<mat-form-field style="width:76%">
<input matInput placeholder="Value of raw materials as per latest financial Statements" formControlName="rawmaterial_value" (keypress)="keyPress($event)" required>
</mat-form-field>
<mat-form-field style="width:76%">
<input matInput placeholder="Is the stock of raw materials observed ?" formControlName="is_sufficiant_raw" required>
</mat-form-field>
</div>
<button type="button" mat-raised-button mat-icon-button (click)="addRawMaterials()"
matTooltip="Add More Raw Materials" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary" *ngIf="i==0">
<mat-icon>add</mat-icon>
</button>
<button type="button" mat-raised-button mat-icon-button (click)="deleteRawMaterials(i)"
matTooltip="Delete" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" *ngIf="i>0">
<mat-icon>delete</mat-icon>
</button>
</mat-card-content>
</div>
</div>
</mat-card>
<mat-card>
<mat-card-header>
<p>Finished Goods<p>
</mat-card-header>
<div formArrayName="finished_goods">
<div *ngFor="let details of stockForm.controls.finished_goods['controls']; let i=index"
[formGroupName]="i">
<mat-card-content class="matcard">
<mat-form-field>
<input matInput placeholder="Name" formControlName="goods_name" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Estimated Quantity" formControlName="goods_quantity" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Value" formControlName="goods_value" (keypress)="keyPress($event)" required>
</mat-form-field>
<mat-form-field style="width:76%">
<input matInput placeholder="Value of finished goods as per latest financial statements" formControlName="finished_goods_value" (keypress)="keyPress($event)" required>
</mat-form-field>
<mat-form-field style="width:76%">
<input matInput placeholder="Is the stock of finished goods observed ?" formControlName="is_sufficiant_goods" required>
</mat-form-field>
<button type="button" mat-raised-button mat-icon-button (click)="addGoods()"
matTooltip="Add More Finished Goods" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary" *ngIf="i==0">
<mat-icon>add</mat-icon>
</button>
<button type="button" mat-raised-button mat-icon-button (click)="deleteGoods(i)"
matTooltip="Delete" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" *ngIf="i>0">
<mat-icon>delete</mat-icon>
</button>
</mat-card-content>
</div>
</div>
</mat-card>
<div fxLayout="row">
<div fxFlex="60" class="pb-0 text-sm-left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Please comment on the stock level observed?</mat-label>
<textarea matInput placeholder="Remarks" formControlName="stock_remarks"></textarea>
</mat-form-field>
</div>
</div>
<div style="text-align: right;">
<button type="submit" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button matTooltip="Submit" matTooltipPosition="above" (click)="submitDetails()"><mat-icon>save</mat-icon>
</button>
</div>
</form>
</mat-card>

117
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/stock/stock.component.scss
View File

@ -1,18 +1,103 @@
.address {
display: flex;
padding: 0 2%;
flex-direction: column;
// .address {
// display: flex;
// padding: 0 2%;
// flex-direction: column;
// }
// .address > * {
// width: 100%;
// }
// .matcard mat-form-field {
// margin: 0 2%;
// }
// .address .button {
// float: right;
// width: 10px;
// background: #62B013;
// color: white;
// }
.paragraph_change {
color: #e00201 !important;
}
.mat-card-content {
background-color: white;
}
.mat-card-actions {
background-color: white;
}
mat-form-field {
margin: 0 2%;
}
$base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
$product-bg-color-hover: rgba(103, 58, 183, 0.7);
.p-list-main {
background: white;
margin: auto;
position: relative;
overflow: hidden !important;
border-radius: 10px 10px 10px 10px;
box-shadow: $base-card-box-shadow;
transform: scale(0.95);
transition: box-shadow 0.5s, transform 0.5s;
&:hover {
transform: scale(1);
box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}
.p-list {
position: relative;
.top {
height: 100%;
width: 100%;
// background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
.bottom {
width: 200%;
height: 15%;
transition: transform 0.5s;
h1 {
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.left {
height: 100%;
width: 50%;
background: #f4f4f4;
position: relative;
float: left;
.details {
padding: 5px;
float: left;
// width: calc(70% - 40px);
}
}
.right {
width: 50%;
background: #A6CDDE;
color: white;
float: right;
height: 200%;
overflow: hidden;
.details {
padding: 20px;
float: right;
width: calc(70% - 40px);
}
}
}
}
}
.address > * {
width: 100%;
}
.matcard mat-form-field {
margin: 0 2%;
}
.address .button {
float: right;
width: 10px;
background: #62B013;
color: white;
}

13
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/stock/stock.component.ts
View File

@ -30,8 +30,11 @@ import { analyzeAndValidateNgModules } from '@angular/compiler';
styleUrls: ['./stock.component.scss']
})
export class StockComponent implements OnInit {
@Input() pdid: number;
@Input() form_id: number;
// @Input() pdid: number;
// @Input() form_id: number;
pageTitle: string ="Stock Details";
pdid: number;
form_id: number;
public stockForm: FormGroup;
private notifier: NotifierService;
public uomData : any = [];
@ -39,8 +42,10 @@ export class StockComponent implements OnInit {
constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
private router: Router,
private _pd: PdTrigerService) {
this.notifier = notifier;
private _pd: PdTrigerService,@Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
this.pdid = this.pd_all_details.pdmaster_details.pd_id;
this.form_id = 11;
this.notifier = notifier;
}
ngOnInit() {
this.initstockForm();

338
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.html
View File

@ -1,96 +1,252 @@
<!--<pre> {{ m_group | json}}</pre>-->
<mat-card style="padding: 12px;">
<p>Supplier Details</p>
<form *ngIf="apiLoadFinish" [formGroup]="_supplierQuesFrom" (submit)="onSubmit()" novalidate>
<div fxLayout="row" fxLayoutAlign="start none">
<div class="example-full-width">
<mat-form-field fxFill>
<textarea matInput placeholder="What are the main raw materials?(MEG Only)" formControlName="main_raw_materials"></textarea>
<mat-error *ngIf="submitted && f.main_raw_materials.hasError('required')" class="mat-text-warn">You must Include Raw Material Details.</mat-error>
</mat-form-field>
</div>
</div>
<div fxLayout="row" fxLayoutAlign="start none">
<div formArrayName="supplier_details" fxFill>
<div *ngFor="let sup of _supplierQuesFrom.controls.supplier_details['controls']; let i=index">
<mat-card>
<mat-card-content>
<div [formGroupName]="i">
<div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none">
<div fxFlex="30">
<mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Supplier Name" formControlName="supplier_name" required>
<!-- <mat-error *ngIf="sup.controls['supplier_name'].hasError('required') && sup.controls['supplier_name'].touched" class="mat-text-warn">Supplier Name Required.</mat-error> -->
</mat-form-field>
</div>
<div fxFlex="30">
<mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Contact Person Name" formControlName="contact_person" required>
<!-- <mat-error *ngIf="sup.controls['contact_person'].hasError('required') && sup.controls['contact_person'].touched" class="mat-text-warn">Contact Person Name Required.</mat-error> -->
</mat-form-field>
</div>
<div fxFlex="30">
<mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Contact Mobile Number" formControlName="mobile_number" (keypress)="keyPress($event)" minlength=10 maxlength=10 required>
<!-- <mat-error *ngIf="sup.controls['mobile_number'].hasError('requried') && sup.controls['mobile_number'].touched" class="mat-text-warn">Mobile Number Requried</mat-error> -->
<mat-error *ngIf="sup.controls['mobile_number'].hasError('minlength') && sup.controls['mobile_number'].touched" class="mat-text-warn">Valid Mobile Number Requried</mat-error>
<mat-error *ngIf="sup.controls['mobile_number'].hasError('maxlength') && sup.controls['mobile_number'].touched" class="mat-text-warn">Vaild Mobile Number Requried</mat-error>
<form *ngIf="apiLoadFinish" [formGroup]="_supplierQuesFrom" (submit)="onSubmit()" novalidate>
</mat-form-field>
</div>
</div>
<div fxLayout="row wrap" fxLayoutGap="14px" fxLayoutAlign="start none">
<div fxFlex="30">
<mat-form-field style="width:100%">
<mat-select (selectionChange)="selectedPM($event)" placeholder="Payment Mode" formControlName="payment_mode" required>
<mat-option *ngFor="let pm of m_paymentModeType" [value]="pm.id">{{ pm.name }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="sup.get('payment_mode').value == 1 || sup.get('payment_mode').value == 3" fxFlex="30">
<mat-form-field class="ml-xs example-full-width" >
<input matInput placeholder="% of immediate / Advance Payment Purchase to Total Purchase?" formControlName="per_of_immediate_advance_payment" type="number" min="0">
</mat-form-field>
</div>
<div *ngIf="sup.get('payment_mode').value == 2 || sup.get('payment_mode').value == 3" fxFlex="30">
<mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Credit Period" formControlName="credit_period">
</mat-form-field>
</div>
</div>
<div fxLayout="row" fxLayoutGap="14px" fxLayoutAlign="start none">
<!-- <div fxFlex="30">
<mat-form-field style="width:100%">
<mat-select (selectionChange)="selectedFreqPurchase($event)" placeholder="Frequency of Purchase" formControlName="frequency_of_purchase" required>
<mat-option *ngFor="let feq of m_freqOfPurchase" [value]="feq.frequency_id">{{ feq.name }}</mat-option>
</mat-select>
<h2 mat-dialog-title class="paragraph_change">
<div fxFlex="70" align="left">{{pageTitle}}</div>
<div fxFlex="30" align="end">
<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>
</mat-form-field>
</div>
<div *ngIf="sup.get('frequency_of_purchase').value == 8" fxFlex="30">
<mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Others Details" formControlName="freq_purchase_others_text_value">
</mat-form-field>
</div>-->
</div>
</h2>
<div fxFlex="30" style="text-align:center;">
<span *ngIf="_supplierQuesFrom.controls.supplier_details.controls.length > 1" (click)="removeLanguage(i)">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" color="primary" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
</span>
</div>
</div>
<mat-dialog-content>
<mat-tab-group>
<mat-tab label="Questions">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="100">
<mat-card>
<mat-card-content>
<mat-form-field fxFill>
<textarea matInput placeholder="What are the main raw materials?(MEG Only)" formControlName="main_raw_materials"></textarea>
<mat-error *ngIf="submitted && f.main_raw_materials.hasError('required')" class="mat-text-warn">You must Include Raw Material Details.</mat-error>
</mat-form-field>
</mat-card-content>
</mat-card>
</div>
</div>
<div fxLayout="row wrap">
<div fxFlex="100">
<mat-card>
<!-- <mat-card-title></mat-card-title> -->
<mat-card-content formArrayName="supplier_details" fxFill>
<div *ngFor="let sup of _supplierQuesFrom.controls.supplier_details['controls']; let i=index" [formGroupName]="i">
<div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none">
<div fxFlex="30">
<mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Supplier Name" formControlName="supplier_name" required>
<!-- <mat-error *ngIf="sup.controls['supplier_name'].hasError('required') && sup.controls['supplier_name'].touched" class="mat-text-warn">Supplier Name Required.</mat-error> -->
</mat-form-field>
</div>
<div fxFlex="30">
<mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Contact Person Name" formControlName="contact_person" required>
<!-- <mat-error *ngIf="sup.controls['contact_person'].hasError('required') && sup.controls['contact_person'].touched" class="mat-text-warn">Contact Person Name Required.</mat-error> -->
</mat-form-field>
</div>
<div fxFlex="30">
<mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Contact Mobile Number" formControlName="mobile_number" (keypress)="keyPress($event)" minlength=10 maxlength=10 required>
<!-- <mat-error *ngIf="sup.controls['mobile_number'].hasError('requried') && sup.controls['mobile_number'].touched" class="mat-text-warn">Mobile Number Requried</mat-error> -->
<mat-error *ngIf="sup.controls['mobile_number'].hasError('minlength') && sup.controls['mobile_number'].touched" class="mat-text-warn">Valid Mobile Number Requried</mat-error>
<mat-error *ngIf="sup.controls['mobile_number'].hasError('maxlength') && sup.controls['mobile_number'].touched" class="mat-text-warn">Vaild Mobile Number Requried</mat-error>
</mat-form-field>
</div>
</div>
<div fxLayout="row wrap" fxLayoutGap="14px" fxLayoutAlign="start none">
<div fxFlex="30">
<mat-form-field style="width:100%">
<mat-select (selectionChange)="selectedPM($event)" placeholder="Payment Mode" formControlName="payment_mode" required>
<mat-option *ngFor="let pm of m_paymentModeType" [value]="pm.id">{{ pm.name }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="sup.get('payment_mode').value == 1 || sup.get('payment_mode').value == 3" fxFlex="30">
<mat-form-field class="ml-xs example-full-width" >
<input matInput placeholder="% of immediate / Advance Payment Purchase to Total Purchase?" formControlName="per_of_immediate_advance_payment" type="number" min="0">
</mat-form-field>
</div>
<div *ngIf="sup.get('payment_mode').value == 2 || sup.get('payment_mode').value == 3" fxFlex="30">
<mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Credit Period" formControlName="credit_period">
</mat-form-field>
</div>
</div>
<div fxLayout="row" fxLayoutGap="14px" style="text-align:center;">
<!-- <div fxFlex="30">
<mat-form-field style="width:100%">
<mat-select (selectionChange)="selectedFreqPurchase($event)" placeholder="Frequency of Purchase" formControlName="frequency_of_purchase" required>
<mat-option *ngFor="let feq of m_freqOfPurchase" [value]="feq.frequency_id">{{ feq.name }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="sup.get('frequency_of_purchase').value == 8" fxFlex="30">
<mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Others Details" formControlName="freq_purchase_others_text_value">
</mat-form-field>
</div>-->
<!-- <div fxFlex="30" style="text-align:center;"> -->
<span *ngIf="_supplierQuesFrom.controls.supplier_details.controls.length > 1" (click)="removeLanguage(i)">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" color="primary" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
</span>
<!-- </div> -->
</div>
</div>
</mat-card-content>
<mat-card-actions align="end">
<!-- <span *ngIf="_supplierQuesFrom.controls.supplier_details.controls.length > 1" (click)="removeLanguage(i)">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" color="primary" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
</span> -->
</mat-card-actions>
</mat-card>
</div>
</div>
</ng-template>
</mat-tab>
<mat-tab label="Docs">
<ng-template matTabContent>
<div fxLayout="row wrap">
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
<div fxFlex="25" class="m-gap p-gap">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>Nivi SKM</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions>
<div fxFlex="60" class="pb-0 text-sm-left" align="left">
<!-- <mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="personal_info_form_remark" required></textarea>
</mat-form-field> -->
</div>
<div fxFlex="40" align="end">
</mat-card-content>
</mat-card>
</div>
</div>
</div>
<div class="row" style="text-align:right;">
<button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Supplier Details" matTooltipPosition="above"
class="mr-1 mb-1 hover-icon" (click)="addSupplierDetails($event); false"><mat-icon>add</mat-icon></button>
<!----<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" type="reset"><mat-icon>settings_backup_restore</mat-icon></button>-->
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
</div>
</form>
</mat-card>
<button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Supplier Details" matTooltipPosition="above"
class="mr-1 mb-1 hover-icon" (click)="addSupplierDetails($event); false"><mat-icon>add</mat-icon></button>
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
<!----<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" type="reset"><mat-icon>settings_backup_restore</mat-icon></button>-->
</div>
</mat-dialog-actions>
</form>
<notifier-container></notifier-container>

90
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.scss
View File

@ -1,3 +1,87 @@
.example-full-width{
width : 100%;
}
// .example-full-width{
// width : 100%;
// }
.paragraph_change {
color: #e00201 !important;
}
.mat-card-content {
background-color: white;
}
.mat-card-actions {
background-color: white;
}
mat-form-field {
margin: 0 2%;
}
$base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
$product-bg-color-hover: rgba(103, 58, 183, 0.7);
.p-list-main {
background: white;
margin: auto;
position: relative;
overflow: hidden !important;
border-radius: 10px 10px 10px 10px;
box-shadow: $base-card-box-shadow;
transform: scale(0.95);
transition: box-shadow 0.5s, transform 0.5s;
&:hover {
transform: scale(1);
box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}
.p-list {
position: relative;
.top {
height: 100%;
width: 100%;
// background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
.bottom {
width: 200%;
height: 15%;
transition: transform 0.5s;
h1 {
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.left {
height: 100%;
width: 50%;
background: #f4f4f4;
position: relative;
float: left;
.details {
padding: 5px;
float: left;
// width: calc(70% - 40px);
}
}
.right {
width: 50%;
background: #A6CDDE;
color: white;
float: right;
height: 200%;
overflow: hidden;
.details {
padding: 20px;
float: right;
width: calc(70% - 40px);
}
}
}
}
}

78
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.ts
View File

@ -3,7 +3,7 @@ import {
Component,
OnInit,
Inject,
Input
Output,Input
} from '@angular/core';
import {
@ -20,79 +20,39 @@ import {
MatDialogRef,
MAT_DIALOG_DATA
} from '@angular/material';
/** Service */
import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
@Component({
selector: 'app-supplier-info',
templateUrl: './supplier-info.component.html',
styleUrls: ['./supplier-info.component.scss']
})
export class SupplierInfoComponent implements OnInit {
@Input() pdid: number;
pageTitle: string ="Supplier Details";
//@Input() pdid: number;
pdid : string;
form_id:number;
public _supplierQuesFrom: FormGroup;
public submitted = false;
public m_paymentModeType= [];
// public m_paymentModeType= [
// {
// 'id': "1",
// 'name': 'Immediate Or Advanced Payment'
// },
// {
// 'id': "2",
// 'name': 'Credit'
// },
// {
// 'id': "3",
// 'name': 'Combination of Both'
// },
// ];
//public m_freqOfPurchase= [];
// public m_freqOfPurchase= [
// {
// 'id': "1",
// 'name': 'Daily'
// },
// {
// 'id': "2",
// 'name': 'Weekly'
// },
// {
// 'id': "3",
// 'name': 'Monthly'
// },
// {
// 'id': "4",
// 'name': 'Every 3 months'
// },
// {
// 'id': "5",
// 'name': 'Half yearly'
// },
// {
// 'id': "6",
// 'name': 'Yearly'
// },
// {
// 'id': "7",
// 'name': 'As and when required'
// },
// {
// 'id': "8",
// 'name': 'Others'
// }
// ]
public m_paymentModeType= [];
private notifier: NotifierService;
constructor(
notifier: NotifierService,
private _formBuilder: FormBuilder,
private pdTrigerService: PdTrigerService) {
this.notifier = notifier;
}
notifier: NotifierService,
private _formBuilder: FormBuilder,
private pdTrigerService: PdTrigerService,
@Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
this.pdid = this.pd_all_details.pdmaster_details.pd_id;
this.form_id = 1;
this.notifier = notifier;
}
ngOnInit() {
// this.getM_FreqOfPurchase();

519
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.html
View File

@ -1,495 +1,30 @@
<mat-card>
<mat-card-content>
<div fxLayout="row">
<!--- <button mat-raised-button mat-icon-button class="hover-icon start_close_btn" type="button" matTooltip="Close" matTooltipPosition="above"
(click)="loadPdViewCompoent()"><mat-icon>close</mat-icon></button>-->
<div fxFlex="33" class="text-xs-left">
<h4 class="mt-0">{{mainApplicantName}}</h4>
<small>{{pdMasterList.customer_segment_name}}</small>
</div>
<div fxFlex="56" class="text-xs-right">
<h4 class="mt-0">{{pdMasterList.product_name}}/{{pdMasterList.subproduct_name}}</h4>
<small>{{pdMasterList.lender_full_name}}/{{pdMasterList.lender_applicant_id}}</small>
</div>
<div fxFlex="10" style="text-align: right;" class="mb-1">
<button mat-raised-button mat-icon-button class="hover-icon " type="button" matTooltip="Close" matTooltipPosition="above"
(click)="loadPdViewCompoent()"><mat-icon>close</mat-icon></button>
</div>
</div>
</mat-card-content>
</mat-card>
<mat-card style="max-height:400px;overflow: auto;">
<mat-card class="parent_mat_card">
<mat-card-header >
<mat-card-title>
<div fxFlex="33" align="left">
<h4 class="mt-0">{{mainApplicantName}}</h4>
<small>{{pdMasterList.customer_segment_name}}</small>
</div>
<div fxFlex="66" align="end">
<h4 class="mt-0">{{pdMasterList.product_name}}/{{pdMasterList.subproduct_name}}
<button mat-raised-button mat-icon-button class="hover-icon " type="button" matTooltip="Close" matTooltipPosition="above"
(click)="loadPdViewCompoent()"><mat-icon>close</mat-icon></button>
</h4>
<small>{{pdMasterList.lender_full_name}}/{{pdMasterList.lender_applicant_id}}</small>
</div>
</mat-card-title>
</mat-card-header>
<mat-card-content>
<button matTooltip="Menu" matTooltipPosition="above" (click)="mailnav.toggle()" color="primary" fxHide="false" fxshow.gt-sm mat-icon-button mat-raised-button>
<mat-icon style="color: white;">short_text</mat-icon>
</button>
<mat-sidenav-container class="app-inner background-none shadow-none mail-db">
<mat-sidenav #mailnav [mode]="isOver() ? 'over' : 'side'" [opened]="!isOver()" class="mail-sidebar pl-xs pr-xs">
<!--{{ (currentPDStatus==pdStatusCheck.INPROGRESS)? 'COMPLETE':(currentPDStatus) }} -->
<div *ngIf="categoryList != ''">
<mat-expansion-panel *ngFor="let category of categoryList;let catIndex = index; ">
<mat-expansion-panel-header>
<mat-panel-title class="text-xs-left">
<span class="mt-0"> {{category.category_name}}</span>
</mat-panel-title>
</mat-expansion-panel-header>
<mat-list>
<mat-list-item class="custm-list-item" *ngFor="let questions of category.questions; let quesIndex=index" [ngStyle]="{'color':quesIndex === selectedQuestionIndex && catIndex === selectedCategoryIndex ? 'red' : 'black' }" (click)="OnSelectDirectQuestions(questions, catIndex,quesIndex)">
<small>{{ (questions.question.length>15)? (questions.question | slice:0:15)+'..':(questions.question) }}</small>
</mat-list-item>
</mat-list>
</mat-expansion-panel>
</div>
<mat-list *ngFor="let formButton of categoryFormButtons">
<mat-list-item class="custm-list-item" (click)="OnSelectDirectForms(formButton)" [ngStyle]="{'background-color':formButton.isAnswered == false ? '#827f7f' : '#4caf50' ,'color':'#fff'}">
<span class="mt-0">{{ (formButton.form_name.length>17)? (formButton.form_name | slice:0:17)+'..':(formButton.form_name) }}</span>
</mat-list-item>
</mat-list>
<button _ngcontent-c21="" matTooltip="Complete Question" matTooltipPosition="above" [disabled]="actualQuestions!=answeredQuestions" class="compose-btn mat-warn mat-raised-button mb-1" (click)="changePDStatus(pdStatusCheck.COMPLETED);" style="margin-top:10px;"><span>{{currentPDStatus==pdStatusCheck.INPROGRESS ? 'COMPLETE':(currentPDStatus==pdStatusCheck.QC_COMPLETED ? 'QC COMPLETED' : currentPDStatus ) }}</span></button>
<!--<mat-list>-->
<!--<mat-list-item (click)="OnSelectDirectForms(rentalDetail)" style="background-color:#e0e0e0">-->
<!--<span class="mt-0">{{rentalDetail.form_name}}</span>-->
<!--</mat-list-item>-->
<!--</mat-list>-->
</mat-sidenav>
<!--<mat-toolbar color="primary" fxHide="false" fxshow.gt-sm>
<button (click)="mailnav.toggle()" mat-icon-button>
<mat-icon style="color: white;">short_text</mat-icon>
</button>
<span class="mr-1 ml-1">Category</span>
</mat-toolbar>-->
<div class="main-content" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
<figure>
<div *ngIf="!formsCategoryEnable">
<mat-card-content style="min-height: 500px;" *ngIf="selectedCategory.length==0">
<p>No Records Found..</p>
</mat-card-content>
<!-- check type of questions -->
<ng-container [ngSwitch]="selectedCategory.fk_question_answertype">
<!-- start options type questions section -->
<ng-container *ngSwitchCase="1">
<mat-card-content>
<form [formGroup]="optionsForm" *ngIf="answerList.length>0 ; else noanswers;" style="min-height: 450px;">
<mat-card-content>
<span class="mt-0">{{optionsForm.controls.pd_question.value}}</span>
<div fxLayout="row" >
<div fxFlex="60" class="text-xs-left">
<mat-list>
<mat-radio-group formControlName="modelValue">
<mat-list-item *ngFor="let option of optionsForm.controls.items.value">
<mat-radio-button [value]="option.pd_answer_id">{{option.pd_answer}}</mat-radio-button>
</mat-list-item>
</mat-radio-group>
</mat-list>
</div>
<div fxFlex="40" class="text-xs-right" *ngIf="optionsForm.controls.documents.length>0">
<mat-card >
<mat-card-content style="display: flex;
overflow: auto;min-height: 200px; max-height: 240px;">
<div fxLayout="row wrap">
<div fxFlex="50" class="m-gap p-gap" *ngFor="let docs of optionsForm.controls.documents.value; let docIndex=index">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img [src]="docs.pd_document_url" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>{{docs.pd_document_title}}</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</mat-card-content>
<mat-card-actions>
<div fxLayout="row" >
<div fxFlex="60" class="pb-0 text-sm-left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="pd_answer_remark"></textarea>
</mat-form-field>
</div>
<!-- this section for questions type options button actions -->
<div fxFlex="40" class="text-sm-right" style="margin-top: 7%;">
<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
<mat-button-toggle value="bold" matTooltip="Save&Previous" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" (click)="saveNextPrevious(optionsForm.controls,previous)" matTooltipPosition="below"><mat-icon>skip_previous</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>chevron_left</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>chevron_right</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Save&Next" (click)="saveNextPrevious(optionsForm.controls,next)" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" matTooltipPosition="below"><mat-icon>skip_next</mat-icon></mat-button-toggle>
</mat-button-toggle-group>
</div>
<!-- end questions type options -->
</div>
</mat-card-actions>
</form>
</mat-card-content>
<ng-template #noanswers>
<mat-card-content>
<span class="mt-0">{{selectedCategory.question}}</span>
</mat-card-content>
<mat-card-actions>
<div fxLayout="row" >
<div fxFlex="100" class="pb-0 text-sm-right">
<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
<mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>chevron_left</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>chevron_right</mat-icon></mat-button-toggle>
</mat-button-toggle-group>
</div>
</div>
</mat-card-actions>
</ng-template>
</ng-container>
<!-- end options type questions section -->
<!-- start text box questions section -->
<ng-container *ngSwitchCase="2">
<form [formGroup]="textBoxForm" *ngIf="answerList.length>0 ; else noanswers;">
<mat-card-content>
<span class="mt-0">{{textBoxForm.controls.pd_question.value}}</span>
<div fxLayout="row" >
<div fxFlex="60" class="text-xs-left">
<mat-list [formArrayName]="'items'" style="padding-top:10%">
<mat-list-item *ngFor="let control of textBoxForm.controls.items.controls; let i = index;" [formGroup]="control">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Answers</mat-label>
<textarea matInput placeholder="Answers" formControlName="pd_answer"></textarea>
</mat-form-field>
</mat-list-item>
</mat-list>
</div>
<div fxFlex="40" class="text-xs-right" *ngIf="textBoxForm.controls.documents.length>0">
<mat-card >
<mat-card-content style="display: flex;
overflow: auto;min-height: 200px; max-height: 240px;">
<div fxLayout="row wrap">
<div fxFlex="50" class="m-gap p-gap" *ngFor="let docs of textBoxForm.controls.documents.value; let docIndex=index">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img [src]="docs.pd_document_url" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>{{docs.pd_document_title}}</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</mat-card-content>
<mat-card-actions>
<div fxLayout="row" >
<div fxFlex="60" class="pb-0 text-sm-left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="pd_answer_remark"></textarea>
</mat-form-field>
</div>
<!-- this section for questions type options button actions -->
<div fxFlex="40" class="text-sm-right" style="margin-top: 7%;">
<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
<mat-button-toggle value="bold" matTooltip="Save&Previous" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" (click)="saveNextPreviousText(textBoxForm.controls,previous)" matTooltipPosition="below"><mat-icon>skip_previous</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Skip&Previous" matTooltipPosition="below" (click)="skipNextPrevious(previous)"><mat-icon>chevron_left</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>chevron_right</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" matTooltip="Save&Next" (click)="saveNextPreviousText(textBoxForm.controls,next)" matTooltipPosition="below"><mat-icon>skip_next</mat-icon></mat-button-toggle>
</mat-button-toggle-group>
</div>
<!-- end questions type options -->
</div>
</mat-card-actions>
</form>
<ng-template #noanswers>
<mat-card-content>
<span class="mt-0">{{selectedCategory.question}}</span>
</mat-card-content>
<mat-card-actions>
<div fxLayout="row" >
<div fxFlex="100" class="pb-0 text-sm-right">
<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
<mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>chevron_left</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>chevron_right</mat-icon></mat-button-toggle>
</mat-button-toggle-group>
</div>
</div>
</mat-card-actions>
</ng-template>
</ng-container>
<!-- end text box questions section -->
<!-- start check box questions section -->
<ng-container *ngSwitchCase="3">
<form [formGroup]="checkBoxForm" *ngIf="answerList.length>0 ; else noanswers;">
<mat-card-content>
<span class="mt-0">{{checkBoxForm.controls.pd_question.value}}</span>
<div fxLayout="row" >
<div fxFlex="60" class="text-xs-left">
<mat-list [formArrayName]="'items'">
<mat-list-item *ngFor="let control of checkBoxForm.controls.items.controls; let i = index;" [formGroup]="control">
<small><mat-checkbox class="example-margin" formControlName="checkbox" id="{{ control.controls.pd_answer_id.value }}"> {{ control.controls.pd_answer.value }}</mat-checkbox> </small>
</mat-list-item>
</mat-list>
</div>
<div fxFlex="40" class="text-xs-right" *ngIf="checkBoxForm.controls.documents.length>0">
<mat-card >
<mat-card-content style="display: flex;
overflow: auto;min-height: 200px; max-height: 240px;">
<div fxLayout="row wrap">
<div fxFlex="50" class="m-gap p-gap" *ngFor="let docs of textBoxForm.controls.documents.value; let docIndex=index">
<div class="p-list-main mb-2">
<div class="p-list">
<div class="top"><img [src]="docs.pd_document_url" alt=""/></div>
<div class="bottom">
<div class="left">
<div class="details">
<small>{{docs.pd_document_title}}</small>
<!-- <p>{{docs.pd_document_name}}</p> -->
</div>
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</mat-card-content>
<mat-card-actions *ngIf="checkBoxForm.controls.items.length > 0">
<div fxLayout="row" >
<div fxFlex="60" class="pb-0 text-sm-left">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="pd_answer_remark"></textarea>
</mat-form-field>
</div>
<!-- this section for questions type options button actions -->
<div fxFlex="40" class="text-sm-right" style="margin-top: 7%;">
<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
<mat-button-toggle value="bold" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" matTooltip="Save&Previous" (click)="saveNextPrevious(checkBoxForm.controls,previous)" matTooltip="Save&Previous" (click)="saveNextPrevious(checkBoxForm.controls,previous)" matTooltipPosition="below"><mat-icon>skip_previous</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>chevron_left</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>chevron_right</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" matTooltip="Save&Next" (click)="saveNextPrevious(checkBoxForm.controls,next)" matTooltipPosition="below"><mat-icon>skip_next</mat-icon></mat-button-toggle>
</mat-button-toggle-group>
</div>
<!-- end questions type options -->
</div>
</mat-card-actions>
</form>
<ng-template #noanswers>
<mat-card-content>
<span class="mt-0">{{selectedCategory.question}}</span>
</mat-card-content>
<mat-card-actions>
<div fxLayout="row" >
<div fxFlex="100" class="pb-0 text-sm-right">
<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
<mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>chevron_left</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>chevron_right</mat-icon></mat-button-toggle>
</mat-button-toggle-group>
</div>
</div>
</mat-card-actions>
</ng-template>
</ng-container>
</ng-container>
</div>
<!-- end check box questions section -->
<!-- start forms based questions -->
<div *ngIf="formsCategoryEnable">
<ng-container [ngSwitch]="selectedFormsCategory.form_id">
<!-- start supplier type questions section -->
<ng-container *ngSwitchCase="1">
<app-supplier-info [pdid]="startPD"></app-supplier-info>
</ng-container>
<!-- end supplier type questions -->
<!-- start client type questions -->
<ng-container *ngSwitchCase="2">
<app-client-info [pdid]="startPD"></app-client-info>
</ng-container>
<!-- end client type questions -->
<!-- start personal type questions -->
<ng-container *ngSwitchCase="3">
<app-personal-info [pdid]="startPD" [pd_all_details]="pdFullDetails"></app-personal-info>
</ng-container>
<ng-container *ngSwitchCase="4">
<app-assets-info [pdid]="startPD"></app-assets-info>
</ng-container>
<ng-container *ngSwitchCase="5">
<app-address [pdid]="startPD"></app-address>
<!-- end personal type questions -->
</ng-container>
<ng-container *ngSwitchCase="6">
<app-family-details [pdid]="startPD"></app-family-details>
</ng-container>
<ng-container *ngSwitchCase="7">
<!--<p>Banking details</p>-->
<app-banking-details [pdid]="startPD" [pd_all_details]="pdFullDetails" ></app-banking-details>
</ng-container>
<ng-container *ngSwitchCase="8">
<app-current-loan [pdid]="startPD" [form_id]="selectedFormsCategory.form_id" [applicant_details]="pdFullDetails"></app-current-loan>
</ng-container>
<ng-container *ngSwitchCase="9">
<app-other-income [pdid]="startPD" [form_id]="selectedFormsCategory.form_id"></app-other-income>
</ng-container>
<ng-container *ngSwitchCase="10">
<app-loan-details [pdid]="startPD" [form_id]="selectedFormsCategory.form_id" [applicant_details]="pdFullDetails"></app-loan-details>
</ng-container>
<ng-container *ngSwitchCase="11">
<app-stock [pdid]="startPD" [form_id]="selectedFormsCategory.form_id"></app-stock>
</ng-container>
<ng-container *ngSwitchCase="12">
<app-employment-info [pdid]="startPD" [form_id]="selectedFormsCategory.form_id" [pd_all_details]="pdFullDetails"></app-employment-info>
</ng-container>
<ng-container *ngSwitchCase="13">
<app-business-info [pdid]="startPD" [form_id]="selectedFormsCategory.form_id" [applicant_details]="pdFullDetails"></app-business-info>
</ng-container>
<ng-container *ngSwitchCase="14">
<app-financial-info [pdid]="startPD" [form_id]="selectedFormsCategory.form_id"></app-financial-info>
</ng-container>
<ng-container *ngSwitchCase="15">
<app-lender-representative [pdid]="startPD" [form_id]="selectedFormsCategory.form_id"></app-lender-representative>
</ng-container>
<ng-container *ngSwitchCase="16">
<app-assessed-income [pdid]="startPD" [form_id]="selectedFormsCategory.form_id"></app-assessed-income>
</ng-container>
<ng-container *ngSwitchCase="17">
<app-rental-info [pdid]="startPD" [form_id]="selectedFormsCategory.form_id"></app-rental-info>
</ng-container>
</ng-container>
</div>
<!-- end form based questions -->
</figure>
<!--</ng-container>-->
<!--&lt;!&ndash; end supplier type questions &ndash;&gt;-->
<!--&lt;!&ndash; start client type questions &ndash;&gt;-->
<!--<ng-container *ngSwitchCase="2">-->
<!--<app-client-info [pdid]="startPD"></app-client-info>-->
<!--</ng-container>-->
<!--&lt;!&ndash; end client type questions &ndash;&gt;-->
<!--&lt;!&ndash; start personal type questions &ndash;&gt;-->
<!--<ng-container *ngSwitchCase="3">-->
<!--<app-personal-info [pdid]="startPD" [pd_all_details]="pdFullDetails"></app-personal-info>-->
<!--</ng-container>-->
<!--<ng-container *ngSwitchCase="4">-->
<!--<app-assets-info [pdid]="startPD"></app-assets-info>-->
<!--</ng-container>-->
<!--&lt;!&ndash; end personal type questions -->
<!--&ndash;&gt;-->
<!--</ng-container>-->
<!--</div>-->
<!-- end form based questions -->
<!--</figure>-->
</div>
</mat-sidenav-container>
<div fxLayout="row wrap" class="child_mat_card">
<mat-card fxFlex.xs="90" fxFlex.sm="45" fxFlex.md="30" fxFlex.lg="23" fxFlex.xl="23" *ngFor="let formButton of categoryFormButtons;let quesIndex=index" [ngStyle]="{'background-color':formButton.isAnswered == false ? '#827f7f' : '#4caf50' ,'color':'#fff'}" (click)="OnSelectDirectForms(formButton)">
<mat-card-header>
<mat-card-title>{{ (formButton.form_name.length>17)? (formButton.form_name | slice:0:17)+'..':(formButton.form_name) }}</mat-card-title>
<!-- <mat-card-subtitle>Karthi Kms</mat-card-subtitle> -->
</mat-card-header>
</mat-card>
</div>
</mat-card-content>
<!-- <mat-card-actions align="end">
<button _ngcontent-c21="" matTooltip="Complete Question" matTooltipPosition="above" [disabled]="actualQuestions!=answeredQuestions" class="compose-btn mat-warn mat-raised-button mb-1" (click)="changePDStatus(pdStatusCheck.COMPLETED);" style="margin-top:10px;"><span>{{currentPDStatus==pdStatusCheck.INPROGRESS ? 'COMPLETE':(currentPDStatus==pdStatusCheck.QC_COMPLETED ? 'QC COMPLETED' : currentPDStatus ) }}</span></button>
</mat-card-actions> -->
</mat-card>
<notifier-container></notifier-container>

175
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.scss
View File

@ -1,137 +1,58 @@
@import "./../../../../../assets/styles/scss/components/messages";
:host {
margin-left: -5px;
margin-right: -5px;
margin-top: -5px;
display: block;
}
:host /deep/ {
mat-sidenav {
width: 250px;
// .child_mat_card mat-card {
// margin: 2 0%;
// }
mat-card.parent_mat_card > {
mat-card-header {
display: flex;
flex-direction: column;
}
.mat-sidenav-content {
padding: 0;
}
@media (min-width: 959px) {
.mat-sidenav-side {
background-color: transparent;
box-shadow: none!important;
}
mat-card-content {
min-height:auto;
max-height:52vh;
overflow:auto;
}
// @media only screen and (max-width:319px) {
// mat-card-content {
// max-height: 350px;
// overflow: auto;
// }
// }
// @media only screen and (min-width:320px) and (max-width:767px) {
// mat-card-content {
// max-height: 350px;
// overflow: auto;
// }
// }
// @media only screen and (min-width:768px) and (max-width:1023px) {
// mat-card-content {
// max-height: 350px;
// overflow: auto;
// }
// }
// @media only screen and (min-width:1024px) and (max-width:1899px) {
// mat-card-content {
// max-height: 400px;
// overflow: auto;
// }
// }
// @media only screen and (min-width:1900px) {
// mat-card-content {
// max-height: 500px;
// overflow: auto;
// }
// }
}
.mat-expansion-panel-header-description {
color: rgba(0, 0, 0, 87);
}
.mat-card-content {
background-color: white;
}
.mat-card-actions {
background-color: white;
}
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.custm-list-item {
cursor: pointer;
}
$base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
$product-bg-color-hover: rgba(103, 58, 183, 0.7);
.p-list-main {
background: white;
margin: auto;
position: relative;
overflow: hidden !important;
border-radius: 10px 10px 10px 10px;
box-shadow: $base-card-box-shadow;
transform: scale(0.95);
transition: box-shadow 0.5s, transform 0.5s;
mat-card .child_mat_card > mat-card {
border-radius: 0px 0px 0px 15px;
box-shadow: $base-card-box-shadow;
transform: scale(0.95);
transition: box-shadow 0.5s, transform 0.5s;
&:hover {
cursor: pointer;
background-color: #e00201 !important;
transform: scale(1);
box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}
.p-list {
position: relative;
.top {
height: 100%;
width: 100%;
// background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
.bottom {
width: 200%;
height: 15%;
transition: transform 0.5s;
h1 {
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.left {
height: 100%;
width: 50%;
background: #f4f4f4;
position: relative;
float: left;
.details {
padding: 5px;
float: left;
// width: calc(70% - 40px);
}
}
.right {
width: 50%;
background: #A6CDDE;
color: white;
float: right;
height: 200%;
overflow: hidden;
.details {
padding: 20px;
float: right;
width: calc(70% - 40px);
}
}
}
}
}
mat-icon{
color: #ff3636;
}
.address {
display: flex;
padding: 0 2%;
flex-direction: column;
}
.address > * {
width: 100%;
}
.matcard mat-form-field {
margin: 0 2%;
}
.address .button {
float: right;
width: 10px;
background: #62B013;
color: white;
}

254
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.ts
View File

@ -1,10 +1,29 @@
import {Component, ViewChild, OnInit, ViewEncapsulation, OnDestroy} from '@angular/core';
import {FormBuilder, FormGroup, Validators, FormControl, FormArray, AbstractControl} from '@angular/forms';
import {ActivatedRoute, Router} from '@angular/router';
import {MatDialog } from '@angular/material';
import {NotifierService} from 'angular-notifier';
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 {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';
import {FamilyDetailsComponent} from './forms/family-details/family-details.component';
import {EmploymentInfoComponent} from './forms/employment-info/employment-info.component';
import {StockComponent} from './forms/stock/stock.component';
import {CurrentLoanComponent} from './forms/current-loan/current-loan.component';
import {FinancialInfoComponent} from './forms/financial-info/financial-info.component';
import {AssetsInfoComponent} from './forms/assets-info/assets-info.component';
import {RentalInfoComponent} from './forms/rental-info/rental-info.component';
import {AssessedIncomeComponent} from './forms/assessed-income/assessed-income.component';
import {BankingDetailsComponent} from './forms/banking-details/banking-details.component';
import {BusinessInfoComponent} from './forms/business-info/business-info.component';
import {LenderRepresentativeComponent} from './forms/lender-representative/lender-representative.component';
import {LoanDetailsComponent} from './forms/loan-details/loan-details.component';
@Component({
selector: 'app-start-pd',
templateUrl: './start-pd.component.html',
@ -177,7 +196,7 @@ pdFullDetails:any=[];
private notifier: NotifierService;
constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
constructor(notifier: NotifierService, private dialog: MatDialog, private fb: FormBuilder, private route: ActivatedRoute,
private router: Router,
private listPDComponent: ListPdComponent, private _pd: PdTrigerService,) {
this.startPD = this.route.snapshot.params['pdid'];
@ -295,9 +314,7 @@ pdFullDetails:any=[];
this.pdMasterList=data.records.pdmaster_details;
this.categoryList=data.records.question_answers;
this.categoryFormButtons = data.records.template_forms;
console.log('formButtons', this.categoryFormButtons);
let filterApplicantName= data.records.pdapplicants_detials.filter(item => item.applicant_type == 1);
console.log(filterApplicantName);
this.mainApplicantName = filterApplicantName[0].applicant_name;
this.currentPDStatus = data.records.pdmaster_details.pd_status;
@ -626,9 +643,234 @@ pdFullDetails:any=[];
// start
// direct form based questions
OnSelectDirectForms(details: any) {
this.formsCategoryEnable = true;
this.selectedFormsCategory = details;
console.log('select..', this.selectedFormsCategory);
// this.formsCategoryEnable = true;
this.selectedFormsCategory = details;
if(this.selectedFormsCategory.form_id==1){
const dialogRef = this.dialog.open(SupplierInfoComponent, {
data: this.pdFullDetails,
position: { right: '0'},
width:'80%',
disableClose: true
});
dialogRef.afterClosed()
.subscribe(dataresult => {
// this.notifier.notify('success', 'Successfully allocated.!');
this.loadTemplates(this.startPD);
});
}else
if(this.selectedFormsCategory.form_id==2){
const dialogRef = this.dialog.open(ClientInfoComponent, {
data: this.pdFullDetails,
position: { right: '0'},
width:'80%',
disableClose: true
});
dialogRef.afterClosed()
.subscribe(dataresult => {
// this.notifier.notify('success', 'Successfully allocated.!');
this.loadTemplates(this.startPD);
});
}else
if(this.selectedFormsCategory.form_id==3){
const dialogRef = this.dialog.open(PersonalInfoComponent, {
data: this.pdFullDetails,
position: { right: '0'},
width:'80%',
disableClose: true
});
dialogRef.afterClosed()
.subscribe(dataresult => {
// this.notifier.notify('success', 'Successfully allocated.!');
this.loadTemplates(this.startPD);
});
}else
if(this.selectedFormsCategory.form_id==4){
const dialogRef = this.dialog.open(AssetsInfoComponent, {
data: this.pdFullDetails,
position: { right: '0'},
width:'80%',
disableClose: true
});
dialogRef.afterClosed()
.subscribe(dataresult => {
// this.notifier.notify('success', 'Successfully allocated.!');
this.loadTemplates(this.startPD);
});
}else
if(this.selectedFormsCategory.form_id==5){
const dialogRef = this.dialog.open(AddressComponent, {
data: this.pdFullDetails,
position: { right: '0'},
width:'80%',
disableClose: true
});
dialogRef.afterClosed()
.subscribe(dataresult => {
// this.notifier.notify('success', 'Successfully allocated.!');
this.loadTemplates(this.startPD);
});
}else
if(this.selectedFormsCategory.form_id==6){
const dialogRef = this.dialog.open(FamilyDetailsComponent, {
data: this.pdFullDetails,
position: { right: '0'},
width:'80%',
disableClose: true
});
dialogRef.afterClosed()
.subscribe(dataresult => {
// this.notifier.notify('success', 'Successfully allocated.!');
this.loadTemplates(this.startPD);
});
}else
if(this.selectedFormsCategory.form_id==7){
const dialogRef = this.dialog.open(BankingDetailsComponent, {
data: this.pdFullDetails,
position: { right: '0'},
width:'80%',
disableClose: true
});
dialogRef.afterClosed()
.subscribe(dataresult => {
// this.notifier.notify('success', 'Successfully allocated.!');
this.loadTemplates(this.startPD);
});
}
else
if(this.selectedFormsCategory.form_id==8){
const dialogRef = this.dialog.open(CurrentLoanComponent, {
data: this.pdFullDetails,
position: { right: '0'},
width:'80%',
disableClose: true
});
dialogRef.afterClosed()
.subscribe(dataresult => {
// this.notifier.notify('success', 'Successfully allocated.!');
this.loadTemplates(this.startPD);
});
}
else
if(this.selectedFormsCategory.form_id==9){
const dialogRef = this.dialog.open(OtherIncomeComponent, {
data: this.pdFullDetails,
position: { right: '0'},
width:'80%',
disableClose: true
});
dialogRef.afterClosed()
.subscribe(dataresult => {
// this.notifier.notify('success', 'Successfully allocated.!');
this.loadTemplates(this.startPD);
});
}else
if(this.selectedFormsCategory.form_id==10){
const dialogRef = this.dialog.open(LoanDetailsComponent, {
data: this.pdFullDetails,
position: { right: '0'},
width:'80%',
disableClose: true
});
dialogRef.afterClosed()
.subscribe(dataresult => {
// this.notifier.notify('success', 'Successfully allocated.!');
this.loadTemplates(this.startPD);
});
}else
if(this.selectedFormsCategory.form_id==11){
const dialogRef = this.dialog.open(StockComponent, {
data: this.pdFullDetails,
position: { right: '0'},
width:'80%',
disableClose: true
});
dialogRef.afterClosed()
.subscribe(dataresult => {
// this.notifier.notify('success', 'Successfully allocated.!');
this.loadTemplates(this.startPD);
});
}else
if(this.selectedFormsCategory.form_id==12){
const dialogRef = this.dialog.open(EmploymentInfoComponent, {
data: this.pdFullDetails,
position: { right: '0'},
width:'80%',
disableClose: true
});
dialogRef.afterClosed()
.subscribe(dataresult => {
// this.notifier.notify('success', 'Successfully allocated.!');
this.loadTemplates(this.startPD);
});
}else
if(this.selectedFormsCategory.form_id==13){
const dialogRef = this.dialog.open(BusinessInfoComponent, {
data: this.pdFullDetails,
position: { right: '0'},
width:'80%',
disableClose: true
});
dialogRef.afterClosed()
.subscribe(dataresult => {
// this.notifier.notify('success', 'Successfully allocated.!');
this.loadTemplates(this.startPD);
});
}else
if(this.selectedFormsCategory.form_id==14){
const dialogRef = this.dialog.open(FinancialInfoComponent, {
data: this.pdFullDetails,
position: { right: '0'},
width:'80%',
disableClose: true
});
dialogRef.afterClosed()
.subscribe(dataresult => {
// this.notifier.notify('success', 'Successfully allocated.!');
this.loadTemplates(this.startPD);
});
}else
if(this.selectedFormsCategory.form_id==15){
const dialogRef = this.dialog.open(LenderRepresentativeComponent, {
data: this.pdFullDetails,
position: { right: '0'},
width:'80%',
disableClose: true
});
dialogRef.afterClosed()
.subscribe(dataresult => {
// this.notifier.notify('success', 'Successfully allocated.!');
this.loadTemplates(this.startPD);
});
}
else
if(this.selectedFormsCategory.form_id==16){
const dialogRef = this.dialog.open(AssessedIncomeComponent, {
data: this.pdFullDetails,
position: { right: '0'},
width:'80%',
disableClose: true
});
dialogRef.afterClosed()
.subscribe(dataresult => {
// this.notifier.notify('success', 'Successfully allocated.!');
this.loadTemplates(this.startPD);
});
}else
if(this.selectedFormsCategory.form_id==17){
const dialogRef = this.dialog.open(RentalInfoComponent, {
data: this.pdFullDetails,
position: { right: '0'},
width:'80%',
disableClose: true
});
dialogRef.afterClosed()
.subscribe(dataresult => {
// this.notifier.notify('success', 'Successfully allocated.!');
this.loadTemplates(this.startPD);
});
}
}

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

@ -175,7 +175,8 @@ const pdCustomNotifierOptions: NotifierOptions = {
// declarations: [ListPdComponent, ManagePdComponent, MapPdViewComponent, AddPdComponent, ViewPdComponent, PdAllocationComponent, SmartPdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent, StartPdComponent, InprogressPdComponent, AllPdComponent, ScheduledPdComponent, CompletedPdComponent, QcCompletedPdComponent, ClientInfoComponent, SupplierInfoComponent, PersonalInfoComponent, AssetsInfoComponent],
exports: [PdAllocationComponent, SmartPdAllocationComponent, TelePdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent, StartPdComponent, CompletedPdComponent, QcCompletedPdComponent, ClientInfoComponent, SupplierInfoComponent, PersonalInfoComponent, CurrentLoanComponent, LoanDetailsComponent, OtherIncomeComponent, AssetsInfoComponent, AddressComponent, FamilyDetailsComponent, BankingDetailsComponent, StockComponent, EmploymentInfoComponent, BusinessInfoComponent, FinancialInfoComponent, LenderRepresentativeComponent,RentalInfoComponent, AssessedIncomeComponent, AllocationViewMoreComponent],
providers: [PdTrigerService, GetGeometricLocationService],
entryComponents: [PdAllocationComponent, SmartPdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent, TelePdAllocationComponent, AllocationViewMoreComponent]
entryComponents: [PdAllocationComponent, SmartPdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent, TelePdAllocationComponent, AllocationViewMoreComponent, PersonalInfoComponent,
ClientInfoComponent, SupplierInfoComponent, CurrentLoanComponent, LoanDetailsComponent, OtherIncomeComponent, AssetsInfoComponent, AddressComponent, FamilyDetailsComponent, BankingDetailsComponent, StockComponent, EmploymentInfoComponent, BusinessInfoComponent, FinancialInfoComponent, LenderRepresentativeComponent,RentalInfoComponent, AssessedIncomeComponent],
})
export class ManagePdModule {
}