From b7241853f8c3bf9c6cac474a1c6e214848fd36ab Mon Sep 17 00:00:00 2001
From: saravanakumarkandasami <saravanakumar.k@venbainfotech.com>
Date: Fri, 12 Oct 2018 19:20:33 +0530
Subject: [PATCH] User UI

---
 .../users/register/register.component.html    | 140 ++++++++++--------
 ng6-seed/src/index.html                       |   3 +
 2 files changed, 82 insertions(+), 61 deletions(-)

diff --git a/ng6-seed/src/app/settings/users/register/register.component.html b/ng6-seed/src/app/settings/users/register/register.component.html
index 23cc8171b..5065050f5 100755
--- a/ng6-seed/src/app/settings/users/register/register.component.html
+++ b/ng6-seed/src/app/settings/users/register/register.component.html
@@ -1,9 +1,9 @@
 <mat-card>
 
     <mat-card-title>
-        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon button" (click)="back()">
-            <mat-icon>chevron_left</mat-icon>
-        </button> User Registrations</mat-card-title>
+            USER REGISTRATION <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Close" matTooltipPosition="above"(click)="back()"><mat-icon>close</mat-icon>
+        </button> </mat-card-title>
+        
         <!-- <div class="profile-avatar">
             
                 <img fxFlexOffset="50px" [src]="'https://www.google.co.in/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&ved=2ahUKEwi8qsnv7NPdAhWFWysKHZIZBDcQjRx6BAgBEAU&url=https%3A%2F%2Fwww.facebook.com%2FProfilePictures%2F&psig=AOvVaw12u0YbndUEVORSODg1OWeg&ust=1537885714967641'" style="width: 70px;height: 100px;border-radius: 50%;">
@@ -15,17 +15,17 @@
 
             <div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
                 <mat-form-field dividerColor="primary" class="ml-xs mr-xs">
-                    <input matInput placeholder="First name" [formControl]="regForm.controls['firstName']" required>
-                    <mat-error *ngIf="regForm.controls['firstName'].hasError('required') && regForm.controls['firstName'].touched" class="mat-text-warn">You must include a first name.</mat-error>
-                    <mat-error *ngIf="regForm.controls['firstName'].hasError('minlength') && regForm.controls['firstName'].touched" class="mat-text-warn">Your first name must be at least 5 characters long.</mat-error>
-                    <mat-error *ngIf="regForm.controls['firstName'].hasError('maxlength') && regForm.controls['firstName'].touched" class="mat-text-warn">Your first name cannot exceed 10 characters.</mat-error>
+                    <input matInput placeholder="First Name" [formControl]="regForm.controls['firstName']" required>
+                    <mat-error *ngIf="regForm.controls['firstName'].hasError('required') && regForm.controls['firstName'].touched" class="mat-text-warn">First Name Required.</mat-error>
+                    <mat-error *ngIf="regForm.controls['firstName'].hasError('minlength') && regForm.controls['firstName'].touched" class="mat-text-warn">Atleast 5 Characters.</mat-error>
+                    <mat-error *ngIf="regForm.controls['firstName'].hasError('maxlength') && regForm.controls['firstName'].touched" class="mat-text-warn">Not More Than 10 Characters.</mat-error>
                 </mat-form-field>
 
 
 
                 <mat-form-field dividerColor="primary" class="ml-xs mr-xs">
-                    <input matInput placeholder="Last name" [formControl]="regForm.controls['lastName']" required>
-                    <mat-error *ngIf="regForm.controls['lastName'].hasError('required') && regForm.controls['lastName'].touched" class="mat-text-warn">You must include a last name.</mat-error>
+                    <input matInput placeholder="Last Name" [formControl]="regForm.controls['lastName']" required>
+                    <mat-error *ngIf="regForm.controls['lastName'].hasError('required') && regForm.controls['lastName'].touched" class="mat-text-warn">Last Name Required.</mat-error>
                 </mat-form-field>
                 <!-- <mat-error *ngIf="regForm.controls['lastName'].hasError('minlength') && regForm.controls['lastName'].touched" class="mat-text-warn">Your first name must be at least 5 characters long.</mat-error>
                     <mat-error *ngIf="regForm.controls['lastName'].hasError('maxlength') && regForm.controls['lastName'].touched" class="mat-text-warn">Your first name cannot exceed 10 characters.</mat-error> -->
