File
Implements
Metadata
selector |
kiewit-columnchooser |
styleUrls |
kiewit-columnchooser.component.scss |
templateUrl |
./kiewit-columnchooser.component.html |
Index
Properties
|
|
Methods
|
|
Inputs
|
|
Outputs
|
|
Outputs
kcsColumnChooserClick
|
$event type: EventEmitter<any>
|
|
kcsColumnChooserClose
|
$event type: EventEmitter<any>
|
|
Methods
Private closeColumnChooser
|
closeColumnChooser(isMainClose: boolean)
|
|
Parameters :
Name |
Type |
Optional |
Description |
isMainClose |
boolean
|
|
|
|
columnChooserClick
|
columnChooserClick()
|
|
|
Private getSelectedOptions
|
getSelectedOptions(type: string)
|
|
Parameters :
Name |
Type |
Optional |
Description |
type |
string
|
|
|
|
onMoveDown
|
onMoveDown(e: any)
|
|
Parameters :
Name |
Type |
Optional |
Description |
e |
any
|
|
|
|
onMoveLeft
|
onMoveLeft(e: any)
|
|
Parameters :
Name |
Type |
Optional |
Description |
e |
any
|
|
|
|
onMoveRight
|
onMoveRight(e: any)
|
|
Parameters :
Name |
Type |
Optional |
Description |
e |
any
|
|
|
|
onMoveUp
|
onMoveUp(e: any)
|
|
Parameters :
Name |
Type |
Optional |
Description |
e |
any
|
|
|
|
onSelectionChanged
|
onSelectionChanged(e: any)
|
|
Parameters :
Name |
Type |
Optional |
Description |
e |
any
|
|
|
|
Private resetIconsToDefault
|
resetIconsToDefault()
|
|
|
saveColumnChooser
|
saveColumnChooser()
|
|
|
Private isDataChanged
|
isDataChanged: boolean
|
Type : boolean
|
Default value : true
|
|
isLeftIconsDisabled
|
isLeftIconsDisabled: boolean
|
Type : boolean
|
Default value : false
|
|
Private isRightIconsDisabled
|
isRightIconsDisabled: boolean
|
Type : boolean
|
Default value : false
|
|
isUpDownIconDisabled
|
isUpDownIconDisabled: boolean
|
Type : boolean
|
Default value : false
|
|
import { Component, OnInit, Input, Output, ViewChild, EventEmitter, ElementRef } from '@angular/core';
@Component({
selector: 'kiewit-columnchooser',
templateUrl: './kiewit-columnchooser.component.html',
styleUrls: ['./kiewit-columnchooser.component.scss']
})
export class KiewitColumnChooserComponent implements OnInit {
@Input() config: any = {
availableColumns: [],
selectedColumns: [],
isOpened: false,
};
@Output() kcsColumnChooserClick: EventEmitter<any> = new EventEmitter();
@Output() kcsColumnChooserClose: EventEmitter<any> = new EventEmitter();
@Output() kcsColumnChooserSaveClick = new EventEmitter();
@ViewChild('lstavailable') availablelist: ElementRef;
@ViewChild('lstselected') selectedlist: ElementRef;
private isDataChanged: boolean = true;
private isRightIconsDisabled: boolean = false;
isUpDownIconDisabled: boolean = false;
isLeftIconsDisabled: boolean = false;
constructor() {
}
ngOnInit() {
}
saveColumnChooser() {
let columnChooserData = { "availableColumns": this.config.availableColumns, "selectedColumns": this.config.selectedColumns };
this.kcsColumnChooserSaveClick.emit(columnChooserData);
}
columnChooserClick() {
this.kcsColumnChooserClick.emit();
this.config.isOpened = true;
}
private closeColumnChooser(isMainClose: boolean) {
if (!isMainClose)
if (this.isDataChanged) return false;
this.resetIconsToDefault();
this.isDataChanged = true;
this.config.isOpened = false;
this.kcsColumnChooserClose.emit();
}
onSelectionChanged(e: any) {
if (e.target.className === "selectedList") {
let selected = this.getSelectedOptions("SELECTED");
if (selected && selected.length == 1)
this.isUpDownIconDisabled = true;
else
this.isUpDownIconDisabled = false;
this.isLeftIconsDisabled = true;
this.isRightIconsDisabled = false;
}
else {
this.isUpDownIconDisabled = false;
this.isLeftIconsDisabled = false;
this.isRightIconsDisabled = true;
}
}
onMoveRight(e: any) {
if (e.currentTarget.className.indexOf("columnchooser-directional-icons-disabled") != -1) return false;
let selected = this.getSelectedOptions("AVAILABLE");
this.isDataChanged = false;
for (var currentindex = 0; currentindex < selected.length; currentindex++) {
this.config.selectedColumns.push(this.config.availableColumns[selected[currentindex].index]);
}
for (var currentindex = 0; currentindex < selected.length; currentindex++) {
for (var index = 0; index < this.config.availableColumns.length; index++) {
if (this.config.availableColumns[index].title === selected[currentindex].text) {
this.config.availableColumns.splice(index, 1);
break;
}
}
}
this.resetIconsToDefault();
}
onMoveLeft(e: any) {
if (e.currentTarget.className.indexOf("columnchooser-directional-icons-disabled") != -1) return false;
let selected = this.getSelectedOptions("SELECTED");
this.isDataChanged = false;
for (var currentindex = 0; currentindex < selected.length; currentindex++) {
this.config.availableColumns.push(this.config.selectedColumns[selected[currentindex].index]);
}
for (var currentindex = 0; currentindex < selected.length; currentindex++) {
for (var index = 0; index < this.config.selectedColumns.length; index++) {
if (this.config.selectedColumns[index].title === selected[currentindex].text) {
this.config.selectedColumns.splice(index, 1);
break;
}
}
}
this.resetIconsToDefault();
}
onMoveUp(e: any) {
if (e.currentTarget.className.indexOf("columnchooser-directional-icons-disabled") != -1) return false;
let selected = this.getSelectedOptions("SELECTED");
this.isDataChanged = false;
this.config.selectedColumns.moveUp(selected[0].index);
}
onMoveDown(e: any) {
if (e.currentTarget.className.indexOf("columnchooser-directional-icons-disabled") != -1) return false;
let selected = this.getSelectedOptions("SELECTED");
this.isDataChanged = false;
this.config.selectedColumns.moveDown(selected[0].index);
}
private resetIconsToDefault() {
this.isUpDownIconDisabled = false;
this.isLeftIconsDisabled = false;
this.isRightIconsDisabled = false;
}
private getSelectedOptions(type: string) {
let selectedOptions = [];
switch (type) {
case "AVAILABLE":
if (this.availablelist.nativeElement.selectedOptions) {
selectedOptions = this.availablelist.nativeElement.selectedOptions;
}
else {
for (var index = 0; index < this.availablelist.nativeElement.options.length; index++) {
if (this.availablelist.nativeElement.options[index].selected)
selectedOptions.push(this.availablelist.nativeElement.options[index])
}
}
break;
case "SELECTED":
if (this.selectedlist.nativeElement.selectedOptions) {
selectedOptions = this.selectedlist.nativeElement.selectedOptions;
}
else {
for (var index = 0; index < this.selectedlist.nativeElement.options.length; index++) {
if (this.selectedlist.nativeElement.options[index].selected)
selectedOptions.push(this.selectedlist.nativeElement.options[index])
}
}
break;
default:
}
return selectedOptions;
}
}
<kendo-dialog *ngIf="config.isOpened" [width]="605" [height]="420">
<div class="popup-main" id="divColumnChooser">
<div class="divclose" (click)="closeColumnChooser(true)">
<span class="icon icon-close"></span>
</div>
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col popup-title width300">Column options</div>
<div class="div-table-col-seperator"> </div>
<div class="div-table-col"></div>
</div>
<div class="div-table-row-seperator"> </div>
<div class="div-table-row">
<div class="div-table-col">
<label class="popup-label">Available columns</label>
<div>
<select #lstavailable multiple style="height:250px;width:230px;" (change)="onSelectionChanged($event)">
<option *ngFor="let column of config.availableColumns">{{column.title}}</option>
</select>
</div>
</div>
<div class="div-table-col-seperator column-chooser-seperator">
<div disabled="disabled" (click)="onMoveRight($event)" [ngClass]="(isRightIconsDisabled) ? 'columnchooser-directional-icons columnchooser-directional-icons-active' : 'columnchooser-directional-icons columnchooser-directional-icons-disabled'">
<i class="fa fa-arrow-right"></i>
</div>
<div disabled="disabled" (click)="onMoveLeft($event)" [ngClass]="(isLeftIconsDisabled) ? 'columnchooser-directional-icons columnchooser-directional-icons-active' : 'columnchooser-directional-icons columnchooser-directional-icons-disabled'">
<i class="fa fa-arrow-left"></i>
</div>
</div>
<div class="div-table-col">
<label class="popup-label">Selected columns</label>
<div>
<select #lstselected multiple style="height:250px;width:230px;" (change)="onSelectionChanged($event)" class="selectedList">
<option *ngFor="let column of config.selectedColumns">{{column.title}}</option>
</select>
</div>
</div>
<div class="div-table-col-seperator column-chooser-seperator" style="width:35px;">
<div (click)="onMoveUp($event)" [ngClass]="(isUpDownIconDisabled) ? 'columnchooser-directional-icons columnchooser-directional-icons-active' : 'columnchooser-directional-icons columnchooser-directional-icons-disabled'">
<i class="fa fa-arrow-up"></i>
</div>
<div disabled="disabled" (click)="onMoveDown($event)" [ngClass]="(isUpDownIconDisabled) ? 'columnchooser-directional-icons columnchooser-directional-icons-active' : 'columnchooser-directional-icons columnchooser-directional-icons-disabled'">
<i class="fa fa-arrow-down"></i>
</div>
</div>
</div>
<div class="div-table-row">
<div class="div-table-col width300"> </div>
<div class="div-table-col-seperator"> </div>
<div class="div-table-col width300 align-right" style="margin-left:245px;">
<div class="pull-right">
<div [ngClass]="(isDataChanged) ? 'kcs-button primary pull-right columnchooserCancelDisabled' : 'kcs-button primary pull-right'" (click)="saveColumnChooser()">Save</div>
<div style="width:20px;" class="pull-right"> </div>
<div (click)="closeColumnChooser(false)" [ngClass]="(isDataChanged) ? 'kcs-button secondary pull-right columnchooserCancelDisabled' : 'kcs-button secondary pull-right'">Cancel</div>
</div>
</div>
</div>
</div>
</div>
</kendo-dialog>
<span class="fa fa-columns columnChooser" (click)="columnChooserClick()"></span>
Implementation
In Type Script File
import { Component,OnInit} from '@angular/core';
@Component({
selector: 'kiewit-columnchooser',
templateUrl: './kiewit-columnchooser.component.html',
styleUrls: ['./kiewit-columnchooser.component.scss']
})
export class KiewitColumnChooserComponent implements OnInit {
private employeeDataConfig;
ngOnInit() {
this.employeeDataConfig = {
"availableColumns": [],
"selectedColumns": [],
"isOpened": false
}
}
columnChooserClick() {
let avlColumns = assign available columns
//let avlColumns = Object.assign([], this.userPreferences.userPreferences.OPPORTUNITIES.availableColumns);
let selColumns = assign selected columns
//let selColumns = Object.assign([], this.userPreferences.userPreferences.OPPORTUNITIES.selectedColumns);
this.employeeDataConfig = {
"availableColumns": avlColumns,
"selectedColumns": selColumns,
"isOpened": true
}
columnchooserSaveClicked(value){
//save functionality code
}
}
}
Peforming CRUD Operations To UserPrefrence
In HTML File
<kiewit-columnchooser [config]="employeeDataConfig"
(kcsColumnChooserClick)="columnChooserClick()"
(kcsColumnChooserClose)="columnchooserCloseClicked()"
(kcsColumnChooserSaveClick)="columnchooserSaveClicked($event)">
</kiewit-columnchooser>
Legend
Html element with directive