From 0f0bcb73838aa4e668708f5319a041f18c211cb9 Mon Sep 17 00:00:00 2001
From: saravanakumarkandasami <saravanakumar.k@venbainfotech.com>
Date: Wed, 17 Oct 2018 18:37:43 +0530
Subject: [PATCH] User UI

---
 .../users/register/register.component.html    | 105 +++++++++---------
 .../users/register/register.component.ts      |   7 +-
 2 files changed, 57 insertions(+), 55 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 978f52a51..c676e20a8 100755
--- a/ng6-seed/src/app/settings/users/register/register.component.html
+++ b/ng6-seed/src/app/settings/users/register/register.component.html
@@ -6,32 +6,32 @@
         <mat-card-content>
                 <div fxflex="100" fxLayout="row" fxLayoutAlign="start center">
                         <div dividerColor="primary" class="ml-xs mr-xs">
-                        <div  style="font-size:24px;"> User Registration</div>
+                              <div  style="font-size:24px;"> User Registration</div>
                         </div>
-                        <div dividerColor="primary" class="ml-xs mr-xs">
-                         
-                            <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> 
-                     
+                        <div dividerColor="primary" class="ml-xs mr-xs" style="text-align: right;margin-top: -4%;">
+                           <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> 
                         </div>
                 </div>
                 <div fxLayout="row wrap">
-                        <div fxFlex.gt-sm="33.33%" fxFlex="50" class="m-gap p-gap">
-                    <mat-card>
+                    <div fxFlex.gt-sm="33.33%" fxFlex="50" class="m-gap p-gap">
+                         <mat-card>
                             <mat-card-title>Personal</mat-card-title><hr/>
                             <mat-card-content>
-                            <div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
-                                    <span dividerColor="primary" class="ml-xs mr-xs" *ngIf="profileaccess">
-                                            <img [src]="profileurl" style="width: 10%;border-radius: 50%;"></span>
-                                            <div style="width:80%">
-                                                    User Profile
+                            <div fxLayout="row" fxLayoutAlign="start center" class="mb-2" style="display: inline-flex;">
+                                    <span  dividerColor="primary" class="ml-xs mr-xs" *ngIf="profileaccess">
+                                            <img [src]="profileurl" style="width: 50%;border-radius: 50%;">
+                                        </span> 
+                                            <span *ngIf="imageaccess">
+                                                <img [src]="filename" style="width: 50%; border-radius: 50%;">
+                                            </span>
+                                            <div style="width:60%">
+                                                   Profile Picture
                                                     <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 !=''">
+                                                        
+                                                   
+                                                      <!-- <span *ngIf="usersData !=''">
                                                     {{img}}
-                                                </span>  
+                                                </span>  --> 
                                             </div>  
                                     <mat-form-field dividerColor="primary" class="ml-xs mr-xs">
                                         <input matInput placeholder="First Name" [formControl]="regForm.controls['firstName']" required>
@@ -40,7 +40,7 @@
                                         <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>
 
-                                    <br>
+                                     
 
                                     <mat-form-field dividerColor="primary" class="ml-xs mr-xs">
                                         <input matInput placeholder="Last Name" [formControl]="regForm.controls['lastName']" required>
@@ -51,7 +51,7 @@
                                     <mat-form-field style="display: none;">
                                         <input matInput placeholder="User Id" [formControl]="regForm.controls['userid']">
                                     </mat-form-field>
-                                <br>
+                                 
                                
                                         <mat-slide-toggle color="primary" [formControl]="regForm.controls['isactive']">
                                                 Isactive
@@ -59,9 +59,8 @@
                                 
                                 </div>
                             </mat-card-content>
-                    </mat-card>
-
-                </div> 
+                        </mat-card>
+                     </div> 
                         <div fxFlex.gt-sm="33.33%" fxFlex="50" class="m-gap p-gap">
                             <mat-card>
                                     <mat-card-title>Contact</mat-card-title><hr/>
@@ -72,7 +71,7 @@
                                                         <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>
-                                                    <br>
+                                                     
                                                     <!-- <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> -->
@@ -82,7 +81,7 @@
                                                             <mat-error *ngIf="regForm.controls['phone'].errors?.phone && regForm.controls['phone'].touched" class="mat-text-warn">Invalid Phone Number.</mat-error>
                                         
                                                         </mat-form-field>
-                                                        <br>
+                                                         
                                                         <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>