@@ -33,27 +33,45 @@
                     <input matInput placeholder="User Id" [formControl]="regForm.controls['userid']">
                 </mat-form-field>
                 <span dividerColor="primary" class="ml-xs mr-xs" *ngIf="profileaccess">
-                <img [src]="profileurl" style="width: 17%;height: 50%;border-radius: 50%;"></span>
+                <img [src]="profileurl" style="width: 10%;border-radius: 50%;"></span>
             </div>
  
-            <mat-card-title>Account Details</mat-card-title><hr/>
+            <mat-card-title>Account Details</mat-card-title><hr/><br/>
             <div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
                 <mat-form-field dividerColor="primary" class="ml-xs mr-xs">
-                    <input matInput placeholder="Email address" [formControl]="regForm.controls['email']" type="email" required>
-                    <mat-error *ngIf="regForm.controls['email'].hasError('required') && regForm.controls['email'].touched" class="mat-text-warn">You must include an email address.</mat-error>
-                    <mat-error *ngIf="regForm.controls['email'].errors?.email && regForm.controls['email'].touched" class="mat-text-warn">You must include a valid email address.</mat-error>
+                    <input matInput placeholder="Email Address" [formControl]="regForm.controls['email']" type="email" required>
+                    <mat-error *ngIf="regForm.controls['email'].hasError('required') && regForm.controls['email'].touched" class="mat-text-warn">email Address Required.</mat-error>
+                    <mat-error *ngIf="regForm.controls['email'].errors?.email && regForm.controls['email'].touched" class="mat-text-warn">Invalid Email Address.</mat-error>
                 </mat-form-field>
 
                 <!-- <mat-form-field dividerColor="primary" class="ml-xs mr-xs">
                     <input matInput placeholder="Alt Email address" [formControl]="regForm.controls['altemail']" type="email">
                 </mat-form-field> -->
                 <mat-form-field dividerColor="primary" class="ml-xs mr-xs">
-                        <input matInput placeholder="Phone number" [formControl]="regForm.controls['phone']" type="number" required>
-                        <mat-error *ngIf="regForm.controls['phone'].hasError('required') && regForm.controls['phone'].touched" class="mat-text-warn">You must include phone number.</mat-error>
-                        <mat-error *ngIf="regForm.controls['phone'].errors?.phone && regForm.controls['phone'].touched" class="mat-text-warn">You must include a valid phone number.</mat-error>
+                        <input matInput placeholder="Phone Number" [formControl]="regForm.controls['phone']" type="number" required>
+                        <mat-error *ngIf="regForm.controls['phone'].hasError('required') && regForm.controls['phone'].touched" class="mat-text-warn">Phone Number Required.</mat-error>
+                        <mat-error *ngIf="regForm.controls['phone'].errors?.phone && regForm.controls['phone'].touched" class="mat-text-warn">Invalid Phone Number.</mat-error>
     
                     </mat-form-field>
-                
+                    <mat-form-field dividerColor="primary" class="ml-xs mr-xs" >
+                            <mat-select matInput placeholder="State" [formControl]="regForm.controls['state']" required (selectionChange)="getcity($event)" >
+                                <mat-option>--</mat-option>
+                                <mat-option *ngFor="let s of State" [value]="s" >
+                                    {{s.name}}
+                                </mat-option>
+                            </mat-select>
+                            <mat-error *ngIf="regForm.controls['state'].hasError('required') && regForm.controls['state'].touched" class="mat-text-warn">State Required.</mat-error>
+                        </mat-form-field>
+        
+                        <mat-form-field dividerColor="primary" class="ml-xs mr-xs" >
+                            <mat-select matInput placeholder="City" [formControl]="regForm.controls['city']" required>
+                                <mat-option>--</mat-option>
+                                <mat-option *ngFor="let c of City" [value]="c">
+                                    {{c.name}}
+                                </mat-option>
+                            </mat-select>
+                            <mat-error *ngIf="regForm.controls['city'].hasError('required') && regForm.controls['city'].touched" class="mat-text-warn">city Required.</mat-error>
+                        </mat-form-field>
             </div>
 
 
@@ -95,7 +113,7 @@
                     <input matInput placeholder="Pincode" [formControl]="regForm.controls['pincode']">
                 </mat-form-field>
             </div> -->
