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

Dashboard, PD UI

Browse Source
This commit is contained in:
saravanakumarkandasami 2018-10-29 13:38:58 +05:30
parent b91772291a
commit 408f09fb1b
10 changed files with 629 additions and 591 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,8 +16,8 @@
</mat-card>
</div>
</div> -->
<div fxLayout="row wrap">
<div fxFlex.gt-sm="60%" fxFlex="100" class="m-gap">
<div fxLayout="row">
<div fxFlex="77%">
<mat-card>
<mat-card-title>Today's Details</mat-card-title>
<mat-card-subtitle></mat-card-subtitle>
@ -43,54 +43,52 @@
</mat-card>
</div>
<div fxFlex.gt-sm="40%" fxFlex="100" class="m-gap">
<mat-card class="p-2">
<!---<h4>Profile Settings</h4>-->
<mat-tab-group >
<mat-tab>
<ng-template mat-tab-label>Lenderwise</ng-template>
<mat-card-content>
<mat-list>
<ng-template let-item let-last="last" ngFor [ngForOf]="lenderpd">
<mat-list-item>
<h3 mat-line> {{item.lendername}} / {{item.billingaddr}} </h3>
<p mat-line> Full -{{item.fullpd}} / Smart -{{item.smartpd}} / Tele - {{item.telepd}} </p>
</mat-list-item>
</ng-template>
</mat-list>
</mat-card-content>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>CityWise</ng-template>
<mat-list>
<ng-template let-item let-last="last" ngFor [ngForOf]="citywisepd">
<mat-list-item>
<h3 mat-line> {{item.cityname}} </h3>
<p mat-line> Full -{{item.fullpd}} / Smart -{{item.smartpd}} / Tele - {{item.telepd}}</p>
</mat-list-item>
<div fxFlex="23%" >
<mat-card>
<mat-tab-group >
<mat-tab>
<ng-template mat-tab-label>Lenderwise</ng-template>
<mat-card-content>
<mat-list>
<ng-template let-item let-last="last" ngFor [ngForOf]="lenderpd">
<mat-list-item>
<h3 mat-line> {{item.lendername}} / {{item.billingaddr}} </h3>
<p mat-line> Full -{{item.fullpd}} / Smart -{{item.smartpd}} / Tele - {{item.telepd}} </p>
</mat-list-item>
</ng-template>
</mat-list>
<mat-card-content>
</mat-card-content>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label><span fxFlex="80">Alert</span> <span fxFlex="20"><mat-icon color="primary"> warning</mat-icon></span></ng-template>
<mat-card-content>
<mat-list>
<ng-template let-item let-last="last" ngFor [ngForOf]="message">
<mat-list-item>
<!--<img mat-list-avatar src="{{item.photo}}" alt="">-->
<h3 mat-line> {{item.applicantname}} </h3>
<p mat-line> {{item.applicantid}}</p>
<p mat-line> {{item.lendername}} - {{item.status}} </p>
</mat-list-item>
</ng-template>
</mat-list>
</mat-card-content>
</mat-tab>
</mat-tab-group>
</mat-card>
</mat-list>
</mat-card-content>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>CityWise</ng-template>
<mat-card-content>
<mat-list>
<ng-template let-item let-last="last" ngFor [ngForOf]="citywisepd">
<mat-list-item>
<h3 mat-line> {{item.cityname}} </h3>
<p mat-line> Full -{{item.fullpd}} / Smart -{{item.smartpd}} / Tele - {{item.telepd}}</p>
</mat-list-item>
</ng-template>
</mat-list>
</mat-card-content>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label><span fxFlex="80">Alert</span> <span fxFlex="20"><mat-icon color="primary"> warning</mat-icon></span></ng-template>
<mat-card-content>
<mat-list>
<ng-template let-item let-last="last" ngFor [ngForOf]="message">
<mat-list-item>
<!--<img mat-list-avatar src="{{item.photo}}" alt="">-->
<h3 mat-line> {{item.applicantname}} </h3>
<p mat-line> {{item.applicantid}}</p>
<p mat-line> {{item.lendername}} - {{item.status}} </p>
</mat-list-item>
</ng-template>
</mat-list>
</mat-card-content>
</mat-tab>
</mat-tab-group>
</mat-card>
</div>
</div>

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

