File

src/lib/kiewit-columnchooser/kiewit-columnchooser.component.ts

Implements

OnInit

Metadata

selector kiewit-columnchooser
styleUrls kiewit-columnchooser.component.scss
templateUrl ./kiewit-columnchooser.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor()

Inputs

config

Type: any

Outputs

kcsColumnChooserClick $event type: EventEmitter<any>
kcsColumnChooserClose $event type: EventEmitter<any>
kcsColumnChooserSaveClick $event type: EventEmitter

Methods

Private closeColumnChooser
closeColumnChooser(isMainClose: boolean)
Parameters :
Name Type Optional Description
isMainClose boolean
Returns : boolean
columnChooserClick
columnChooserClick()
Returns : void
Private getSelectedOptions
getSelectedOptions(type: string)
Parameters :
Name Type Optional Description
type string
Returns : any
ngOnInit
ngOnInit()
Returns : void
onMoveDown
onMoveDown(e: any)
Parameters :
Name Type Optional Description
e any
Returns : boolean
onMoveLeft
onMoveLeft(e: any)
Parameters :
Name Type Optional Description
e any
Returns : boolean
onMoveRight
onMoveRight(e: any)
Parameters :
Name Type Optional Description
e any
Returns : boolean
onMoveUp
onMoveUp(e: any)
Parameters :
Name Type Optional Description
e any
Returns : boolean
onSelectionChanged
onSelectionChanged(e: any)
Parameters :
Name Type Optional Description
e any
Returns : void
Private resetIconsToDefault
resetIconsToDefault()
Returns : void
saveColumnChooser
saveColumnChooser()
Returns : void

Properties

availablelist
availablelist: ElementRef
Type : ElementRef
Decorators : ViewChild
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
selectedlist
selectedlist: ElementRef
Type : ElementRef
Decorators : ViewChild
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">&nbsp;</div>
        <div class="div-table-col"></div>
      </div>
      <div class="div-table-row-seperator">&nbsp;</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">&nbsp;</div>
        <div class="div-table-col-seperator">&nbsp;</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">&nbsp;</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
Component
Html element with directive

results matching ""

    No results matching ""