-            <div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
+           <!-- <div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
                     <mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 30%;">
                             <mat-select matInput placeholder="State" [formControl]="regForm.controls['state']" required (selectionChange)="getcity($event)" >
                                 <mat-option>--</mat-option>
@@ -103,6 +121,7 @@
                                     {{s.name}}
                                 </mat-option>
                             </mat-select>
+                            <mat-error *ngIf="regForm.controls['state'].hasError('required') && regForm.controls['state'].touched" class="mat-text-warn">State Required.</mat-error>
                         </mat-form-field>
         
                         <mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 30%;">
@@ -112,57 +131,55 @@
                                     {{c.name}}
                                 </mat-option>
                             </mat-select>
-        
+                            <mat-error *ngIf="regForm.controls['city'].hasError('required') && regForm.controls['city'].touched" class="mat-text-warn">city Required.</mat-error>
                         </mat-form-field>
-            </div>
+            </div>-->
             <mat-card-title>Role Information</mat-card-title><hr/><br/>
             <div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
-                    <mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 30%;">
-                            <mat-select matInput placeholder="Enitity type" (selectionChange)="checktype($event.value)" [formControl]="regForm.controls['type']"
+                    <mat-form-field dividerColor="primary" class="ml-xs mr-xs" >
+                            <mat-select matInput placeholder="Enitity Type" (selectionChange)="checktype($event.value)" [formControl]="regForm.controls['type']"
                                 required>
                                 <mat-option>--</mat-option>
                                 <mat-option *ngFor="let types of types" [value]="types">
                                     {{types.name}}
                                 </mat-option>
                             </mat-select>
-                            <mat-error *ngIf="regForm.controls['type'].hasError('required') && regForm.controls['type'].touched" class="mat-text-warn">Select User Role</mat-error>
-                            <mat-error *ngIf="regForm.controls['type'].errors?.phone && regForm.controls['type'].touched" class="mat-text-warn">Select User Role</mat-error>
+                            <mat-error *ngIf="regForm.controls['type'].hasError('required') && regForm.controls['type'].touched" class="mat-text-warn">Enitity Type Required</mat-error>
+                            <mat-error *ngIf="regForm.controls['type'].errors?.phone && regForm.controls['type'].touched" class="mat-text-warn">Enitity Type Required</mat-error>
                             
                         </mat-form-field>
                         <!-- <span *ngIf="roleload"> -->
-                            <mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 30%;" *ngIf="typeValue == '2'">
+                            <mat-form-field dividerColor="primary" class="ml-xs mr-xs" *ngIf="typeValue == '2'">
                                 <mat-select matInput placeholder="Lender Name" [formControl]="regForm.controls['lenVenName']" required>
                                     <mat-option>--</mat-option>
                                     <mat-option *ngFor="let ent of entities" [value]="ent">
                                         {{ent.full_name}}
                                     </mat-option>
                                 </mat-select>
+                                <mat-error *ngIf="regForm.controls['lenVenName'].hasError('required') && regForm.controls['lenVenName'].touched" class="mat-text-warn">Lender Name Required.</mat-error>
                             </mat-form-field>
-                            <mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 30%;" *ngIf="typeValue == '3'">
+                            <mat-form-field dividerColor="primary" class="ml-xs mr-xs"  *ngIf="typeValue == '3'">
                                 <mat-select matInput placeholder="Vendor Name" [formControl]="regForm.controls['lenVenName']" required>
                                     <mat-option>--</mat-option>
                                     <mat-option *ngFor="let ent of entities" [value]="ent">
                                         {{ent.full_name}}
                                     </mat-option>
-                                </mat-select>
-                            </mat-form-field>
-                            
-                                
-                        <mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 30%;">
+                                </mat-select><mat-error *ngIf="regForm.controls['lenVenName'].hasError('required') && regForm.controls['lenVenName'].touched" class="mat-text-warn">Vendor Name Required.</mat-error>
+                             </mat-form-field>
+                            <mat-form-field dividerColor="primary" class="ml-xs mr-xs" >
                             <mat-select matInput placeholder="Role" (selectionChange)="toggleAllSelection($event,regForm.controls['type'].value)" [formControl]="regForm.controls['role']" required>
                                 <!-- <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">ALL</mat-option> -->
                                 <mat-option *ngFor="let role of roles" [value]="role" >
                                     {{role.role_name}}
                                 </mat-option>
                             </mat-select>
