import { WorkItemField } from 'TFS/WorkItemTracking/Contracts' ; import { ConfigurationContext } from 'VSS/Common/Contracts/Platform' ; import { Widget } from '../widget/Widget' ; import { AnalyticsWidgetSettings , WidgetSettings } from '../common/WidgetSettings' ; import { AggregationMode , Aggregation , AggregationConfigurationState } from '../Common/AggregationContracts' ; import * as Q from 'q' ; import * as React from 'react' ; import { Props , State , ComponentBase , ActionsBase , ActionCreator } from "../components/FluxTypes" ; import { Project , Team , WorkItemTypeField } from "../data/AnalyticsTypes" ; import { Store } from "VSS/Flux/Store" ; import { Picker , PickerProps } from "../components/PickerComponent" ; import { FieldFilterComponent } from "../components/FieldFilterComponent" ; import { AnalyticsConfigState , ConfigOptions , QueryConfigProps } from "./AnalyticsConfigInterfaces" ; import { AnalyticsConfigActionCreator } from "./AnalyticsConfigActionCreator" ; import { FieldFilterConfigurationState , FieldFilterRowSettings } from "../common/FieldFilterContracts" ; export class AnalyticsConfigComponent extends ComponentBase < QueryConfigProps , AnalyticsConfigState > { protected actionCreator : AnalyticsConfigActionCreator ; public render ( ) { return < div className = "bowtie widget-config-component" > < div className = "project-team-selector" > < label > Team < /label> { this . createProjectPicker ( ) } { this . createTeamPicker ( ) } < /div> < div > < label > Work Items < /label> { this . createTypesPicker ( ) } < /div> < div > < label > Filters < /label> { this . createFieldsPicker ( ) } < /div> { this . createAggregationPicker ( ) } < /div>; } private createAggregationPicker ( ) { let content = [ ] ; let state = this . getStoreState ( ) ; content . push ( < label > Aggregate on < /label>); content . push ( this . createAggregationModePicker ( ) ) ; if ( state . configuration && state . configuration . aggregation && state . configuration . aggregation . aggregationMode == AggregationMode . sum ) { content . push ( < span className = "sum-conjunction" > of < /span>); content . push ( this . createAggregationSumValuePicker ( ) ) ; } return < div > { content } < /div>; } private createAggregationModePicker ( ) { let initialAggregationSelection ; let aggregationValues = [ ] ; if ( this . getStoreState ( ) . configOptions && this . getStoreState ( ) . configOptions . aggregation ) { aggregationValues = this . getStoreState ( ) . configOptions . aggregation . aggregationModes ; if ( this . getStoreState ( ) . configuration && this . getStoreState ( ) . configuration . aggregation ) { initialAggregationSelection = this . getStoreState ( ) . configuration . aggregation . aggregationMode . toString ( ) ; } } return < Picker className = "aggregation-picker" itemValues = { aggregationValues } initialSelectionId = { initialAggregationSelection } getItemId = { ( item ) => item . toString ( ) } getItemText = { ( item ) => item . toString ( ) } onChange = { ( item ) => { this . actionCreator . setSelectedAggregationMode ( item ) ; } } > < /Picker>; } private createAggregationSumValuePicker ( ) { let initialSumSelection ; let sumValues = [ ] ; if ( this . getStoreState ( ) . configOptions && this . getStoreState ( ) . configOptions . fields ) { if ( ! this . getStoreState ( ) . configuration . aggregation || this . getStoreState ( ) . configuration . aggregation . aggregationMode == AggregationMode . count ) { return ; } sumValues = this . getStoreState ( ) . configOptions . aggregation . allowedFields ; initialSumSelection = this . getStoreState ( ) . configuration . aggregation . fieldReferenceName ; } else { return ; } return < Picker className = "sum-field-picker" itemValues = { sumValues } initialSelectionId = { initialSumSelection } getItemId = { ( item ) => item . fieldReferenceName } getItemText = { ( item ) => item . displayName } onChange = { ( item ) => { this . actionCreator . setSelectedAggregationValue ( item ) ; } } > < /Picker>; } private createProjectPicker ( ) { let itemValues = [ ] ; let initialSelectionId = null ; if ( this . getStoreState ( ) . configOptions && this . getStoreState ( ) . configOptions . projects ) { itemValues = this . getStoreState ( ) . configOptions . projects ; initialSelectionId = this . getStoreState ( ) . configuration . projectId ; } return < Picker className = "project-picker" itemValues = { itemValues } initialSelectionId = { initialSelectionId } getItemId = { ( item ) => item . ProjectId } getItemText = { ( item ) => item . ProjectName } onChange = { ( item ) => { this . actionCreator . setSelectedProject ( item . ProjectId ) ; } } > < /Picker>; } private createTeamPicker ( ) { let itemValues = [ ] ; let initialSelectionId = null ; if ( this . getStoreState ( ) . configOptions && this . getStoreState ( ) . configOptions . teams ) { itemValues = this . getStoreState ( ) . configOptions . teams ; initialSelectionId = this . getStoreState ( ) . configuration . teamId ; } return < Picker className = "team-picker" itemValues = { itemValues } initialSelectionId = { initialSelectionId } getItemId = { ( item ) => item . TeamId } getItemText = { ( item ) => item . TeamName } onChange = { ( item ) => { this . actionCreator . setSelectedTeam ( item . TeamId ) ; } } > < /Picker>; } private createTypesPicker ( ) { let itemValues = [ ] ; let initialSelectionId = null ; if ( this . getStoreState ( ) . configOptions && this . getStoreState ( ) . configOptions . types ) { itemValues = this . getStoreState ( ) . configOptions . types ; initialSelectionId = this . getStoreState ( ) . configuration . workItemType ; } return < Picker className = "type-picker" itemValues = { itemValues } initialSelectionId = { initialSelectionId } getItemId = { ( typeName ) => typeName } getItemText = { ( typeName ) => typeName } onChange = { ( typeName ) => { this . actionCreator . setSelectedWorkItemType ( typeName ) ; } } > < /Picker>; } private createFieldsPicker ( ) { let filter = { } as FieldFilterConfigurationState ; let actOnChanges = false ; if ( this . getStoreState ( ) . configOptions && this . getStoreState ( ) . configOptions . fieldFilter ) { filter = this . getStoreState ( ) . configOptions . fieldFilter ; actOnChanges = true ; return < FieldFilterComponent { ... filter } > < /FieldFilterComponent>; } return ; } protected createActionCreator ( ) { return new AnalyticsConfigActionCreator ( this . actions , this . props . initialConfiguration , this . props . onChange ) ; } }