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

Forms UI

Browse Source
This commit is contained in:
saravanakumarkandasami 2018-11-09 13:46:13 +05:30
parent 2c15ad0cb5
commit dbd7bb71f3
9 changed files with 471 additions and 408 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,6 @@
<p>Address</p> <mat-card style="min-height: 550px;">
<mat-card-content>
<p>Address Details</p>
<form class="address" [formGroup]="addressForm"> <form class="address" [formGroup]="addressForm">
<mat-form-field> <mat-form-field>
<input matInput placeholder="Address" formControlName="address"> <input matInput placeholder="Address" formControlName="address">
@ -86,22 +88,29 @@
<mat-option value="dont_know">Dont Know</mat-option> <mat-option value="dont_know">Dont Know</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<button type="button" mat-raised-button mat-icon-button *ngIf="i==0" <button type="button" matTooltip="Add More Neighbour Details" matTooltipPosition="above" mat-raised-button mat-icon-button *ngIf="i==0"
(click)="addNeighbour($event)" (click)="addNeighbour($event)"
style="float: right;"> style="float: right;">
<mat-icon>add</mat-icon> <mat-icon>add</mat-icon>
</button> </button>
<button type="button" mat-raised-button mat-icon-button *ngIf="i>0" <button type="button" matTooltip="Delete" matTooltipPosition="above" mat-raised-button mat-icon-button *ngIf="i>0"
(click)="removeNeighbour(i)" (click)="removeNeighbour(i)"
style="float: right;"> style="float: right;">
<mat-icon>close</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
</mat-card-content> </mat-card-content>
</div> </div>
</div> </div>
</mat-card> </mat-card>
<button mat-raised-button type="submit" class="button" (click)="onSubmit()">Submit <div style="text-align: right;">
<button mat-raised-button mat-icon-button type="submit" matTooltip="Submit" matTooltipPosition="above" (click)="onSubmit()"><mat-icon>save</mat-icon>
</button> </button>
</div>
</form> </form>
<notifier-container></notifier-container> <notifier-container></notifier-container>
</mat-card-content>
</mat-card>

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

