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

PD Question : ps

Browse Source
This commit is contained in:
venbatechnologies@gmail.com 2018-12-05 15:34:23 +05:30
parent 5b6c588083
commit c251e2e79b
58 changed files with 7133 additions and 2787 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,8 +7,7 @@
</div> </div>
<div fxFlex.gt-sm="25" fxFlex="100"> <div fxFlex.gt-sm="25" fxFlex="100">
<ngx-mat-drp (selectedDateRangeChanged)="updateRange($event)" (change)="onChange($event,'One')" [options]="options" #dateRangePicker></ngx-mat-drp> <ngx-mat-drp (selectedDateRangeChanged)="updateRange($event);" [options]="options" #dateRangePicker></ngx-mat-drp>
</div> </div>
<div fxFlex.gt-sm="25" fxFlex="100"> <div fxFlex.gt-sm="25" fxFlex="100">
<mat-form-field class="example-full-width"> <mat-form-field class="example-full-width">

13
ng6-seed/src/app/dashboard/dashboard.component.scss
View File

@ -2,10 +2,14 @@ $red: #f5515f;
$blue: #05abe0; $blue: #05abe0;
$grey: #343434; $grey: #343434;
$p: 12px; $p: 12px;
::ng-deep .ngx-mat-drp-date-input{text-overflow:ellipsis !important;color:#fff !important;}
mat-card-title{ mat-card-title{
background-color:#E00201 !important; background-color:#E00201 !important;
color:#fff; color:#fff;
} }
.mat-input-wrapper { .mat-input-wrapper {
background: #fff; background: #fff;
} }
@ -25,10 +29,10 @@ li
border-radius: 50%; border-radius: 50%;
} }
.ngx-mat-drp-date-input[_ngcontent-c17] { // .ngx-mat-drp-date-input[_ngcontent-c17] {
text-overflow: ellipsis; // text-overflow: ellipsis;
color: #fff; // color: #fff;
} // }
//.lengend-list { //.lengend-list {
// list-style-type: none; // list-style-type: none;
@ -58,7 +62,6 @@ li
font-size:1rems; font-size:1rems;
} }
mat-card-content{ mat-card-content{
min-height: 400px; min-height: 400px;
} }

23
ng6-seed/src/app/dashboard/dashboard.component.ts
View File

