import { DatePicker , DefaultButton , Dialog , DialogFooter , Dropdown , IDropdownOption , IDropdownStyles , IStackTokens , ITag , ITextFieldStyles , mergeStyleSets , PrimaryButton , Stack , TextField } from "office-ui-fabric-react" ; import React , { useEffect , useState } from "react" ; import { IColumnConfig } from "../types/columnconfigtype" ; import { EditControlType } from "../types/editcontroltype" ; import { DayPickerStrings } from "./datepickerconfig" ; import { GetDefault , IsValidDataType , ParseType } from "./helper" ; import PickerControl from "./pickercontrol/picker" ; interface Props { columnConfigurationData : IColumnConfig [ ] ; onDialogCancel ? : any ; onDialogSave ? : any ; } const ColumnUpdateDialog = ( props ) => { const controlClass = mergeStyleSets ( { inputClass : { display : 'block' , width : '100%' } , dialogClass : { padding : 20 } } ) ; const textFieldStyles = { fieldGroup : { } } ; const [ gridColumn , setGridColumn ] = useState ( '' ) ; const [ inputValue , setInputValue ] = useState < any > ( null ) ; const stackTokens = { childrenGap : 10 } ; const dropdownStyles = { dropdown : { width : '100%' } , } ; useEffect ( ( ) => { let tmpColumnValuesObj = { } ; props . columnConfigurationData . filter ( x => x . editable == true ) . forEach ( ( item , index ) => { tmpColumnValuesObj [ item . key ] = { 'value' : GetDefault ( item . dataType ) , 'isChanged' : false , 'error' : null } ; } ) ; setInputValue ( tmpColumnValuesObj ) ; } , [ props . columnConfigurationData ] ) ; const SetObjValues = ( key , value , isChanged = true , errorMessage = null ) : void => { var inputValueTmp = { ... inputValue } ; var objectKeys = Object . keys ( inputValueTmp ) ; objectKeys . forEach ( ( objKey ) => { inputValueTmp [ objKey ] [ 'isChanged' ] = false ; } ) ; inputValueTmp [ key ] = { 'value' : value , 'isChanged' : isChanged , 'error' : errorMessage } ; setInputValue ( inputValueTmp ) ; } ; const onTextUpdate = ( ev , text , column ) : void => { if ( ! IsValidDataType ( column ?. dataType , text ) ) { SetObjValues ( ( ev . target as Element ) . id , text , false , `Data should be of type '${ column . dataType }'` ) ; return ; } SetObjValues ( ( ev . target as Element ) . id , ParseType ( column . dataType , text ) ) ; } ; const [ inputFieldContent , setInputFieldContent ] = React . useState < JSX . Element | undefined > ( < > < />); const onSelectDate = ( date , item ) : void => { SetObjValues ( item . key , date ) ; } ; const onCellPickerTagListChanged = ( cellPickerTagList , item ) : void => { if ( cellPickerTagList && cellPickerTagList [ 0 ] && cellPickerTagList [ 0 ] . name ) SetObjValues ( item . key , cellPickerTagList [ 0 ] . name ) ; else SetObjValues ( item . key , '' ) ; } ; const onDropDownChange = ( event , selectedDropdownItem , item ) : void => { SetObjValues ( item . key , selectedDropdownItem ?. text ) ; } ; const onSelectGridColumn = ( event , item ) : void => { setGridColumn ( item ! . key . toString ( ) ) ; } ; const closeDialog = React . useCallback ( ( ) : void => { if ( props . onDialogCancel ) { props . onDialogCancel ( ) ; } setInputFieldContent ( undefined ) ; } , [ ] ) ; const saveDialog = ( ) : void => { if ( props . onDialogSave ) { var inputValueTmp = { } ; var objectKeys = Object . keys ( inputValue ) ; var BreakException = { } ; try { objectKeys . forEach ( ( objKey ) => { if ( inputValue [ objKey ] [ 'isChanged' ] ) { inputValueTmp [ objKey ] = inputValue [ objKey ] [ 'value' ] ; throw BreakException ; } } ) ; } catch ( e ) { } props . onDialogSave ( inputValueTmp ) ; } setInputFieldContent ( undefined ) ; } ; const createDropDownOptions = ( ) : IDropdownOption [ ] => { let dropdownOptions = [ ] ; props . columnConfigurationData . forEach ( ( item , index ) => { if ( item . editable == true ) { dropdownOptions . push ( { key : item . key , text : item . text } ) ; } } ) ; return dropdownOptions ; } ; const options = createDropDownOptions ( ) ; const GetInputFieldContent = ( ) : JSX . Element => { var column = props . columnConfigurationData . filter ( x => x . key == gridColumn ) ; if ( column . length > 0 ) { switch ( column [ 0 ] . inputType ) { case EditControlType . Date : return ( < DatePicker strings = { DayPickerStrings } placeholder = "Select a date..." ariaLabel = "Select a date" className = { controlClass . inputClass } onSelectDate = { ( date ) => onSelectDate ( date , column [ 0 ] ) } />); case EditControlType . Picker : return ( < div > < PickerControl arialabel = { column [ 0 ] . text } selectedItemsLimit = { 1 } pickerTags = { column [ 0 ] . pickerOptions ?. pickerTags ?? [ ] } minCharLimitForSuggestions = { 2 } onTaglistChanged = { ( selectedItem ) => onCellPickerTagListChanged ( selectedItem , column [ 0 ] ) } pickerDescriptionOptions = { column [ 0 ] . pickerOptions ?. pickerDescriptionOptions } / > < /div>); case EditControlType . DropDown : return ( < Dropdown label = { column [ 0 ] . text } options = { column [ 0 ] . dropdownValues ?? [ ] } onChange = { ( ev , selected ) => onDropDownChange ( ev , selected , column [ 0 ] ) } />); case EditControlType . MultilineTextField : return ( < TextField errorMessage = { inputValue [ column [ 0 ] . key ] . error } className = { controlClass . inputClass } multiline = { true } rows = { 1 } placeholder = { `Enter '${ column [ 0 ] . text }'...` } id = { column [ 0 ] . key } styles = { textFieldStyles } onChange = { ( ev , text ) => onTextUpdate ( ev , text ! , column [ 0 ] ) } value = { inputValue [ column [ 0 ] . key ] . value || '' } / > ) ; default : return ( < TextField errorMessage = { inputValue [ column [ 0 ] . key ] . error } className = { controlClass . inputClass } placeholder = { `Enter '${ column [ 0 ] . text }'...` } onChange = { ( ev , text ) => onTextUpdate ( ev , text ! , column [ 0 ] ) } styles = { textFieldStyles } id = { column [ 0 ] . key } value = { inputValue [ column [ 0 ] . key ] . value || '' } / > ) ; } } return ( < > < />); } ; return ( < Dialog hidden = { ! inputFieldContent } onDismiss = { closeDialog } closeButtonAriaLabel = "Close" > < Stack grow verticalAlign = "space-between" tokens = { stackTokens } > < Stack . Item grow = { 1 } > < Dropdown placeholder = "Select the Column" options = { options } styles = { dropdownStyles } onChange = { onSelectGridColumn } / > < /Stack.Item> < Stack . Item grow = { 1 } > { GetInputFieldContent ( ) } < /Stack.Item> < Stack . Item > < DialogFooter className = { controlClass . inputClass } > < PrimaryButton onClick = { saveDialog } text = "Save" disabled = { ( gridColumn ) ? ( inputValue [ gridColumn ] . error != null && inputValue [ gridColumn ] . error . length > 0 ) : false } /> < DefaultButton onClick = { closeDialog } text = "Cancel" / > < /DialogFooter> < /Stack.Item> < /Stack> < /Dialog>); } ; export default ColumnUpdateDialog ;