From ae9191f22818f4effa685d32c1c0887d290272e7 Mon Sep 17 00:00:00 2001
From: saravanakumarkandasami <saravanakumar.k@venbainfotech.com>
Date: Tue, 30 Oct 2018 16:43:07 +0530
Subject: [PATCH] UI in dashboard and view of PD and QC

---
 .../app/dashboard/dashboard.component.html    | 189 +++++++++---------
 .../app/dashboard/dashboard.component.scss    |   6 +
 .../list-pd/view-pd/view-pd.component.html    |  78 +++-----
 .../qc-list/qc-view/qc-view.component.html    |  46 ++---
 4 files changed, 150 insertions(+), 169 deletions(-)

diff --git a/ng6-seed/src/app/dashboard/dashboard.component.html b/ng6-seed/src/app/dashboard/dashboard.component.html
index 20afbf8d6..276146a03 100644
--- a/ng6-seed/src/app/dashboard/dashboard.component.html
+++ b/ng6-seed/src/app/dashboard/dashboard.component.html
@@ -1,97 +1,96 @@
- 
-
 <div class="pad-wrap">   
-  <!--<div fxLayout="row wrap"> 
-      <div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100">
-          <mat-card>
-             <mat-card-title>Today's Status</mat-card-title>
-             <mat-card-subtitle></mat-card-subtitle>
-             <hr>
-             <mat-card-content>
-                    <div class="w-100 h-300px">
-                        <ngx-charts-bar-horizontal-stacked [scheme]="colorScheme" [results]="multi" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="yAxisLabel" [yAxisLabel]="xAxisLabel" width="832" height="200">
-                        </ngx-charts-bar-horizontal-stacked>
-                    </div>
-             </mat-card-content>
-          </mat-card>
-       </div>
-  </div> -->
-  <div fxLayout="row"> 
-    <div  fxFlex="77%">
-        <mat-card>
-           <mat-card-title>Today's Details</mat-card-title>
-           <mat-card-subtitle></mat-card-subtitle>
-           <hr> 
-            <mat-card-content>
-                <div class="w-100 h-300px">
-                        <span>Full</span>
-                    <ngx-charts-advanced-pie-chart    [view]="view"  [scheme]="colorScheme" [results]="full"  [gradient]="gradient" >
-                    </ngx-charts-advanced-pie-chart>
-                </div>
-
-                <div class="w-100 h-300px">
-                    <span>Semi</span>
-                        <ngx-charts-advanced-pie-chart    [view]="view"  [scheme]="colorScheme" [results]="smart"  [gradient]="gradient" >
-                        </ngx-charts-advanced-pie-chart>
-                    </div>
-                    <div class="w-100 h-300px">
-                        <span>Tele</span>
-                            <ngx-charts-advanced-pie-chart    [view]="view"  [scheme]="colorScheme" [results]="tele"  [gradient]="gradient" >
-                            </ngx-charts-advanced-pie-chart>
-                        </div>
-            </mat-card-content> 
-        </mat-card>
-     </div>
-     
-     <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-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>
-  
-   
+        <!--<div fxLayout="row wrap"> 
+            <div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100">
+                <mat-card>
+                   <mat-card-title>Today's Status</mat-card-title>
+                   <mat-card-subtitle></mat-card-subtitle>
+                   <hr>
+                   <mat-card-content>
+                          <div class="w-100 h-300px">
+                              <ngx-charts-bar-horizontal-stacked [scheme]="colorScheme" [results]="multi" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="yAxisLabel" [yAxisLabel]="xAxisLabel" width="832" height="200">
+                              </ngx-charts-bar-horizontal-stacked>
+                          </div>
+                   </mat-card-content>
+                </mat-card>
+             </div>
+        </div> -->
+        <div fxLayout="row"> 
+          <div  fxFlex="77%">
+              <mat-card>
+                 <mat-card-title>Today's Details</mat-card-title>
+                 
+                  <mat-card-content>
+                      <div class="w-100 h-300px">
+                              <span>Full</span>
+                          <ngx-charts-advanced-pie-chart    [view]="view"  [scheme]="colorScheme" [results]="full"  [gradient]="gradient" >
+                          </ngx-charts-advanced-pie-chart>
+                      </div>
       
-</div>  
\ No newline at end of file
+                      <div class="w-100 h-300px">
+                          <span>Smart</span>
+                              <ngx-charts-advanced-pie-chart    [view]="view"  [scheme]="colorScheme" [results]="smart"  [gradient]="gradient" >
+                              </ngx-charts-advanced-pie-chart>
+                          </div>
+                          <div class="w-100 h-300px">
+                              <span>Tele</span>
+                                  <ngx-charts-advanced-pie-chart    [view]="view"  [scheme]="colorScheme" [results]="tele"  [gradient]="gradient" >
+                                  </ngx-charts-advanced-pie-chart>
+                              </div>
+                  </mat-card-content> 
+              </mat-card>
+           </div>
+           
+           <div  fxFlex="23%"  fxLayout="row wrap">
+               <div   fxFlex="100">
+                      <mat-card>
+                          <mat-card-title><span fxFlex="80">Alert</span> <span fxFlex="20"><mat-icon> warning</mat-icon></span></mat-card-title>
+                              <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-card>
+               </div>
+               
+               <div   fxFlex="100">
+                   <mat-card>
+                          <mat-card-title>Lenderwise</mat-card-title>
+                            
+                          <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>
+               </div>
+               <div   fxFlex="100">
+                   <mat-card>
+                          <mat-card-title>CityWise</mat-card-title>   
+                          <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-card>
+               </div>
+       
+           </div>
+      </div>
+       </div> 
\ No newline at end of file
diff --git a/ng6-seed/src/app/dashboard/dashboard.component.scss b/ng6-seed/src/app/dashboard/dashboard.component.scss
index df726b79a..f13f963e8 100644
--- a/ng6-seed/src/app/dashboard/dashboard.component.scss
+++ b/ng6-seed/src/app/dashboard/dashboard.component.scss
@@ -2,6 +2,12 @@ $red: #f5515f;
 $blue: #05abe0;
 $grey: #343434;
 $p: 12px;