@@ -91,7 +90,7 @@
                                                                     </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><br>
+                                                            </mat-form-field> 
                                             
                                                             <mat-form-field dividerColor="primary" class="ml-xs mr-xs" >
                                                                 <mat-select matInput placeholder="City" [formControl]="regForm.controls['city']" required>
@@ -172,7 +171,9 @@
                             <mat-error *ngIf="regForm.controls['city'].hasError('required') && regForm.controls['city'].touched" class="mat-text-warn">city Required.</mat-error>
                         </mat-form-field>
             </div>-->
-            <mat-card> <mat-card-title>Role</mat-card-title><hr/>
+            <mat-card> 
+                
+               <mat-card-title>Role</mat-card-title><hr/>
             <mat-card-content>
             <div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
                     <mat-form-field dividerColor="primary" class="ml-xs mr-xs" >
@@ -187,7 +188,7 @@
                             <mat-error *ngIf="regForm.controls['type'].errors?.phone && regForm.controls['type'].touched" class="mat-text-warn">Enitity Type Required</mat-error>
                             
                         </mat-form-field>
-                        <br>
+                         
                         <!-- <span *ngIf="roleload"> -->
                             <mat-form-field dividerColor="primary" class="ml-xs mr-xs" *ngIf="typeValue == '2'">
                                 <mat-select matInput placeholder="Lender Name" [formControl]="regForm.controls['lenVenName']" required>
@@ -198,8 +199,7 @@
                                 </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>
-                            <div></div>
+                            </mat-form-field> 
                             <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>
@@ -208,8 +208,7 @@
                                     </mat-option>
                                 </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>
-                            <div></div>
+                            </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>
@@ -223,8 +222,29 @@
                             <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>
+                        <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" >
+                                    {{pd.team_name}}
+                                </mat-option>
+                            </mat-select>
+                        </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-select matInput placeholder="PD Type" [formControl]="regForm.controls['pdtype']" required>
+                            <mat-option>--</mat-option>
+                            <mat-option *ngFor="let PDT of pdType" [value]="PDT">
+                                {{PDT.type_name}}
+                            </mat-option>
+                        </mat-select>
+    
+                    </mat-form-field> 
+        </div>-->
             </mat-card-content>
             </mat-card>
             
@@ -249,26 +269,7 @@
         
                         </mat-form-field>
             </div> -->
-            <div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
-                    <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" >
-                                    {{pd.team_name}}
-                                </mat-option>
-                            </mat-select>
-                        </mat-form-field>
-        
-                        <!-- <mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 30%;" *ngIf="roleAccess">
-                            <mat-select matInput placeholder="PD Type" [formControl]="regForm.controls['pdtype']" required>
-                                <mat-option>--</mat-option>
-                                <mat-option *ngFor="let PDT of pdType" [value]="PDT">
-                                    {{PDT.type_name}}
-                                </mat-option>
-                            </mat-select>
-        
-                        </mat-form-field> -->
-            </div>
+            
              
     </mat-card-content>
         <hr>
diff --git a/ng6-seed/src/app/settings/users/register/register.component.ts b/ng6-seed/src/app/settings/users/register/register.component.ts
index 24dd0aa40..c49301520 100755
--- a/ng6-seed/src/app/settings/users/register/register.component.ts
+++ b/ng6-seed/src/app/settings/users/register/register.component.ts
@@ -9,7 +9,8 @@ import { FileUploader } from 'ng2-file-upload/ng2-file-upload';
 import { MatOption } from '@angular/material';
 import { UserService } from '../../service/user.service';
 import { ifStmt } from '@angular/compiler/src/output/output_ast';
- 
+ /**sweet alert */
+import Swal from 'sweetalert2';
 
 const pdoff = "PD Officer";
 const pdexu = "PD Executive";
@@ -199,7 +200,7 @@ this.loader = true;
               this.AWS.adminUpdateuser(userData, data.record).subscribe(res => {
                 this.loader  =false;
                 console.log(res);
-                alert('user Created');
+                Swal('user Created');
                 this.router.navigate(['setting/users/userlist']);
               });
             }
@@ -215,7 +216,7 @@ this.loader = true;
         });}
           this.users.saveRecords(res,userData).subscribe(res=>{
             this.loader = false;
-            alert('Update User');
+            Swal('Update User');
             this.router.navigate(['setting/users/userlist']);
             //this.shared.redirectTo('settings/userListing');
             delete this.AWS.localUserId;