src/app/components/dashboard/dashboard.component.ts
providers |
KiewitLoggingService
KiewitAuthenticationService
|
selector | app-dashboard |
styleUrls | dashboard.component.scss |
templateUrl | ./dashboard.component.html |
Properties |
|
Methods |
|
constructor(loggingService: KiewitLoggingService, kiewitAuthentication: KiewitAuthenticationService, http: Http)
|
||||||||||||||||
Parameters :
|
AddCardClicked |
AddCardClicked()
|
Returns :
void
|
CardClicked | ||||||||
CardClicked(event: any)
|
||||||||
Parameters :
Returns :
void
|
CardElipsisOptionClick | ||||||||
CardElipsisOptionClick(item: any)
|
||||||||
Parameters :
Returns :
void
|
CardHeaderMenuIconClicked | ||||||||
CardHeaderMenuIconClicked(iconName: string)
|
||||||||
Parameters :
Returns :
void
|
columnChooserClick |
columnChooserClick()
|
Returns :
void
|
columnchooserCloseClicked |
columnchooserCloseClicked()
|
Returns :
void
|
columnchooserSaveClicked | ||||||||
columnchooserSaveClicked(e: any)
|
||||||||
Parameters :
Returns :
void
|
confirmationCloseClicked |
confirmationCloseClicked()
|
Returns :
void
|
confirmationNoClicked |
confirmationNoClicked()
|
Returns :
void
|
confirmationYesClicked |
confirmationYesClicked()
|
Returns :
void
|
getDistricts |
getDistricts()
|
Returns :
void
|
GetUser |
getUser()
|
Returns :
void
|
kiewitDropdownOnValueChanged |
kiewitDropdownOnValueChanged()
|
Returns :
void
|
kiewitTabStripClicked | ||||||||
kiewitTabStripClicked(tabData: )
|
||||||||
Parameters :
Returns :
void
|
logDebug |
logDebug()
|
Returns :
void
|
logError |
logError()
|
Returns :
void
|
logInfo |
logInfo()
|
Returns :
void
|
logTrace |
logTrace()
|
Returns :
void
|
logWarn |
logWarn()
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Returns :
void
|
openConfirmationClick |
openConfirmationClick()
|
Returns :
void
|
Private availablecolumnsconfig |
availablecolumnsconfig:
|
Type : any
|
columnchooserConfig |
columnchooserConfig:
|
confirmationConfig |
confirmationConfig:
|
Public data |
data:
|
Type : any[]
|
Public defaultItem |
defaultItem:
|
Type : literal type
|
Private filterable |
filterable:
|
Type : boolean
|
Default value : true
|
Public gridData |
gridData:
|
Type : any[]
|
Public gridData2 |
gridData2:
|
Type : any[]
|
Public header |
header:
|
Type : any
|
Public kiewitCardData |
kiewitCardData:
|
Type : KiewitCard[]
|
Public kiewitCardElipsisOptions |
kiewitCardElipsisOptions:
|
Type : OptionsMenuItem[]
|
Public kiewitCardHeaderMenu |
kiewitCardHeaderMenu:
|
Type : HeaderMenuItem[]
|
Public kiewitCardHighlighters |
kiewitCardHighlighters:
|
Type : Highlighter[]
|
Public kiewitDropdownConfig |
kiewitDropdownConfig:
|
kiewitNumericTextboxConfig |
kiewitNumericTextboxConfig:
|
kiewitNumericTextboxValue |
kiewitNumericTextboxValue:
|
Default value : 25
|
Public listItems |
listItems:
|
Type : Array<literal type>
|
myadal |
myadal:
|
Private opprotunitiesConfig |
opprotunitiesConfig:
|
Type : any
|
padding |
padding:
|
Type : number
|
Default value : 2
|
Private pageable |
pageable:
|
Type : boolean
|
Default value : true
|
Public pageSize |
pageSize:
|
Type : number
|
Default value : 10
|
Private selectablecolumnsconfig |
selectablecolumnsconfig:
|
Type : any
|
Public skip |
skip:
|
Type : number
|
Default value : 0
|
Public sort |
sort:
|
Type : Array<SortDescriptor>
|
Private sortable |
sortable:
|
Type : boolean
|
Default value : true
|
Public tabstripConfig |
tabstripConfig:
|
Type : any
|
Public value |
value:
|
Public view |
view:
|
Type : Observable<GridDataResult>
|
import { Component, OnInit } from '@angular/core';
import { Http, RequestOptions, Headers } from '@angular/http';
import { environment } from '../../../environments/environment';
//import { HttpClient, RequestOptions, Headers } from '@angular/common/http';
import { KiewitCard, OptionsMenuItem, HeaderMenuItem, Highlighter } from '../../../lib/kiewit-card';
import { KiewitLoggingService } from '../../../lib/kiewit-logging/kiewit-logging.service';
import { IKiewitDropdown } from '../../../lib/kiewit-dropdown';
import { IKiewitNumericTextbox } from '../../../lib/kiewit-numerictextbox';
import { Observable } from 'rxjs/Rx';
import { KiewitAuthenticationService } from '../../../lib/kiewit-authentication/kiewit-authentication.service';
import {
GridComponent,
GridDataResult
//DataStateChangeEvent
} from '@progress/kendo-angular-grid';
import { SortDescriptor } from '@progress/kendo-data-query';
//import { KiewitAuthenticationService } from '../../../kiewit-authentication/kiewit-authentication.service';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss'],
providers: [KiewitLoggingService, KiewitAuthenticationService]
})
export class DashboardComponent implements OnInit {
private availablecolumnsconfig: any;
private selectablecolumnsconfig: any;
constructor(private loggingService: KiewitLoggingService, private kiewitAuthentication: KiewitAuthenticationService, private http: Http) {
}
private opprotunitiesConfig: any;
ngOnInit() {
//this.opprotunitiesConfig = {
// availableColumns: [{ "title": "Tag 3" }, { "title": "ORS Area" }, { "title": "Opt EOJ Gain" }, { "title": "Pess EOJ Gain" }],
// selectedColumns: [{ "title": "Win" }, {"title": "Burn Off" }, {"title": "Opportunity Name" }, {"title": "Opportunity ID" }, {"title": "Tag 1" }, {"title": "Tag 2" }],
// isOpened: false
//}
}
myadal = {
tenant: 'GEORGE',
clientId: 'c87f021f-b17e-454d-8303-0c2c07dfaf78'
};
public kiewitCardHeaderMenu: HeaderMenuItem[];
//= [{
// HeaderMenuIcon: "fa fa-files-o",
// HeaderMenuToolTip: "copy",
// HeaderMenuIconHidden: false,
// HeaderMenuIconDisabled: false,
//}
// //{
// // "HeaderMenuIcon": "icon-send",
// // "HeaderMenuToolTip": "email",
// // "HeaderMenuIconHidden": false,
// // "HeaderMenuIconDisabled": true
// //},
// //{
// // "HeaderMenuIcon": "icon-send",
// // "HeaderMenuToolTip": "email",
// // "HeaderMenuIconHidden": false,
// // "HeaderMenuIconDisabled": false
// //}
//];
public kiewitCardElipsisOptions: OptionsMenuItem[] = [{
OptionsMenuItemIconToolTip: "",
OptionsMenuItemIcon: "icon-print",
OptionsMenuItemIconHidden: false,
OptionsMenuItemIconDisabled: false,
OptionsMenuItemIconTitle: "item1"
},
{
OptionsMenuItemIconToolTip: "",
OptionsMenuItemIcon: "icon-delete",
//OptionsMenuItemIconHidden: false,
//OptionsMenuItemIconDisabled: false,
OptionsMenuItemIconTitle: "item1"
},
{
OptionsMenuItemIconToolTip: "",
OptionsMenuItemIcon: "icon-pass",
//OptionsMenuItemIconHidden: false,
//OptionsMenuItemIconDisabled: false,
OptionsMenuItemIconTitle: "item1"
},
{
OptionsMenuItemIconToolTip: "",
OptionsMenuItemIcon: "icon-remove",
//OptionsMenuItemIconHidden: false,
//OptionsMenuItemIconDisabled: false,
OptionsMenuItemIconTitle: "item1"
}
];
public kiewitCardHighlighters: Highlighter[] = [{
Highlighter: "22m",
//HighlighterFont: "Roboto",
//HighlighterFontSize: "28px",
HighlighterDescription: "Net Gain",
//HighlighterDescriptionFont: "Roboto",
//HighlighterDescriptionFontSize: "12px"
},
//{
// "Highlighter": "50m",
// "HighlighterFont": "Roboto",
// "HighlighterFontSize": "28px",
// "HighlighterDescription": "Revenue",
// "HighlighterDescriptionFont": "Roboto",
// "HighlighterDescriptionFontSize": "12px"
// }
];
public kiewitCardData: KiewitCard[] = [{
CardId: 1,
HeaderMenuItems: this.kiewitCardHeaderMenu,
Title: "Project1Project1Project1Project1Project1Project1Project1",
TagIsOfficialPlan: true,
TitleDescription1: "Last Saved 06/05/2017",
Highlighters: this.kiewitCardHighlighters,
OptionsMenuItems: this.kiewitCardElipsisOptions
},
{
CardId: 2,
HeaderMenuItems: this.kiewitCardHeaderMenu,
Title: "Project1Project1",
TagIsOfficialPlan: true,
TitleDescription1: "Last Saved 06/05/2017",
Highlighters: this.kiewitCardHighlighters,
OptionsMenuItems: this.kiewitCardElipsisOptions
},
{
CardId: 2,
HeaderMenuItems: this.kiewitCardHeaderMenu,
Title: "Project1Project1",
TagIsOfficialPlan: true,
TitleDescription1: "Last Saved 06/05/2017",
Highlighters: this.kiewitCardHighlighters,
OptionsMenuItems: this.kiewitCardElipsisOptions
},
{
CardId: 2,
HeaderMenuItems: this.kiewitCardHeaderMenu,
Title: "Project1Project1",
TagIsOfficialPlan: true,
TitleDescription1: "Last Saved 06/05/2017",
Highlighters: this.kiewitCardHighlighters,
OptionsMenuItems: this.kiewitCardElipsisOptions
}];
public defaultItem: { text: string, value: number } = { text: "Select item...", value: null };
public listItems: Array<{ text: string, value: number }> = [
{ text: "Small", value: 1 },
{ text: "Medium", value: 2 },
{ text: "Large", value: 3 }
];
public value = { text: "Medium", value: 2 };
public kiewitDropdownConfig = {
data: [
{ text: "Small", value: 1 },
{ text: "Medium", value: 2 },
{ text: "Large", value: 3 }
],
textField: "text",
valueField: "value",
//defaultItem: this.defaultItem,
disabled: true
};
//---------grid starts-------------------//
private pageable: boolean = true;
private sortable: boolean = true;
private filterable: boolean = true;
public view: Observable<GridDataResult>;
public sort: Array<SortDescriptor> = [];
public pageSize: number = 10;
public skip: number = 0;
public header: any = {
"isExpandRowVisible": false,
"HiddenHeaderRow": [
[{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "<input type='text' class='percentage' decimal-places='3' name='name' value='20%' style='margin-left: 18px;'>"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL2"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "Col33"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL4"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL5"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL6"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL7"
}],
[{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": `<span class='up-arrow'></span>
<div class='expandline' style='height: 56px;margin-top: -52px;'> </div>
<input type='text' class='percentage' decimal-places='3' name='name' value='20%' style='margin-left: 18px;'>`
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL2"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "Col33"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL4"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL5"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL6"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL7"
}]
]
};
public gridData: any[] = [{
"ProductID": 3,
"ProductName": "Aniseed Syrup",
"SupplierID": 1,
"CategoryID": 2,
"QuantityPerUnit": "12 - 550 ml bottles",
"UnitPrice": 10.0000,
"UnitsInStock": 13,
"UnitsOnOrder": 70,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"isExpandRowVisible": true,
"HiddenRow": [[
{
"colSpan": 1,
"class": "expandRowCell",
"rightMarginWidth": 1,
"data": "COL1"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL2"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "<input type='text' class='percentage' decimal-places='3' name='name' value='20%' style='margin-left: 18px;'>"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL4"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL5"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL6"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL7"
}
],
[
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL1"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL2"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": `<span class='up-arrow'></span>
<div class='expandline' style='height: 50px;margin-top: -45px;'> </div>
<input type='text' class='percentage' decimal-places='3' name='name' value='20%' style='margin-left: 18px;'>`
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL4"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL5"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL6"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL7"
}
]
]
},
{
"ProductID": 3,
"ProductName": "Aniseed Syrup",
"SupplierID": 1,
"CategoryID": 2,
"QuantityPerUnit": "12 - 550 ml bottles",
"UnitPrice": 10.0000,
"UnitsInStock": 13,
"UnitsOnOrder": 70,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"isExpandRowVisible": false,
"HiddenRow": [[
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL1"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL2"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": `<span class='up-arrow'></span>
<div class='expandline' style='height: 25px;'> </div>
<input type='text' class='percentage' decimal-places='3' name='name' value='20%' style='margin-left: 18px;'>`
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL4"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL5"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL6"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL7"
}
]
]
},
{
"ProductID": 3,
"ProductName": "Aniseed Syrup",
"SupplierID": 1,
"CategoryID": 2,
"QuantityPerUnit": "12 - 550 ml bottles",
"UnitPrice": 10.0000,
"UnitsInStock": 13,
"UnitsOnOrder": 70,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"isExpandRowVisible": false,
"HiddenRow": [[
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL1"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": "COL2"
},
{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": `<span class='up-arrow'></span>
<div class='expandline' style='height: 25px;'> </div>
<input type='text' class='percentage' decimal-places='3' name='name' value='20%' style='margin-left: 18px;'>`
}
]
]
}
];
public gridData2: any[] = [{
"ProductID": 3,
"ProductName": "Aniseed Syrup",
"SupplierID": 1,
"CategoryID": 2,
"QuantityPerUnit": "12 - 550 ml bottles",
"UnitPrice": 10.0000,
"UnitsInStock": 13,
"UnitsOnOrder": 70,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"isExpandRowVisible": true,
"HiddenRow": [
[{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": ""
},
{
"colSpan": 6,
"class": "",
"rightMarginWidth": 0,
"data": `< span class='up-arrow' style="margin-top: 34px;" > </span><div class='expandline' style='height: 48px;margin-top:-11px;'> </div>
<table style="margin-left: 18px;">
<tr>
<td>test < /td>
< td > test < /td>
< td > test < /td>
< td > test < /td>
< /tr>
< tr >
<td>test < /td>
< td > test < /td>
< td > test < /td>
< td > test < /td>
< /tr>
< /table>`
}
],
]
},
{
"ProductID": 3,
"ProductName": "Aniseed Syrup",
"SupplierID": 1,
"CategoryID": 2,
"QuantityPerUnit": "12 - 550 ml bottles",
"UnitPrice": 10.0000,
"UnitsInStock": 13,
"UnitsOnOrder": 70,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"isExpandRowVisible": false,
"HiddenRow": [
[{
"colSpan": 1,
"class": "",
"rightMarginWidth": 1,
"data": ""
},
{
"colSpan": 6,
"class": "",
"rightMarginWidth": 0,
"data": `<span class='up-arrow' style="margin-top: 34px;"></span><div class='expandline' style='height: 48px;margin-top:-11px;'> </div>
<table style="margin-left: 18px;">
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>`
}
],
]
}
];
//---------grid ends-------------------//
logTrace() {
this.loggingService.Trace('BPT-App1', 'Test_Method', 'TRACE logging messsage.');
}
logDebug() {
this.loggingService.Debug('BPT-App2', 'Test_Method', 'DEBUG logging messsage.');
}
logWarn() {
this.loggingService.Warn('BPT-App3', 'Test_Method', 'WARN logging messsage.');
}
logInfo() {
this.loggingService.Info('BPT-App4', 'Test_Method', 'INFO logging messsage.');
}
logError() {
this.loggingService.Error('BPT-App5', 'Test_Method', 'ERROR logging messsage.');
}
kiewitDropdownOnValueChanged() {
alert("kiewitDropdownOnValueChanged");
}
AddCardClicked() {
alert("kiewitAddCardClicked");
}
CardClicked(event: any) {
alert("CardClicked");
console.log(event);
}
CardElipsisOptionClick(item: any) {
alert("CardElipsisOptionClicked" + item);
}
CardHeaderMenuIconClicked(iconName: string) {
alert("CardHeaderMenuIconClicked" + iconName);
}
confirmationConfig = {
isOpened: false,
title: "Titile goes here?",
yesCaption: "Yes-Caption",
noCaption: "No-Caption"
}
openConfirmationClick() {
this.confirmationConfig.isOpened = true;
}
columnchooserConfig = {
isOpened: false,
isIconsDisabled: false
}
confirmationCloseClicked() {
alert("confirmationCloseClicked");
}
confirmationYesClicked() {
alert("confirmationYesClicked");
}
confirmationNoClicked() {
alert("confirmationNoClicked");
}
padding: number = 2;
public data: any[] = [{
"Id": 1,
"Title": "Opportunities",
"SliderWidth": 180,
"SliderLeftMargin": 0,
"Selected": true
},
{
"Id": 2,
"Title": 'Pending/New Work "Plugs"',
"SliderWidth": 180,
"SliderLeftMargin": 180 * 1,
"Selected": false
},
{
"Id": 3,
"Title": "ORS Project tags & Financial Plans",
"SliderWidth": 180,
"SliderLeftMargin": 180 * 2,
"Selected": false
},
{
"Id": 4,
"Title": "ORS Off-JOb Financial Plans",
"SliderWidth": 180,
"SliderLeftMargin": 180 * 3,
"Selected": false
},
{
"Id": 5,
"Title": "Other Factors",
"SliderWidth": 180,
"SliderLeftMargin": 180 * 4,
"Selected": false
}
];
public tabstripConfig: any = {
"data": this.data
};
kiewitTabStripClicked(tabData) {
//alert(tabData.Title);
}
getDistricts() {
let oauthToken = this.kiewitAuthentication.getToken();
console.log(this.kiewitAuthentication.getUser());
let myHeaders = new Headers();
// myHeaders.append('Authorization', `Bearer ${oauthToken}`);
let options = new RequestOptions({ headers: myHeaders });
this.http.get(environment.kcsServiceUrl + 'Districts?$orderby=DISTRICT_DS', options).subscribe(data => {
console.log(data);
});
}
GetUser() {
let oauthToken = this.kiewitAuthentication.getToken();
let myHeaders = new Headers();
myHeaders.append('Authorization', 'Bearer ${oauthToken}');
let options = new RequestOptions({ headers: myHeaders });
this.http.get('https://login.microsoftonline.com/common/oauth2/authorize?client_id=' + environment.clientId + '&resource=https://graph.microsoft.com&response_type=token&redirect_uri=' + window.location.origin + '&scope=User.ReadBasic.All', options).subscribe(data => {
console.log(data);
});
}
kiewitNumericTextboxConfig = {
spinners: false,
decimals: 4,
format: "#.## \\%",
value: 20
}
kiewitNumericTextboxValue = 25;
columnchooserCloseClicked() {
}
columnChooserClick() {
this.opprotunitiesConfig = {
availableColumns: [{ "title": "Tag 3" }, { "title": "ORS Area" }, { "title": "Opt EOJ Gain" }, { "title": "Pess EOJ Gain" }],
selectedColumns: [{ "title": "Win" }, { "title": "Burn Off" }, { "title": "Opportunity Name" }, { "title": "Opportunity ID" }, { "title": "Tag 1" }, { "title": "Tag 2" }],
isOpened: true
}
}
columnchooserSaveClicked(e:any) {
}
}
<div class="kcs-dashboard">
<div class="kcs-dashboard-header">
<kiewit-tabstrip [config]="tabstripConfig" (kcsTabStripClick)="kiewitTabStripClicked($event)"></kiewit-tabstrip></div>
<div class="kcs-dashboard-content">
<h2>Welcome!</h2>
<h4> UI Documentation</h4>
<!--<div>
<a href="~/documentation/index.html" target="_blank">Kiewit Central UI Documentation</a>
</div>-->
<h4>Cards Control</h4>
<div class="kiewit-card-controls">
<kiewit-card [cardList]="kiewitCardData" (kcsAddCardClick)="AddCardClicked()" (kcsCardClick)="CardClicked($event)" (kcsElipsisOptionClick)="CardElipsisOptionClick($event)" (kcsCardHeaderMenuIconClick)="CardHeaderMenuIconClicked($event)"></kiewit-card>
</div>
<h4>Numeric Textbox Control</h4>
<kiewit-numerictextbox [config]="kiewitNumericTextboxConfig"
[(kcsNgModel)]="kiewitNumericTextboxValue" width="10px"></kiewit-numerictextbox>
<kiewit-numerictextbox-grid [config]="kiewitNumericTextboxConfig"></kiewit-numerictextbox-grid>
<input type="text" [(ngModel)]="kiewitNumericTextboxValue" />
<h4>Dropdown Control</h4>
<kiewit-dropdown [config]="kiewitDropdownConfig"
(kcsValueChange)="kiewitDropdownOnValueChanged()"
[(kcsNgModel)]="value"></kiewit-dropdown>
<!--<kendo-dropdownlist id="ddlDistrict" [data]="districtItems"
[textField]="'DISTRICT_DS'"
[valueField]="'DISTRICT_ID'"
(valueChange)="onDistrictChange($event)"
[(ngModel)]="selectedDistrictValue"
[defaultItem]="defaultItemDistrict"
class="district-dropdown">
<ng-template kendoDropDownListItemTemplate let-dataItem>
<span title="{{ dataItem.DISTRICT_DS }}">{{ dataItem.DISTRICT_DS }}</span>
</ng-template>
</kendo-dropdownlist>-->
<h4>Column Chooser</h4>
<kiewit-columnchooser [config]="opprotunitiesConfig"
(kcsColumnChooserClick)="columnChooserClick()"
(kcsColumnChooserClose)="columnchooserCloseClicked()"
(kcsColumnChooserSaveClick)="columnchooserSaveClicked($event)">
</kiewit-columnchooser>
<h4>Get User Info</h4>
<kiewit-button value="Get user info" (click)="getUser()"></kiewit-button>
<h4>Get Districts Info</h4>
<kiewit-button value="Get districts from secured service" (click)="getDistricts()"></kiewit-button>
<br/>
<h4>Logging test</h4>
<div>
<input type="button" value="Log Trace" (click)="logTrace()" />
<input type="button" value="Log Debug" (click)="logDebug()" />
<input type="button" value="Log Warn" (click)="logWarn()" />
<input type="button" value="Log Error" (click)="logError()" />
<input type="button" value="Log Info" (click)="logInfo()" />
</div>
<h4>Confirmation Box</h4>
<input type="button" value="Open Confirmation" (click)="openConfirmationClick()" />
<kiewit-confirmation [config]="confirmationConfig"
(kcsClose)="confirmationCloseClicked()"
(kcsYes)="confirmationYesClicked()"
(kcsNo)="confirmationNoClicked()">
</kiewit-confirmation>
<br />
<br />
<h4>Grid Control with Column Chooser</h4>
<div>
<kiewit-columnchooser [config]="columnchooserConfig" (kcsColumnChooserClick)="columnChooserClick()"></kiewit-columnchooser>
<kendo-grid id="demoGrid" [data]="gridData"
[pageSize]="pageSize"
[skip]="skip"
[sortable]="true"
[sort]="sort"
[pageable]="true">
<!--(dataStateChange)="dataStateChange($event)"-->
<kendo-grid-column field="ProductID" title="ID">
<ng-template kendoGridHeaderTemplate>
<span style="line-height: 34px;"> Discontinued </span> <i class="kiewit-icon icon-filter-column pull-right k-kcs-filter-color"></i>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="ProductName" title="Name">
<ng-template kendoGridHeaderTemplate>
<span style="line-height: 34px;"> Project Name </span> <i class="kiewit-icon icon-filter-column pull-right k-kcs-filter-color"></i>
<ng-template kendoGridFilterCellTemplate>
<span class="icon-filter-column"></span>
</ng-template>
</ng-template>
</kendo-grid-column>
<!--expand grid column start-->
<kendo-grid-column title="Burn Off">
<ng-template kendoGridCellTemplate let-dataItem>
<kiewit-grid-row-action [dataitem]="dataItem"></kiewit-grid-row-action>
</ng-template>
</kendo-grid-column>
<!--expand grid column end-->
<kendo-grid-column field="Category.CategoryName" title="Category">
<ng-template kendoGridHeaderTemplate>
<span style="line-height: 34px;"> Category Name </span> <i class="kiewit-icon icon-filter-column pull-right k-kcs-filter-color"></i>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Price">
<ng-template kendoGridHeaderTemplate>
<span style="line-height: 34px;"> Unit Price </span> <i class="kiewit-icon icon-filter-column pull-right k-kcs-filter-color"></i>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="UnitsInStock" title="In stock">
<ng-template kendoGridHeaderTemplate>
<span style="line-height: 34px;"> Units In Stock </span> <i class="kiewit-icon icon-filter-column pull-right k-kcs-filter-color"></i>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="Discontinued" title="Discontinued">
<ng-template kendoGridHeaderTemplate>
<span style="line-height: 34px;"> Discontinued </span> <i class="kiewit-icon icon-filter-column pull-right k-kcs-filter-color"></i>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem>
<input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
</ng-template>
</kendo-grid-column>
<!--<kiewit-grid [gridData]="gridData"></kiewit-grid>-->
</kendo-grid>
</div>
<kendo-grid id="demoGrid1" [data]="gridData2"
[pageSize]="pageSize"
[skip]="skip"
[sortable]="true"
[sort]="sort"
[pageable]="true">
<!--(dataStateChange)="dataStateChange($event)">-->
<kendo-grid-column field="ProductID" title="ID">
<ng-template kendoGridHeaderTemplate>
<kiewit-grid-row-action [dataitem]="header"></kiewit-grid-row-action> <span style="line-height:34px;"> Discontinued </span> <i class="kiewit-icon icon-filter-column pull-right k-kcs-filter-color"></i>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="ProductName" title="Name">
<ng-template kendoGridHeaderTemplate>
<span style="line-height:34px;"> Project Name </span> <i class="kiewit-icon icon-filter-column pull-right k-kcs-filter-color"></i>
<ng-template kendoGridFilterCellTemplate>
<span class="icon-filter-column"></span>
</ng-template>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem>
<kiewit-grid-row-action [dataitem]="dataItem"></kiewit-grid-row-action><span style='margin-left: 18px;'>{{dataItem.ProductName}}</span>
</ng-template>
</kendo-grid-column>
<!--expand grid column start-->
<kendo-grid-column title="Burn Off">
</kendo-grid-column>
<!--expand grid column end-->
<kendo-grid-column field="Category.CategoryName" title="Category">
<ng-template kendoGridHeaderTemplate>
<span style="line-height:34px;"> Category Name </span> <i class="kiewit-icon icon-filter-column pull-right k-kcs-filter-color"></i>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Price">
<ng-template kendoGridHeaderTemplate>
<span style="line-height:34px;"> Unit Price </span> <i class="kiewit-icon icon-filter-column pull-right k-kcs-filter-color"></i>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="UnitsInStock" title="In stock">
<ng-template kendoGridHeaderTemplate>
<span style="line-height:34px;"> Units In Stock </span> <i class="kiewit-icon icon-filter-column pull-right k-kcs-filter-color"></i>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="Discontinued" title="Discontinued">
<ng-template kendoGridHeaderTemplate>
<span style="line-height:34px;"> Discontinued </span> <i class="kiewit-icon icon-filter-column pull-right k-kcs-filter-color"></i>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem>
<input type="checkbox" [checked]="dataItem.Discontinued" disabled />
</ng-template>
</kendo-grid-column>
<!--<kiewit-grid [gridData]="gridData"></kiewit-grid>-->
</kendo-grid>
<!--<kiewit-authentication [config]="myadal"></kiewit-authentication>-->
</div>
</div>