+mat-card-title{
+    background-color:#f44336 !important;
+    color:#fff;
+    padding-bottom: 1rem;
+    margin-bottom: 0px;
+}
 .profile {
     position: relative;
     width: 100%;
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html
index 73ab9ae60..c59bea6ae 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html
@@ -3,7 +3,7 @@
         <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>
+                <h4>{{master.lender_full_name}} <span *ngIf="master.lender_applicant_id"> - </span>  {{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;" >
@@ -36,10 +36,10 @@
                       
                     </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>            
-                    <p><span>{{master.pd_status}} - {{ (master.updatedon)? (master.updatedon | slice:0:10):(master.updatedon) }}</span></p>
+                    <p *ngIf="master.product_name">{{master.product_name}}<span *ngIf="master.subproduct_name"> / </span> {{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}}<span *ngIf="master.addressline2"> , </span>{{master.addressline2}} <span *ngIf="master.addressline3"> , </span>{{master.addressline3}}</span></p>            
+                    <p><span>{{master.pd_status}} <span *ngIf="master.updatedon"> - </span>{{ (master.updatedon)? (master.updatedon | slice:0:10):(master.updatedon) }}</span></p>
                   </mat-card-content>
                 </mat-card>
                         
@@ -64,52 +64,36 @@
                           <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>
-                      
+                        </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>
-                          
+                  <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">
+                <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">
+                     <mat-expansion-panel *ngIf="pdDocumentsData.length>0; else nodocument">
+                        <mat-expansion-panel-header>
+                          <mat-panel-title class="text-xs-left">
+                           <h6 class="mt-0">Documents</h6>
+                          </mat-panel-title>                       
+                        </mat-expansion-panel-header>
+                        <mat-list  *ngFor="let documents of pdDocumentsData">
+                            <mat-list-item>
+                                <p><span><i class="fa-1x fa fa-file"></i>  {{documents.pd_document_title}} </span></p> 
+                                   <!---- <span class="mb-2 text-center hover-icon">  &nbsp;{{documents.pd_document_name}} </span> -->        
+                            </mat-list-item>                            
+                          </mat-list>                       
+                      </mat-expansion-panel>
+                    <ng-template #nodocument>
+                      <mat-card>
+                      <mat-card-content><p>No Document</p></mat-card-content>
+                     </mat-card>
+                   </ng-template>
+                </div>
+                    <div class="m-gap p-gap" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
                         <!--pd logs card  -->
                           <mat-expansion-panel *ngIf="masterPdLogsData.length>0; else nohistory">
                               <mat-expansion-panel-header>
@@ -120,7 +104,7 @@
                               </mat-expansion-panel-header>
                               <mat-list class="m-gap p-gap" *ngFor="let masterHistory of masterPdLogsData">
                                   <mat-list-item>
-                                  <p>{{masterHistory}}</p>  
+                                  <span>{{masterHistory}}</span>  
 
                                   </mat-list-item>
                                 
diff --git a/ng6-seed/src/app/quality-check/qc-list/qc-view/qc-view.component.html b/ng6-seed/src/app/quality-check/qc-list/qc-view/qc-view.component.html
index 7b44a74b9..2b79bc7d6 100644
--- a/ng6-seed/src/app/quality-check/qc-list/qc-view/qc-view.component.html
+++ b/ng6-seed/src/app/quality-check/qc-list/qc-view/qc-view.component.html
@@ -83,33 +83,25 @@
 
                <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>           
-                             
-                   
+                  <mat-expansion-panel *ngIf="pdDocumentsData.length>0; else nodocument">
+                      <mat-expansion-panel-header>
+                        <mat-panel-title class="text-xs-left">
+                         <h6 class="mt-0"> Documents</h6>
+                        </mat-panel-title>
+                      
+                      </mat-expansion-panel-header>
+                      <mat-list  *ngFor="let documents of pdDocumentsData">
+                          <mat-list-item>
+                              <p><span>
+                                  <i class="fa-1x fa fa-file"></i>   {{documents.pd_document_title}} </span>
+                                    <!----<span class="mb-2 text-center hover-icon">   {{documents.pd_document_name}} </span> -->
+                                  </p>
+                          </mat-list-item>                          
+                        </mat-list>
+                    </mat-expansion-panel>
+                  <ng-template #nodocument><mat-card><mat-card-content><p>No Document</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">
+                 <div class="m-gap p-gap" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
                      <!--pd logs card  -->
                        <mat-expansion-panel *ngIf="masterPdLogsData.length>0; else nohistory">
                            <mat-expansion-panel-header>
@@ -120,7 +112,7 @@
                            </mat-expansion-panel-header>
                            <mat-list class="m-gap p-gap" *ngFor="let masterHistory of masterPdLogsData">
                                <mat-list-item>
-                               <p>{{masterHistory}}</p>  
+                               <span>{{masterHistory}}</span>  
 
                                </mat-list-item>