@ -1,15 +1,18 @@
<!--<pre> {{ m_group | json}}</pre>--> <!--<pre> {{ m_group | json}}</pre>-->
<mat-card style="padding: 12px;"> <mat-card style="min-height: 550px;" >
<mat-card-content>
<p>Assets Details</p>
<form *ngIf="apiLoadFinish && loadDetails" [formGroup]="_assetsQuesFrom" (submit)="onSubmit()" novalidate> <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">
<mat-card> <mat-card>
<mat-card-content>
<div [formGroupName]="i"> <div [formGroupName]="i">
<div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none"> <div fxLayout="row wrap" fxLayoutGap="5px" fxLayoutAlign="start none">
<div> <div>
<mat-form-field> <mat-form-field>
<mat-select (selectionChange)="selectedAssetsType($event, i)" placeholder="Select Assets Type" formControlName="assets_mode"> <mat-select (selectionChange)="selectedAssetsType($event, i)" placeholder="Assets Type" formControlName="assets_mode">
<mat-option *ngFor="let asset of m_assets_type" [value]="asset.id">{{ asset.name }}</mat-option> <mat-option *ngFor="let asset of m_assets_type" [value]="asset.id">{{ asset.name }}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
@ -61,7 +64,7 @@
</div> </div>
</div> </div>
</div> </div>
<!--jwell details--> <!--jwell details
<div *ngIf="sup.get('assets_mode').value == 4"> <div *ngIf="sup.get('assets_mode').value == 4">
<div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none"> <div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
<div *ngFor="let detail of sup['controls'].details['controls']; let s = index"> <div *ngFor="let detail of sup['controls'].details['controls']; let s = index">
@ -74,7 +77,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>-->
<!--Consumer Durable--> <!--Consumer Durable-->
<div *ngIf="sup.get('assets_mode').value == 5"> <div *ngIf="sup.get('assets_mode').value == 5">
<div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none"> <div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
@ -176,26 +179,35 @@
</div> </div>
<!--Desction Dynamic details : END --> <!--Desction Dynamic details : END -->
<div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none"> <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
<div *ngIf="sup.get('assets_mode').value == 1 || sup.get('assets_mode').value == 4">
<div fxFlex="33"> <div fxFlex="33">
<mat-form-field class="ml-xs example-full-width"> <mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Approximate Market Value" formControlName="approximate_market_value"> <input matInput placeholder="Approximate Market Value" formControlName="approximate_market_value">
</mat-form-field> </mat-form-field>
</div> </div>
</div>
<div *ngIf="sup.get('assets_mode').value == 1 || sup.get('assets_mode').value == 2 || sup.get('assets_mode').value == 3 || sup.get('assets_mode').value == 4 || sup.get('assets_mode').value == 5">
<div fxFlex="33"> <div fxFlex="33">
<mat-form-field class="ml-xs example-full-width"> <mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Name of the Owner" formControlName="name_of_the_owner"> <input matInput placeholder="Name of the Owner" formControlName="name_of_the_owner">
</mat-form-field> </mat-form-field>
</div> </div>
</div>
<div *ngIf="sup.get('assets_mode').value == 1 || sup.get('assets_mode').value == 2 || sup.get('assets_mode').value == 3 || sup.get('assets_mode').value == 5">
<div fxFlex="33"> <div fxFlex="33">
<mat-form-field class="ml-xs example-full-width"> <mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Year of Purchase and Approximate month" formControlName="year_of_purchase"> <input matInput placeholder="Year and month of purchase" formControlName="year_of_purchase">
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
</div>
<div *ngIf="sup.get('assets_mode').value == 1 || sup.get('assets_mode').value == 2 || sup.get('assets_mode').value == 3 || sup.get('assets_mode').value == 4 || sup.get('assets_mode').value == 5">
<div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none"> <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
<div fxFlex="33"> <div fxFlex="33">
<mat-checkbox formControlName="emi" [ngModel]="sup.get('emi').value === '1' ? true : false" <mat-checkbox formControlName="emi" [ngModel]="sup.get('emi').value === '1' ? true : false"
(ngModelChange)="sup.get('emi').value = $event ? '1' : '0'">EMI</mat-checkbox> (ngModelChange)="sup.get('emi').value = $event ? '1' : '0'">Is there a loan?</mat-checkbox>
</div> </div>
<div *ngIf="sup.get('emi').value === '1'" fxFlex="33"> <div *ngIf="sup.get('emi').value === '1'" fxFlex="33">
<mat-form-field class="ml-xs example-full-width"> <mat-form-field class="ml-xs example-full-width">
@ -204,23 +216,26 @@
</div> </div>
<div *ngIf="sup.get('emi').value === '1'" fxFlex="33"> <div *ngIf="sup.get('emi').value === '1'" fxFlex="33">
<mat-form-field class="ml-xs example-full-width"> <mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Elapsed Tenure" formControlName="elapsed_tenure"> <input matInput placeholder="Elapsed Tenure in months" formControlName="elapsed_tenure">
</mat-form-field> </mat-form-field>
</div> </div>
<div *ngIf="sup.get('emi').value === '1'" fxFlex="33"> <div *ngIf="sup.get('emi').value === '1'" fxFlex="33">
<mat-form-field class="ml-xs example-full-width"> <mat-form-field class="ml-xs example-full-width">
<input matInput placeholder="Balance Tenure" formControlName="balance_tenure"> <input matInput placeholder="Balance Tenure in months" formControlName="balance_tenure">
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
</div>
<div fxLayout="row" fxLayoutGap="12px" fxLayoutAlign="start none"> <div fxLayout="row" fxLayoutGap="12px" fxLayoutAlign="start none">
<div fxFlex="20"> <div fxFlex="20">
<span *ngIf="_assetsQuesFrom.controls.assets_details.controls.length > 1" (click)="removeLanguage(i)"> <span *ngIf="_assetsQuesFrom.controls.assets_details.controls.length > 1" (click)="removeLanguage(i)">
<button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button> <button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
</mat-card-content>
</mat-card> </mat-card>
</div> </div>
<button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Answer" matTooltipPosition="above" <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Answer" matTooltipPosition="above"
@ -232,4 +247,6 @@
<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-content>
</mat-card> </mat-card>

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

