import { DefaultButton , Dialog , DialogFooter , Dropdown , IDialogStyleProps , IDialogStyles , IDropdownOption , IDropdownStyles , IStackTokens , ITextFieldStyles , mergeStyleSets , PrimaryButton , Stack , TextField } from "office-ui-fabric-react" ; import React , { useEffect , useState } from "react" ; import { IColumnConfig } from "../../types/columnconfigtype" ; import { IFilter , IOperators , operatorsArr } from "../../types/filterstype" ; import { controlClass , dropdownStyles , modelProps , stackTokens , textFieldStyles } from "./columnfilterdialogStyles" ; interface Props { columnConfigurationData : IColumnConfig [ ] ; gridData : any [ ] ; onDialogCancel ? : any ; onDialogSave ? : any ; } const ColumnFilterDialog = ( props ) => { const [ gridColumn , setGridColumn ] = useState < IColumnConfig > ( ) ; const [ operator , setOperator ] = useState ( '' ) ; const [ value , setValue ] = useState ( '' ) ; const onSelectGridColumn = ( event , item , index ) : void => { setGridColumn ( props . columnConfigurationData . filter ( ( val ) => val . key == item ! . key ) [ 0 ] ) ; } ; const onSelectOperator = ( event , item , index ) : void => { setOperator ( item ! . text . toString ( ) ) ; } ; const onSelectValue = ( event , item , index ) : void => { setValue ( item ! . key . toString ( ) ) ; } ; const onTextUpdate = ( ev , text ) : void => { setValue ( text ) ; } ; useEffect ( ( ) => { if ( gridColumn && gridColumn . key && gridColumn . key . length > 0 ) { var column = props . columnConfigurationData . filter ( x => x . key == gridColumn ! . key ) ; if ( column . length > 0 ) { var valueOptions = createValueOptions ( column [ 0 ] ) ; switch ( column [ 0 ] . dataType ) { case 'number' : setInputFieldContent ( < TextField className = { controlClass . textFieldClass } placeholder = "Value" onChange = { ( ev , text ) => onTextUpdate ( ev , text ! ) } styles = { textFieldStyles } / > ) ; setOperatorDropDownContent ( < Dropdown placeholder = "Select the Column" options = { createCompareOptions ( ) } styles = { dropdownStyles } onChange = { onSelectOperator } / > ) ; break ; case 'string' : setInputFieldContent ( < TextField className = { controlClass . textFieldClass } placeholder = "Value" onChange = { ( ev , text ) => onTextUpdate ( ev , text ! ) } styles = { textFieldStyles } / > ) ; setOperatorDropDownContent ( < Dropdown placeholder = "Select the Column" options = { createCompareOptions ( ) } styles = { dropdownStyles } onChange = { onSelectOperator } / > ) ; break ; case 'date' : setInputFieldContent ( < Dropdown placeholder = "Select the Column" options = { valueOptions } styles = { dropdownStyles } onChange = { onSelectValue } / > ) ; setOperatorDropDownContent ( < Dropdown placeholder = "Select the Column" options = { createCompareOptions ( ) } styles = { dropdownStyles } onChange = { onSelectOperator } / > ) ; break ; } } } } , [ gridColumn ] ) ; const createDropDownOptions = ( ) : IDropdownOption [ ] => { let dropdownOptions = [ ] ; props . columnConfigurationData . forEach ( ( item , index ) => { dropdownOptions . push ( { key : item . key , text : item . text } ) ; } ) ; return dropdownOptions ; } ; const options = createDropDownOptions ( ) ; const createCompareOptions = ( ) : IDropdownOption [ ] => { if ( ! ( gridColumn && gridColumn . key && gridColumn . key . length > 0 ) ) { return [ ] ; } let dataType = props . columnConfigurationData . filter ( x => x . key == gridColumn . key ) [ 0 ] . dataType ; let dropdownOptions = [ ] ; let operatorsOptions = [ ] ; switch ( dataType ) { case 'string' : operatorsOptions = operatorsArr . filter ( ( item ) => item . type == 'string' ) [ 0 ] . value ; break ; case 'number' : operatorsOptions = operatorsArr . filter ( ( item ) => item . type == 'number' ) [ 0 ] . value ; break ; } operatorsOptions . forEach ( ( item , index ) => { dropdownOptions . push ( { key : item + index , text : item } ) ; } ) ; return dropdownOptions ; } ; const createValueOptions = ( column ) : IDropdownOption [ ] => { var columnData = props . gridData . map ( ( item ) => item [ column . key ] ) ; let dropdownOptions = [ ] ; columnData . forEach ( ( item , index ) => { dropdownOptions . push ( { key : item + index , text : item } ) ; } ) ; return dropdownOptions ; } ; const [ inputFieldContent , setInputFieldContent ] = React . useState < JSX . Element | undefined > ( < Dropdown placeholder = "Select the Column" options = { options } styles = { dropdownStyles } onChange = { onSelectValue } / > ) ; const [ operatorDropDownContent , setOperatorDropDownContent ] = React . useState < JSX . Element | undefined > ( < Dropdown placeholder = "Select the Column" options = { createCompareOptions ( ) } styles = { dropdownStyles } onChange = { onSelectValue } / > ) ; const closeDialog = React . useCallback ( ( ) : void => { if ( props . onDialogCancel ) { props . onDialogCancel ( ) ; } setInputFieldContent ( undefined ) ; } , [ ] ) ; const saveDialog = ( ) : void => { var filterObj = { column : gridColumn ! , operator : operator , value : value } ; if ( props . onDialogSave ) { props . onDialogSave ( filterObj ) ; } setInputFieldContent ( undefined ) ; } ; return ( < Dialog modalProps = { modelProps } hidden = { ! inputFieldContent } onDismiss = { closeDialog } closeButtonAriaLabel = "Close" > < Stack verticalAlign = "start" tokens = { stackTokens } > < Dropdown placeholder = "Select the Column" options = { options } styles = { dropdownStyles } onChange = { onSelectGridColumn } / > { operatorDropDownContent } { inputFieldContent } < /Stack> < DialogFooter > < PrimaryButton onClick = { saveDialog } text = "Save" / > < DefaultButton onClick = { closeDialog } text = "Cancel" / > < /DialogFooter> < /Dialog>); } ; export default ColumnFilterDialog ;