Sineedge/sparqsineedge
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

User Registration DP UI

Browse Source
This commit is contained in:
saravanakumarkandasami 2018-11-08 14:12:54 +05:30
parent 6171dcb4f0
commit 6cb431487c
3 changed files with 126 additions and 255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
ng6-seed/src/app/settings/users/register/register.component.html
View File

@ -1,7 +1,4 @@
<mat-card>
<mat-card>
<form [formGroup]="regForm" (ngSubmit)="register(regForm.value)"> <form [formGroup]="regForm" (ngSubmit)="register(regForm.value)">
<mat-card-content> <mat-card-content>
<div fxflex="100" fxLayout="row" fxLayoutAlign="start center"> <div fxflex="100" fxLayout="row" fxLayoutAlign="start center">
@ -17,46 +14,38 @@
<mat-card> <mat-card>
<mat-card-title>Personal</mat-card-title><hr/> <mat-card-title>Personal</mat-card-title><hr/>
<mat-card-content> <mat-card-content>
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2" style="display: inline-flex;"> <div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
<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/*" />
<!-- <span *ngIf="usersData !=''"> <span dividerColor="primary" class="ml-xs mr-xs" *ngIf="!imageaccess">
{{img}} <img [src]="profileurl || 'https://image.ibb.co/mGjZB9/usernew.png'" style="width: 10%;border-radius: 50%;border:2px solid red">
</span> -->
</div> </span>
<span dividerColor="primary" *ngIf="imageaccess">
<img [src]="filename" style="width: 10%; border-radius: 50%;border:2px solid #e00201">
</span>
<label for="fileUpload" ><mat-icon style="color:#e00201">camera_alt</mat-icon></label>
<input type="file" id="fileUpload" (change)="onFileChange($event)" [formControl]="regForm.controls['userpic']" accept="image/*" style="display:none"/>
<mat-form-field dividerColor="primary" class="ml-xs mr-xs"> <mat-form-field dividerColor="primary" class="ml-xs mr-xs">
<input matInput placeholder="First Name" [formControl]="regForm.controls['firstName']" required> <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('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('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-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>
<mat-form-field dividerColor="primary" class="ml-xs mr-xs"> <mat-form-field dividerColor="primary" class="ml-xs mr-xs">
<input matInput placeholder="Last Name" [formControl]="regForm.controls['lastName']" required> <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-error *ngIf="regForm.controls['lastName'].hasError('required') && regForm.controls['lastName'].touched" class="mat-text-warn">Last Name Required.</mat-error>
</mat-form-field> </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> -->
<mat-form-field style="display: none;"> <mat-form-field style="display: none;">
<input matInput placeholder="User Id" [formControl]="regForm.controls['userid']"> <input matInput placeholder="User Id" [formControl]="regForm.controls['userid']">
</mat-form-field> </mat-form-field>
<mat-slide-toggle color="primary" [formControl]="regForm.controls['isactive']"> <mat-slide-toggle color="primary" [formControl]="regForm.controls['isactive']">
Isactive Isactive
</mat-slide-toggle> </mat-slide-toggle>
</div> </div>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
@ -72,9 +61,6 @@
<mat-error *ngIf="regForm.controls['email'].errors?.email && regForm.controls['email'].touched" class="mat-text-warn">Invalid Email Address.</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>
<!-- <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"> <mat-form-field dividerColor="primary" class="ml-xs mr-xs">
<input matInput placeholder="Phone Number" [formControl]="regForm.controls['phone']" type="number" required> <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'].hasError('required') && regForm.controls['phone'].touched" class="mat-text-warn">Phone Number Required.</mat-error>
@ -106,71 +92,7 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
</div> </div>
<div fxFlex.gt-sm="33.33%" fxFlex="50" class="m-gap p-gap">
<!-- <mat-card-title>Contact Information</mat-card-title><hr/>
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
<mat-form-field dividerColor="primary" class="ml-xs mr-xs">
<input matInput placeholder="Phone number" [formControl]="regForm.controls['phone']" type="text">
<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>
</mat-form-field>
<mat-form-field dividerColor="primary" class="ml-xs mr-xs">
<input matInput placeholder="Alt Phone number" [formControl]="regForm.controls['altphone']" type="text">
<mat-error *ngIf="regForm.controls['altphone'].errors?.phone && regForm.controls['phone'].touched" class="mat-text-warn">You must include a valid phone number.</mat-error>
</mat-form-field>
<!-- <mat-error *ngIf="regForm.controls['phone'].hasError('required') && regForm.controls['phone'].touched" class="mat-text-warn">You must include phone number.</mat-error>
<mat-form-field dividerColor="primary" class="ml-xs mr-xs">
<input matInput placeholder="Address 1" [formControl]="regForm.controls['address1']">
</mat-form-field>
</div> -->
<!-- <div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
<mat-form-field dividerColor="primary" class="ml-xs mr-xs">
<input matInput placeholder="Address 2" [formControl]="regForm.controls['address2']">
</mat-form-field>
<mat-form-field dividerColor="primary" class="ml-xs mr-xs">
<input matInput placeholder="Address 3" [formControl]="regForm.controls['address3']">
</mat-form-field>
<mat-form-field dividerColor="primary" class="ml-xs mr-xs">
<input matInput placeholder="Pincode" [formControl]="regForm.controls['pincode']">
</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%;">
<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" style="width: 30%;">
<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>-->
<mat-card> <mat-card>
<mat-card-title>Role</mat-card-title><hr/> <mat-card-title>Role</mat-card-title><hr/>
@ -188,8 +110,6 @@
<mat-error *ngIf="regForm.controls['type'].errors?.phone && 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> </mat-form-field>
<!-- <span *ngIf="roleload"> -->
<mat-form-field dividerColor="primary" class="ml-xs mr-xs" *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-select matInput placeholder="Lender Name" [formControl]="regForm.controls['lenVenName']" required>
<mat-option>--</mat-option> <mat-option>--</mat-option>
@ -212,7 +132,6 @@
<mat-form-field dividerColor="primary" class="ml-xs mr-xs" > <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-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" > <mat-option *ngFor="let role of roles" [value]="role" >
{{role.role_name}} {{role.role_name}}
</mat-option> </mat-option>
@ -232,48 +151,16 @@
</mat-form-field> </mat-form-field>
</div> </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-content>
</mat-card> </mat-card>
</div> </div>
<!-- <div fxLayout="row" fxLayoutAlign="start center" class="mb-2" *ngIf="roleAccess"> </div>
<mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 30%;" >
<mat-select matInput placeholder="Select Customer" [formControl]="regForm.controls['customer']" required (selectionChange)="getcity($event)">
<mat-option>--</mat-option>
<mat-option *ngFor="let C of customerSeg" [value]="C" >
{{C.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="Select Product" [formControl]="regForm.controls['product']" required>
<mat-option>--</mat-option>
<mat-option *ngFor="let P of product" [value]="P">
{{P.name}}
</mat-option>
</mat-select>
</mat-form-field>
</div> -->
</mat-card-content> </mat-card-content>
<hr> <hr>
<!-- <pre>{{regForm.controls['userid'].value | json}}</pre> -->
<mat-card-actions style="text-align:right;"> <mat-card-actions style="text-align:right;">

16
ng6-seed/src/app/settings/users/register/register.component.scss
View File

@ -1,16 +0,0 @@
// .mat-card-title{
// color: #fff;
// margin-left: 13px;
// background: rgba(157, 69, 124, 1);
// box-shadow: 0 4px 20px 0 rgba(157, 69, 124, 1), 0 7px 10px -5px rgba(157, 69, 124, 1);;
// display: inline-block;
// border-radius: 6px;
// padding: 10px;
// margin-top: -52px;
// }

4
ng6-seed/src/app/settings/users/register/register.component.ts
View File

@ -200,7 +200,7 @@ this.loader = true;
this.AWS.adminUpdateuser(userData, data.record).subscribe(res => { this.AWS.adminUpdateuser(userData, data.record).subscribe(res => {
this.loader =false; this.loader =false;
console.log(res); console.log(res);
Swal('user Created'); Swal('User Created');
this.router.navigate(['setting/users/userlist']); this.router.navigate(['setting/users/userlist']);
}); });
} }
@ -216,7 +216,7 @@ this.loader = true;
});} });}
this.users.saveRecords(res,userData).subscribe(res=>{ this.users.saveRecords(res,userData).subscribe(res=>{
this.loader = false; this.loader = false;
Swal('Update User'); Swal('User Updated');
this.router.navigate(['setting/users/userlist']); this.router.navigate(['setting/users/userlist']);
//this.shared.redirectTo('settings/userListing'); //this.shared.redirectTo('settings/userListing');
delete this.AWS.localUserId; delete this.AWS.localUserId;