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

User UI

Browse Source
This commit is contained in:
saravanakumarkandasami 2018-10-12 19:20:33 +05:30
parent 3e989b9d23
commit b7241853f8
2 changed files with 82 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,9 @@
<mat-card> <mat-card>
<mat-card-title> <mat-card-title>
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon button" (click)="back()"> 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>
<mat-icon>chevron_left</mat-icon> </button> </mat-card-title>
</button> User Registrations</mat-card-title>
<!-- <div class="profile-avatar"> <!-- <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%;"> <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"> <div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
<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">You must include a first name.</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">Your first name must be at least 5 characters long.</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">Your first name cannot exceed 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">You must include a last name.</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('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-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']"> <input matInput placeholder="User Id" [formControl]="regForm.controls['userid']">
</mat-form-field> </mat-form-field>
<span dividerColor="primary" class="ml-xs mr-xs" *ngIf="profileaccess"> <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> </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"> <div fxLayout="row" fxLayoutAlign="start center" class="mb-2">
<mat-form-field dividerColor="primary" class="ml-xs mr-xs"> <mat-form-field dividerColor="primary" class="ml-xs mr-xs">
<input matInput placeholder="Email address" [formControl]="regForm.controls['email']" type="email" required> <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'].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">You must include a valid 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"> <!-- <mat-form-field dividerColor="primary" class="ml-xs mr-xs">
<input matInput placeholder="Alt Email address" [formControl]="regForm.controls['altemail']" type="email"> <input matInput placeholder="Alt Email address" [formControl]="regForm.controls['altemail']" type="email">
</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="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">You must include phone number.</mat-error> <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">You must include a valid phone number.</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>
<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> </div>
@ -95,7 +113,7 @@
<input matInput placeholder="Pincode" [formControl]="regForm.controls['pincode']"> <input matInput placeholder="Pincode" [formControl]="regForm.controls['pincode']">
</mat-form-field> </mat-form-field>
</div> --> </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-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-select matInput placeholder="State" [formControl]="regForm.controls['state']" required (selectionChange)="getcity($event)" >
<mat-option>--</mat-option> <mat-option>--</mat-option>
@ -103,6 +121,7 @@
{{s.name}} {{s.name}}
</mat-option> </mat-option>
</mat-select> </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>
<mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 30%;"> <mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 30%;">
@ -112,56 +131,54 @@
{{c.name}} {{c.name}}
</mat-option> </mat-option>
</mat-select> </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> </mat-form-field>
</div> </div>-->
<mat-card-title>Role Information</mat-card-title><hr/><br/> <mat-card-title>Role Information</mat-card-title><hr/><br/>
<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-form-field dividerColor="primary" class="ml-xs mr-xs" >
<mat-select matInput placeholder="Enitity type" (selectionChange)="checktype($event.value)" [formControl]="regForm.controls['type']" <mat-select matInput placeholder="Enitity Type" (selectionChange)="checktype($event.value)" [formControl]="regForm.controls['type']"
required> required>
<mat-option>--</mat-option> <mat-option>--</mat-option>
<mat-option *ngFor="let types of types" [value]="types"> <mat-option *ngFor="let types of types" [value]="types">
{{types.name}} {{types.name}}
</mat-option> </mat-option>
</mat-select> </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'].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">Select User Role</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"> --> <!-- <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-select matInput placeholder="Lender Name" [formControl]="regForm.controls['lenVenName']" required>
<mat-option>--</mat-option> <mat-option>--</mat-option>
<mat-option *ngFor="let ent of entities" [value]="ent"> <mat-option *ngFor="let ent of entities" [value]="ent">
{{ent.full_name}} {{ent.full_name}}
</mat-option> </mat-option>
</mat-select> </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>
<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-select matInput placeholder="Vendor Name" [formControl]="regForm.controls['lenVenName']" required>
<mat-option>--</mat-option> <mat-option>--</mat-option>
<mat-option *ngFor="let ent of entities" [value]="ent"> <mat-option *ngFor="let ent of entities" [value]="ent">
{{ent.full_name}} {{ent.full_name}}
</mat-option> </mat-option>
</mat-select> </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>
<mat-form-field dividerColor="primary" class="ml-xs mr-xs" >
<mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 30%;">
<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 #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>
</mat-select> </mat-select>
<div *ngIf="roleload"><mat-progress-bar mode="indeterminate" color="defalut"></mat-progress-bar></div> <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'].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">Select User Role</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>
</div> </div>
<!-- <div fxLayout="row" fxLayoutAlign="start center" class="mb-2" *ngIf="roleAccess"> <!-- <div fxLayout="row" fxLayoutAlign="start center" class="mb-2" *ngIf="roleAccess">
@ -185,7 +202,7 @@
</mat-form-field> </mat-form-field>
</div> --> </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%;" *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-select matInput placeholder="PD Team" [formControl]="regForm.controls['pdteam']" required >
<mat-option>--</mat-option> <mat-option>--</mat-option>
<mat-option *ngFor="let pd of pdTeam" [value]="pd" > <mat-option *ngFor="let pd of pdTeam" [value]="pd" >
@ -204,32 +221,33 @@
</mat-form-field> --> </mat-form-field> -->
</div> </div>
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2"> <div fxLayout="row" class="mb-2" >
UserProfile <div style="width:80%">
User Profile
<input type="file" (change)="onFileChange($event)" [formControl]="regForm.controls['userpic']" accept="image/*" /> <input type="file" (change)="onFileChange($event)" [formControl]="regForm.controls['userpic']" accept="image/*" />
<br/> <br/>
<div *ngIf="imageaccess"> <div *ngIf="imageaccess">
<img [src]="filename" style="width: 27%; <img [src]="filename" style="width: 14%; border-radius: 50%;">
height: 62%;
border-radius: 50%;
">
</div> </div>
<span *ngIf="usersData !=''"> <span *ngIf="usersData !=''">
{{img}} {{img}}
</span> </span>
</div> </div>
<div style="width:20%">
<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>
<hr> <hr>
<!-- <pre>{{regForm.controls['userid'].value | json}}</pre> --> <!-- <pre>{{regForm.controls['userid'].value | json}}</pre> -->
<mat-card-actions> <mat-card-actions style="text-align:right;">
<button mat-fab class="mr-1 mb-1" style="margin-top: 7px;" color="primary" matTooltip="Submit" matTooltipPosition="above"><mat-icon>save</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="Submit" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
</mat-card-actions> </mat-card-actions>
</form> </form>

3
ng6-seed/src/index.html
View File

@ -121,6 +121,9 @@
transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1);
} }
} }
.mat-cell{
font-size:1.2em !important;
}
</style> </style>
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="assets/wheather-icon/css/weather-icons.min.css" /> <link rel="stylesheet" href="assets/wheather-icon/css/weather-icons.min.css" />