@ -1,3 +1,6 @@
<mat-card style="min-height: 550px;">
<mat-card-content>
<p>Banking Information</p>
<form [formGroup]="bankingForm" class="bankForm"> <form [formGroup]="bankingForm" class="bankForm">
<div formArrayName="itemRows"> <div formArrayName="itemRows">
<mat-accordion <mat-accordion
@ -6,12 +9,8 @@
<mat-expansion-panel class="banlFields" [expanded]="step == i"> <mat-expansion-panel class="banlFields" [expanded]="step == i">
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title> <mat-panel-title>
<h4>{{i+1}} Banking details<span *ngIf="i==0" style="float: right;"> <p>{{i+1}} , Banking Details
<mat-icon (click)="addBankdetails(i)">add</mat-icon> </p>
</span>
<span *ngIf="i > 0">
<mat-icon (click)="deleteBankdetails(i)">delete</mat-icon>
</span></h4>
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<mat-form-field> <mat-form-field>
@ -56,11 +55,22 @@
<input matInput placeholder="Approximate Vintage" <input matInput placeholder="Approximate Vintage"
formControlName="vintage"> formControlName="vintage">
</mat-form-field> </mat-form-field>
<button *ngIf="i > 0" mat-raised-button mat-icon-button matTooltip="Delete" matTooltipPosition="above" (click)="deleteBankdetails(i)">
<mat-icon >delete</mat-icon>
</button>
</mat-expansion-panel> </mat-expansion-panel>
</mat-accordion> </mat-accordion>
</div> </div>
<button mat-raised-button class="button" (click)="bankSubmit()">Submit <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 Bank Details" matTooltipPosition="above" (click)="addBankdetails(i)">
<mat-icon >add</mat-icon>
</button> </button>
<button class="mr-1 mb-1" type="submit" mat-raised-button mat-icon-button type="submit" matTooltip="Submit" matTooltipPosition="above" (click)="bankSubmit()"><mat-icon>save</mat-icon>
</button>
</div>
</form> </form>
<notifier-container></notifier-container> <notifier-container></notifier-container>
</mat-card-content>
</mat-card>

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

