From b044631e0f171ee48a6a530c227b0a923e38f0f2 Mon Sep 17 00:00:00 2001
From: saravanakumarkandasami <saravanakumar.k@venbainfotech.com>
Date: Mon, 22 Oct 2018 17:58:32 +0530
Subject: [PATCH] UI In PD Team and dashboard

---
 .../app/dashboard/dashboard.component.html    | 30 +++------
 .../src/app/dashboard/dashboard.component.ts  | 67 ++++++++++++++++++-
 .../component/company/company.component.html  | 15 +++--
 .../pd-team-add/pd-team-add.component.html    | 11 +--
 .../pd-team-edit/pd-team-edit.component.html  |  9 ++-
 .../questions/list/list.component.html        | 21 +++---
 .../questions/list/list.component.scss        |  4 +-
 ng6-seed/src/index.html                       |  6 +-
 8 files changed, 113 insertions(+), 50 deletions(-)

diff --git a/ng6-seed/src/app/dashboard/dashboard.component.html b/ng6-seed/src/app/dashboard/dashboard.component.html
index 0d79a7448..a0a678d0f 100644
--- a/ng6-seed/src/app/dashboard/dashboard.component.html
+++ b/ng6-seed/src/app/dashboard/dashboard.component.html
@@ -21,51 +21,43 @@
         <mat-card>
            <mat-card-title>Full</mat-card-title>
            <mat-card-subtitle></mat-card-subtitle>
-           <hr>
-           <mat-card-content>
-             
+           <hr> 
             <mat-card-content>
                 <div class="w-100 h-300px">
 
-                    <ngx-charts-gauge [scheme]="colorScheme" [results]="single" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" >
+                    <ngx-charts-gauge [scheme]="colorScheme" [results]="full" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" >
                     </ngx-charts-gauge>
                 </div>
-            </mat-card-content>
-           </mat-card-content>
+            </mat-card-content> 
         </mat-card>
      </div>
      <div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap">
         <mat-card>
            <mat-card-title>Smart</mat-card-title>
            <mat-card-subtitle></mat-card-subtitle>
-           <hr>
-           <mat-card-content>
+           <hr> 
              
             <mat-card-content>
                 <div class="w-100 h-300px">
 
-                    <ngx-charts-gauge [scheme]="colorScheme" [results]="single" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" >
+                    <ngx-charts-gauge [scheme]="colorScheme" [results]="smart" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" >
                     </ngx-charts-gauge>
                 </div>
-            </mat-card-content>
-           </mat-card-content>
+            </mat-card-content> 
         </mat-card>
      </div>
      <div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap">
         <mat-card>
            <mat-card-title>Tele</mat-card-title>
            <mat-card-subtitle></mat-card-subtitle>
-           <hr>
-           <mat-card-content>
-             
+           <hr> 
             <mat-card-content>
                 <div class="w-100 h-300px">
 
-                    <ngx-charts-gauge [scheme]="colorScheme" [results]="single" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" >
+                    <ngx-charts-gauge [scheme]="colorScheme" [results]="tele" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" >
                     </ngx-charts-gauge>
                 </div>
-            </mat-card-content>
-           </mat-card-content>
+            </mat-card-content> 
         </mat-card>
      </div>
 </div>
@@ -81,7 +73,7 @@
                 <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}} </p>
+                      <p mat-line> Full  -{{item.fullpd}} / Smart  -{{item.smartpd}} / Tele - {{item.telepd}} </p>
                    </mat-list-item>
                 </ng-template>
              </mat-list>
@@ -96,7 +88,7 @@
                 <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}} </p>
+                      <p mat-line> Full -{{item.fullpd}} / Smart  -{{item.smartpd}} / Tele - {{item.telepd}}</p>
                    </mat-list-item>
                 </ng-template>
              </mat-list>