+                            
                             <div *ngIf="roleload"><mat-progress-bar mode="indeterminate" color="defalut"></mat-progress-bar></div>
-                            <mat-error *ngIf="regForm.controls['role'].hasError('required') && regForm.controls['role'].touched" class="mat-text-warn">Select User Role</mat-error>
-                            <mat-error *ngIf="regForm.controls['role'].errors?.phone && regForm.controls['role'].touched" class="mat-text-warn">Select User Role</mat-error>
+                            <mat-error *ngIf="regForm.controls['role'].hasError('required') && regForm.controls['role'].touched" class="mat-text-warn">User Role Required</mat-error>
+                            <mat-error *ngIf="regForm.controls['role'].errors?.phone && regForm.controls['role'].touched" class="mat-text-warn">User Role Required</mat-error>
                         </mat-form-field>
-
-                
-
-            </div>
+                        
+               </div>
             <!-- <div fxLayout="row" fxLayoutAlign="start center" class="mb-2" *ngIf="roleAccess">
                 
                     <!-- <mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 30%;" >
@@ -185,7 +202,7 @@
                         </mat-form-field>
             </div> -->
             <div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
-                    <mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 30%;" *ngIf="roleAccess">
+                    <mat-form-field dividerColor="primary" class="ml-xs mr-xs"  *ngIf="roleAccess">
                             <mat-select matInput placeholder="PD Team" [formControl]="regForm.controls['pdteam']" required >
                                 <mat-option>--</mat-option>
                                 <mat-option *ngFor="let pd of pdTeam" [value]="pd" >
@@ -204,32 +221,33 @@
         
                         </mat-form-field> -->
             </div>
-            <div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
-                UserProfile
-                <input type="file" (change)="onFileChange($event)" [formControl]="regForm.controls['userpic']" accept="image/*" />
-                <br/>    
-                <div *ngIf="imageaccess">
-                    <img [src]="filename" style="width: 27%;
-                    height: 62%;
-                    border-radius: 50%;
-                ">
-                    </div>
-                    <span *ngIf="usersData !=''">
-                {{img}}
-            </span>
+            <div fxLayout="row"  class="mb-2" >
+                <div style="width:80%">
+                        User Profile
+                        <input type="file" (change)="onFileChange($event)" [formControl]="regForm.controls['userpic']" accept="image/*" />
+                        <br/>    
+                        <div *ngIf="imageaccess">
+                            <img [src]="filename" style="width: 14%; border-radius: 50%;">
+                            </div>
+                            <span *ngIf="usersData !=''">
+                        {{img}}
+                    </span>  
+                </div>    
+                <div style="width:20%">
+                        <mat-slide-toggle color="primary" [formControl]="regForm.controls['isactive']">
+                                Isactive
+                            </mat-slide-toggle>
+                </div>
             </div>
-
-
-            <mat-slide-toggle color="primary" [formControl]="regForm.controls['isactive']">
-                Isactive
-            </mat-slide-toggle>
-        </mat-card-content>
+    </mat-card-content>
         <hr>
         <!-- <pre>{{regForm.controls['userid'].value | json}}</pre> -->
         
-        <mat-card-actions>
-                
-                        <button mat-fab class="mr-1 mb-1" style="margin-top: 7px;" color="primary" matTooltip="Submit"  matTooltipPosition="above"><mat-icon>save</mat-icon></button>
+        <mat-card-actions style="text-align:right;">
+                 
+                        <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="Submit"  matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
                     
         </mat-card-actions>
     </form>
diff --git a/ng6-seed/src/index.html b/ng6-seed/src/index.html
index 3a317457e..5e6c787ef 100644
--- a/ng6-seed/src/index.html
+++ b/ng6-seed/src/index.html
@@ -121,6 +121,9 @@
                 transform: scale3D(0, 0, 1);
             }
         }
+        .mat-cell{
+            font-size:1.2em !important;
+        }
     </style>
     <link rel="icon" type="image/x-icon" href="favicon.ico">
     <link rel="stylesheet" href="assets/wheather-icon/css/weather-icons.min.css" />