@ -1,5 +1,5 @@
.banlFields mat-form-field { .banlFields mat-form-field {
width: 100%; //width: 100%;
margin: 0 2%; margin: 0 2%;
} }
.bankForm .button { .bankForm .button {

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

@ -1,7 +1,9 @@
<mat-card style="min-height: 550px;">
<mat-card-content>
<p>Current Loan Details</p> <p>Current Loan Details</p>
<form [formGroup]="currentLoanForm" class="address"> <form [formGroup]="currentLoanForm" class="address">
<mat-form-field> <mat-form-field>
<mat-select placeholder="Do you have any other existing Loan" <mat-select placeholder="Do you have any other existing loan"
formControlName="existing_loan"> formControlName="existing_loan">
<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>
@ -33,17 +35,24 @@
<mat-form-field> <mat-form-field>
<input matInput placeholder="Current Balance Tenure" formControlName="current_balance_tenure"> <input matInput placeholder="Current Balance Tenure" formControlName="current_balance_tenure">
</mat-form-field> </mat-form-field>
<button type="button" mat-raised-button mat-icon-button (click)="addLoanDetails()" <button type="button" mat-raised-button mat-icon-button matTooltip="Add More Loan Details" matTooltipPosition="above" (click)="addLoanDetails()"
*ngIf="i==0"> *ngIf="i==0">
<mat-icon>add</mat-icon> <mat-icon>add</mat-icon>
</button> </button>
<button type="button" mat-raised-button mat-icon-button (click)="deleteLoanDetails(i)" <button type="button" mat-raised-button mat-icon-button matTooltip="Delete" matTooltipPosition="above" (click)="deleteLoanDetails(i)"
*ngIf="i>0"> *ngIf="i>0">
<mat-icon>close</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
</mat-card-content> </mat-card-content>
</div> </div>
</div> </div>
</mat-card> </mat-card>
<button mat-raised-button type="submit" class="button" (click)="submitCurrentloan()"></button> <div style="text-align: right;">
<button type="submit" mat-raised-button mat-icon-button type="submit" matTooltip="Submit" matTooltipPosition="above" (click)="submitCurrentloan()"><mat-icon>save</mat-icon>
</button>
</div>
</form> </form>
</mat-card-content>
</mat-card>

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

@ -1,4 +1,6 @@
<p>Family</p> <mat-card style="min-height: 550px;">
<mat-card-content>
<p>Family Details</p>
<form class="address" [formGroup]="familyForm"> <form class="address" [formGroup]="familyForm">
<mat-form-field> <mat-form-field>
<mat-select placeholder="Person Met" formControlName="person"> <mat-select placeholder="Person Met" formControlName="person">
@ -52,7 +54,7 @@
</button> </button>
<button type="button" mat-raised-button mat-icon-button <button type="button" mat-raised-button mat-icon-button
(click)="deleteEarningMembers(i)" *ngIf="i>0"> (click)="deleteEarningMembers(i)" *ngIf="i>0">
<mat-icon>close</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
</mat-card-content> </mat-card-content>
</div> </div>
@ -94,7 +96,7 @@
</button> </button>
<button type="button" mat-raised-button mat-icon-button (click)="deleteMembers(i)" <button type="button" mat-raised-button mat-icon-button (click)="deleteMembers(i)"
*ngIf="i>0"> *ngIf="i>0">
<mat-icon>close</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
</mat-card-content> </mat-card-content>
</div> </div>
@ -125,11 +127,17 @@
<input matInput placeholder="Please specify" formControlName="ownershipOther"> <input matInput placeholder="Please specify" formControlName="ownershipOther">
</mat-form-field> </mat-form-field>
<mat-form-field *ngIf="ownership.value =='Rented'"> <mat-form-field *ngIf="ownership.value =='Rented'">
<input matInput placeholder="what rent" <input matInput placeholder="Rent Amount"
formControlName="rent"> formControlName="rent">
</mat-form-field> </mat-form-field>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<button mat-raised-button class="button" (click)="submitFamily()">Submit</button> <div style="text-align: right;">
<button type="submit" mat-raised-button mat-icon-button type="submit" matTooltip="Submit" matTooltipPosition="above" (click)="submitFamily()"><mat-icon>save</mat-icon>
</button>
</div>
</form> </form>
<notifier-container></notifier-container> <notifier-container></notifier-container>
</mat-card-content>
</mat-card>

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

@ -43,7 +43,8 @@ export class FamilyDetailsComponent implements OnInit {
public ownershipOther: AbstractControl; public ownershipOther: AbstractControl;
public rent: AbstractControl; public rent: AbstractControl;
filteredStates: any = [ filteredStates: any = [
'Co-Applicant 1 to x', 'Main Applicant',
'Co-Applicant ',
'Accountant', 'Accountant',
'Manager', 'Manager',
'Relative of the applicant', 'Relative of the applicant',

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

@ -1,3 +1,6 @@
<mat-card style="min-height: 550px;">
<mat-card-content>
<p>Other Income Details</p>
<form [formGroup]="otherIncomeForm" class="address"> <form [formGroup]="otherIncomeForm" class="address">
<mat-form-field> <mat-form-field>
<mat-select placeholder="Other Income" <mat-select placeholder="Other Income"
@ -8,7 +11,7 @@
</mat-form-field> </mat-form-field>
<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>Loan Details<p> <p>Income Details<p>
</mat-card-header> </mat-card-header>
<div formArrayName="income_details"> <div formArrayName="income_details">
<div *ngFor="let details of otherIncomeForm.get('income_details').controls; let i=index" <div *ngFor="let details of otherIncomeForm.get('income_details').controls; let i=index"
@ -20,7 +23,7 @@
<mat-option value="rental_income">Rental Income</mat-option> <mat-option value="rental_income">Rental Income</mat-option>
<mat-option value="interest_income">Interest Income</mat-option> <mat-option value="interest_income">Interest Income</mat-option>
<mat-option value="agricultural_income">Agricultural Income</mat-option> <mat-option value="agricultural_income">Agricultural Income</mat-option>
<mat-option value="dividend_income">Dividend Income and Others</mat-option> <mat-option value="dividend_income">Dividend Income</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
@ -31,17 +34,23 @@
<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>
<button type="button" mat-raised-button mat-icon-button (click)="addIncomeDetails()" <button type="button" matTooltip="Add More Income Details" matTooltipPosition="above" mat-raised-button mat-icon-button (click)="addIncomeDetails()"
*ngIf="i==0"> *ngIf="i==0">
<mat-icon>add</mat-icon> <mat-icon>add</mat-icon>
</button> </button>
<button type="button" mat-raised-button mat-icon-button (click)="deleteIncomeDetails(i)" <button type="button" matTooltip="Delete" matTooltipPosition="above" mat-raised-button mat-icon-button (click)="deleteIncomeDetails(i)"
*ngIf="i>0"> *ngIf="i>0">
<mat-icon>close</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
</mat-card-content> </mat-card-content>
</div> </div>
</div> </div>
</mat-card> </mat-card>
<button mat-raised-button type="submit" class="button" (click)="submitCurrentDetails()"></button> <div style="text-align: right;">
<button type="submit" mat-raised-button mat-icon-button type="submit" matTooltip="Submit" matTooltipPosition="above" (click)="submitCurrentDetails()"><mat-icon>save</mat-icon>
</button>
</div>
</form> </form>
</mat-card-content>
</mat-card>