diff --git a/ng6-seed/src/app/dashboard/dashboard.component.ts b/ng6-seed/src/app/dashboard/dashboard.component.ts
index c2b5fa838..8df0e2279 100644
--- a/ng6-seed/src/app/dashboard/dashboard.component.ts
+++ b/ng6-seed/src/app/dashboard/dashboard.component.ts
@@ -20,11 +20,12 @@ export class DashboardComponent {
   public colorScheme = {
     domain: ['#673ab7', '#f44336', '#009688 ', '#2196f3', '#234278 ', '#2a1653']
   }; 
-  public autoScale = true;
+  public autoScale = false;
   constructor() {
      
   }
-  single: Object[] = [
+  //Full Pd Data
+  full: Object[] = [
     {
       name: 'Triggered',
       value: 45
@@ -50,22 +51,79 @@ export class DashboardComponent {
       value: 81
     }
   ];
+  //smart PD data
+  smart: Object[] = [
+    {
+      name: 'Triggered',
+      value: 65
+    },
+    {
+      name: 'Allocated',
+      value: 20
+    },
+    {
+      name: 'Scheduled',
+      value: 80
+    },
+    {
+      name: 'InProgress',
+      value: 60
+    },
+    {
+      name: 'Completed',
+      value: 26
+    },
+    {
+      name: 'QC Completed',
+      value: 51
+    }
+  ];
+  //Tele PD Data
+  tele: Object[] = [
+    {
+      name: 'Triggered',
+      value: 95
+    },
+    {
+      name: 'Allocated',
+      value: 59
+    },
+    {
+      name: 'Scheduled',
+      value: 45
+    },
+    {
+      name: 'InProgress',
+      value: 25
+    },
+    {
+      name: 'Completed',
+      value: 36
+    },
+    {
+      name: 'QC Completed',
+      value: 49
+    }
+  ];
   // //Lender wise PD Triggered
    lenderpd: Object[] = [{
       lendername:'ICICI',
     billingaddr:'Bangalore',
-      fullpd:'9',
+      fullpd:'19',
     smartpd:'6', 
+    telepd:'10',
    }, {
     lendername:'IOB',
      billingaddr:'Chennai',
     fullpd:'10',
       smartpd:'5',
+      telepd:'7',
     }, {
       lendername:'SBI',
       billingaddr:'Pune',
       fullpd:'16',
       smartpd:'3',
+      telepd:'33',
     }, ];
 
     
@@ -74,14 +132,17 @@ export class DashboardComponent {
     cityname: 'Bangalore',
     fullpd:'45',
      smartpd:'17',
+     telepd:'10',
    }, {
      cityname: 'Chennai',
      fullpd:'33',
      smartpd:'16',
+     telepd:'8',
    }, {
      cityname: 'Salem',
      fullpd:'22',
      smartpd:'12',
+     telepd:'2',
    } ];
 
   // //Same status
diff --git a/ng6-seed/src/app/settings/masters/component/company/company.component.html b/ng6-seed/src/app/settings/masters/component/company/company.component.html
index a2cd3386f..5ebbeb333 100644
--- a/ng6-seed/src/app/settings/masters/component/company/company.component.html
+++ b/ng6-seed/src/app/settings/masters/component/company/company.component.html
@@ -1,6 +1,6 @@
+<mat-card>
 <mat-card-content>
-     <h2> Company &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
-     
+      
 <form [formGroup]="_companyForm" (submit)="onSubmit()">
   
       <div class="form-group">
@@ -16,21 +16,21 @@
 
               <div class="ml-xs mr-xs"> 
                   <mat-form-field style="width: 100%">
-                        <input matInput type="text" placeholder="Addressline1" required formControlName="addressline1">
+                        <input matInput type="text" placeholder="Address line 1" required formControlName="addressline1">
                         <!-- <mat-error  *ngIf="!_companyForm.controls['addressline1'].valid && _companyForm.controls['addressline1'].touched" class="mat-text-warn">You must include a addressline1.</mat-error> -->
                   </mat-form-field>     
               </div>
 
               <div class="ml-xs mr-xs"> 
                 <mat-form-field style="width: 100%">
-                      <input matInput type="text" placeholder="Addressline2" formControlName="addressline2">
+                      <input matInput type="text" placeholder="Address line 2" formControlName="addressline2">
                       <!-- <mat-error *ngIf="!_companyForm.controls['addressline2'].valid && _companyForm.controls['addressline2'].touched" class="mat-text-warn">You must include a Name.</mat-error> -->
                 </mat-form-field>  
               </div>
 
               <div class="ml-xs mr-xs"> 
                   <mat-form-field style="width: 100%">
-                        <input matInput type="text" placeholder="Addressline3" formControlName="addressline3">
+                        <input matInput type="text" placeholder="Address line 3" formControlName="addressline3">
                         <!-- <mat-error *ngIf="!_companyForm.controls['addressline3'].valid && _companyForm.controls['addressline3'].touched" class="mat-text-warn">You must include a Name.</mat-error> -->
                   </mat-form-field>    
               </div>
@@ -48,7 +48,7 @@
 
               <div class="ml-xs mr-xs"> 
                   <mat-form-field style="width: 100%">
-                        <mat-select placeholder="State" formControlName="state" [disabled]="true">
+                        <mat-select placeholder="State" formControlName="state" >
                                     <mat-option  *ngFor="let sd of stateDatas"  [value]="sd.state_id">{{ sd.name }}</mat-option>
                         </mat-select>
                          <!-- <mat-error *ngIf="!_companyForm.controls['state'].valid && _companyForm.controls['state'].touched" class="mat-text-warn">You must Pickup a State.</mat-error>  -->
@@ -58,7 +58,7 @@
               <div class="ml-xs mr-xs"> 
                   <mat-form-field style="width: 100%">
                         <input matInput type="text" placeholder="Pin code" required formControlName="pincode">
-                        <mat-hint>pincode should be in 6 digit format</mat-hint>
+                        <mat-hint>Pincode should be in 6 digit format</mat-hint>
                         <!-- <mat-error *ngIf="_companyForm.controls['pincode'].hasError('required') && _companyForm.controls['pincode'].touched" class="mat-text-warn">You must include phone number.</mat-error> -->
                         <!-- <mat-error *ngIf="!_companyForm.controls['pincode'].valid && _companyForm.controls['pincode'].touched" class="mat-text-warn">You must include a pincode number.</mat-error> -->
                         <!-- <mat-error *ngIf="_companyForm.controls['pincode'].hasError('minlength') && _companyForm.controls['pincode'].touched" class="mat-text-warn">Your pincode must be at least 5 characters long.</mat-error>
@@ -79,4 +79,5 @@
       </div>
 </form>
 </mat-card-content>
+</mat-card>
 <notifier-container></notifier-container>
\ No newline at end of file
diff --git a/ng6-seed/src/app/settings/pd-team/pd-team-add/pd-team-add.component.html b/ng6-seed/src/app/settings/pd-team/pd-team-add/pd-team-add.component.html
index 58d91ba13..ed219cdbc 100644
--- a/ng6-seed/src/app/settings/pd-team/pd-team-add/pd-team-add.component.html
+++ b/ng6-seed/src/app/settings/pd-team/pd-team-add/pd-team-add.component.html
@@ -36,8 +36,9 @@
                         <mat-error *ngIf="!_pdTeamForm.controls['fk_city'].valid && _pdTeamForm.controls['fk_city'].touched" class="mat-text-warn">City Name Requried.</mat-error>
                     </mat-form-field>
                     <span fxFlex="0 1 auto" class="ml-xs">
-                                <h6> The Selected Cities are., </h6>
+                                
                                 <ul *ngFor="let data of selectedCityDatas">
+                                        <h6> The Selected Cities are., </h6>
                                         <li>{{data}}</li>
                                 </ul>    
                     </span>
@@ -46,7 +47,7 @@
                         
                 </div>
 
-            <h6>Products</h6><hr><br>
+            <h6>Products</h6> <hr> <br>
                 <div fxLayout="row wrap" fxLayoutGap="32px" fxLayoutAlign="flex-start">
                     <mat-form-field fxFlex="0 1 auto" class="ml-xs">
                         <mat-select placeholder="Product" required formControlName="fk_product" multiple>
@@ -56,8 +57,9 @@
                         <mat-error *ngIf="!_pdTeamForm.controls['fk_product'].valid && _pdTeamForm.controls['fk_product'].touched" class="mat-text-warn">Product Name Requried.</mat-error>
                     </mat-form-field>
                     <span fxFlex="0 1 auto" class="ml-xs">
-                            <h6> The Selected Products are., </h6>
+                         
                             <ul *ngFor="let data of selectedProductDatas">
+                                    <h6> The Selected Products are., </h6>
                                     <li>{{data}}</li>
                             </ul>    
                     </span>
@@ -75,8 +77,9 @@
                         
                     </mat-form-field>                
                     <span fxFlex="0 1 auto" class="ml-xs">
-                            <h6> The Selected Customer segment are., </h6>
+                           
                             <ul *ngFor="let data of selectedSegmentDatas">
+                                    <h6> The Selected Customer segment are., </h6>
                                     <li>{{data}}</li>
                             </ul>    
                     </span>
diff --git a/ng6-seed/src/app/settings/pd-team/pd-team-edit/pd-team-edit.component.html b/ng6-seed/src/app/settings/pd-team/pd-team-edit/pd-team-edit.component.html
index f3fc99660..e7a657b1e 100644
--- a/ng6-seed/src/app/settings/pd-team/pd-team-edit/pd-team-edit.component.html
+++ b/ng6-seed/src/app/settings/pd-team/pd-team-edit/pd-team-edit.component.html
@@ -33,8 +33,9 @@
                         <mat-error *ngIf="submitted && f.fk_city.hasError('required')" class="mat-text-warn">You must Select Cities.</mat-error>
                     </mat-form-field>
                     <span fxFlex="0 1 auto" class="ml-xs">
-                                <h6> The Selected Cities are., </h6>
+                               
                                 <ul *ngFor="let data of selectedCityDatas">
+                                        <h6> The Selected Cities are., </h6>
                                         <li>{{data}}</li>
                                 </ul>    
                     </span>
@@ -52,8 +53,9 @@
                         <mat-error *ngIf="submitted && f.fk_product.hasError('required')" class="mat-text-warn">You must Select Product.</mat-error>
                     </mat-form-field>
                     <span fxFlex="0 1 auto" class="ml-xs">
-                            <h6> The Selected Products are., </h6>
+                           
                             <ul *ngFor="let data of selectedProductDatas">
+                                    <h6> The Selected Products are., </h6>
                                     <li>{{data}}</li>
                             </ul>    
                     </span>
@@ -69,8 +71,9 @@
                             <mat-error *ngIf="submitted && f.fk_customer_segment.hasError('required')" class="mat-text-warn">You must Select Customer Segment.</mat-error>
                     </mat-form-field>                
                     <span fxFlex="0 1 auto" class="ml-xs">
-                            <h6> The Selected Customer segment are., </h6>
+                            
                             <ul *ngFor="let data of selectedSegmentDatas">
+                                    <h6> The Selected Customer segment are., </h6>
                                     <li>{{data}}</li>
                             </ul>    
                     </span>
diff --git a/ng6-seed/src/app/template/questions/list/list.component.html b/ng6-seed/src/app/template/questions/list/list.component.html
index 0a16393fe..ddbb74941 100644
--- a/ng6-seed/src/app/template/questions/list/list.component.html
+++ b/ng6-seed/src/app/template/questions/list/list.component.html
@@ -1,12 +1,13 @@
 <div>
-    <mat-card>
-      <mat-card class="mat-elevation-z1">
-        <div style="margin: 6px; padding: 4px;">
-          <div class="p_title" style="font-size: 16px; font-style: bold;">Questions Master</div>
-          <div class="sub_title" style="font-size: 11px;">List of Questions</div>
-        </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 fxFlex="80%">
+          
+          <div fxflexoffset="30%" fxFlex="40%">
             <form [formGroup]="filterFormGroupCtrl">
               <div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0.5px" fxLayoutAlign="start none" style="padding: 6px;">
   
@@ -19,12 +20,12 @@
               </div>
             </form>
           </div>
-          <div fxFlex="20%">
-            <button mat-stroked-button color="primary" (click)="addNewQuestion()">Add Questions</button>
+          <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>
         </div>
         <!--</mat-card-content>-->
-      </mat-card>
+       
   
       <ng-container *ngIf="productList.length > 0">
         <div style="padding: 0 12px;">
diff --git a/ng6-seed/src/app/template/questions/list/list.component.scss b/ng6-seed/src/app/template/questions/list/list.component.scss
index fa863a272..813f91b02 100644
--- a/ng6-seed/src/app/template/questions/list/list.component.scss
+++ b/ng6-seed/src/app/template/questions/list/list.component.scss
@@ -15,7 +15,9 @@
   font-size: 14px;
 //   width: 100%;
 }
-
+.mat-card-title{
+  font-size:24px !important;
+}
 .mat-table {
   overflow: auto;
   max-height: 500px;
diff --git a/ng6-seed/src/index.html b/ng6-seed/src/index.html
index de6c3b18d..e2f577376 100644
--- a/ng6-seed/src/index.html
+++ b/ng6-seed/src/index.html
@@ -121,11 +121,11 @@
                 transform: scale3D(0, 0, 1);
             }
         }
-        .mat-cell{
-            font-size:1.2em !important;
+        .mat-cell,.mat-form-field{
+            font-size:1.2rem !important;
         }
         .mat-header-cell{
-            font-size:1.2em !important;
+            font-size:1.2rem !important;
             font-weight:800 !important;
         }