From 52c460ec6478467e403bc513a2ae0257a4df3ed1 Mon Sep 17 00:00:00 2001
From: saravanakumarkandasami <saravanakumar.k@venbainfotech.com>
Date: Tue, 23 Oct 2018 12:49:26 +0530
Subject: [PATCH] Template Screen UI

---
 .../edit-category.component.html              |  8 +--
 .../edit-category.component.scss              |  1 +
 .../edit-lender/edit-lender.component.html    | 55 +++++++++++--------
 .../category-question-answer.component.html   | 14 ++---
 .../edit/templates.edit.component.html        |  4 +-
 .../templates-add.component.html              | 22 +++++---
 .../templates.list.component.html             | 16 +++---
 7 files changed, 67 insertions(+), 53 deletions(-)

diff --git a/ng6-seed/src/app/template/templates/templates-list/edit/edit-category/edit-category.component.html b/ng6-seed/src/app/template/templates/templates-list/edit/edit-category/edit-category.component.html
index c44109d59..7094985a3 100644
--- a/ng6-seed/src/app/template/templates/templates-list/edit/edit-category/edit-category.component.html
+++ b/ng6-seed/src/app/template/templates/templates-list/edit/edit-category/edit-category.component.html
@@ -5,7 +5,7 @@
                     <div [formGroupName]="i">
                     <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="2%" fxLayoutAlign="center center">
                         <div fxFlex="30%">
-                            <mat-form-field>
+                            <mat-form-field style="width:275px">
                                 <mat-select placeholder="Category *" formControlName="fk_question_category_id">
                                     <mat-option *ngFor="let category of m_category" [value]="category.question_category_id">{{ category.category_name }}</mat-option>
                                 </mat-select>
@@ -27,10 +27,10 @@
                 <mat-error  *ngIf="submitted && i == dublicateRerdIndex "> This Category Already Exist.!</mat-error>
             </mat-card>
     </div>
-    <div>
-        <button mat-fab class="mr-1 mb-1" color="primary" matTooltip="Add More Contact Person" matTooltipPosition="above" (click)="addLanguage(null, $event); false"><mat-icon>add</mat-icon></button>
-    </div>
+     
     <div class="row" style="text-align:right;">
+            <button mat-raised-button mat-icon-button  class="mr-1 mb-1 hover-icon"   matTooltip="Add More Contact Person" matTooltipPosition="above" (click)="addLanguage(null, $event); false"><mat-icon>add</mat-icon></button>
+    
         <!--<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" type="reset"><mat-icon>settings_backup_restore</mat-icon></button>-->
         <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
     </div>
diff --git a/ng6-seed/src/app/template/templates/templates-list/edit/edit-category/edit-category.component.scss b/ng6-seed/src/app/template/templates/templates-list/edit/edit-category/edit-category.component.scss
index e69de29bb..0519ecba6 100644
--- a/ng6-seed/src/app/template/templates/templates-list/edit/edit-category/edit-category.component.scss
+++ b/ng6-seed/src/app/template/templates/templates-list/edit/edit-category/edit-category.component.scss
@@ -0,0 +1 @@
+ 
\ No newline at end of file
diff --git a/ng6-seed/src/app/template/templates/templates-list/edit/edit-lender/edit-lender.component.html b/ng6-seed/src/app/template/templates/templates-list/edit/edit-lender/edit-lender.component.html
index 042c179f7..bc394ae9f 100644
--- a/ng6-seed/src/app/template/templates/templates-list/edit/edit-lender/edit-lender.component.html
+++ b/ng6-seed/src/app/template/templates/templates-list/edit/edit-lender/edit-lender.component.html
@@ -1,30 +1,38 @@
 <form [formGroup]="_editTempLenderFrom" (submit)="onSubmit()">
     <div formArrayName="temp_lender" class="example-full-width">
+           
         <mat-card *ngFor="let answ of _editTempLenderFrom.controls.temp_lender['controls']; let i=index">
             <div [formGroupName]="i">
-                <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="2%" fxLayoutAlign="center center">
-                    <mat-form-field fxFlex="20%">
-                        <mat-select placeholder="Lender *" formControlName="fk_lender_id">
-                            <mat-option *ngFor="let lend of m_lender" [value]="lend.entity_id">{{ lend.full_name }}</mat-option>
-                        </mat-select>
-                        <mat-error *ngIf="submitted && answ['controls'].fk_lender_id.hasError('required')" class="mat-text-warn">Lender Type Required.!</mat-error>
-                    </mat-form-field>
+                <div class="p-1" fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="2%" fxLayoutAlign="center center">
+                    <div fxFlex="22%">
+                            <mat-form-field >
+                                    <mat-select placeholder="Lender *" formControlName="fk_lender_id">
+                                        <mat-option *ngFor="let lend of m_lender" [value]="lend.entity_id">{{ lend.full_name }}</mat-option>
+                                    </mat-select>
+                                    <mat-error *ngIf="submitted && answ['controls'].fk_lender_id.hasError('required')" class="mat-text-warn">Lender Type Required.!</mat-error>
+                                </mat-form-field>
+                    </div>
+                    <div fxFlex="22%">
+                            <mat-form-field >
+                                    <mat-select placeholder="Product *" formControlName="fk_product_id">
+                                        <mat-option *ngFor="let prcd of m_product" [value]="prcd.product_id">{{ prcd.product_name }}</mat-option>
+                                    </mat-select>
+                                    <mat-error *ngIf="submitted && answ['controls'].fk_product_id.hasError('required')" class="mat-text-warn">Product Required.!</mat-error>
+                                </mat-form-field>
+                    </div>
 