@ -48,6 +48,7 @@ export class DashboardComponent {
total2: number = 0; total2: number = 0;
total3: number = 0; total3: number = 0;
flag : number = 0; flag : number = 0;
evt:Range
// doughnutChartColors: any[] = [{ // doughnutChartColors: any[] = [{
// backgroundColor: ['#f44336', '#3f51b5', '#ffeb3b', '#4caf50', '#2196f3','#673ab7'] // backgroundColor: ['#f44336', '#3f51b5', '#ffeb3b', '#4caf50', '#2196f3','#673ab7']
@ -134,7 +135,7 @@ export class DashboardComponent {
this.options = { this.options = {
presets: this.presets, presets: this.presets,
format: 'mediumDate', format: 'mediumDate',
range: {fromDate:FirstDateForPreMonth, toDate: fromMax}, range: {fromDate: today, toDate: today},
applyLabel: "Submit", applyLabel: "Submit",
calendarOverlayConfig: { calendarOverlayConfig: {
shouldCloseOnBackdropClick: false, shouldCloseOnBackdropClick: false,
@ -150,7 +151,17 @@ export class DashboardComponent {
updateRange(range: Range){ updateRange(range: Range){
this.range = range; this.range = range;
this.onChange(this.range,1);
if(range.fromDate != range.toDate){
// console.log('if from Date',range.fromDate);
// console.log('if to date',range.toDate);
this.onChange(this.range,1);
}
else{
// console.log('else from Date',range.fromDate);
// console.log('else to date',range.toDate);
// console.log('same');
}
} }
setupPresets() { setupPresets() {
@ -507,15 +518,15 @@ doughnutOptions: any = Object.assign({
// } // }
onChange(e :any,flag: any) { onChange(e: any,flag: any) {
let fromdate; let fromdate;
let todate; let todate;
if(flag == 1){ if(flag == 1){
this.evt = e
fromdate = new Date(e.fromDate); fromdate = new Date(this.evt.fromDate);
todate = new Date(e.toDate); todate = new Date(this.evt.toDate);
} }

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

@ -1,169 +1,322 @@
<!-- <form [formGroup]="_personalForm" (submit)="submitPersonalForm(_personalForm.value)" novalidate> -->
<mat-card style="min-height: 550px;">
<mat-card-content>
<p>PD Address Details</p>
<form class="address" [formGroup]="addressForm"> <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>
<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> </div>
</mat-card> </mat-dialog-actions>
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>
</form> </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 { .paragraph_change {
display: flex; color: #e00201 !important;
padding: 0 2%; }
flex-direction: column; .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 > * { // .address {
width: 100%; // display: flex;
} // padding: 0 2%;
.matcard mat-form-field { // flex-direction: column;
margin: 0 2%; // }
width:40%;
} // .address > * {
.address .button { // width: 100%;
float: right; // }
width: 10px; // .matcard mat-form-field {
background: #62B013; // margin: 0 2%;
color: white; // 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 { import {
Component, Component,OnInit,
OnInit, Inject, Output,
Inject,
Input, ElementRef Input, ElementRef
} from '@angular/core'; } from '@angular/core';
import { import {
FormBuilder, FormBuilder, FormGroup,
FormGroup,
Validators, Validators,
FormArray, FormControl, AbstractControl, FormArray, FormControl, AbstractControl,
} from '@angular/forms'; } from '@angular/forms';
@ -28,8 +26,16 @@ import {ActivatedRoute, Router} from "@angular/router";
templateUrl: './address.component.html', templateUrl: './address.component.html',
styleUrls: ['./address.component.scss'] styleUrls: ['./address.component.scss']
}) })
export class AddressComponent implements OnInit { 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 = []; locationdata: any = [];
commentData: any = []; commentData: any = [];
@ -44,25 +50,31 @@ export class AddressComponent implements OnInit {
public currentLoanForm: FormGroup; public currentLoanForm: FormGroup;
private notifier: NotifierService; private notifier: NotifierService;
public addressForm: FormGroup; public addressForm: FormGroup;
public address: AbstractControl; public address: AbstractControl;
public addressType: AbstractControl; public addressType: AbstractControl;
public locality: AbstractControl; public locality: AbstractControl;
public pdLocation: AbstractControl; public pdLocation: AbstractControl;
public commentlocality: AbstractControl; public commentlocality: AbstractControl;
public customerBehaviour: AbstractControl; public customerBehaviour: AbstractControl;
public ownership: AbstractControl; public ownership: AbstractControl;
public other_ownership: AbstractControl;
public bussinessActivity: AbstractControl; public bussinessActivity: AbstractControl;
//constructor(notifier: NotifierService,private _fb: FormBuilder,private _pd: PdTrigerService , ) {
constructor(private el: ElementRef, notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute, constructor(private el: ElementRef, notifier: NotifierService,
private fb: FormBuilder,
private route: ActivatedRoute,
private router: Router, 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; this.notifier = notifier;
} }
ngOnInit() { ngOnInit() {
console.clear(); console.clear();
this.getMasterDetails('PDLOCATIONAPPROACH',1); this.getMasterDetails('PDLOCATIONAPPROACH',1);
this.getMasterDetails('COMMENTSONLOCALITY',2); this.getMasterDetails('COMMENTSONLOCALITY',2);
//this.getMasterDetails('CUSTOMERBEHAVIOUR',3);review doc s.no 3.e //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.locality.setValue(data.records.locality);
this.addressForm.controls.address_form_remark.setValue(data.records.address_form_remark); 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.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); this.addressForm.controls.bussiness_activity.setValue(data.records.bussiness_activity);
if(data.records.bussiness_activity == 'yes') { if(data.records.bussiness_activity == 'yes') {
this.addressForm.controls.bussiness_address_type.setValue(data.records.bussiness_address_type); 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([]), //neighbourhood: this.fb.array([]),
address_form_remark:[''], address_form_remark:[''],
address_ownership:[''], address_ownership:[''],
other_ownership:[''],
bussiness_activity:[''], bussiness_activity:[''],
bussiness_address_type:[''], bussiness_address_type:[''],
bussiness_address_type_others: [''] bussiness_address_type_others: ['']
@ -138,6 +152,7 @@ export class AddressComponent implements OnInit {
this.commentlocality = this.addressForm.controls['comment_locality']; this.commentlocality = this.addressForm.controls['comment_locality'];
//this.customerBehaviour = this.addressForm.controls['customer_behaviour']; //this.customerBehaviour = this.addressForm.controls['customer_behaviour'];
this.ownership = this.addressForm.controls['address_ownership']; this.ownership = this.addressForm.controls['address_ownership'];
this.other_ownership = this.addressForm.controls['other_ownership'];
this.bussinessActivity = this.addressForm.controls['bussiness_activity']; this.bussinessActivity = this.addressForm.controls['bussiness_activity'];
// this.bussiessAddressType = this.addressForm.controls['bussiness_address_type']; // 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.neighbourhood = this.addressForm.controls.neighbourhood.value;
records.address_form_remark = this.addressForm.controls.address_form_remark.value; records.address_form_remark = this.addressForm.controls.address_form_remark.value;
records.address_ownership = this.ownership.value; records.address_ownership = this.ownership.value;
records.other_ownership = this.other_ownership.value;
records.bussiness_activity = this.bussinessActivity.value; records.bussiness_activity = this.bussinessActivity.value;
if (this.bussinessActivity.value == 'yes') { if (this.bussinessActivity.value == 'yes') {
records.bussiness_address_type = this.addressForm.controls.bussiness_address_type.value; 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"> <form [formGroup]="_assessedIncomeFormFrom">
<!-- house hold expenses start-->
<!-- hide table based start --> <h2 mat-dialog-title class="paragraph_change">
<!-- <mat-card> <div fxFlex="70" align="left">
<mat-card-content *ngFor="let tbl of salesMonthWiseTable; let tableIndex=index"> {{pageTitle}}
<table> </div>
<caption>{{tbl.salesItem}}</caption> <div fxFlex="30" align="end">
<thead> <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>
<tr>
<th *ngFor="let tblHeader of tbl.headerElement; let tableHeaderIndex=index"> </div>
{{tblHeader.header}} </h2>
</th>
</tr> <mat-dialog-content>
</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>
</tfoot> <mat-tab-group>
</table> <mat-tab label="Questions">
</td> <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> </mat-card-subtitle>
<tr *ngFor="let parentTabFooter of tbl.parentTableFooter"> </mat-card-header>
<td colspan="parentTabFooter.cols_span_length">{{parentTabFooter.message}}</td> <mat-divider></mat-divider>
<td>{{parentTabFooter.value}}</td> <mat-card-content style="display: flex;margin-top: -20px;">
</tr> <!-- <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-content>
</mat-card> -->
<!-- hide table based end -->
<mat-card> </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"> </ng-template>
<th mat-header-cell *matHeaderCellDef>Frequency</th> </mat-expansion-panel>
<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> <mat-expansion-panel>
<tr mat-row *matRowDef="let row; columns: salesCaluatedItemColumns;"></tr> <mat-expansion-panel-header>
</table> <mat-panel-title>
</div> <small class="expan_table_header">Purchase Details</small>
</ng-template> </mat-panel-title>
</mat-expansion-panel> <mat-panel-description class="subtitle_message">
<mat-expansion-panel> {{purchaseDetails.length}} &nbsp;Items
<mat-expansion-panel-header> </mat-panel-description>
<mat-panel-title> </mat-expansion-panel-header>
<small class="expan_table_header">Sales Calculate Month Wise</small> <ng-template matExpansionPanelContent>
</mat-panel-title> <div class="example-container mat-elevation-z8">
<mat-panel-description class="subtitle_message"> <table mat-table [dataSource]="purchaseDetails">
{{salesMonthWiseExpandedItems.length}} &nbsp;Items <!-- Item Column -->
</mat-panel-description> <ng-container matColumnDef="Item">
</mat-expansion-panel-header> <th mat-header-cell *matHeaderCellDef>Item</th>
<ng-template matExpansionPanelContent> <td mat-cell *matCellDef="let purchaseItem">{{purchaseItem.purchase_item}} </td>
<!-- <mat-accordion multi="true"> </ng-container>
<mat-expansion-panel *ngFor="let expandDetails of salesMonthWiseExpandedItems"> <!-- Qty/Uom Column-->
<mat-expansion-panel-header> <ng-container matColumnDef="Qty/UOM">
<mat-panel-title> <th mat-header-cell *matHeaderCellDef>Qty/UOM</th>
<small class="expan_table_header">{{expandDetails.salesItem}}</small> <td mat-cell *matCellDef="let purchaseItem">{{purchaseItem.purchase_qty }}/{{purchaseItem.uom_name }} </td>
</mat-panel-title> </ng-container>
</mat-expansion-panel-header> <!-- Rate/Unit Column-->
<ng-template matExpansionPanelContent> <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"> <!-- Expense Value Column-->
<div fxFlex="50" > <ng-container matColumnDef="Value">
<small class="expan_footer">{{footer.month_message}}</small> <th mat-header-cell *matHeaderCellDef>Value</th>
</div> <td mat-cell *matCellDef="let businessEx"> {{businessEx.expense_value }} </td>
<div fxFlex="50" > </ng-container>
<small class="expan_footer">{{footer.year_message}}</small> <!-- Frequency Name Column -->
</div> <ng-container matColumnDef="Frequency">
</mat-action-row> <th mat-header-cell *matHeaderCellDef>Frequency</th>
</mat-expansion-panel> <td mat-cell *matCellDef="let businessEx"> {{businessEx.frequency_name}} </td>
</mat-accordion> --> </ng-container>
<mat-card *ngFor="let expandDetails of salesMonthWiseExpandedItems"> <!-- Annual Expenses Value Column-->
<mat-card-header> <ng-container matColumnDef="Annual Expenses Value">
<mat-card-title><small class="expan_table_header">{{expandDetails.salesItem}}</small></mat-card-title> <th mat-header-cell *matHeaderCellDef>Annual Expenses Value</th>
<mat-card-subtitle class="subtitle_message" *ngFor="let footer of expandDetails.footerMessage"> <td mat-cell *matCellDef="let businessEx"> {{businessEx.annual_expenses_value}} </td>
<div fxFlex="100"> </ng-container>
{{footer.month_message}} &nbsp;&nbsp;{{footer.year_message}}
</div>
</mat-card-subtitle> <tr mat-header-row *matHeaderRowDef="businessExpensesColumns; sticky: true"></tr>
</mat-card-header> <tr mat-row *matRowDef="let row; columns: businessExpensesColumns;"></tr>
<mat-divider></mat-divider> </table>
<mat-card-content style="display: flex;margin-top: -20px;"> </div>
<!-- <div fxLayout="row wrap"> </ng-template>
</div> --> </mat-expansion-panel>
<div fxFlex="50" *ngFor="let eachItem of expandDetails.expandElements" class="m-gap p-gap"> <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> <tr mat-header-row *matHeaderRowDef="houseHoldExpensesColumns; sticky: true"></tr>
<table mat-table [dataSource]="eachItem.value" class="mat-elevation-z8"> <tr mat-row *matRowDef="let row; columns: houseHoldExpensesColumns;"></tr>
<ng-container matColumnDef="Date"> </table>
<th mat-header-cell *matHeaderCellDef>Date</th> </div>
<td mat-cell *matCellDef="let itemValue">{{itemValue.sales_date | date: 'dd-MM-yyyy'}} </td> </ng-template>
<td mat-footer-cell *matFooterCellDef> Total </td> </mat-expansion-panel>
</ng-container> </mat-accordion>
<!-- 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="salesMonthItemColumns; sticky: true"></tr> </mat-card-content>
<tr mat-row *matRowDef="let row; columns: salesMonthItemColumns;"></tr> </mat-card>
<tr mat-footer-row *matFooterRowDef="salesMonthItemColumns; sticky: true"></tr>
</table>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</ng-template> </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> <div class="top"><img src="./../../../../../../../assets/images/face2.jpg" alt=""/></div>
<mat-expansion-panel-header> <div class="bottom">
<mat-panel-title> <div class="left">
<small class="expan_table_header">Purchase Details</small> <div class="details">
</mat-panel-title> <small>Nivi SKM</small>
<mat-panel-description class="subtitle_message"> <!-- <p>{{docs.pd_document_name}}</p> -->
{{purchaseDetails.length}} &nbsp;Items </div>
</mat-panel-description> <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</mat-expansion-panel-header> </div>
<ng-template matExpansionPanelContent> </div>
<div class="example-container mat-elevation-z8"> </div>
<table mat-table [dataSource]="purchaseDetails"> </div>
<!-- Item Column --> </div>
<ng-container matColumnDef="Item"> <div fxFlex="25" class="m-gap p-gap">
<th mat-header-cell *matHeaderCellDef>Item</th> <div class="p-list-main mb-2">
<td mat-cell *matCellDef="let purchaseItem">{{purchaseItem.purchase_item}} </td> <div class="p-list">
</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"> <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<th mat-header-cell *matHeaderCellDef>Frequency</th> <div class="bottom">
<td mat-cell *matCellDef="let purchaseItem"> {{purchaseItem.frequency_name}} </td> <div class="left">
</ng-container> <div class="details">
<!-- Annual Sale Value Column--> <small>Nivi SKM</small>
<ng-container matColumnDef="Annual Purchase Value"> <!-- <p>{{docs.pd_document_name}}</p> -->
<th mat-header-cell *matHeaderCellDef>Annual Purchase Value</th> </div>
<td mat-cell *matCellDef="let purchaseItem"> {{purchaseItem.annual_purchase_value}} </td> <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
</ng-container> </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> <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<tr mat-row *matRowDef="let row; columns: purchaseDetailsColumns;"></tr> <div class="bottom">
</table> <div class="left">
</div> <div class="details">
</ng-template> <small>Nivi SKM</small>
</mat-expansion-panel> <!-- <p>{{docs.pd_document_name}}</p> -->
<mat-expansion-panel> </div>
<mat-expansion-panel-header> <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
<mat-panel-title> </div>
<small class="expan_table_header">Business Expenses</small> </div>
</mat-panel-title> </div>
<mat-panel-description class="subtitle_message"> </div>
{{businessExpenses.length}} &nbsp;Items </div>
</mat-panel-description> <div fxFlex="25" class="m-gap p-gap">
</mat-expansion-panel-header> <div class="p-list-main mb-2">
<ng-template matExpansionPanelContent> <div class="p-list">
<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>
<!-- Expense Value Column--> <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<ng-container matColumnDef="Value"> <div class="bottom">
<th mat-header-cell *matHeaderCellDef>Value</th> <div class="left">
<td mat-cell *matCellDef="let businessEx"> {{businessEx.expense_value }} </td> <div class="details">
</ng-container> <small>Nivi SKM</small>
<!-- Frequency Name Column --> <!-- <p>{{docs.pd_document_name}}</p> -->
<ng-container matColumnDef="Frequency"> </div>
<th mat-header-cell *matHeaderCellDef>Frequency</th> <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
<td mat-cell *matCellDef="let businessEx"> {{businessEx.frequency_name}} </td> </div>
</ng-container> </div>
<!-- Annual Expenses Value Column--> </div>
<ng-container matColumnDef="Annual Expenses Value"> </div>
<th mat-header-cell *matHeaderCellDef>Annual Expenses Value</th> </div>
<td mat-cell *matCellDef="let businessEx"> {{businessEx.annual_expenses_value}} </td> <div fxFlex="25" class="m-gap p-gap">
</ng-container> <div class="p-list-main mb-2">
<div class="p-list">
<tr mat-header-row *matHeaderRowDef="businessExpensesColumns; sticky: true"></tr> <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<tr mat-row *matRowDef="let row; columns: businessExpensesColumns;"></tr> <div class="bottom">
</table> <div class="left">
</div> <div class="details">
</ng-template> <small>Nivi SKM</small>
</mat-expansion-panel> <!-- <p>{{docs.pd_document_name}}</p> -->
<mat-expansion-panel> </div>
<mat-expansion-panel-header> <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
<mat-panel-title> </div>
<small class="expan_table_header">House Hold Expenses</small> </div>
</mat-panel-title> </div>
<mat-panel-description class="subtitle_message"> </div>
{{houseHoldExpenses.length}} &nbsp;Items </div>
</mat-panel-description> <div fxFlex="25" class="m-gap p-gap">
</mat-expansion-panel-header> <div class="p-list-main mb-2">
<ng-template matExpansionPanelContent> <div class="p-list">
<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>
<tr mat-header-row *matHeaderRowDef="houseHoldExpensesColumns; sticky: true"></tr> <div class="top"><img src="./../../../../../../../assets/images/face1.jpg" alt=""/></div>
<tr mat-row *matRowDef="let row; columns: houseHoldExpensesColumns;"></tr> <div class="bottom">
</table> <div class="left">
</div> <div class="details">
</ng-template> <small>Nivi SKM</small>
</mat-expansion-panel> <!-- <p>{{docs.pd_document_name}}</p> -->
</mat-accordion> </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> </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; 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 { // table, th, td {
// border: 1px solid rgba(0, 0, 0, 0.12); // border: 1px solid rgba(0, 0, 0, 0.12);
// border-collapse: collapse; // 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 {Component,OnInit,Inject,Input, ViewChild } from '@angular/core';
import {FormBuilder,FormGroup,Validators,FormArray, FormControl,} from '@angular/forms'; import {FormBuilder,FormGroup,Validators,FormArray, FormControl,} from '@angular/forms';
import { NotifierService } from 'angular-notifier'; import { NotifierService } from 'angular-notifier';
import {
MatDialog,
MatDialogRef,
MAT_DIALOG_DATA
} from '@angular/material';
/** Service */ /** Service */
import { PdTrigerService } from '../../../../../pd-service/pd-triger.service'; import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
import { ActivatedRoute, Router } from "@angular/router"; import { ActivatedRoute, Router } from "@angular/router";
@ -13,8 +18,11 @@ import { ActivatedRoute, Router } from "@angular/router";
export class AssessedIncomeComponent implements OnInit { export class AssessedIncomeComponent implements OnInit {
public _assessedIncomeFormFrom: FormGroup; public _assessedIncomeFormFrom: FormGroup;
private notifier: NotifierService; private notifier: NotifierService;
@Input() pdid: number; pageTitle: string ="Assessed Income Details";
@Input() form_id: number; // @Input() pdid: number;
// @Input() form_id: number;
pdid: number;
form_id: number;
salesCaluatedItemColumns: string[] = ['Item', 'Qty/UOM','Rate/Unit','Frequency','Annual Sale Value']; salesCaluatedItemColumns: string[] = ['Item', 'Qty/UOM','Rate/Unit','Frequency','Annual Sale Value'];
public salesCaluatedItem:any= []; public salesCaluatedItem:any= [];
salesItemMonthWiseColumns: string[] = ['Item', 'Value','Frequency','Annual Expenses Value']; salesItemMonthWiseColumns: string[] = ['Item', 'Value','Frequency','Annual Expenses Value'];
@ -39,9 +47,12 @@ salesMonthWiseExpandedItems: any=[]
constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute, constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
private router: Router, 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() { 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 style="min-height: 550px;">
<mat-card-content> <mat-card-content>
<p>Assets Details</p>
<form *ngIf="apiLoadFinish && loadDetails" [formGroup]="_assetsQuesFrom" (submit)="onSubmit()" novalidate>
<div fxLayout="row" fxLayoutAlign="start none"> <div fxLayout="row" fxLayoutAlign="start none">
<div formArrayName="assets_details" fxFill> <div formArrayName="assets_details" fxFill>
<div *ngFor="let sup of _assetsQuesFrom.controls.assets_details['controls']; let i=index"> <div *ngFor="let sup of _assetsQuesFrom.controls.assets_details['controls']; let i=index">
@ -245,24 +262,146 @@
</div> </div>
</div> </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;"> <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" <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> 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="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> </div>
</form>
</mat-card-content> </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="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'] styleUrls: ['./assets-info.component.scss']
}) })
export class AssetsInfoComponent implements OnInit { export class AssetsInfoComponent implements OnInit {
pageTitle: string ="Assets Details";
@Input() pdid: number; //@Input() pdid: number;
pdid:string;
public _assetsQuesFrom: FormGroup; public _assetsQuesFrom: FormGroup;
public submitted = false; public submitted = false;
@ -163,9 +164,13 @@ public m_investmentType = [];
constructor( constructor(
notifier: NotifierService, notifier: NotifierService,
private _formBuilder: FormBuilder, private _formBuilder: FormBuilder,
private pdTrigerService: PdTrigerService) { private pdTrigerService: PdTrigerService,
this.notifier = notifier; @Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
} this.pdid = this.pd_all_details.pdmaster_details.pd_id;
this.notifier = notifier;
}
ngOnInit() { 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>--> <!--</form>-->
<!--</mat-card>--> <!--</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> <mat-card-content>
<p>Banking Information</p>
<form [formGroup]="bankingForm" class="bankForm">
<div formArrayName="itemRows" autocomplete="off"> <div formArrayName="itemRows" autocomplete="off">
<mat-accordion <mat-accordion
*ngFor="let itemrow of bankingForm.controls.itemRows['controls']; let i=index" *ngFor="let itemrow of bankingForm.controls.itemRows['controls']; let i=index"
@ -175,24 +185,139 @@
</button></div> </button></div>
</mat-accordion> </mat-accordion>
</div> </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-content>
</mat-card> </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; background: #62B013;
color: white; 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'] styleUrls: ['./banking-details.component.scss']
}) })
export class BankingDetailsComponent implements OnInit { export class BankingDetailsComponent implements OnInit {
@Input() pdid: number; pdid: number;
@Input() pd_all_details:any; pageTitle: string ="Banking Information";
public bankingForm: FormGroup; public bankingForm: FormGroup;
step: number; step: number;
private notifier: NotifierService; private notifier: NotifierService;
@ -40,22 +40,29 @@ export class BankingDetailsComponent implements OnInit {
constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute, constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
private router: Router, private router: Router,
private _pd: PdTrigerService) { private _pd: PdTrigerService,
this.notifier = notifier; @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() { ngOnInit() {
this.step = 0; this.step = 0;
this.initBankingForm(); this.initBankingForm();
this.getM_AccountType(); this.getM_AccountType();
this.getM_BTLenderList(); this.getM_BTLenderList();
this.pd_cus_segment = this.pd_all_details.pdmaster_details.customer_segment_abbr.toUpperCase(); // 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("(0,3): " + this.pd_cus_segment.substring(0,3));
// console.log(this.pd_all_details.pdmaster_details); // // console.log(this.pd_all_details.pdmaster_details);
// console.log(this.pd_cus_segment); // // console.log(this.pd_cus_segment);
this.pd_cus_segment = this.pd_cus_segment.substring(0,3); // this.pd_cus_segment = this.pd_cus_segment.substring(0,3);
this.applicants = this.pd_all_details.pdapplicants_detials; // this.applicants = this.pd_all_details.pdapplicants_detials;
let params: any = {}; let params: any = {};
params.pd_id = this.pdid; params.pd_id = this.pdid;
params.pd_form_id = '7'; 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"> <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"> <h2 mat-dialog-title class="paragraph_change">
<mat-form-field> <div fxFlex="70" align="left">{{pageTitle}}</div>
<input matInput type="number" placeholder="Business Experience in Year" formControlName="business_years" required min='0'> <div fxFlex="30" align="end">
</mat-form-field> <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>
<input matInput type="number" placeholder="Business Experience in Month" formControlName="business_month" required min='0' max='12'>
</mat-form-field>
</div> </div>
</h2>
<mat-form-field> <mat-dialog-content>
<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'"> <mat-tab-group>
<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-tab label="Questions">
<mat-select multiple placeholder="What is the peak period of business ? " <ng-template matTabContent>
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> <div fxLayout="row wrap">
</mat-form-field> <div fxFlex="100">
<mat-card style="padding: 12px;">
<!--<mat-card> <mat-form-field>
<mat-card-header> <input matInput placeholder="Name of Business / Profession" formControlName="profession_name" required>
<p>Designation </mat-form-field>
</p>
</mat-card-header> <div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
<div formArrayName="designation"> <mat-form-field>
<div *ngFor="let members of businessForm.controls.designation['controls']; let i=index" <input matInput type="number" placeholder="Business Experience in Year" formControlName="business_years" required min='0'>
[formGroupName]="i"> </mat-form-field>
<mat-card-content class="card"> <mat-form-field>
<mat-form-field> <input matInput type="number" placeholder="Business Experience in Month" formControlName="business_month" required min='0' max='12'>
<input matInput placeholder="Name" formControlName="sec_name" required> </mat-form-field>
</mat-form-field> </div>
<mat-form-field>
<input matInput placeholder="Designation" formControlName="sec_designation" required> <mat-form-field>
</mat-form-field> <mat-select placeholder="Industry"
<button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="addDesignation()" formControlName="industry" required>
matTooltip="Add More Designation" matTooltipPosition="above" color="primary" *ngIf="i==0"> <mat-option value="{{list.industry_classification_id}}" *ngFor="let list of industryData">{{list.name}}</mat-option>
<mat-icon>add</mat-icon> </mat-select>
</button> </mat-form-field>
<button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="deleteDesignation(i)" <mat-form-field>
matTooltip="Delete" matTooltipPosition="above" *ngIf="i>0"> <mat-select placeholder="Type of Activity"
<mat-icon>delete</mat-icon> formControlName="type_of_activity" requried>
</button> <mat-option value="{{type.type_of_activity_id}}" *ngFor="let type of activityData">{{type.name}}</mat-option>
</mat-card-content> </mat-select>
</div> </mat-form-field>
</div> <mat-form-field *ngIf="businessForm.controls['type_of_activity'].value == 5">
</mat-card>--> <input matInput placeholder="Specify Other Activity"
<mat-form-field> formControlName="other_activity_type">
<mat-select placeholder="Who started the business / professions" </mat-form-field>
formControlName="who_started" required> <mat-form-field>
<mat-option value="applicant">Started by Applicants</mat-option> <!-- <input matInput placeholder="Seasonality" formControlName="seasonality" required> -->
<mat-option value="family_business">Family Business</mat-option> <mat-select placeholder="Is the business Seasonal?"
<mat-option value="others">Others</mat-option> formControlName="seasonality" required>
</mat-select> <mat-option value="yes">Yes</mat-option>
</mat-form-field> <mat-option value="no">No</mat-option>
<mat-form-field *ngIf="businessForm.controls['who_started'].value == 'others'"> </mat-select>
<input matInput placeholder="Specify Other Bussiness Started" </mat-form-field>
formControlName="other_bussiness_who_started">
</mat-form-field> <mat-form-field *ngIf="businessForm.controls['seasonality'].value == 'yes'">
<mat-form-field> <input matInput placeholder="How many months in a year does the business run?" formControlName="month_of_business_run">
<mat-select placeholder="Main person running the businesss" </mat-form-field>
formControlName="main_person" required>
<!-- <mat-option value="applicants">One of the applicants</mat-option> --> <mat-form-field *ngIf="businessForm.controls['seasonality'].value == 'yes'">
<mat-option value="{{owner.pd_co_applicant_id}}" *ngFor="let owner of applicants">{{owner.applicant_name}}</mat-option> <mat-select multiple placeholder="What is the peak period of business ? "
<mat-option value="Relative">Relative of an applicant</mat-option> formControlName="peak_period_of_business" required>
<mat-option value="Others">Others</mat-option> <mat-option value="1">January</mat-option>
</mat-select> <mat-option value="2">February</mat-option>
</mat-form-field> <mat-option value="3">March</mat-option>
<mat-form-field *ngIf="businessForm.controls['main_person'].value == 'Others'"> <mat-option value="4">April</mat-option>
<input matInput placeholder="Specify other person" <mat-option value="5">May</mat-option>
formControlName="other_main_person"> <mat-option value="6">June</mat-option>
</mat-form-field> <mat-option value="7">July</mat-option>
<mat-form-field> <mat-option value="8">August</mat-option>
<mat-select multiple placeholder="Other family members invovled" <mat-option value="9">September</mat-option>
formControlName="family_members_involved" (selectionChange)="relationChanged($event)" required> <mat-option value="10">October</mat-option>
<mat-option value="{{member.relationship_id}}" *ngFor="let member of relationData">{{member.name}}</mat-option> <mat-option value="11">November</mat-option>
</mat-select> <mat-option value="12">December</mat-option>
</mat-form-field>
<mat-form-field> </mat-select>
<!-- <input matInput placeholder="Any other business before" </mat-form-field>
formControlName="before_business" required> -->
<mat-select placeholder="Were the loan applicants involved in any other business before starting this business?" <!--<mat-card>
formControlName="before_business" required> <mat-card-header>
<mat-option value="yes">Yes</mat-option> <p>Designation
<mat-option value="no">No</mat-option> </p>
</mat-select> </mat-card-header>
</mat-form-field> <div formArrayName="designation">
<mat-form-field *ngIf="businessForm.controls['before_business'].value == 'yes'"> <div *ngFor="let members of businessForm.controls.designation['controls']; let i=index"
<input matInput placeholder="Description for before starting this business" [formGroupName]="i">
formControlName="before_business_description"> <mat-card-content class="card">
</mat-form-field> <mat-form-field>
<mat-form-field> <input matInput placeholder="Name" formControlName="sec_name" required>
<input matInput placeholder="Any delays" </mat-form-field>
formControlName="any_delays" required> <mat-form-field>
</mat-form-field> <input matInput placeholder="Designation" formControlName="sec_designation" required>
<mat-card> </mat-form-field>
<mat-card-header> <button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="addDesignation()"
<p>Partners / Directors / Shareholders matTooltip="Add More Designation" matTooltipPosition="above" color="primary" *ngIf="i==0">
</p> <mat-icon>add</mat-icon>
</mat-card-header> </button>
<div formArrayName="partners"> <button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="deleteDesignation(i)"
<div *ngFor="let members of businessForm.controls.partners['controls']; let i=index" matTooltip="Delete" matTooltipPosition="above" *ngIf="i>0">
[formGroupName]="i"> <mat-icon>delete</mat-icon>
<mat-card-content class="card"> </button>
<mat-form-field> </mat-card-content>
<input matInput placeholder="Name" </div>
formControlName="partner_name" required> </div>
</mat-form-field> </mat-card>-->
<mat-form-field> <mat-form-field>
<input matInput placeholder="Share of Profit / Shareholding (%)" (keypress)="keyPress($event)" <mat-select placeholder="Who started the business / professions"
formControlName="shareholding" required> formControlName="who_started" required>
</mat-form-field> <mat-option value="applicant">Started by Applicants</mat-option>
<div> <mat-option value="family_business">Family Business</mat-option>
<label>How many years and month in this business</label> <mat-option value="others">Others</mat-option>
<br> </mat-select>
<div fxLayout="col" fxLayoutGap="2px" fxLayoutAlign="start none"> </mat-form-field>
<mat-form-field> <mat-form-field *ngIf="businessForm.controls['who_started'].value == 'others'">
<input matInput type="number" placeholder="Year" formControlName="current_business_experiance_year" required min='0'> <input matInput placeholder="Specify Other Bussiness Started"
</mat-form-field> formControlName="other_bussiness_who_started">
<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> <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>
</div> </div>
<mat-form-field> </ng-template>
<input matInput placeholder="Total Business Experience" </mat-tab>
formControlName="total_business_experiance" required>
<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> </mat-form-field>
<button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="addPartnerDetails()" </div>
matTooltip="Add More Partners / Directors / Shareholders" matTooltipPosition="above" color="primary" *ngIf="i==0"> <div fxFlex="40" align="end">
<mat-icon>add</mat-icon> <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> </button>
<button type="button" class="mr-1 mb-1 hover-icon" mat-raised-button mat-icon-button (click)="deletePartnerDetails(i)" </div>
matTooltip="Delete" matTooltipPosition="above" *ngIf="i>0"> </mat-dialog-actions>
<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>
</form> </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; background: #62B013;
color: white; 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'] styleUrls: ['./business-info.component.scss']
}) })
export class BusinessInfoComponent implements OnInit { export class BusinessInfoComponent implements OnInit {
@Input() pdid: number; pdid: number;
@Input() form_id: number; form_id: number;
@Input() applicant_details: any; pageTitle: string ="Business Details";
relationData: any = []; relationData: any = [];
industryData: any = []; industryData: any = [];
activityData: any = []; activityData: any = [];
@ -40,13 +40,20 @@ export class BusinessInfoComponent implements OnInit {
public businessForm: FormGroup; public businessForm: FormGroup;
private notifier: NotifierService; private notifier: NotifierService;
constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute, constructor(notifier: NotifierService,
private router: Router, private fb: FormBuilder,
private _pd: PdTrigerService) { private route: ActivatedRoute,
this.notifier = notifier; 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() { ngOnInit() {
this.applicants = this.applicant_details.pdapplicants_detials;
this.getRelation(); this.getRelation();
this.getIndustry(); this.getIndustry();
this.getActivity(); 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;"> <mat-card style="padding: 12px;">
<p>Client Details</p> <p>Client Details</p>
<form *ngIf="apiLoadFinish" [formGroup]="_clientQuesFrom" (submit)="onSubmit()" novalidate> <form *ngIf="apiLoadFinish" [formGroup]="_clientQuesFrom" (submit)="onSubmit()" novalidate>
@ -10,19 +251,19 @@
<div> <div>
<mat-form-field class="ml-xs example-full-width"> <mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Client Name" formControlName="client_name" required> <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> </mat-form-field>
</div> </div>
<div> <div>
<mat-form-field class="ml-xs example-full-width"> <mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Contact Person Name" formControlName="contact_person" required> <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> </mat-form-field>
</div> </div>
<div> <div>
<mat-form-field class="ml-xs example-full-width"> <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> <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('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-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> </mat-form-field>
@ -39,13 +280,13 @@
<div *ngIf="sup.get('payment_mode').value == 1 || sup.get('payment_mode').value == 3"> <div *ngIf="sup.get('payment_mode').value == 1 || sup.get('payment_mode').value == 3">
<mat-form-field class="ml-xs example-full-width"> <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"> <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> </mat-form-field>
</div> </div>
<div *ngIf="sup.get('payment_mode').value == 2 || sup.get('payment_mode').value == 3"> <div *ngIf="sup.get('payment_mode').value == 2 || sup.get('payment_mode').value == 3">
<mat-form-field class="ml-xs example-full-width"> <mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Credit Period" formControlName="credit_period"> <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> </mat-form-field>
</div> </div>
</div> </div>
@ -60,7 +301,7 @@
<div *ngIf="sup.get('frequency_of_purchase').value == 8"> <div *ngIf="sup.get('frequency_of_purchase').value == 8">
<mat-form-field class="ml-xs example-full-width"> <mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Others Details" formControlName="freq_purchase_others_text_value"> <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> </mat-form-field>
</div> </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> <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> </div>
</form> </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 { 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 _clientQuesFrom: FormGroup;
public submitted = false; public submitted = false;
@ -88,10 +95,14 @@ export class ClientInfoComponent implements OnInit {
private notifier: NotifierService; private notifier: NotifierService;
constructor( constructor(
notifier: NotifierService, notifier: NotifierService,
private _formBuilder: FormBuilder, private _formBuilder: FormBuilder,
private pdTrigerService: PdTrigerService) { private pdTrigerService: PdTrigerService,
this.notifier = notifier;} @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() { ngOnInit() {
this.getM_FreqOfPurchase(); this.getM_FreqOfPurchase();

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

@ -1,40 +1,283 @@
<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> <mat-card-content>
<p>Existing Loan Obligations</p> <p>Existing Loan Obligations</p>
<form [formGroup]="currentLoanForm" class="address"> <form [formGroup]="currentLoanForm" class="address"> -->
<!-- <div fxLayout="row"> <!-- <div fxLayout="row">
<div fxFlex="60" class="pb-0 text-sm-left"> --> <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" <mat-select (selectionChange)="selectedLoanChanges($event)" placeholder="Do you have any other existing loan"
formControlName="existing_loan" required> formControlName="existing_loan" required>
<mat-option value="Yes">Yes</mat-option> <mat-option value="Yes">Yes</mat-option>
<mat-option value="No">No</mat-option> <mat-option value="No">No</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field> -->
<!-- </div> <!-- </div>
</div> --> </div> -->
<mat-card *ngIf="currentLoanForm.controls.existing_loan.value == 'Yes'"> <!-- <mat-card *ngIf="currentLoanForm.controls.existing_loan.value == 'Yes'">
<mat-card-header> <mat-card-header>
<p>Loan Details<p> <p>Loan Details<p>
</mat-card-header> </mat-card-header>
<div formArrayName="loan_details"> <div formArrayName="loan_details">
<div *ngFor="let details of currentLoanForm.get('loan_details').controls; let i=index" <div *ngFor="let details of currentLoanForm.get('loan_details').controls; let i=index"
[formGroupName]="i"> [formGroupName]="i"> -->
<!-- {{frequencyData | json}} --> <!-- {{frequencyData | json}} -->
<mat-card-content class="matcard"> <!-- <mat-card-content class="matcard">
<mat-form-field> <mat-form-field>
<input matInput placeholder="Loan Amount" formControlName="loan_amount" (keypress)="keyPress($event)" required> <input matInput placeholder="Loan Amount" formControlName="loan_amount" (keypress)="keyPress($event)" required>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<mat-select (selectionChange)="selectedfrequency($event,i)" placeholder="Frequency" <mat-select (selectionChange)="selectedfrequency($event.value,i)" placeholder="Frequency"
formControlName="frequency" required> formControlName="frequency" required>
<mat-option *ngFor="let freq of frequencyData" value="{{freq.frequency_id}}">{{freq.name}}</mat-option> <mat-option *ngFor="let freq of frequencyData" value="{{freq.frequency_id}}">{{freq.name}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput [placeholder]="placeholderName != '' && IDXval == i ? placeholderName :'Instalment Amount' " formControlName="emi" (keypress)="keyPress($event)" required> <input matInput [placeholder]="placeholderName[i] != '' ? placeholderName[i] : 'Instalment Amount' " formControlName="emi" (keypress)="keyPress($event)" required>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput placeholder="Loan Type" formControlName="loan_type" required> <input matInput placeholder="Loan Type" formControlName="loan_type" required>
@ -55,11 +298,11 @@
</mat-form-field> </mat-form-field>
<mat-form-field *ngIf="details.get('lender').value == 3"> <mat-form-field *ngIf="details.get('lender').value == 3">
<input matInput placeholder="Specify Others Loan Taken" formControlName="others_loan_taken"> <input matInput placeholder="Specify Others Loan Taken" formControlName="others_loan_taken">
</mat-form-field> </mat-form-field> -->
<!-- <mat-form-field> <!-- <mat-form-field>
<input matInput placeholder="Lender" formControlName="lender" required> <input matInput placeholder="Lender" formControlName="lender" required>
</mat-form-field> --> </mat-form-field> -->
<mat-form-field> <!-- <mat-form-field>
<input matInput placeholder="Original Tenure in Months" formControlName="original_tenure" required> <input matInput placeholder="Original Tenure in Months" formControlName="original_tenure" required>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
@ -92,5 +335,5 @@
</form> </form>
</mat-card-content> </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 { // .address {
display: flex; // display: flex;
padding: 0 2%; // padding: 0 2%;
flex-direction: column; // flex-direction: column;
} // }
.address > * { // .address > * {
width: 100%; // 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 { .mat-card-content {
margin: 0 2%; background-color: white;
width:26%; }
} .mat-card-actions {
.address .button { background-color: white;
float: right; }
width: 10px;
background: #62B013; mat-form-field {
color: white; 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);
}
}
}
}
} }

50
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 { export class CurrentLoanComponent implements OnInit {
public currentLoanForm: FormGroup; public currentLoanForm: FormGroup;
private notifier: NotifierService; private notifier: NotifierService;
@Input() pdid: number; pageTitle: string ="Existing Loan Obligations";
@Input() form_id: number; pdid : number;
@Input() applicant_details: any; form_id: number;
applicant_details: any;
// @Input() pdid: number;
// @Input() form_id: number;
//@Input() applicant_details: any;
lenderData: any = []; lenderData: any = [];
frequencyData: any = []; frequencyData: any = [];
applicants: any; applicants: any;
placeholderName : any; placeholderName : any = [];
holder: any = 'amount';
IDXval : any; IDXval : any;
constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute, constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
private router: Router, private router: Router,
private _pd: PdTrigerService) { private _pd: PdTrigerService,
this.notifier = notifier; @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() { ngOnInit() {
this.getMasterDetails('BTLENDERLIST',1); this.getMasterDetails('BTLENDERLIST',1);
@ -54,7 +60,7 @@ export class CurrentLoanComponent implements OnInit {
let params: any = {}; let params: any = {};
params.pd_id = this.pdid; params.pd_id = this.pdid;
params.pd_form_id = this.form_id; params.pd_form_id = this.form_id;
this.applicants = this.applicant_details.pdapplicants_detials;
this._pd.retriveForm(params).subscribe(value => { this._pd.retriveForm(params).subscribe(value => {
console.log('value', value); console.log('value', value);
const control = <FormArray>this.currentLoanForm.controls['loan_details']; const control = <FormArray>this.currentLoanForm.controls['loan_details'];
@ -68,8 +74,9 @@ export class CurrentLoanComponent implements OnInit {
return value.records.loan_details[key]; return value.records.loan_details[key];
}); });
if (result.length > 0) { if (result.length > 0) {
result.forEach(val => { result.forEach((val,index) => {
control.push(this.createLoanDetail()); control.push(this.createLoanDetail());
this.selectedfrequency(val.frequency,index);
}); });
this.currentLoanForm.controls['loan_details'].setValue(result); this.currentLoanForm.controls['loan_details'].setValue(result);
} else { } else {
@ -100,21 +107,16 @@ export class CurrentLoanComponent implements OnInit {
} }
selectedfrequency(e,i){ selectedfrequency(e,i){
// console.log(+e.value);
// console.log(i);
switch(+e){
this.IDXval = i; case 1: this.placeholderName[i] = 'Weekly Instalment Amount'; break;
case 2: this.placeholderName[i] = 'Daily Instalment Amount'; break;
switch(+e.value){ case 3: this.placeholderName[i] = 'Annual Instalment Amount'; break;
case 1: this.placeholderName = 'Weekly Installment Amount'; break; case 4: this.placeholderName[i] = 'Hourly Instalment Amount'; break;
case 2: this.placeholderName = 'Daily Installment Amount'; break; case 5: this.placeholderName[i] = 'EMI Amount'; break;
case 3: this.placeholderName = 'Annual Installment Amount'; break; case 6: this.placeholderName[i] = 'Quarterly Instalment Amount'; break;
case 4: this.placeholderName = 'Hourly Installment Amount'; break; case 7: this.placeholderName[i] = 'Halfyearly Instalment Amount'; break;
case 5: this.placeholderName = 'EMI Amount'; break; default : this.placeholderName[i] = ''; break;
case 6: this.placeholderName = 'Quarterly Installment Amount'; break;
case 7: this.placeholderName = 'HalfYearly Installment Amount'; break;
default : this.placeholderName = ''; break;
} }
} }

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"> <form [formGroup]="employmentForm" class="address">
<mat-form-field> <h2 mat-dialog-title class="paragraph_change">
<input matInput placeholder="Name of Employer" formControlName="employer_name" required> <div fxFlex="70" align="left">
</mat-form-field> {{pageTitle}}
<div> </div>
<label>Since how long working with this employer?</label> <div fxFlex="30" align="end">
<br> <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" fxLayoutGap="2px" fxLayoutAlign="start none"> </div>
<mat-form-field> </h2>
<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> <mat-dialog-content>
<input matInput placeholder="Net Monthly Salary" <mat-tab-group>
formControlName="net_monthly_salary" (keypress)="keyPress($event)" required> <mat-tab label="Questions">
<!-- <input matInput placeholder="Net Take Home" <ng-template matTabContent>
formControlName="net_take_home"> --> <div fxLayout="row wrap">
</mat-form-field> <div fxFlex="100">
<mat-form-field> <mat-card>
<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-form-field>
<mat-select placeholder="Bonus Frequency" formControlName="bonus_frequency"> <input matInput placeholder="Name of Employer" formControlName="employer_name" required>
<mat-option *ngFor="let fd of frequency_data" [value]="fd.frequency_id">{{ fd.name }}</mat-option> </mat-form-field>
</mat-select> <div>
</mat-form-field> <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-form-field>
<mat-select placeholder="Type of Bonus" <input matInput placeholder="Net Monthly Salary"
formControlName="bonus_type"> formControlName="net_monthly_salary" (keypress)="keyPress($event)" required>
<mat-option value="fixed">Fixed</mat-option> <!-- <input matInput placeholder="Net Take Home"
<mat-option value="variable depending on performance">Variable depending on performance</mat-option> formControlName="net_take_home"> -->
<mat-option value="others">Others</mat-option> </mat-form-field>
</mat-select> <mat-form-field>
</mat-form-field> <input matInput placeholder="Bonus or Incentive"
<mat-form-field *ngIf="employmentForm.controls['bonus_type'].value == 'others'"> formControlName="bonus_incentive" (keypress)="keyPress($event)" required>
<input matInput placeholder="Bonus Type Others" formControlName="bonus_type_other"> </mat-form-field>
</mat-form-field>
<mat-form-field> <mat-form-field *ngIf="employmentForm.controls['bonus_incentive'].value != '' && employmentForm.controls['bonus_incentive'].value != '0' ">
<mat-select placeholder="Any Delays" <mat-select placeholder="Bonus Frequency" formControlName="bonus_frequency">
formControlName="any_delays"> <mat-option *ngFor="let fd of frequency_data" [value]="fd.frequency_id">{{ fd.name }}</mat-option>
<mat-option value="yes">Yes</mat-option> </mat-select>
<mat-option value="no">No</mat-option> </mat-form-field>
</mat-select>
<!-- <input matInput placeholder="Any Delays" <mat-form-field *ngIf="employmentForm.controls['bonus_incentive'].value != '' && employmentForm.controls['bonus_incentive'].value != '0' ">
formControlName="any_delays"> --> <mat-select placeholder="Type of Bonus"
</mat-form-field> formControlName="bonus_type">
</mat-card-content> <mat-option value="fixed">Fixed</mat-option>
</mat-card> <mat-option value="variable depending on performance">Variable depending on performance</mat-option>
<div fxLayout="row"> <mat-option value="others">Others</mat-option>
<div fxFlex="60" class="pb-0 text-sm-left"> </mat-select>
<mat-form-field appearance="outline" style="width: 100%"> </mat-form-field>
<mat-label>Remarks</mat-label> <mat-form-field *ngIf="employmentForm.controls['bonus_type'].value == 'others'">
<textarea matInput placeholder="Remarks" formControlName="employment_remarks" required></textarea> <input matInput placeholder="Bonus Type Others" formControlName="bonus_type_other">
</mat-form-field> </mat-form-field>
</div> <mat-form-field>
</div> <mat-select placeholder="Any Delays"
<div style="text-align: right;"> formControlName="any_delays">
<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> <mat-option value="yes">Yes</mat-option>
</button> <mat-option value="no">No</mat-option>
</div> </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> </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; background: #62B013;
color: white; 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'] styleUrls: ['./employment-info.component.scss']
}) })
export class EmploymentInfoComponent implements OnInit { export class EmploymentInfoComponent implements OnInit {
@Input() pdid: number;
@Input() form_id: number; pageTitle: string ="Employement Information";
@Input() pd_all_details:any; pdid: number;
form_id: number;
//pd_all_details:any;
public employmentForm: FormGroup; public employmentForm: FormGroup;
private notifier: NotifierService; private notifier: NotifierService;
@ -40,11 +42,14 @@ export class EmploymentInfoComponent implements OnInit {
constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute, constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
private router: Router, private router: Router,
private _pd: PdTrigerService) { private _pd: PdTrigerService,
this.notifier = notifier; @Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
//getAllMasterDatas(); this.pdid = this.pd_all_details.pdmaster_details.pd_id;
this.form_id = 12;
this.notifier = notifier;
}
}
ngOnInit() { ngOnInit() {
this.pd_cus_segment=this.pd_all_details.pdmaster_details.customer_segment_abbr.toUpperCase(); this.pd_cus_segment=this.pd_all_details.pdmaster_details.customer_segment_abbr.toUpperCase();
this.initemploymentForm(); 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> <mat-card-content>
<p>Family Details</p> <p>Family Details</p>
<form class="address" [formGroup]="familyForm"> <form class="address" [formGroup]="familyForm"> -->
<!-- <mat-form-field> <!-- <mat-form-field>
<mat-select placeholder="Person Met" formControlName="person" required> <mat-select placeholder="Person Met" formControlName="person" required>
<mat-option *ngFor="let personMet of personMetData" [value]="personMet.person_met_id"> <mat-option *ngFor="let personMet of personMetData" [value]="personMet.person_met_id">
@ -13,7 +321,7 @@
<mat-form-field *ngIf="person.value ==8"> <mat-form-field *ngIf="person.value ==8">
<input matInput placeholder="Enter the relationship" formControlName="personOther"> <input matInput placeholder="Enter the relationship" formControlName="personOther">
</mat-form-field> --> </mat-form-field> -->
<mat-form-field> <!-- <mat-form-field>
<input matInput placeholder="Number Of Family Members" formControlName="members" required> <input matInput placeholder="Number Of Family Members" formControlName="members" required>
</mat-form-field> </mat-form-field>
<mat-card> <mat-card>
@ -169,4 +477,4 @@
</mat-card-content> </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 { // .address {
display: flex; // display: flex;
padding: 0 2%; // padding: 0 2%;
flex-direction: column; // flex-direction: column;
} // }
.address > * { // .address > * {
width: 100%; // 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 { .mat-card-content {
margin: 0 2%; background-color: white;
width:27%; }
} .mat-card-actions {
.matcards mat-form-field { background-color: white;
margin: 0 2%; }
width:40%;
} mat-form-field {
.address .button { margin: 0 2%;
float: right; }
width: 10px; $base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
background: #62B013; $product-bg-color-hover: rgba(103, 58, 183, 0.7);
color: white; .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, Component,
OnInit, OnInit,
Inject, Inject,
Input Input, Output
} from '@angular/core'; } from '@angular/core';
import { import {
@ -29,7 +29,10 @@ import {ActivatedRoute, Router} from "@angular/router";
styleUrls: ['./family-details.component.scss'] styleUrls: ['./family-details.component.scss']
}) })
export class FamilyDetailsComponent implements OnInit { export class FamilyDetailsComponent implements OnInit {
@Input() pdid: number; //@Input() pdid: number;
pageTitle: string ="Family Details";
pdid : string;
form_id : number;
public currentLoanForm: FormGroup; public currentLoanForm: FormGroup;
private notifier: NotifierService; private notifier: NotifierService;
@ -53,8 +56,11 @@ export class FamilyDetailsComponent implements OnInit {
// nonEarnMemberArrCount :any ; // nonEarnMemberArrCount :any ;
constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute, constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
private router: Router, private router: Router,
private _pd: PdTrigerService) { private _pd: PdTrigerService,
this.notifier = notifier; @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() { ngOnInit() {
this.getMasterDetails('RELATIONSHIPS',1); 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> <p>Financial Information</p>
<form [formGroup]="financialForm" class="address"> <form [formGroup]="financialForm" class="address">
<mat-card> <mat-card>
@ -66,7 +307,7 @@
<!--<mat-form-field> <!--<mat-form-field>
<input matInput placeholder="Reason For Major Difference" formControlName="estimate_reason" required> <input matInput placeholder="Reason For Major Difference" formControlName="estimate_reason" required>
</mat-form-field>--> </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"> matTooltip="Add More Estimated Value" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary" *ngIf="i==0">
<mat-icon>add</mat-icon> <mat-icon>add</mat-icon>
</button> </button>
@ -91,4 +332,4 @@
</button> </button>
</div> </div>
</form> </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 { // .address {
display: flex; // display: flex;
padding: 0 2%; // padding: 0 2%;
flex-direction: column; // 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'] styleUrls: ['./financial-info.component.scss']
}) })
export class FinancialInfoComponent implements OnInit { export class FinancialInfoComponent implements OnInit {
@Input() pdid: number; pageTitle: string ="Financial Information";
@Input() form_id: number; pdid: string;
form_id: number;
public financialForm: FormGroup; public financialForm: FormGroup;
private notifier: NotifierService; private notifier: NotifierService;
marginVal: any = [] ; marginVal: any = [] ;
setmargin: AbstractControl; setmargin: AbstractControl;
constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute, constructor(notifier: NotifierService,
private fb: FormBuilder,
private route: ActivatedRoute,
private router: Router, private router: Router,
private _pd: PdTrigerService) { private _pd: PdTrigerService,
this.notifier = notifier; @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() { ngOnInit() {
this.initstockForm(); this.initstockForm();
let params: any = {}; let params: any = {};
params.pd_id = this.pdid; 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;"> <form [formGroup]="representativeForm" class="address">
<mat-card-content> <h2 mat-dialog-title class="paragraph_change">
<p>Lender Representative Details</p> <div fxFlex="70" align="left">
<form [formGroup]="representativeForm" class="address"> {{pageTitle}}
<mat-form-field> </div>
<mat-select (selectionChange)="selectedLoanChanges($event)" placeholder="Did the lender representative accompany the PD officer for PD?" <div fxFlex="30" align="end">
formControlName="lender_representative_accompany"> <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-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>
<div fxLayout="row"> </div>
<div fxFlex="60" class="pb-0 text-sm-left"> </h2>
<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>
</form> <mat-dialog-content>
</mat-card-content>
</mat-card> <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 { .mat-form-field {
width: 100%; width: 97%;
} }
// .address > * { // .address > * {
@ -9,3 +9,87 @@
// margin: 0 2%; // margin: 0 2%;
// width:100%; // 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 {Component,OnInit,Inject,Input } from '@angular/core';
import {FormBuilder,FormGroup,Validators,FormArray, FormControl,} from '@angular/forms'; import {FormBuilder,FormGroup,Validators,FormArray, FormControl,} from '@angular/forms';
import { NotifierService } from 'angular-notifier'; import { NotifierService } from 'angular-notifier';
import {
MatDialog,
MatDialogRef,
MAT_DIALOG_DATA
} from '@angular/material';
/** Service */ /** Service */
import { PdTrigerService } from '../../../../../pd-service/pd-triger.service'; import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
import { ActivatedRoute, Router } from "@angular/router"; import { ActivatedRoute, Router } from "@angular/router";
@ -13,15 +18,21 @@ import { ActivatedRoute, Router } from "@angular/router";
export class LenderRepresentativeComponent implements OnInit { export class LenderRepresentativeComponent implements OnInit {
public representativeForm: FormGroup; public representativeForm: FormGroup;
private notifier: NotifierService; private notifier: NotifierService;
@Input() pdid: number; pageTitle: string ="Lender Representative Details";
@Input() form_id: number; pdid: number;
form_id: number;
constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute, constructor(notifier: NotifierService,
private router: Router, private fb: FormBuilder,
private _pd: PdTrigerService) { 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; this.notifier = notifier;
} }
ngOnInit() { ngOnInit() {
this.initRepresentative(); this.initRepresentative();
let params: any = {}; let params: any = {};

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

@ -1,165 +1,305 @@
<mat-card style="padding: 12px;">
<p>Loan Details</p>
<form [formGroup]="loanDetailsForm" class="address"> <form [formGroup]="loanDetailsForm" class="address">
<mat-form-field> <h2 mat-dialog-title class="paragraph_change">
<input matInput placeholder="Loan Amount Applied for ? " formControlName="loan_amount" (keypress)="keyPress($event)" (keyup)="inWords($event,1)" required > <div fxFlex="70" align="left">
<mat-hint align="end" *ngIf="loanDetailsForm.controls['loan_amount'].value != ''">{{"&#8377;"}} {{loanAmtInWords}} Only</mat-hint> {{pageTitle}}
</mat-form-field> </div>
<mat-form-field> <div fxFlex="30" align="end">
<mat-select multiple (selectionChange)="endUserChange($event)" placeholder="What is the end use" formControlName="end_use" required> <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-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'"> </div>
<input matInput placeholder="What is the amount required for Balance Transfer ? " (keypress)="keyPress($event)" formControlName="balance_transfer_amount" (keyup)="inWords($event,2)"> </h2>
<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-dialog-content>
</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-tab-group>
<mat-select placeholder="Source" formControlName="source" required> <mat-tab label="Questions">
<mat-option *ngFor="let sour of m_sourceofamount" [value]="sour.id">{{ sour.name }}</mat-option> <ng-template matTabContent>
</mat-select> <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-select placeholder="Source" <mat-form-field *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes'">
formControlName="source"> <input matInput placeholder="What is the amount required for Balance Transfer ? " (keypress)="keyPress($event)" formControlName="balance_transfer_amount" (keyup)="inWords($event,2)">
<mat-option value="borrowed">Borrowed from Relatives & Friends</mat-option> <mat-hint align="end" *ngIf="loanDetailsForm.controls['loan_amount'].value != ''">{{"&#8377;"}} {{balTxrfAmtInWords}} Only</mat-hint>
<mat-option value="own_money">Own money</mat-option> </mat-form-field>
<mat-option value="other">Loan from another lender</mat-option> <mat-form-field *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes'">
</mat-select>--> <mat-select placeholder="Is there a Top Up"
</mat-form-field> formControlName="is_topup" required>
<mat-form-field *ngIf="loanDetailsForm.controls['source'].value =='other'"> <mat-option value="yes">Yes</mat-option>
<input matInput placeholder="Specify Lender Name and Type" formControlName="lender_name_type"> <mat-option value="no">No</mat-option>
</mat-form-field> </mat-select>
<mat-form-field> </mat-form-field>
<input matInput placeholder="EMI Comfort Level" formControlName="emi_level" (keypress)="keyPress($event)" required> <mat-form-field *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes'">
</mat-form-field> <mat-select placeholder="Lender from where balance transfer done"
<mat-card> formControlName="lender">
<mat-card-header> <mat-option *ngFor="let btLen of m_btLenderList" [value]="btLen.bt_lender_list_id">{{ btLen.lender_name }}</mat-option>
<p>Mortgage
<p>
</mat-card-header>
<mat-card-content class="matcard">
<mat-form-field>
<mat-select placeholder="Type of Property" formControlName="property_type" required>
<mat-option *ngFor="let typeprop of m_mortageTypeProperty" [value]="typeprop.id">{{ typeprop.name }}</mat-option>
</mat-select>
<!--<mat-select placeholder="Type of property" formControlName="property_type"> </mat-select>
<mat-option value="bungalow">Bungalow</mat-option> </mat-form-field>
<mat-option value="flat">Flat</mat-option> <mat-form-field *ngIf="loanDetailsForm.controls['lender'].value == 3">
<mat-option value="row_house">Row House</mat-option> <input matInput placeholder="Specify Others Lender" formControlName="other_bt_lender">
<mat-option value="floor">Floor</mat-option> </mat-form-field>
<mat-option value="chawl">Chawl</mat-option> <mat-form-field *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes' && loanDetailsForm.controls['is_topup'].value == 'yes'">
<mat-option value="shed">Shed</mat-option> <input matInput placeholder="Top Up Amt" (keypress)="keyPress($event)" formControlName="topup_amount" (keyup)="inWords($event,5)">
<mat-option value="office">Office</mat-option> <mat-hint align="end" *ngIf="loanDetailsForm.controls['topup_amount'].value != ''">{{"&#8377;"}} {{topUpAmtInWords}} Only</mat-hint>
<mat-option value="shop_in_market">Shop in a market</mat-option> </mat-form-field>
<mat-option value="shop_in_mall">shop in a mall</mat-option> <mat-form-field>
<mat-option value="standalone_shop">standalone shop</mat-option> <input matInput placeholder="Amount of Own Contribution" formControlName="own_contribution" (keypress)="keyPress($event)" required (keyup)="inWords($event,4)">
<mat-option value="clinic">clinic</mat-option> <mat-hint align="end" *ngIf="loanDetailsForm.controls['own_contribution'].value != ''">{{"&#8377;"}} {{ownContributionInWords}} Only</mat-hint>
<mat-option value="factory">Factory</mat-option> </mat-form-field>
<mat-option value="vacant_land">Vacant Land</mat-option>
<mat-option value="others">Others</mat-option>
</mat-select>-->
</mat-form-field>
<mat-form-field *ngIf="loanDetailsForm.controls['property_type'].value =='others'">
<input matInput placeholder="Specify Type of Property" formControlName="ownershipOther">
</mat-form-field>
<mat-form-field>
<mat-select multiple placeholder="Name of Owner"
formControlName="owner_name" (selectionChange)="ownerNameChange($event)" 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> <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="Status of Construction" formControlName="construction_status" required> <!--<mat-select placeholder="Source"
<mat-option *ngFor="let status of m_statusofCunstruction" [value]="status.id">{{ status.name }} {{status.id}}</mat-option> formControlName="source">
</mat-select> <mat-option value="borrowed">Borrowed from Relatives & Friends</mat-option>
</mat-form-field> <mat-option value="own_money">Own money</mat-option>
<mat-option value="other">Loan from another lender</mat-option>
</mat-select>-->
</mat-form-field>
<mat-form-field *ngIf="loanDetailsForm.controls['source'].value =='other'">
<input matInput placeholder="Specify Lender Name and Type" formControlName="lender_name_type">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="EMI Comfort Level" formControlName="emi_level" (keypress)="keyPress($event)" required>
</mat-form-field>
<!-- <div *ngIf="productAbbr === 'HL' || productAbbr === 'LL' || productAbbr === 'LAP' "> -->
<mat-card>
<mat-card-header *ngIf="loanDetailsForm.controls['source'].value =='other'" >
<p>Mortgage
<p>
<!-- {{m_mortageTypeProperty | json}} -->
</mat-card-header>
<mat-card-content class="matcard">
<mat-form-field>
<mat-select placeholder="Type of Property" formControlName="property_type" required>
<mat-option *ngFor="let typeprop of m_mortageTypeProperty" [value]="typeprop.mortage_property_id">{{ typeprop.property_name }}</mat-option>
</mat-select>
<mat-form-field *ngIf="loanDetailsForm.controls['construction_status'].value == 4"> <!--<mat-select placeholder="Type of property" formControlName="property_type">
<input matInput placeholder="What is the approximate stage of construction (%)?" <mat-option value="bungalow">Bungalow</mat-option>
formControlName="percentage_of_construction" (keypress)="keyPress($event)" required> <mat-option value="flat">Flat</mat-option>
</mat-form-field> <mat-option value="row_house">Row House</mat-option>
<mat-option value="floor">Floor</mat-option>
<mat-option value="chawl">Chawl</mat-option>
<mat-option value="shed">Shed</mat-option>
<mat-option value="office">Office</mat-option>
<mat-option value="shop_in_market">Shop in a market</mat-option>
<mat-option value="shop_in_mall">shop in a mall</mat-option>
<mat-option value="standalone_shop">standalone shop</mat-option>
<mat-option value="clinic">clinic</mat-option>
<mat-option value="factory">Factory</mat-option>
<mat-option value="vacant_land">Vacant Land</mat-option>
<mat-option value="others">Others</mat-option>
</mat-select>-->
</mat-form-field>
<mat-form-field *ngIf="loanDetailsForm.controls['property_type'].value == 'others'">
<input matInput placeholder="Specify Type of Property" formControlName="ownershipOther">
</mat-form-field>
<mat-form-field>
<mat-select multiple placeholder="Name of Owner"
formControlName="owner_name" (selectionChange)="ownerNameChange($event)" 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-select placeholder="Status of construction" <mat-form-field>
formControlName="construction_status">
<mat-option value="other_purpose">Under-construction</mat-option> <mat-select placeholder="Status of Construction" formControlName="construction_status" required>
<mat-option value="other_purpose">Complete</mat-option> <mat-option *ngFor="let status of m_statusofCunstruction" [value]="status.id">{{ status.name }} {{status.id}}</mat-option>
<mat-option value="other_purpose">Vacant Land</mat-option> </mat-select>
</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">
<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-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 fxLayout="row">
<div fxFlex="60" class="pb-0 text-sm-left"> <div fxFlex="60" class="pb-0 text-sm-left">
<mat-form-field appearance="outline" style="width: 100%"> <mat-form-field appearance="outline" style="width: 100%">
<mat-label>Remarks</mat-label> <mat-label>Remarks</mat-label>
<textarea matInput placeholder="Remarks" formControlName="loandetails_remarks" required></textarea> <textarea matInput placeholder="Remarks" formControlName="loandetails_remarks" required></textarea>
</mat-form-field> </mat-form-field>
</div> </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 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> </button>
</div> </div>
</form> </mat-dialog-actions>
</mat-card>
</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; background: #62B013;
color: white; 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);
}
}
}
}
}

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

@ -31,12 +31,15 @@ import {ActivatedRoute, Router} from '@angular/router';
export class LoanDetailsComponent implements OnInit { export class LoanDetailsComponent implements OnInit {
public loanDetailsForm: FormGroup; public loanDetailsForm: FormGroup;
private notifier: NotifierService; private notifier: NotifierService;
@Input() pdid: number; pdid: number;
@Input() form_id: number; form_id: number;
@Input() applicant_details: any; exist_loan_amt: any;
applicants: any; applicants: any;
productAbbr: any;
isOtherPurpose: boolean = false; isOtherPurpose: boolean = false;
isSource: boolean = false; isSource: boolean = false;
mortageCheck : boolean = true;
endUserList: any = []; endUserList: any = [];
ownerNames: any = []; ownerNames: any = [];
m_endUseofLoad = []; m_endUseofLoad = [];
@ -50,19 +53,24 @@ export class LoanDetailsComponent implements OnInit {
valAsPerAgmtInWords : any; valAsPerAgmtInWords : any;
ownContributionInWords : any; ownContributionInWords : any;
topUpAmtInWords: any; topUpAmtInWords: any;
pageTitle: string ="Loan Details";
constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute, constructor(notifier: NotifierService,
private router: Router, private fb: FormBuilder,
private _pd: PdTrigerService) { private route: ActivatedRoute,
private router: Router,
this.notifier = notifier; 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() { ngOnInit() {
console.log(this.applicant_details.pdapplicants_detials);
console.log(this.applicant_details);
this.applicants = this.applicant_details.pdapplicants_detials;
this.initloanDetailsForm(); this.initloanDetailsForm();
this.getM_EndUseofLoad(); this.getM_EndUseofLoad();
this.getM_sourceofamount(); this.getM_sourceofamount();
@ -73,6 +81,7 @@ export class LoanDetailsComponent implements OnInit {
params.pd_id = this.pdid; params.pd_id = this.pdid;
params.pd_form_id = this.form_id; params.pd_form_id = this.form_id;
this._pd.retriveForm(params).subscribe(value => { this._pd.retriveForm(params).subscribe(value => {
// *ngIf="productAbbr === 'HL' || productAbbr === 'LL' || productAbbr === 'LAP' "
console.log('value', value); console.log('value', value);
if (value.status == 200) { if (value.status == 200) {
let result = Object.keys(value.records.end_use_group).map(function(key) { let result = Object.keys(value.records.end_use_group).map(function(key) {
@ -169,9 +178,13 @@ getM_sourceofamount() {
} }
getM_MortageTypeProperty() { getM_MortageTypeProperty() {
this._pd.getAllMasterDatas('MORTAGEPROPERTYTYPE').subscribe( // this._pd.getAllMasterDatas('MORTAGEPROPERTYTYPE').subscribe(
this._pd.getAllMasterDatas('MORTAGEPROPERTIES').subscribe(
data => { data => {
// console.log('sadfdfads',this.productAbbr);
this.m_mortageTypeProperty = data.records.filter(data => data.isactive == 1); this.m_mortageTypeProperty = data.records.filter(data => data.isactive == 1);
this.m_mortageTypeProperty = data.records.filter(data => data.group_name == this.productAbbr);
}, },
error => { error => {
// this.notifier.notify('warning', 'No Category Records Found.!'); // this.notifier.notify('warning', 'No Category Records Found.!');
@ -203,7 +216,7 @@ getM_sourceofamount() {
// ================== // ==================
public initloanDetailsForm(): void { public initloanDetailsForm(): void {
this.loanDetailsForm = this.fb.group({ this.loanDetailsForm = this.fb.group({
loan_amount: ['', Validators.compose([Validators.required])], loan_amount: [this.exist_loan_amt, Validators.compose([Validators.required])],
end_use: ['', Validators.compose([Validators.required])], end_use: ['', Validators.compose([Validators.required])],
end_use_other: [''], end_use_other: [''],
is_transfer: ['', Validators.compose([Validators.required])], is_transfer: ['', Validators.compose([Validators.required])],

234
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;">--> <!--<mat-card style="padding: 12px;">-->
<!--<form [formGroup]="otherIncomeForm" class="address">--> <!--<form [formGroup]="otherIncomeForm" class="address">-->
<!--<mat-form-field>--> <!--<mat-form-field>-->
@ -16,7 +238,7 @@
<!--[formGroupName]="i">--> <!--[formGroupName]="i">-->
<!--<mat-card-content class="matcard">--> <!--<mat-card-content class="matcard">-->
<mat-card style="min-height: 550px;"> <!--<mat-card style="min-height: 550px;">
<mat-card-content> <mat-card-content>
<p>Other Income Details</p> <p>Other Income Details</p>
<form [formGroup]="otherIncomeForm" class="address"> <form [formGroup]="otherIncomeForm" class="address">
@ -26,7 +248,7 @@
<mat-option value="Yes">Yes</mat-option> <mat-option value="Yes">Yes</mat-option>
<mat-option value="No">No</mat-option> <mat-option value="No">No</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>-->
<!--<mat-form-field>--> <!--<mat-form-field>-->
<!--<input matInput placeholder="Amount" formControlName="amount">--> <!--<input matInput placeholder="Amount" formControlName="amount">-->
@ -55,7 +277,7 @@
<!--</form>--> <!--</form>-->
<!--</mat-card>--> <!--</mat-card>-->
<mat-card *ngIf="otherIncomeForm.controls.other_income.value == 'Yes'"> <!--<mat-card *ngIf="otherIncomeForm.controls.other_income.value == 'Yes'">
<mat-card-header> <mat-card-header>
<p>Income Details<p> <p>Income Details<p>
</mat-card-header> </mat-card-header>
@ -85,11 +307,11 @@
<mat-select placeholder="Frequency" formControlName="frequency" required> <mat-select placeholder="Frequency" formControlName="frequency" required>
<mat-option value="{{frq.frequency_id}}" *ngFor="let frq of frequencyData">{{frq.name}}</mat-option> <mat-option value="{{frq.frequency_id}}" *ngFor="let frq of frequencyData">{{frq.name}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>-->
<!-- {{otherIncomeForm.controls.frequency.value}} --> <!-- {{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" <input matInput placeholder="Specify Others Frequency"
formControlName="others_frequency"> formControlName="others_frequency">
</mat-form-field> </mat-form-field>
@ -119,4 +341,4 @@
</div> </div>
</form> </form>
</mat-card-content> </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 { // .address {
display: flex; // display: flex;
padding: 0 2%; // padding: 0 2%;
flex-direction: column; // 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, Component,
OnInit, OnInit,
Inject, Inject,
Input Input, Output
} from '@angular/core'; } from '@angular/core';
import { import {
@ -19,6 +19,7 @@ import {
MatDialogRef, MatDialogRef,
MAT_DIALOG_DATA MAT_DIALOG_DATA
} from '@angular/material'; } from '@angular/material';
/** Service */ /** Service */
import { PdTrigerService } from '../../../../../pd-service/pd-triger.service'; import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
@ -28,19 +29,34 @@ import {ActivatedRoute, Router} from '@angular/router';
templateUrl: './other-income.component.html', templateUrl: './other-income.component.html',
styleUrls: ['./other-income.component.scss'] styleUrls: ['./other-income.component.scss']
}) })
export class OtherIncomeComponent implements OnInit { export class OtherIncomeComponent implements OnInit {
@Input() pdid: number; pageTitle: string ="Other Income Details";
@Input() form_id: number; loadDataStatus: boolean=true;
// @Input() pdid: number;
// @Input() form_id: number;
pdid : string;
form_id:number;
public otherIncomeForm: FormGroup; public otherIncomeForm: FormGroup;
private notifier: NotifierService; private notifier: NotifierService;
frequencyData: any = []; frequencyData: any = [];
constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute, constructor(notifier: NotifierService,
private fb: FormBuilder,
private route: ActivatedRoute,
private router: Router, private router: Router,
private _pd: PdTrigerService) { private _pd: PdTrigerService,
this.notifier = notifier; @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() { ngOnInit() {
console.clear();
this.getFrequency(); this.getFrequency();
this.initOtherincomeForm(); this.initOtherincomeForm();
let params: any = {}; let params: any = {};

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

@ -1,141 +1,270 @@
<mat-card style="padding: 12px;"> <form [formGroup]="_personalForm" (submit)="submitPersonalForm(_personalForm.value)" novalidate>
<p>Personal Details</p>
<form *ngIf="loadDataStatus" [formGroup]="_personalForm" (submit)="submitPersonalForm(_personalForm.value)" novalidate>
<mat-card-content> <h2 mat-dialog-title class="paragraph_change">
<!-- start main applicant details --> <div fxFlex="70" align="left">
{{pageTitle}}
<div fxLayout="row wrap">
<div fxFlex="50" class="text-xs-left">
<mat-card>
<mat-card-title>Main Applicant</mat-card-title>
<mat-card-content>
<div [formArrayName]="'mainItem'" *ngFor="let mainDetails of pdMainapplicant.controls; let i = index;">
<div [formGroup]="mainDetails">
<mat-form-field style="width: 100%">
<input matInput placeholder="Name" formControlName="name_ans" type="text" required>
</mat-form-field>
<mat-form-field style="width: 100%">
<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: 100%">
<input matInput placeholder="Entity" formControlName="entity_ans" type="text" required>
</mat-form-field>
<mat-form-field style="width: 100%">
<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-form-field style="width: 100%">
<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>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<!-- end main applicant details -->
<!-- start co applicant form details -->
<div fxFlex="50" class="text-xs-left" [formArrayName]="'coItem'" *ngFor="let coDetails of pdCoapplicant.controls; let i = index;">
<mat-card>
<mat-card-title>Co Applicant</mat-card-title>
<mat-card-content>
<div >
<div [formGroup]="coDetails">
<mat-form-field style="width: 100%">
<!-- <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: 100%">
<!-- <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: 100%">
<!-- <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: 100%">
<!-- <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-form-field style="width: 100%">
<!-- <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: 100%">
<!-- <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>
</div>
</div>
</mat-card-content>
</mat-card>
</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="personal_info_form_remark" required></textarea>
</mat-form-field>
</div>
</div>
<!-- end co applicant form details -->
</mat-card-content>
<mat-card-actions>
<div fxFlexOffset="90" fxFlex="10" style="text-align:left;">
<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> </div>
</mat-card-actions> <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>
</form> </div>
</mat-card> </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-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: 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>
</div>
</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> -->
<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>
<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>
</mat-card-content>
</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>
</form>
<notifier-container></notifier-container>

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

@ -1,6 +1,84 @@
.paragraph_change {
color: #e00201 !important;
}
.mat-card-content { .mat-card-content {
background-color: white; background-color: white;
} }
.mat-card-actions { .mat-card-actions {
background-color: white; 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);
}
}
}
}
}

408
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 { FormBuilder, FormGroup, Validators, FormControl, FormArray } from '@angular/forms';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA , DialogPosition} from '@angular/material';
import { NotifierService } from 'angular-notifier'; import { NotifierService } from 'angular-notifier';
import { PdTrigerService } from './../../../../../pd-service/pd-triger.service'; import { PdTrigerService } from './../../../../../pd-service/pd-triger.service';
import { Key } from 'protractor'; import { Key } from 'protractor';
@ -9,39 +10,56 @@ import { Key } from 'protractor';
templateUrl: './personal-info.component.html', templateUrl: './personal-info.component.html',
styleUrls: ['./personal-info.component.scss'] styleUrls: ['./personal-info.component.scss']
}) })
export class PersonalInfoComponent implements OnInit { export class PersonalInfoComponent implements OnInit {
pageTitle: string ="Personal Details";
//qualifications:any=["Graduate","Under Graduate","Post Graduate","Professional"]; //qualifications:any=["Graduate","Under Graduate","Post Graduate","Professional"];
//earningStatus:any=["Earning Member","House Wife","Student","Retired","Pensioner","Other Non earning member"]; //earningStatus:any=["Earning Member","House Wife","Student","Retired","Pensioner","Other Non earning member"];
loadDataStatus: boolean=true;
earningStatus:any=[]; earningStatus:any=[];
qualifications:any=[]; qualifications:any=[];
relationShipList:any=[]; relationShipList:any=[];
@Input() pdid : string; // @Input() pdid : string;
@Input() pd_all_details:any; // @Input() pd_all_details:any;
pdid : string;
form_id:number; form_id:number;
private notifier: NotifierService; private notifier: NotifierService;
public _personalForm: FormGroup; public _personalForm: FormGroup;
public mainApplicantQuestions : any = ["Name","Age","Entity","Educational Qualification","Earning Status"]; public mainApplicantQuestions : any = ["Name","Age","Entity","Educational Qualification","Earning Status"];
public coApplicantQuestions : any = ["Name","Age","Entity","Educational Qualification","Earning Status","Relationship"]; public coApplicantQuestions : any = ["Name","Age","Entity","Educational Qualification","Earning Status","Relationship"];
public const_main_applicant : any = {
"name_ans": '',
"age_ans":'',
"earning_ans": '',
"entity_ans": '',
"qualification_ans": '',
"current_added_status":1
};
public const_co_applicant : any = {
"name_ans": '',
"age_ans":'',
"earning_ans": '',
"entity_ans": '',
"qualification_ans": '',
"relation_ans": '',
"current_added_status":1
};
public mainApplicantDetails :any=[]; public mainApplicantDetails :any=[];
public coApplicantDetails :any=[]; public coApplicantDetails :any=[];
errorMessage:any; errorMessage:any;
//coItem:any;
//mainItem:any;
repeat:number=3; 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;
constructor(notifier: NotifierService,private _fb: FormBuilder,private _pd: PdTrigerService) {
this.notifier = notifier; this.notifier = notifier;
this.form_id = 3; this.form_id = 3;
} }
ngOnInit() { ngOnInit() {
this.loadPDDetails(this.pdid,this.form_id); this.initFormDetails()
this.loadPDDetails();
this.getMasterDetails('RELATIONSHIPS',1); this.getMasterDetails('RELATIONSHIPS',1);
this.getMasterDetails('EARNINGMEMBERSSTATUS',2); this.getMasterDetails('EARNINGMEMBERSSTATUS',2);
this.getMasterDetails('EDUQUALIFICATION',3); this.getMasterDetails('EDUQUALIFICATION',3);
@ -51,155 +69,71 @@ export class PersonalInfoComponent implements OnInit {
} }
// load form pd details // load form pd details
loadPDDetails(pd:string,form:number){ loadPDDetails(){
this._pd.getPDFormDetailsWithID(this.pdid,this.form_id).subscribe( this._pd.getPDFormDetailsWithID(this.pdid,this.form_id).subscribe(
data => { data => {
if (data.status == 200) { const mainValue = <FormArray>this._personalForm.controls['main_applicant_details'];
this.loadFormWithIDData(data.records); const coValue = <FormArray>this._personalForm.controls['co_applicant_details'];
mainValue.controls = [];
coValue.controls = [];
if (data.dataStatus == true) {
let retriveData = data.records;
this._personalForm.controls['personal_info_form_remark'].setValue(data.records.personal_info_form_remark ? data.records.personal_info_form_remark : '');
let pullMainApplicant = Object.keys(data.records.main_applicant_details).map(function(key) {
return data.records.main_applicant_details[key];
});
if (pullMainApplicant.length > 0) {
pullMainApplicant.forEach(val => {
val.current_added_status=0
mainValue.push(this.loadMainApplicant(val));
});
// retriveData.main_applicant_details = pullMainApplicant;
} else {
mainValue.push(this.loadMainApplicant(this.const_main_applicant));
}
if(data.records.co_applicant_details){
let pullCoApplicant = Object.keys(data.records.co_applicant_details).map(function(key) {
return data.records.co_applicant_details[key];
});
if (pullCoApplicant.length > 0) {
pullCoApplicant.forEach(val => {
val.current_added_status=0
coValue.push(this.loadCoApplicant(val));
});
// retriveData.co_applicant_details = pullCoApplicant;
} else {
coValue.push(this.loadCoApplicant(this.const_co_applicant));
}
}
else {
coValue.push(this.loadCoApplicant(this.const_co_applicant));
}
} }
else if(data.status == 204){ else if(data.dataStatus == false){
this.mainApplicantDetails.forEach(item => {
item.current_added_status=0
mainValue.push(this.loadDefaultMainApplicant(item))
});
this.loadFormData(); // check co applicant
if(this.coApplicantDetails.length > 0){
this.coApplicantDetails.forEach(coItem => {
coItem.current_added_status=0
coValue.push(this.loadDefaultCoApplicant(coItem)
)
});
}
else {
coValue.push(this.loadCoApplicant(this.const_co_applicant))
}
}
}
}, error => this.errorMessage = <any> error); }, error => this.errorMessage = <any> error);
} }
loadDataStatus: boolean;
loadFormWithIDData(data) {
// main applicant
var main_result = Object.keys(data.main_applicant_details).map(function(key) {
return data.main_applicant_details[key];
});
let mainApplicantGroup = new FormArray(main_result.map((item,key) => new FormGroup({
name_ans:new FormControl(item.name_ans, Validators.required),
age_ans:new FormControl(item.age_ans, Validators.compose([Validators.required,Validators.minLength(1),Validators.maxLength(3),Validators.required,Validators.pattern('^[0-9]*$')])),
entity_ans:new FormControl(item.entity_ans, Validators.required),
qualification_ans:new FormControl(item.qualification_ans, Validators.required),
earning_ans:new FormControl(item.earning_ans, Validators.required),
})));
// co applicant
let coApplicantGroup;
if(data.co_applicant_details!=undefined){
var co_result = Object.keys(data.co_applicant_details).map(function(key) {
return data.co_applicant_details[key];
});
coApplicantGroup = new FormArray(co_result.map((item,key) => new FormGroup({
name_ans:new FormControl(item.name_ans, Validators.required),
age_ans:new FormControl(item.age_ans, Validators.compose([Validators.required,Validators.minLength(1),Validators.maxLength(3),Validators.required,Validators.pattern('^[0-9]*$')])),
entity_ans:new FormControl(item.entity_ans, Validators.required),
qualification_ans:new FormControl(item.qualification_ans, Validators.required),
earning_ans:new FormControl(item.earning_ans, Validators.required),
relation_ans:new FormControl(item.relation_ans, Validators.required),
})));
}
else{
coApplicantGroup = new FormArray(this.coApplicantDetails.map((item,key) => new FormGroup({
name_ques:new FormControl(this.coApplicantQuestions[0]),
name_ans:new FormControl(item.applicant_name, Validators.required),
name_id:new FormControl(0),
age_ques:new FormControl(this.coApplicantQuestions[1]),
age_id:new FormControl(1),
age_ans:new FormControl(null, Validators.compose([Validators.required,Validators.minLength(1),Validators.maxLength(3),Validators.required,Validators.pattern('^[0-9]*$')])),
entity_ques: new FormControl(this.coApplicantQuestions[2]),
entity_id: new FormControl(2),
entity_ans:new FormControl(this.pd_all_details.pdmaster_details.customer_segment_abbr.substring(0,3).toUpperCase()==='SAL' ? 'Individual' : '', Validators.required),
qualification_ques: new FormControl(this.coApplicantQuestions[3]),
qualification_id: new FormControl(3),
qualification_ans:new FormControl(null, Validators.required),
earningStatus_ques:new FormControl(this.coApplicantQuestions[4]),
earning_id: new FormControl(4),
earning_ans:new FormControl(null, Validators.required),
relationShip_ques:new FormControl(this.coApplicantQuestions[5]),
relation_id:new FormControl(5),
relation_ans:new FormControl(null, Validators.required),
})));
}
this._personalForm = this._fb.group({
pdid:null,
form_id:null,
mainItem: mainApplicantGroup,
coItem: coApplicantGroup,
personal_info_form_remark: [data.personal_info_form_remark]
});
//console.log(this._personalForm);
this.loadDataStatus = true;
}
loadFormData(){
// main applicant
let mainApplicantGroup = new FormArray(this.mainApplicantDetails.map((item,key) => new FormGroup({
name_ques:new FormControl(this.mainApplicantQuestions[0]),
name_ans:new FormControl(item.applicant_name, Validators.required),
name_id:new FormControl(0),
age_ques:new FormControl(this.mainApplicantQuestions[1]),
age_id:new FormControl(1),
age_ans:new FormControl(null, Validators.compose([Validators.required,Validators.minLength(1),Validators.maxLength(3),Validators.required,Validators.pattern('^[0-9]*$')])),
entity_ques: new FormControl(this.mainApplicantQuestions[2]),
entity_id: new FormControl(2),
entity_ans:new FormControl(this.pd_all_details.pdmaster_details.customer_segment_abbr.substring(0,3).toUpperCase()==='SAL' ? 'Individual' : '', Validators.required),
qualification_ques: new FormControl(this.mainApplicantQuestions[3]),
qualification_id: new FormControl(3),
qualification_ans:new FormControl(null, Validators.required),
earningStatus_ques:new FormControl(this.mainApplicantQuestions[4]),
earning_id: new FormControl(4),
earning_ans:new FormControl(null, Validators.required),
})));
// co applicant
let coApplicantGroup = new FormArray(this.coApplicantDetails.map((item,key) => new FormGroup({
name_ques:new FormControl(this.coApplicantQuestions[0]),
name_ans:new FormControl(item.applicant_name, Validators.required),
name_id:new FormControl(0),
age_ques:new FormControl(this.coApplicantQuestions[1]),
age_id:new FormControl(1),
age_ans:new FormControl(null, Validators.compose([Validators.required,Validators.minLength(1),Validators.maxLength(3),Validators.required,Validators.pattern('^[0-9]*$')])),
entity_ques: new FormControl(this.coApplicantQuestions[2]),
entity_id: new FormControl(2),
entity_ans:new FormControl(this.pd_all_details.pdmaster_details.customer_segment_abbr.substring(0,3).toUpperCase()==='SAL' ? 'Individual' : '', Validators.required),
qualification_ques: new FormControl(this.coApplicantQuestions[3]),
qualification_id: new FormControl(3),
qualification_ans:new FormControl(null, Validators.required),
earningStatus_ques:new FormControl(this.coApplicantQuestions[4]),
earning_id: new FormControl(4),
earning_ans:new FormControl(null, Validators.required),
relationShip_ques:new FormControl(this.coApplicantQuestions[5]),
relation_id:new FormControl(5),
relation_ans:new FormControl(null, Validators.required),
})));
this._personalForm = this._fb.group({
pdid:null,
form_id:null,
mainItem: mainApplicantGroup,
coItem: coApplicantGroup,
personal_info_form_remark:null
});
//console.log(this._personalForm);
this.loadDataStatus = true;
}
//get pd main applicant array values
get pdMainapplicant() { return this._personalForm.get('mainItem') as FormArray; }
// get pd co applicant array values
get pdCoapplicant() {return this._personalForm.get('coItem') as FormArray;}
// get all master details // get all master details
getMasterDetails(table:string,type:number){ getMasterDetails(table:string,type:number){
this._pd.getAllMasterDatas(table).subscribe( this._pd.getAllMasterDatas(table).subscribe(
@ -219,7 +153,92 @@ this.loadDataStatus = true;
} }
}, error => this.errorMessage = <any> error); }, error => this.errorMessage = <any> error);
} }
// submit forms details
/** On Key Press Event For Mobile Number */
keyPress(event: any) {
const pattern = /[0-9]/;
let inputChar = String.fromCharCode(event.charCode);
if (event.keyCode != 8 && !pattern.test(inputChar)) {
event.preventDefault();
}
}
// init form details
public initFormDetails(): void {
this._personalForm = this._fb.group({
pdid:this.pdid,
formid:this.form_id,
main_applicant_details: this._fb.array([]),
co_applicant_details: this._fb.array([]),
personal_info_form_remark:null
});
}
// add more co applicant details
addCoApplicant() {
const control = <FormArray>this._personalForm.controls['co_applicant_details'];
control.push(this.loadCoApplicant(this.const_co_applicant));
}
// remove co applicant details
removeCoApplicant(renoveIndex) {
const remove_control = <FormArray>this._personalForm.controls['co_applicant_details'];
remove_control.removeAt(renoveIndex)
}
// load main applicant
loadMainApplicant(applicant:any) {
return this._fb.group({
name_ans: [applicant.name_ans, Validators.required],
age_ans: [applicant.age_ans, Validators.compose([Validators.required,Validators.minLength(1),Validators.maxLength(3),Validators.required,Validators.pattern('^[0-9]*$')])],
entity_ans: [applicant.entity_ans, Validators.required],
qualification_ans: [applicant.qualification_ans, Validators.required],
earning_ans: [applicant.earning_ans, Validators.required],
current_added_status: [applicant.current_added_status],
});
}
// load co applicant
loadCoApplicant(applicant:any) {
return this._fb.group({
name_ans: [applicant.name_ans, Validators.required],
age_ans: [applicant.age_ans, Validators.compose([Validators.required,Validators.minLength(1),Validators.maxLength(3),Validators.required,Validators.pattern('^[0-9]*$')])],
entity_ans: [applicant.entity_ans, Validators.required],
qualification_ans: [applicant.qualification_ans, Validators.required],
earning_ans: [applicant.earning_ans, Validators.required],
relation_ans: [applicant.relation_ans, Validators.required],
current_added_status: [applicant.current_added_status],
});
}
// load default main applicant form data
loadDefaultMainApplicant(applicant:any){
return this._fb.group({
name_ans: [applicant.applicant_name, Validators.required],
age_ans: ['', Validators.compose([Validators.required,Validators.minLength(1),Validators.maxLength(3),Validators.required,Validators.pattern('^[0-9]*$')])],
entity_ans: [this.pd_all_details.pdmaster_details.customer_segment_abbr.substring(0,3).toUpperCase()==='SAL' ? 'Individual' : '', Validators.required],
qualification_ans: ['', Validators.required],
earning_ans: ['', Validators.required],
current_added_status: [applicant.current_added_status],
});
}
// load co applicant details
loadDefaultCoApplicant(applicant:any){
return this._fb.group({
name_ans: [applicant.applicant_name, Validators.required],
age_ans: ['', Validators.compose([Validators.required,Validators.minLength(1),Validators.maxLength(3),Validators.required,Validators.pattern('^[0-9]*$')])],
entity_ans: [this.pd_all_details.pdmaster_details.customer_segment_abbr.substring(0,3).toUpperCase()==='SAL' ? 'Individual' : '', Validators.required],
qualification_ans: ['', Validators.required],
earning_ans: ['', Validators.required],
relation_ans: ['', Validators.required],
current_added_status: [applicant.current_added_status],
});
}
// submit forms details
submitPersonalForm(formData:any) { submitPersonalForm(formData:any) {
if (this._personalForm.invalid) { if (this._personalForm.invalid) {
this.validateAllFormFields(this._personalForm); this.validateAllFormFields(this._personalForm);
@ -231,8 +250,8 @@ submitPersonalForm(formData:any) {
else{ else{
let main_applicantDetails:any=[]; let main_applicantDetails:any=[];
let co_applicantDetails:any=[]; let co_applicantDetails:any=[];
let new_co_applicant:any=[];
formData.mainItem.forEach((element,key) => { formData.main_applicant_details.forEach((element,key) => {
if(key==0){ if(key==0){
main_applicantDetails.push({ main_applicantDetails.push({
"name_ans":element.name_ans, "name_ans":element.name_ans,
@ -244,9 +263,8 @@ submitPersonalForm(formData:any) {
} }
}); });
formData.coItem.forEach((Coelement,Cokey) => { formData.co_applicant_details.forEach((Coelement,Cokey) => {
co_applicantDetails.push({ co_applicantDetails.push({
"name_ans":Coelement.name_ans, "name_ans":Coelement.name_ans,
"age_ans":Coelement.age_ans, "age_ans":Coelement.age_ans,
"qualification_ans":Coelement.qualification_ans, "qualification_ans":Coelement.qualification_ans,
@ -254,29 +272,64 @@ submitPersonalForm(formData:any) {
"earning_ans":Coelement.earning_ans, "earning_ans":Coelement.earning_ans,
"relation_ans":Coelement.relation_ans, "relation_ans":Coelement.relation_ans,
}) })
// get new co applicant list for applicant table
if(Coelement.current_added_status==1){
new_co_applicant.push({
"fk_pd_id": this.pdid,
"pd_co_applicant_id": '',
"applicant_name":Coelement.name_ans,
"relation":Coelement.relation_ans,
"email":'',
"mobile_no":'',
"landline":'',
"applicant_type":0,
"isactive":1
});
}
}); });
let save_details:any={
"pdid": this.pdid,
"formid": this.form_id,
"main_applicant_details":main_applicantDetails,
"co_applicant_details":co_applicantDetails,
"personal_info_form_remark": this._personalForm.get('personal_info_form_remark').value
};
if(new_co_applicant.length > 0){
this._pd.updatePdApplicant(new_co_applicant).subscribe(result => {
if (result.status == 200) {
this.questionsSubmitCheck(save_details);
}
else {
this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
}
}, error => {
this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
});
}
else{
this.questionsSubmitCheck(save_details);
}
let save_details:any={
"pdid": this.pdid,
"formid": this.form_id,
"main_applicant_details":main_applicantDetails,
"co_applicant_details":co_applicantDetails,
"personal_info_form_remark": this._personalForm.get('personal_info_form_remark').value
};
this._pd.savePDFormDetailsWithID(save_details).subscribe(result => {
if (result.status == 200) {
this.notifier.notify('success', 'Success.');
}
else {
this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
}
}, error => {
this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
});
} }
} }
// submit and check all questions
questionsSubmitCheck(questionAns: any) {
this._pd.savePDFormDetailsWithID(questionAns).subscribe(result => {
if (result.status == 200) {
this.notifier.notify('success', 'Success.');
this.loadPDDetails();
}
else {
this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
}
}, error => {
this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
});
return;
}
// validate all form group and form array fields // validate all form group and form array fields
validateAllFormFields(formGroup: any) { validateAllFormFields(formGroup: any) {
Object.keys(formGroup.controls).forEach(field => { Object.keys(formGroup.controls).forEach(field => {
@ -292,14 +345,5 @@ validateAllFormFields(formGroup: any) {
}); });
} }
/** On Key Press Event For Mobile Number */
keyPress(event: any) {
const pattern = /[0-9]/;
let inputChar = String.fromCharCode(event.charCode);
if (event.keyCode != 8 && !pattern.test(inputChar)) {
event.preventDefault();
}
}
} }

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;"> <form class="address" [formGroup]="rentalForm">
<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>
<mat-form-field> <h2 mat-dialog-title class="paragraph_change">
<mat-select placeholder="Property Owner" formControlName="property_own"> <div fxFlex="70" align="left">
<mat-option value="applicant">Applicant</mat-option> {{pageTitle}}
<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> </div>
<mat-card> <div fxFlex="30" align="end">
<mat-card-header> <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>
<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> </div>
<mat-card-header> </h2>
<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> <mat-dialog-content>
<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> <mat-tab-group>
</button> <mat-tab label="Questions">
</mat-card-content> <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> </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> </div>
</mat-card> </ng-template>
<mat-form-field> </mat-tab>
<mat-select placeholder="Photogaraphs of the Property" </mat-tab-group>
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> </mat-dialog-content>
</div> <mat-dialog-actions>
<div style="text-align: right;" class="pt-1"> <div fxFlex="60" class="pb-0 text-sm-left" align="left">
<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> <!-- <mat-form-field appearance="outline" style="width: 100%">
</button> <mat-label>Remarks</mat-label>
</div> <textarea matInput placeholder="Remarks" formControlName="personal_info_form_remark" required></textarea>
</form> </mat-form-field> -->
</mat-card-content> </div>
</mat-card> <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 { // .address {
display: flex; // display: flex;
padding: 0 2%; // padding: 0 2%;
flex-direction: column; // 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 {FormBuilder, FormGroup, Validators, FormControl, FormArray} from '@angular/forms';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA , DialogPosition} from '@angular/material';
import {NotifierService} from 'angular-notifier'; import {NotifierService} from 'angular-notifier';
import {PdTrigerService} from './../../../../../pd-service/pd-triger.service'; import {PdTrigerService} from './../../../../../pd-service/pd-triger.service';
import {AwsService} from '../../../../../../AwsService/aws.service';
import {Key} from 'protractor'; import {Key} from 'protractor';
@Component({ @Component({
@ -14,8 +16,9 @@ export class RentalInfoComponent implements OnInit {
// @Input() pdid: string; // @Input() pdid: string;
// @Input() pd_all_details: any; // @Input() pd_all_details: any;
// form_id: number; // form_id: number;
@Input() pdid: number; pageTitle: string ="Rental Information";
@Input() form_id: number; pdid: number;
form_id: number;
step: number; step: number;
public rentalForm: FormGroup; public rentalForm: FormGroup;
@ -23,10 +26,16 @@ export class RentalInfoComponent implements OnInit {
propertyList: FormGroup; propertyList: FormGroup;
private notifier: NotifierService; private notifier: NotifierService;
constructor(notifier: NotifierService, private _fb: FormBuilder, private _pd: PdTrigerService) { constructor(
this.notifier = notifier; notifier: NotifierService,
// this.form_id = 3; 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() { ngOnInit() {
this.step = 0; this.step = 0;
@ -68,7 +77,7 @@ export class RentalInfoComponent implements OnInit {
rentalinfo.rental_home = result; rentalinfo.rental_home = result;
rentalinfo.pdid = this.pdid; rentalinfo.pdid = this.pdid;
rentalinfo.formid = this.form_id; rentalinfo.formid = this.form_id;
rentalinfo.fk_createdby = this.pdid; rentalinfo.fk_createdby = this._aws.getlocale();
this.rentalForm.setValue(rentalinfo); this.rentalForm.setValue(rentalinfo);
} else { } else {
control.push(this.createpropertyArray()); control.push(this.createpropertyArray());

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

@ -1,8 +1,268 @@
<mat-card style="padding: 12px;">
<p>Stock Details</p>
<form [formGroup]="stockForm" class="address"> <form [formGroup]="stockForm" class="address">
<mat-card> <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>
<mat-card-header> <mat-card-header>
<p>Raw Materials<p> <p>Raw Materials<p>
</mat-card-header> </mat-card-header>
@ -13,9 +273,26 @@
<mat-form-field> <mat-form-field>
<input matInput placeholder="Name" formControlName="raw_name" required> <input matInput placeholder="Name" formControlName="raw_name" required>
</mat-form-field> </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> <mat-form-field>
<input matInput placeholder="Estimated Quantity" formControlName="raw_quantity" required> <input matInput placeholder="Estimated Quantity" formControlName="raw_quantity" required>
</mat-form-field> </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> <mat-form-field>
<input matInput placeholder="Value" formControlName="raw_value" (keypress)="keyPress($event)" required> <input matInput placeholder="Value" formControlName="raw_value" (keypress)="keyPress($event)" required>
</mat-form-field> </mat-form-field>
@ -25,6 +302,7 @@
<mat-form-field style="width:76%"> <mat-form-field style="width:76%">
<input matInput placeholder="Is the stock of raw materials observed ?" formControlName="is_sufficiant_raw" required> <input matInput placeholder="Is the stock of raw materials observed ?" formControlName="is_sufficiant_raw" required>
</mat-form-field> </mat-form-field>
</div>
<button type="button" mat-raised-button mat-icon-button (click)="addRawMaterials()" <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"> matTooltip="Add More Raw Materials" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary" *ngIf="i==0">
@ -88,4 +366,4 @@
</div> </div>
</form> </form>
</mat-card> </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 { // .address {
display: flex; // display: flex;
padding: 0 2%; // padding: 0 2%;
flex-direction: column; // 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;
}

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

@ -22,6 +22,7 @@ import {
/** Service */ /** Service */
import { PdTrigerService } from '../../../../../pd-service/pd-triger.service'; import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import { analyzeAndValidateNgModules } from '@angular/compiler';
@Component({ @Component({
selector: 'app-stock', selector: 'app-stock',
@ -29,21 +30,45 @@ import {ActivatedRoute, Router} from '@angular/router';
styleUrls: ['./stock.component.scss'] styleUrls: ['./stock.component.scss']
}) })
export class StockComponent implements OnInit { export class StockComponent implements OnInit {
@Input() pdid: number; // @Input() pdid: number;
@Input() form_id: number; // @Input() form_id: number;
pageTitle: string ="Stock Details";
pdid: number;
form_id: number;
public stockForm: FormGroup; public stockForm: FormGroup;
private notifier: NotifierService; private notifier: NotifierService;
public uomData : any = [];
rawmaterial : any;
constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute, constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
private router: Router, private router: Router,
private _pd: PdTrigerService) { private _pd: PdTrigerService,@Inject(MAT_DIALOG_DATA) public pd_all_details: any) {
this.notifier = notifier; this.pdid = this.pd_all_details.pdmaster_details.pd_id;
this.form_id = 11;
this.notifier = notifier;
} }
ngOnInit() { ngOnInit() {
this.initstockForm(); this.initstockForm();
this.getUOM();
this.setSku('data',0);
let params: any = {}; let params: any = {};
params.pd_id = this.pdid; params.pd_id = this.pdid;
params.pd_form_id = this.form_id; params.pd_form_id = this.form_id;
this._pd.retriveForm({pd_id:this.pdid,pd_form_id:'1'}).subscribe(value => {
console.log('Raw material Name',value.records.main_raw_materials);
// const faControl = (<FormArray>this.stockForm.controls['raw_materials']).at(1);
const control = (<FormArray>this.stockForm.controls['raw_materials']).at(0);
console.log(control);
// this.stockForm.controls['raw_materials'].setValue(value.records.main_raw_materials);
if (value.status == 200) {
this.rawmaterial = value.records.main_raw_materials;
}else{ this.rawmaterial = ''; }
})
this._pd.retriveForm(params).subscribe(value => { this._pd.retriveForm(params).subscribe(value => {
console.log('value', value); console.log('value', value);
const rawMaterial = <FormArray>this.stockForm.controls['raw_materials']; const rawMaterial = <FormArray>this.stockForm.controls['raw_materials'];
@ -85,10 +110,18 @@ export class StockComponent implements OnInit {
finished_goods: this.fb.array([]) finished_goods: this.fb.array([])
}); });
} }
setSku(sku: string, index: number) {
// const faControl =
// (<FormArray>this.stockForm.controls['raw_materials']).at(index);
// faControl['controls'].raw_name.setValue(sku);
}
createRawmaterial() { createRawmaterial() {
return this.fb.group({ return this.fb.group({
raw_name: ['', Validators.compose([Validators.required])], raw_name: ['', Validators.compose([Validators.required])],
stock_observed:['', Validators.compose([Validators.required])],
raw_quantity: ['', Validators.compose([Validators.required])], raw_quantity: ['', Validators.compose([Validators.required])],
raw_uom: ['', Validators.compose([Validators.required])],
other_uom : [''],
raw_value: ['', Validators.compose([Validators.required])], raw_value: ['', Validators.compose([Validators.required])],
rawmaterial_value: ['', Validators.compose([Validators.required])], rawmaterial_value: ['', Validators.compose([Validators.required])],
is_sufficiant_raw: ['', Validators.compose([Validators.required])], is_sufficiant_raw: ['', Validators.compose([Validators.required])],
@ -148,6 +181,17 @@ export class StockComponent implements OnInit {
} }
}); });
} }
getUOM() {
this._pd.getAllMasterDatas('UOM').subscribe(data => {
data.records.forEach(val => {
if (val.isactive == 1) {
this.uomData.push(val);
}
})
});
}
/** On Key Press Event For Numbers */ /** On Key Press Event For Numbers */
keyPress(event: any) { keyPress(event: any) {
const pattern = /[0-9]/; const pattern = /[0-9]/;

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>--> <form *ngIf="apiLoadFinish" [formGroup]="_supplierQuesFrom" (submit)="onSubmit()" novalidate>
<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>
</mat-form-field> <h2 mat-dialog-title class="paragraph_change">
</div> <div fxFlex="70" align="left">{{pageTitle}}</div>
</div> <div fxFlex="30" align="end">
<div fxLayout="row wrap" fxLayoutGap="14px" fxLayoutAlign="start none"> <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 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>
</mat-form-field> </div>
</div> </h2>
<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;"> <mat-dialog-content>
<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> <mat-tab-group>
</span>
</div> <mat-tab label="Questions">
</div> <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>
<div fxFlex="40" align="end">
</mat-card-content> <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Supplier Details" matTooltipPosition="above"
</mat-card> class="mr-1 mb-1 hover-icon" (click)="addSupplierDetails($event); false"><mat-icon>add</mat-icon></button>
</div> <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> <!----<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> </div>
<div class="row" style="text-align:right;"> </mat-dialog-actions>
<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> </form>
<!----<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>--> <notifier-container></notifier-container>
<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>

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{ // .example-full-width{
width : 100%; // 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, Component,
OnInit, OnInit,
Inject, Inject,
Input Output,Input
} from '@angular/core'; } from '@angular/core';
import { import {
@ -20,79 +20,39 @@ import {
MatDialogRef, MatDialogRef,
MAT_DIALOG_DATA MAT_DIALOG_DATA
} from '@angular/material'; } from '@angular/material';
/** Service */ /** Service */
import { PdTrigerService } from '../../../../../pd-service/pd-triger.service'; import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
@Component({ @Component({
selector: 'app-supplier-info', selector: 'app-supplier-info',
templateUrl: './supplier-info.component.html', templateUrl: './supplier-info.component.html',
styleUrls: ['./supplier-info.component.scss'] styleUrls: ['./supplier-info.component.scss']
}) })
export class SupplierInfoComponent implements OnInit { export class SupplierInfoComponent implements OnInit {
@Input() pdid: number; pageTitle: string ="Supplier Details";
//@Input() pdid: number;
pdid : string;
form_id:number;
public _supplierQuesFrom: FormGroup; public _supplierQuesFrom: FormGroup;
public submitted = false; public submitted = false;
public m_paymentModeType= []; 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'
// }
// ]
private notifier: NotifierService; private notifier: NotifierService;
constructor( constructor(
notifier: NotifierService, notifier: NotifierService,
private _formBuilder: FormBuilder, private _formBuilder: FormBuilder,
private pdTrigerService: PdTrigerService) { private pdTrigerService: PdTrigerService,
this.notifier = notifier; @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() { ngOnInit() {
// this.getM_FreqOfPurchase(); // 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 class="parent_mat_card">
<mat-card-content> <mat-card-header >
<mat-card-title>
<div fxLayout="row"> <div fxFlex="33" align="left">
<!--- <button mat-raised-button mat-icon-button class="hover-icon start_close_btn" type="button" matTooltip="Close" matTooltipPosition="above" <h4 class="mt-0">{{mainApplicantName}}</h4>
(click)="loadPdViewCompoent()"><mat-icon>close</mat-icon></button>--> <small>{{pdMasterList.customer_segment_name}}</small>
<div fxFlex="33" class="text-xs-left"> </div>
<h4 class="mt-0">{{mainApplicantName}}</h4> <div fxFlex="66" align="end">
<small>{{pdMasterList.customer_segment_name}}</small> <h4 class="mt-0">{{pdMasterList.product_name}}/{{pdMasterList.subproduct_name}}
</div> <button mat-raised-button mat-icon-button class="hover-icon " type="button" matTooltip="Close" matTooltipPosition="above"
<div fxFlex="56" class="text-xs-right"> (click)="loadPdViewCompoent()"><mat-icon>close</mat-icon></button>
<h4 class="mt-0">{{pdMasterList.product_name}}/{{pdMasterList.subproduct_name}}</h4> </h4>
<small>{{pdMasterList.lender_full_name}}/{{pdMasterList.lender_applicant_id}}</small> <small>{{pdMasterList.lender_full_name}}/{{pdMasterList.lender_applicant_id}}</small>
</div>
</div> </mat-card-title>
<div fxFlex="10" style="text-align: right;" class="mb-1"> </mat-card-header>
<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-content> <mat-card-content>
<button matTooltip="Menu" matTooltipPosition="above" (click)="mailnav.toggle()" color="primary" fxHide="false" fxshow.gt-sm mat-icon-button mat-raised-button> <div fxLayout="row wrap" class="child_mat_card">
<mat-icon style="color: white;">short_text</mat-icon> <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)">
</button> <mat-card-header>
<mat-sidenav-container class="app-inner background-none shadow-none mail-db"> <mat-card-title>{{ (formButton.form_name.length>17)? (formButton.form_name | slice:0:17)+'..':(formButton.form_name) }}</mat-card-title>
<mat-sidenav #mailnav [mode]="isOver() ? 'over' : 'side'" [opened]="!isOver()" class="mail-sidebar pl-xs pr-xs"> <!-- <mat-card-subtitle>Karthi Kms</mat-card-subtitle> -->
</mat-card-header>
</mat-card>
<!--{{ (currentPDStatus==pdStatusCheck.INPROGRESS)? 'COMPLETE':(currentPDStatus) }} --> </div>
<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>
</mat-card-content> </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> </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"; // .child_mat_card mat-card {
:host { // margin: 2 0%;
margin-left: -5px; // }
margin-right: -5px; mat-card.parent_mat_card > {
margin-top: -5px; mat-card-header {
display: block; display: flex;
} flex-direction: column;
:host /deep/ {
mat-sidenav {
width: 250px;
} }
.mat-sidenav-content { mat-card-content {
padding: 0; min-height:auto;
max-height:52vh;
} overflow:auto;
@media (min-width: 959px) {
.mat-sidenav-side {
background-color: transparent;
box-shadow: none!important;
}
} }
// @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; $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); mat-card .child_mat_card > mat-card {
.p-list-main { border-radius: 0px 0px 0px 15px;
background: white; box-shadow: $base-card-box-shadow;
margin: auto; transform: scale(0.95);
position: relative; transition: box-shadow 0.5s, transform 0.5s;
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 { &:hover {
cursor: pointer;
background-color: #e00201 !important;
transform: scale(1); transform: scale(1);
box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2); 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 {Component, ViewChild, OnInit, ViewEncapsulation, OnDestroy} from '@angular/core';
import {FormBuilder, FormGroup, Validators, FormControl, FormArray, AbstractControl} from '@angular/forms'; import {FormBuilder, FormGroup, Validators, FormControl, FormArray, AbstractControl} from '@angular/forms';
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import {MatDialog } from '@angular/material';
import {NotifierService} from 'angular-notifier'; import {NotifierService} from 'angular-notifier';
import {ListPdComponent} from './../list-pd.component'; import {ListPdComponent} from './../list-pd.component';
import {PdTrigerService} from '../../../pd-service/pd-triger.service'; 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({ @Component({
selector: 'app-start-pd', selector: 'app-start-pd',
templateUrl: './start-pd.component.html', templateUrl: './start-pd.component.html',
@ -177,7 +196,7 @@ pdFullDetails:any=[];
private notifier: NotifierService; 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 router: Router,
private listPDComponent: ListPdComponent, private _pd: PdTrigerService,) { private listPDComponent: ListPdComponent, private _pd: PdTrigerService,) {
this.startPD = this.route.snapshot.params['pdid']; this.startPD = this.route.snapshot.params['pdid'];
@ -295,9 +314,7 @@ pdFullDetails:any=[];
this.pdMasterList=data.records.pdmaster_details; this.pdMasterList=data.records.pdmaster_details;
this.categoryList=data.records.question_answers; this.categoryList=data.records.question_answers;
this.categoryFormButtons = data.records.template_forms; this.categoryFormButtons = data.records.template_forms;
console.log('formButtons', this.categoryFormButtons);
let filterApplicantName= data.records.pdapplicants_detials.filter(item => item.applicant_type == 1); let filterApplicantName= data.records.pdapplicants_detials.filter(item => item.applicant_type == 1);
console.log(filterApplicantName);
this.mainApplicantName = filterApplicantName[0].applicant_name; this.mainApplicantName = filterApplicantName[0].applicant_name;
this.currentPDStatus = data.records.pdmaster_details.pd_status; this.currentPDStatus = data.records.pdmaster_details.pd_status;
@ -626,9 +643,234 @@ pdFullDetails:any=[];
// start // start
// direct form based questions // direct form based questions
OnSelectDirectForms(details: any) { OnSelectDirectForms(details: any) {
this.formsCategoryEnable = true; // this.formsCategoryEnable = true;
this.selectedFormsCategory = details; this.selectedFormsCategory = details;
console.log('select..', this.selectedFormsCategory);
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], // 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], 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], 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 { export class ManagePdModule {
} }