File

src/app/components/user-roles/user-roles.component.ts

Implements

OnInit

Metadata

selector app-user-roles
styleUrls user-roles.component.scss
templateUrl ./user-roles.component.html

Index

Properties
Methods

Constructor

constructor()

Methods

ngOnInit
ngOnInit()
Returns : void
removeUser
removeUser(user: )
Parameters :
Name Type Optional Description
user
Returns : void
selectUser
selectUser(newVal: )
Parameters :
Name Type Optional Description
newVal
Returns : void

Properties

Public appsData
appsData: any[]
Type : any[]
Public appsDataConfig
appsDataConfig: IKiewitDropdown
Type : IKiewitDropdown
arrayOfUsers
arrayOfUsers:
Public rolesData
rolesData: any[]
Type : any[]
Public rolesDataConfig
rolesDataConfig: IKiewitDropdown
Type : IKiewitDropdown
Public selectedUsers
selectedUsers: User[]
Type : User[]
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
Component
Html element with directive

results matching ""

    No results matching ""