File
Implements
Metadata
selector |
app-user-roles |
styleUrls |
user-roles.component.scss |
templateUrl |
./user-roles.component.html |
Methods
removeUser
|
removeUser(user: )
|
|
Parameters :
Name |
Type |
Optional |
Description |
user |
|
|
|
|
selectUser
|
selectUser(newVal: )
|
|
Parameters :
Name |
Type |
Optional |
Description |
newVal |
|
|
|
|
Public appsData
|
appsData: any[]
|
Type : any[]
|
|
arrayOfUsers
|
arrayOfUsers:
|
|
Public rolesData
|
rolesData: any[]
|
Type : any[]
|
|
import { Component, OnInit } from '@angular/core';
import { IKiewitDropdown } from '../../../lib/kiewit-dropdown';
@Component({
selector: 'app-user-roles',
templateUrl: './user-roles.component.html',
styleUrls: ['./user-roles.component.scss']
})
export class UserRolesComponent implements OnInit {
//This users list must be loaded from database and must be List<User>...
arrayOfUsers = ['Gonzalo Ferrando', 'Dan Nash', 'Chaitanya Thalloory', 'Greg Thompson'];
public selectedUsers: User[] = []
public appsData: any[] = [
"Application 1",
"Application 2",
"Application 3",
"Application 4",
"Application 5"
]
public rolesData: any[] = [
"Role 1",
"Role 2",
"Role 3",
"Role 4",
"Role 5"
]
public appsDataConfig:IKiewitDropdown={
data: this.appsData,
//textField: "ApplicationName",
//valueField: "ApplicationId"
}
public rolesDataConfig: IKiewitDropdown = {
data: this.rolesData,
//textField: "ApplicationName",
//valueField: "ApplicationId"
}
selectUser(newVal) {
this.selectedUsers.push(new User(Math.random() * (1000 - 1) + 1, newVal));
}
constructor() { }
ngOnInit() {
}
removeUser(user) {
let index: number = this.selectedUsers.indexOf(user);
if (index !== -1) {
this.selectedUsers.splice(index, 1);
}
}
}
export class User {
constructor(
public id: number,
public name: string) { }
}
<h2>User Role Mapping</h2>
<div>
<div style="width: 500px; margin-bottom:20px">
<div style="width: 100px; float: left">
<span>Application</span>
</div>
<kiewit-dropdown style="width: 300px" [config]="appsDataConfig"></kiewit-dropdown>
</div>
<div style="width: 500px; margin-bottom:20px">
<div style="width: 100px; float: left">
<span>Roles</span>
</div>
<kiewit-dropdown style="width: 300px" [config]="rolesDataConfig"></kiewit-dropdown>
</div>
<div style="width: 500px; margin-bottom:20px">
<div style="width: 100px; float: left">
<span>User</span>
</div>
<kiewit-autocomplete [dataSource]="arrayOfUsers" (onSelectValue)="selectUser($event)"></kiewit-autocomplete>
</div>
<div>
<p *ngIf="selectedUsers.length > 0">{{ selectedUsers.length }} user/s assigned to this role</p>
<ul>
<li style="list-style-type:none" *ngFor="let user of selectedUsers">
<span>{{ user.name }}</span>
<span style="cursor:pointer" class="k-icon k-i-close" (click)="removeUser(user)"></span>
</li>
</ul>
</div>
</div>
<div>
<input type="button" value="Save" />
</div>
Implementation
In Type Script File
import { Component, OnInit } from '@angular/core';
import { IKiewitDropdown } from '../../../lib/kiewit-dropdown';
@Component({
selector: 'app-user-roles',
templateUrl: './user-roles.component.html',
styleUrls: ['./user-roles.component.scss']
})
export class UserRolesComponent implements OnInit {
}
In HTML File
<app-user-roles> </app-user-roles>
Legend
Html element with directive