@ -18,7 +18,7 @@ export class DashboardComponent {
public showYAxisLabel = true;
public yAxisLabel = 'PD';
view: any[];
width =600;
width =900;
height= 250;
public colorScheme = {
domain: ['#673ab7', '#f44336', '#009688 ', '#2196f3', '#234278 ', '#2a1653']

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

@ -1,4 +1,5 @@
<mat-card>
<mat-card-content>
<form [formGroup]="_PDtriggerForm" (submit)="submitPdDetails(_PDtriggerForm.value,PDTriggerStatus)">
<mat-card-content>
@ -272,6 +273,9 @@
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="submit" matTooltip="PD Process" matTooltipPosition="above" [disabled]="!enablePDButton || !_PDtriggerForm.valid "><mat-icon>save</mat-icon></button>
</mat-card-actions>
</form>
</mat-card-content>
</mat-card>

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

@ -1,365 +1,370 @@
<mat-sidenav-container class="app-inner background-none shadow-none mail-db">
<mat-sidenav #mailnav [mode]="isOver() ? 'over' : 'side'" [opened]="!isOver()" class="mail-sidebar pl-xs pr-xs">
<button _ngcontent-c21="" class="compose-btn mat-warn mat-raised-button mb-1" (click)="changePDStatus(PDStatus);"> <span>Complete</span></button>
<mat-expansion-panel *ngFor="let category of categoryList;let catIndex = index; ">
<mat-expansion-panel-header>
<mat-panel-title class="text-xs-left">
<h6 class="mt-0"> {{category.category_name}}</h6>
</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>
</mat-sidenav>
<mat-toolbar color="primary" fxHide="false" fxHide.gt-sm>
<button (click)="mailnav.toggle()" mat-icon-button>
<mat-icon>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>
<mat-card-content>
<div fxLayout="row" >
<button mat-raised-button mat-icon-button class="hover-icon start_close_btn" type="button" matTooltip="Close" matTooltipPosition="above"
(click)="loadPdViewCompoent()"><mat-icon>close</mat-icon></button>
<div fxFlex="33" class="text-xs-left">
<h4 class="mt-0">{{mainApplicantName}}</h4>
<small>{{pdMasterList.customer_segment_name}}</small>
</div>
<div fxFlex="66" class="text-xs-right">
<h4 class="mt-0">{{pdMasterList.product_name}}/{{pdMasterList.subproduct_name}}</h4>
<small>{{pdMasterList.lender_full_name}}/{{pdMasterList.lender_applicant_id}}</small>
</div>
</div>
</mat-card-content>
<hr>
<mat-card-content style="min-height: 240px;" *ngIf="selectedCategory.length==0">
<!-- <h6 class="mt-0">About</h6> -->
<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">
<form [formGroup]="optionsForm" *ngIf="answerList.length>0 ; else noanswers;">
<mat-card-content>
<h6 class="mt-0">{{optionsForm.controls.pd_question.value}}</h6>
<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="pb-0 text-sm-right">
<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
<mat-button-toggle value="bold" matTooltip="Save&Previous" (click)="saveNextPrevious(optionsForm.controls,previous)" matTooltipPosition="below"><mat-icon>arrow_backward</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>skip_previous</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>skip_next</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Save&Next" (click)="saveNextPrevious(optionsForm.controls,next)" matTooltipPosition="below"><mat-icon>arrow_forward</mat-icon></mat-button-toggle>
</mat-button-toggle-group>
<mat-card>
<mat-card-content>
<mat-sidenav-container class="app-inner background-none shadow-none mail-db">
<mat-sidenav #mailnav [mode]="isOver() ? 'over' : 'side'" [opened]="!isOver()" class="mail-sidebar pl-xs pr-xs">
<button _ngcontent-c21="" class="compose-btn mat-warn mat-raised-button mb-1" (click)="changePDStatus(PDStatus);"> <span>Complete</span></button>
<mat-expansion-panel *ngFor="let category of categoryList;let catIndex = index; ">
<mat-expansion-panel-header>
<mat-panel-title class="text-xs-left">
<h6 class="mt-0"> {{category.category_name}}</h6>
</mat-panel-title>
</mat-expansion-panel-header>
</div>
<!-- end questions type options -->
</div>
</mat-card-actions>
</form>
<ng-template #noanswers>
<mat-card-content>
<h6 class="mt-0">{{selectedCategory.question}}</h6>
</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>skip_previous</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>skip_next</mat-icon></mat-button-toggle>
</mat-button-toggle-group>
</div>
</div>
</mat-card-actions>
</ng-template>
<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>
</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>
<h6 class="mt-0">{{textBoxForm.controls.pd_question.value}}</h6>
<div fxLayout="row" >
<div fxFlex="60" class="text-xs-left">
<mat-list [formArrayName]="'items'">
<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">
</mat-list>
</mat-expansion-panel>
</mat-sidenav>
<mat-toolbar color="primary" fxHide="false" fxHide.gt-sm>
<button (click)="mailnav.toggle()" mat-icon-button>
<mat-icon>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>
<mat-card-content>
<div fxLayout="row" >
<button mat-raised-button mat-icon-button class="hover-icon start_close_btn" type="button" matTooltip="Close" matTooltipPosition="above"
(click)="loadPdViewCompoent()"><mat-icon>close</mat-icon></button>
<div fxFlex="33" class="text-xs-left">
<h4 class="mt-0">{{mainApplicantName}}</h4>
<small>{{pdMasterList.customer_segment_name}}</small>
</div>
<div fxFlex="66" class="text-xs-right">
<h4 class="mt-0">{{pdMasterList.product_name}}/{{pdMasterList.subproduct_name}}</h4>
<small>{{pdMasterList.lender_full_name}}/{{pdMasterList.lender_applicant_id}}</small>
</div>
</div>
</mat-card-content>
<hr>
<mat-card-content style="min-height: 240px;" *ngIf="selectedCategory.length==0">
<!-- <h6 class="mt-0">About</h6> -->
<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">
<form [formGroup]="optionsForm" *ngIf="answerList.length>0 ; else noanswers;">
<mat-card-content>
<h6 class="mt-0">{{optionsForm.controls.pd_question.value}}</h6>
<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>
<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>
</mat-card>
</div>
<!-- this section for questions type options button actions -->
<div fxFlex="40" class="pb-0 text-sm-right">
<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
<mat-button-toggle value="bold" matTooltip="Save&Previous" (click)="saveNextPreviousText(textBoxForm.controls,previous)" matTooltipPosition="below"><mat-icon>arrow_backward</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>skip_previous</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>skip_next</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Save&Next" (click)="saveNextPreviousText(textBoxForm.controls,next)" matTooltipPosition="below"><mat-icon>arrow_forward</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>
<h6 class="mt-0">{{selectedCategory.question}}</h6>
</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>skip_previous</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>skip_next</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>
<h6 class="mt-0">{{checkBoxForm.controls.pd_question.value}}</h6>
<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="pb-0 text-sm-right">
<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
<mat-button-toggle value="bold" matTooltip="Save&Previous" (click)="saveNextPrevious(checkBoxForm.controls,previous)" matTooltipPosition="below"><mat-icon>arrow_backward</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>skip_previous</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>skip_next</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Save&Next" (click)="saveNextPrevious(checkBoxForm.controls,next)" matTooltipPosition="below"><mat-icon>arrow_forward</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>
<h6 class="mt-0">{{selectedCategory.question}}</h6>
</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>skip_previous</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>skip_next</mat-icon></mat-button-toggle>
</mat-button-toggle-group>
</div>
</div>
</mat-card-actions>
</ng-template>
</ng-container>
</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>
</ng-container>
<!-- end check box questions section -->
</figure>
</div>
</mat-sidenav-container>
</mat-form-field>
</div>
<!-- this section for questions type options button actions -->
<div fxFlex="40" class="pb-0 text-sm-right">
<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
<mat-button-toggle value="bold" matTooltip="Save&Previous" (click)="saveNextPrevious(optionsForm.controls,previous)" matTooltipPosition="below"><mat-icon>arrow_backward</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>skip_previous</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>skip_next</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Save&Next" (click)="saveNextPrevious(optionsForm.controls,next)" matTooltipPosition="below"><mat-icon>arrow_forward</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>
<h6 class="mt-0">{{selectedCategory.question}}</h6>
</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>skip_previous</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>skip_next</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>
<h6 class="mt-0">{{textBoxForm.controls.pd_question.value}}</h6>
<div fxLayout="row" >
<div fxFlex="60" class="text-xs-left">
<mat-list [formArrayName]="'items'">
<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="pb-0 text-sm-right">
<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
<mat-button-toggle value="bold" matTooltip="Save&Previous" (click)="saveNextPreviousText(textBoxForm.controls,previous)" matTooltipPosition="below"><mat-icon>arrow_backward</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>skip_previous</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>skip_next</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Save&Next" (click)="saveNextPreviousText(textBoxForm.controls,next)" matTooltipPosition="below"><mat-icon>arrow_forward</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>
<h6 class="mt-0">{{selectedCategory.question}}</h6>
</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>skip_previous</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>skip_next</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>
<h6 class="mt-0">{{checkBoxForm.controls.pd_question.value}}</h6>
<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="pb-0 text-sm-right">
<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
<mat-button-toggle value="bold" matTooltip="Save&Previous" (click)="saveNextPrevious(checkBoxForm.controls,previous)" matTooltipPosition="below"><mat-icon>arrow_backward</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>skip_previous</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>skip_next</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Save&Next" (click)="saveNextPrevious(checkBoxForm.controls,next)" matTooltipPosition="below"><mat-icon>arrow_forward</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>
<h6 class="mt-0">{{selectedCategory.question}}</h6>
</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>skip_previous</mat-icon></mat-button-toggle>
<mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>skip_next</mat-icon></mat-button-toggle>
</mat-button-toggle-group>
</div>
</div>
</mat-card-actions>
</ng-template>
</ng-container>
</ng-container>
<!-- end check box questions section -->
</figure>
</div>
</mat-sidenav-container>
</mat-card-content>
</mat-card>
<notifier-container></notifier-container>

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

@ -1,140 +1,145 @@
<div class="mb-2" >
<div fxLayout="row" fxLayoutAlign="start center" class="filter-header">
<div *ngFor="let master of pdMasterData" class="ml-xs mr-xs" fxFlex="75">
<h4>{{master.lender_full_name}} - {{master.lender_applicant_id}}</h4>
{{master.pd_date_of_initiation}}
</div>
<div *ngFor="let master of pdMasterData" class="ml-xs mr-xs pt-1" fxFlex="25" style="text-align:right;" >
<button *ngIf="master.pd_type_name" mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Allocate" matTooltipPosition="above" (click)="pdAllocationTo(master)"><mat-icon>verified_user</mat-icon></button>
<button *ngIf="master.pd_type_name" mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Schedule" matTooltipPosition="above" (click)="scheduleDetails(master)"><mat-icon>schedule</mat-icon></button>
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Discussion" matTooltipPosition="above" (click)="getPDStart(viewID)"><mat-icon>question_answer</mat-icon></button>
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="above" (click)="loadPdListCompoent()"><mat-icon>close</mat-icon></button>
<br><span style="color:red;text-align:center">{{master.pd_allocated_to}} -{{master.pd_status_name}}</span>
</div>
</div>
<mat-card-content>
<div fxLayout="row wrap">
<div class="m-gap p-gap" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
<!--pd master -->
<mat-card *ngFor="let master of pdMasterData" class="minheight">
<div class="cardEdit">
<!-- <button *ngIf="master.pd_type_name" mat-raised-button mat-button-sm mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="pdAllocationTo(master)"><mat-icon>directions_run</mat-icon></button>
<button *ngIf="master.pd_type_name" mat-raised-button mat-button-sm mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="scheduleDetails(master)"><mat-icon>schedule</mat-icon></button>
-->
<button mat-raised-button mat-button-sm mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="editPdMaster(master)"><mat-icon>edit</mat-icon></button>
</div>
<mat-card-header>
<!-- <img mat-card-avatar src="assets/images/avatar.jpg">
<mat-card-title>{{master.lender_full_name}} - {{master.lender_applicant_id}}
</mat-card-title>-->
<mat-card-subtitle *ngIf="master.city_name" class="hover-icon"><i class="fa-1x fa fa-map-marker"> </i> &nbsp;<span>{{master.city_name}} / {{master.state_name}}-{{master.pincode}}</span></mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p *ngIf="master.product_name">{{master.product_name}} / {{master.subproduct_name}}</p>
<p *ngIf="master.pd_type_name"><span>{{master.pd_type_name}}</span> / <span *ngIf="master.loan_amount" class="hover-icon"><i class="fa-1x fa fa-rupee">&nbsp;</i>{{master.loan_amount}}</span></p>
<p><span>{{master.addressline1}},{{master.addressline2}} ,{{master.addressline3}}</span></p>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-content>
<div class="mb-2" >
<div fxLayout="row" fxLayoutAlign="start center" class="filter-header">
<div *ngFor="let master of pdMasterData" class="ml-xs mr-xs" fxFlex="75">
<h4>{{master.lender_full_name}} - {{master.lender_applicant_id}}</h4>
{{master.pd_date_of_initiation}}
</div>
<div fxFlex.xs="100" class="m-gap p-gap" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
<!-- applicant card -->
<mat-card class="minheight">
<div class="cardEdit">
<button mat-raised-button mat-button-sm mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="editPdApplicant(pdApplicantData)"><mat-icon>edit</mat-icon></button>
</div>
<mat-card-header>
<mat-card-title>Applicants</mat-card-title>
</mat-card-header>
<mat-card-content *ngIf="pdApplicantData.length>0; else noApplicant">
<mat-list *ngFor="let applicant of pdApplicantData">
<mat-list-item>
<p><span *ngIf="applicant.applicant_name!=null" class="mb-2 text-center hover-icon">
<i class="fa-1x fa fa-user-o"></i>
&nbsp;{{applicant.applicant_name}} </span> &nbsp;&nbsp;&nbsp;<span *ngIf="applicant.mobile_no!=null" class="mb-2 text-center hover-icon">
<i class="fa-1x fa fa-phone"></i>
&nbsp;{{applicant.mobile_no}} </span> <br><span *ngIf="applicant.applicant_type=='1';else codetails" style="font-size:12px;">Main Applicant</span>
<ng-template #codetails>&nbsp;&nbsp;&nbsp;<span>{{applicant.relation_name}}</span></ng-template>
</p>
</mat-list-item>
</mat-list>
</mat-card-content>
<ng-template #noApplicant><mat-card-content><p>No Applicant</p></mat-card-content></ng-template>
</mat-card>
<div *ngFor="let master of pdMasterData" class="ml-xs mr-xs pt-1" fxFlex="25" style="text-align:right;" >
<button *ngIf="master.pd_type_name" mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Allocate" matTooltipPosition="above" (click)="pdAllocationTo(master)"><mat-icon>verified_user</mat-icon></button>
<button *ngIf="master.pd_type_name" mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Schedule" matTooltipPosition="above" (click)="scheduleDetails(master)"><mat-icon>schedule</mat-icon></button>
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Discussion" matTooltipPosition="above" (click)="getPDStart(viewID)"><mat-icon>question_answer</mat-icon></button>
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="above" (click)="loadPdListCompoent()"><mat-icon>close</mat-icon></button>
<br><span style="color:red;text-align:center">{{master.pd_allocated_to}} -{{master.pd_status_name}}</span>
</div>
</div>
<mat-card-content>
<div fxLayout="row wrap">
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap">
<!-- pd documents card -->
<mat-card class="minheight">
<!-- <div class="cardEdit">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon"><mat-icon>edit</mat-icon></button>
</div> -->
<mat-card-header>
<mat-card-title>Documents</mat-card-title>
<!-- <mat-card-subtitle><i class="fa-1x fa fa-map-marker"> </i> &nbsp;{{master.city_name}} / {{master.state_name}}-{{master.pincode}}</mat-card-subtitle> -->
</mat-card-header>
<mat-card-content *ngIf="pdDocumentsData.length>0; else nodocument">
<mat-list *ngFor="let documents of pdDocumentsData">
<div class="m-gap p-gap" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
<!--pd master -->
<mat-card *ngFor="let master of pdMasterData" class="minheight">
<div class="cardEdit">
<!-- <button *ngIf="master.pd_type_name" mat-raised-button mat-button-sm mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="pdAllocationTo(master)"><mat-icon>directions_run</mat-icon></button>
<button *ngIf="master.pd_type_name" mat-raised-button mat-button-sm mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="scheduleDetails(master)"><mat-icon>schedule</mat-icon></button>
-->
<button mat-raised-button mat-button-sm mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="editPdMaster(master)"><mat-icon>edit</mat-icon></button>
</div>
<mat-card-header>
<!-- <img mat-card-avatar src="assets/images/avatar.jpg">
<mat-card-title>{{master.lender_full_name}} - {{master.lender_applicant_id}}
</mat-card-title>-->
<mat-card-subtitle *ngIf="master.city_name" class="hover-icon"><i class="fa-1x fa fa-map-marker"> </i> &nbsp;<span>{{master.city_name}} / {{master.state_name}}-{{master.pincode}}</span></mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p *ngIf="master.product_name">{{master.product_name}} / {{master.subproduct_name}}</p>
<p *ngIf="master.pd_type_name"><span>{{master.pd_type_name}}</span> / <span *ngIf="master.loan_amount" class="hover-icon"><i class="fa-1x fa fa-rupee">&nbsp;</i>{{master.loan_amount}}</span></p>
<p><span>{{master.addressline1}},{{master.addressline2}} ,{{master.addressline3}}</span></p>
</mat-card-content>
</mat-card>
</div>
<div fxFlex.xs="100" class="m-gap p-gap" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
<!-- applicant card -->
<mat-card class="minheight">
<div class="cardEdit">
<button mat-raised-button mat-button-sm mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="editPdApplicant(pdApplicantData)"><mat-icon>edit</mat-icon></button>
</div>
<mat-card-header>
<mat-card-title>Applicants</mat-card-title>
</mat-card-header>
<mat-card-content *ngIf="pdApplicantData.length>0; else noApplicant">
<mat-list *ngFor="let applicant of pdApplicantData">
<mat-list-item>
<p><span>
{{documents.pd_document_title}} </span> &nbsp;&nbsp;&nbsp;<span class="mb-2 text-center hover-icon">
<i class="fa-1x fa fa-file"></i>
&nbsp;{{documents.pd_document_name}} </span>
</p>
<p><span *ngIf="applicant.applicant_name!=null" class="mb-2 text-center hover-icon">
<i class="fa-1x fa fa-user-o"></i>
&nbsp;{{applicant.applicant_name}} </span> &nbsp;&nbsp;&nbsp;<span *ngIf="applicant.mobile_no!=null" class="mb-2 text-center hover-icon">
<i class="fa-1x fa fa-phone"></i>
&nbsp;{{applicant.mobile_no}} </span> <br><span *ngIf="applicant.applicant_type=='1';else codetails" style="font-size:12px;">Main Applicant</span>
<ng-template #codetails>&nbsp;&nbsp;&nbsp;<span>{{applicant.relation_name}}</span></ng-template>
</p>
</mat-list-item>
</mat-list>
</mat-card-content>
<ng-template #nodocument><mat-card-content><p>No Document</p></mat-card-content></ng-template>
</mat-card>
</mat-card-content>
<ng-template #noApplicant><mat-card-content><p>No Applicant</p></mat-card-content></ng-template>
</mat-card>
</div>
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="m-gap p-gap">
<!-- pd documents card -->
<mat-card class="minheight">
<!-- <div class="cardEdit">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon"><mat-icon>edit</mat-icon></button>
</div> -->
<mat-card-header>
<mat-card-title>Documents</mat-card-title>
<!-- <mat-card-subtitle><i class="fa-1x fa fa-map-marker"> </i> &nbsp;{{master.city_name}} / {{master.state_name}}-{{master.pincode}}</mat-card-subtitle> -->
</mat-card-header>
<mat-card-content *ngIf="pdDocumentsData.length>0; else nodocument">
<mat-list *ngFor="let documents of pdDocumentsData">
<mat-list-item>
<p><span>
{{documents.pd_document_title}} </span> &nbsp;&nbsp;&nbsp;<span class="mb-2 text-center hover-icon">
<i class="fa-1x fa fa-file"></i>
&nbsp;{{documents.pd_document_name}} </span>
</p>
</mat-list-item>
</mat-list>
</mat-card-content>
<ng-template #nodocument><mat-card-content><p>No Document</p></mat-card-content></ng-template>
</mat-card>
</div>
<div class="m-gap p-gap" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
<!--pd logs card -->
<mat-expansion-panel *ngIf="masterPdLogsData.length>0; else nohistory">
<mat-expansion-panel-header>
<mat-panel-title class="text-xs-left">
<h6 class="mt-0"> PD History</h6>
</mat-panel-title>
</mat-expansion-panel-header>
<mat-list class="m-gap p-gap" *ngFor="let masterHistory of masterPdLogsData">
<mat-list-item>
<p>{{masterHistory}}</p>
</mat-list-item>
</mat-list>
</mat-expansion-panel>
<ng-template #nohistory>
<mat-card>
<mat-card-content><p>No History</p></mat-card-content>
</mat-card>
</ng-template>
</div>
<div class="m-gap p-gap" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
<!--pd logs card -->
<mat-expansion-panel *ngIf="masterPdLogsData.length>0; else nohistory">
<mat-expansion-panel-header>
<mat-panel-title class="text-xs-left">
<h6 class="mt-0"> PD History</h6>
</mat-panel-title>
</mat-expansion-panel-header>
<mat-list class="m-gap p-gap" *ngFor="let masterHistory of masterPdLogsData">
<mat-list-item>
<p>{{masterHistory}}</p>
</mat-list-item>
</mat-list>
</mat-expansion-panel>
<ng-template #nohistory>
<mat-card>
<mat-card-content><p>No History</p></mat-card-content>
</mat-card>
</ng-template>
</div>
</div>
</mat-card-content>
</div>
</div>
</mat-card-content>
</div>
</mat-card-content>
</mat-card>
<!-- <notifier-container></notifier-container> -->

89
ng6-seed/src/app/template/questions/list/list.component.html
View File

@ -1,41 +1,63 @@
<div>
<mat-card>
<div fxLayout="row" fxLayoutAlign="start center" class="mb-1">
<div class="ml-xs mr-xs" style="width: 30%;">
<mat-card-title><span> Questions Master</span></mat-card-title>
</div>
</div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutAlign="center none">
<div fxLayout="row" fxLayout.xs="column">
<div fxflexoffset="30%" fxFlex="40%">
<div fxFlexOffset="2%" fxFlex="40%">
<form [formGroup]="filterFormGroupCtrl">
<div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0.5px" fxLayoutAlign="start none" style="padding: 6px;">
<mat-select placeholder="Category" formControlName="category">
<!--<ngx-mat-select-search [formControl]="masterFilterCtrl" ></ngx-mat-select-search>-->
<mat-option *ngFor="let cat of categories" [value]="cat.question_category_id" (click)="getQuestionsMasters()">
{{cat.category_name}}
</mat-option>
</mat-select>
</div>
</mat-select>
</form>
</div>
<div fxFlex="30%" style="text-align:right">
<button mat-fab class="mr-1 mb-1" color="primary" (click)="addNewQuestion()" matTooltip="Add Questions" matTooltipPosition="above"><mat-icon>add</mat-icon></button>
<div fxFlexOffset="24%" fxFlex="30%" style="text-align:right">
<button mat-fab class="mr-1" color="primary" (click)="addNewQuestion()" matTooltip="Add Questions" matTooltipPosition="above"><mat-icon>add</mat-icon></button>
</div>
</div>
<!--</mat-card-content>-->
<mat-card-content>
<mat-table [dataSource]="dataSource" matSort *ngIf="productList.length > 0" >
<ng-container matColumnDef="category_name">
<mat-cell fxFlex="25%" class="cell" *matCellDef="let product;" style="width:20% !important;">
<span *ngIf="product.category_name" mat-line>{{ product.category_name }}</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="question">
<mat-cell fxFlex="65%" class="cell" *matCellDef="let product;" style="width:70% !important;">
<span *ngIf="product.question" mat-line>{{ product.question }}</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="actions">
<mat-cell fxFlex="10%" class="cell" *matCellDef="let product;" style="width:10% !important;">
<button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editQuestion(product)"><mat-icon>edit</mat-icon></button>
</mat-cell>
</ng-container>
<mat-row style="align-items: normal !important;" *matRowDef="let row; columns: displayedColumns;">
</mat-row>
</mat-table>
<div *ngIf="productList.length > 0">
<mat-paginator #paginator class="mat-elevation-z1" [length]="productList.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
[pageSizeOptions]="[5, 10, 25, 50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
</mat-paginator>
</div>
<ng-container *ngIf="productList.length > 0">
<!---- <ng-container *ngIf="productList.length > 0">
<div style="padding: 0 12px;">
<mat-card class="product-card" *ngFor="let product of dataSource.connect() | async">
<div fxLayout="row" fxLayoutAlign="start start" style="padding: 6px 2px;">
<div fxFlex="90%" style="padding: 12px 8px;">
<!--<div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutAlign="start none">
<div class="category-label"> {{ product.category_name }}</div>
</div>-->
<div fxLayout="row" fxLayoutWrap fxLayoutAlign="none none">
<div class="ml-xs" fxFlex="20%">
{{ product.category_name }}
@ -48,39 +70,18 @@
</div>
<div fxFlex="10%">
<button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editQuestion(product)"><mat-icon>edit</mat-icon></button>
<!--<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="editQuestion(product)">
<mat-icon>create</mat-icon>
<span>Edit</span>
</button>
</mat-menu>-->
</div>
</div>
<!--<mat-card-header>
<mat-card-title>
<h4>{{ product.question }}</h4>
</mat-card-title>
</mat-card-header>
<img mat-card-image [src]="product.img_url" [alt]="product.title" [title]="product.title">
<mat-card-content>
<p>{{ product.description }}</p>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="accent" (click)="addItemToCard(product)">Add to card</button>
</mat-card-actions>-->
</div>
</mat-card>
</div>
</ng-container>
</ng-container>-->
<mat-card *ngIf="noQuesMasterRecrdFound">
<div class="no-record-found">No Record Found ... </div>
</mat-card>
<div class="no-record-found">No Record Found ... </div>
</mat-card>
<mat-paginator #paginator class="mat-elevation-z1" [length]="productList.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
[pageSizeOptions]="[5, 10, 25, 50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
</mat-paginator>
<!--<mat-card>
<div class="example-container mat-elevation-z8">
<mat-table [dataSource]="dataSource" matSort>
@ -110,8 +111,10 @@
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
</mat-card>-->
</mat-card-content>
</mat-card>
</div>
<!--<div *ngIf="addView">
<app-add></app-add>
</div>-->

6
ng6-seed/src/app/template/questions/list/list.component.scss
View File

@ -18,9 +18,9 @@
.mat-card-title{
font-size:24px !important;
}
.mat-table {
overflow: auto;
max-height: 500px;
.cell{
display:inline !important;
}
.text-line-limit {

34
ng6-seed/src/app/template/templates/templates-list/templates.list.component.html
View File

@ -16,14 +16,37 @@
</div>
</form>-->
</div>
<div fxFlex="20%" style="text-align:right;">
<button mat-fab color="primary" (click)="addNewTemplate()" matTooltip="Add Template" matTooltipPosition="above"><mat-icon>add</mat-icon></button>
<div fxFlex="14%" style="text-align:right;">
<button mat-fab class="mr-1" color="primary" (click)="addNewTemplate()" matTooltip="Add Template" matTooltipPosition="above"><mat-icon>add</mat-icon></button>
<!--<button mat-stroked-button color="primary" (click)="addNewQuestion()">Add Questions</button>-->
</div>
</div>
<ng-container *ngIf="templateList.length > 0">
<div style="padding: 0 12px;">
<mat-card class="product-card" *ngFor="let template of dataSource.connect() | async">
<mat-table [dataSource]="dataSource" >
<ng-container matColumnDef="template_name">
<mat-cell fxFlex="25%" *matCellDef="let template;">
<span *ngIf="template.template_name" mat-line>{{ template.template_name }}</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="lender_details">
<mat-cell fxFlex="65%" *matCellDef="let template;">
<div *ngIf="template.lender_details.length > 0">
<span *ngFor="let lender of template.lender_details ; let last = last"> {{lender.full_name}} - {{lender.product_name}} - {{lender.customer_segment_name}} <i *ngIf="!last">,<br></i></span>
</div>
</mat-cell>
</ng-container>
<ng-container matColumnDef="actions">
<mat-cell fxFlex="10%" *matCellDef="let template;">
<button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="goToEdit(template.template_id)"><mat-icon>edit</mat-icon></button>
</mat-cell>
</ng-container>
<mat-row style="align-items: normal !important;" *matRowDef="let row; columns: displayedColumns;">
</mat-row>
</mat-table>
<!----<mat-card class="product-card" *ngFor="let template of dataSource.connect() | async">
<div fxLayout="row" fxLayoutAlign="start start" style="padding: 6px 2px;">
<div fxFlex="90%" style="padding: 12px 8px;">
@ -43,16 +66,17 @@
<button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="goToEdit(template.template_id)"><mat-icon>edit</mat-icon></button>
</div>
</div>
</mat-card>
</mat-card>-->
</div>
</ng-container>
<mat-card *ngIf="noQuesMasterRecrdFound">
<div class="no-record-found">No Record Found ... </div>
</mat-card>
<div *ngIf="templateList.length > 0">
<mat-paginator #paginator class="mat-elevation-z1" [length]="templateList.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
[pageSizeOptions]="[5, 10, 25, 50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
</mat-paginator>
</div>
</mat-card>
</div>

5
ng6-seed/src/app/template/templates/templates-list/templates.list.component.scss
View File

@ -16,9 +16,8 @@
// width: 100%;
}
.mat-table {
overflow: auto;
max-height: 500px;
.cell{
display:inline !important;
}
.text-line-limit {

2
ng6-seed/src/app/template/templates/templates-list/templates.list.component.ts
View File

@ -36,7 +36,7 @@ export class TemplateListComponent implements OnInit, OnDestroy {
templateListData = null;
public dataLength: number;
public dataSource = new MatTableDataSource();
displayedColumns = ['categroy_name', 'question', 'actions'];
displayedColumns = ['template_name', 'lender_details', 'actions'];
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;