-                    <mat-form-field fxFlex="20%">
-                        <mat-select placeholder="Product *" formControlName="fk_product_id">
-                            <mat-option *ngFor="let prcd of m_product" [value]="prcd.product_id">{{ prcd.product_name }}</mat-option>
-                        </mat-select>
-                        <mat-error *ngIf="submitted && answ['controls'].fk_product_id.hasError('required')" class="mat-text-warn">Product Required.!</mat-error>
-                    </mat-form-field>
-
-                    <mat-form-field fxFlex="20%">
-                        <mat-select placeholder="Customer Segment *" formControlName="fk_customer_segment">
-                            <mat-option *ngFor="let cusSeg of m_customerSegment" [value]="cusSeg.customer_segment_id">{{ cusSeg.customer_segment }}</mat-option>
-                        </mat-select>
-                        <mat-error *ngIf="submitted && answ['controls'].fk_customer_segment.hasError('required')" class="mat-text-warn">Customer Segment Required.!</mat-error>
-                    </mat-form-field>
+                  
+                    <div fxFlex="22%">
+                            <mat-form-field >
+                                    <mat-select placeholder="Customer Segment *" formControlName="fk_customer_segment">
+                                        <mat-option *ngFor="let cusSeg of m_customerSegment" [value]="cusSeg.customer_segment_id">{{ cusSeg.customer_segment }}</mat-option>
+                                    </mat-select>
+                                    <mat-error *ngIf="submitted && answ['controls'].fk_customer_segment.hasError('required')" class="mat-text-warn">Customer Segment Required.!</mat-error>
+                                </mat-form-field>
+                    </div>
+                   
                      
-                     <div fxFlex="20%">
+                     <div fxFlex="22%">
                             <mat-checkbox *ngIf="answ.get('template_lender_map_id').value != null" formControlName="isactive" [ngModel]="answ.get('isactive').value == 1 ? true : answ.get('isactive').value == 0 ? false : null"
                             (ngModelChange)="answ.get('isactive').value = $event ? 1 : 0"></mat-checkbox>
                             
@@ -36,9 +44,10 @@
                 </div>
             </div>
         </mat-card>
-        <button mat-fab class="mr-1 mb-1" color="primary" matTooltip="Add More Contact Person" matTooltipPosition="above" (click)="addLanguage(null, $event); false"><mat-icon>add</mat-icon></button>
-    </div>
+         </div>
     <div class="row" style="text-align:right;">
+            <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Add More Contact Person" matTooltipPosition="above" (click)="addLanguage(null, $event); false"><mat-icon>add</mat-icon></button>
+  
         <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" type="reset"><mat-icon>settings_backup_restore</mat-icon></button>
         <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
     </div>
diff --git a/ng6-seed/src/app/template/templates/templates-list/edit/edit-question-answer/category-question-answer/category-question-answer.component.html b/ng6-seed/src/app/template/templates/templates-list/edit/edit-question-answer/category-question-answer/category-question-answer.component.html
index 376ea5f45..38c1bd336 100644
--- a/ng6-seed/src/app/template/templates/templates-list/edit/edit-question-answer/category-question-answer/category-question-answer.component.html
+++ b/ng6-seed/src/app/template/templates/templates-list/edit/edit-question-answer/category-question-answer/category-question-answer.component.html
@@ -6,22 +6,22 @@
           <mat-card>
             <div [formGroupName]="i">
                 <div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="5%" fxLayoutAlign="start center">
-                  <div fxFlex="1 1 auto" class="ml-xs" fxFlex="60%">
+                  <div fxFlex="1 1 auto" class="ml-xs" fxFlex="70%">
                     <span>{{i+1}}</span> ) <label>{{ques.get('question').value}}</label>
                   </div>
                   <div fxFlex="1 1 auto" class="ml-xs" fxFlex="20%">
-                    <mat-form-field style="width: 45px; text-align: center" appearance="outline">
+                    <mat-form-field style="width: 35%; text-align: center" appearance="outline">
                       <input matInput formControlName="question_weightage">
                     </mat-form-field> <span> % </span>
                     <mat-error *ngIf="submitted && ques['controls'].question_weightage.hasError('required')" class="mat-text-warn">Ques. WT is Required.!</mat-error>
                   </div>
-                  <div fxFlex="0 1 auto" class="ml-xs" fxFlex="20%">
+                  <div fxFlex="0 1 auto" class="ml-xs" fxFlex="10%">
                     <button (click)="removeLanguage(i)" mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above"
                       type="button"><mat-icon>delete</mat-icon></button>
                   </div>
                 </div>
               <div formArrayName="answers" class="example-full-width">
-                <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="center">
+                <div  fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="center">
                   <div fxFlex.gt-xs="50%" [fxFlex.gt-md]="regularDistribution" *ngFor="let answ of ques['controls'].answers['controls']; let i_ans = index ; let Ans_last = last;">
                     <div [formGroupName]="i_ans">
                       <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="0.5%" fxLayoutAlign="start center">
@@ -55,10 +55,10 @@
       </tr>
     </table>
   </div>
-  <div fxLayout="row" fxLayoutAlign="start">
-    <button mat-fab class="mr-1 mb-1" color="primary" matTooltip="Add More Contact Person" matTooltipPosition="above" (click)="openDialog(); false"><mat-icon>add</mat-icon></button>
-  </div>
+  
   <div class="row" style="text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon"  matTooltip="Add More Contact Person" matTooltipPosition="above" (click)="openDialog(); false"><mat-icon>add</mat-icon></button>
+  
     <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
   </div>
 </form>
diff --git a/ng6-seed/src/app/template/templates/templates-list/edit/templates.edit.component.html b/ng6-seed/src/app/template/templates/templates-list/edit/templates.edit.component.html
index 36c6cc3bf..07ef8ad66 100644
--- a/ng6-seed/src/app/template/templates/templates-list/edit/templates.edit.component.html
+++ b/ng6-seed/src/app/template/templates/templates-list/edit/templates.edit.component.html
@@ -5,9 +5,9 @@
                 (click)="backToList()"><mat-icon>close</mat-icon></button>
     </div>
         <mat-card style="padding: 6px;">
-          <h6>Template Name</h6>
+          <!--<h6>Template Name</h6>
           <hr>
-          <!---->
+          -->
           <div *ngIf="templateNameRecord">
             <form  [formGroup]="_editTempNameFrom" (submit)="onSubmit()">
               <div fxLayout="row" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="start center">
diff --git a/ng6-seed/src/app/template/templates/templates-list/templates-add/templates-add.component.html b/ng6-seed/src/app/template/templates/templates-list/templates-add/templates-add.component.html
index dfb621198..4590a068d 100644
--- a/ng6-seed/src/app/template/templates/templates-list/templates-add/templates-add.component.html
+++ b/ng6-seed/src/app/template/templates/templates-list/templates-add/templates-add.component.html
@@ -1,13 +1,16 @@
+ 
 <div style="width: 320px;">
-    <div fxLayout="row" fxLayoutAlign="end start">
-            <button mat-raised-button mat-icon-button color="primary" class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"
-                (click)="onClose()"><mat-icon>close</mat-icon></button>
+    <div fxLayout="row">
+      <div style="width:100%"> <h5>Add New Template</h5>
+      </div>
+      <div >   <button mat-raised-button mat-icon-button color="primary" class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"
+        (click)="onClose()"><mat-icon>close</mat-icon></button>
+      </div>
+         
     </div>
-<mat-card style="padding: 4px;">
-  <h5>Add New Template</h5>
-  <hr>
-  <form [formGroup]="_addTemplateFrom" (submit)="onSubmit()">
-        <div fxLayout="row" fxLayoutAlign="center">
+ 
+     <form [formGroup]="_addTemplateFrom" (submit)="onSubmit()">
+        <div fxLayout="row" >
           <mat-form-field class="ml-xs example-full-width">
             <textarea matInput placeholder="Template Name" formControlName="template_name"></textarea>
             <mat-error *ngIf="submitted && f.template_name.hasError('required')" class="mat-text-warn">You must Include Template Name.</mat-error>
@@ -18,5 +21,6 @@
           <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
         </div>
       </form>
-</mat-card>
 </div>
+ 
+
diff --git a/ng6-seed/src/app/template/templates/templates-list/templates.list.component.html b/ng6-seed/src/app/template/templates/templates-list/templates.list.component.html
index ad83465a8..96e42cb23 100644
--- a/ng6-seed/src/app/template/templates/templates-list/templates.list.component.html
+++ b/ng6-seed/src/app/template/templates/templates-list/templates.list.component.html
@@ -3,13 +3,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;">Template Master</div>
-                    <div class="sub_title" style="font-size: 11px;">List of Templates</div>
-                </div>
-                <div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutAlign="center none">
+            <mat-card>
+                
+                <div class="p-1" fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutAlign="center none">
                     <div fxFlex="80%">
+                            <mat-card-title><span style="font-size:1.2rem"> Template Master</span></mat-card-title>
+                             
+                
                         <!--<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">
@@ -20,8 +20,8 @@
               </div>
             </form>-->
                     </div>
-                    <div fxFlex="20%">
-                        <button mat-stroked-button color="primary" (click)="addNewTemplate()">Add New Template</button>
+                    <div fxFlex="20%" style="text-align:right;">
+                        <button mat-fab color="primary" (click)="addNewTemplate()" matTooltip="Add New Template" matTooltipPosition="above"><mat-icon>add</mat-icon></button>
                         <!--<button mat-stroked-button color="primary" (click)="addNewQuestion()">Add Questions</button>-->
                     </div>
                 </div>