import * as React from 'react' ; import update from 'immutability-helper' ; import * as ca from "../../solutions/SharePointUtility" ; import { CommandButton , css , PrimaryButton } from 'office-ui-fabric-react' ; import styles from './MyTimeAwayContainer.module.scss' ; import { IMyTimeAwayContainerProps } from './IMyTimeAwayContainerProps' ; import IMyTimeAwayContainerState from './IMyTimeAwayContainerState' ; import MyTimeAwayTab from '../Tab/MyTimeAwayTab' ; import DeleteDialog from '../DeleteDialog/MyTimeAwayDeleteDialog' ; import TimeAwayCreateDialog from "../CreateDialog/TimeAwayCreateDialog" ; import { IMyTimeAwayItem , TimeAwayDialogType , TimePeriod } from "../../models/timeAwayModel" ; import { TimeAwayManager } from "../../index" ; export class MyTimeAwayContainer extends React . Component < IMyTimeAwayContainerProps , IMyTimeAwayContainerState > { private _selectMyTimeAwayItem : IMyTimeAwayItem ; constructor ( props ) { const utility = ca . SharePointUtilityModule . SharePointUtility ; super ( props ) ; this . state = { showDialogType : TimeAwayDialogType . Hidden , period : this . props . period , items : [ ] , isHaveAdminPermission : utility . checkCurrentUserIsAbleToManageList ( this . props . context . pageContext . web . permissions ) , submitting : false , isInitialized : this . props . isInitialized } ; } public componentWillReceiveProps ( props ) { this . setState ( { showDialogType : TimeAwayDialogType . Hidden } ) ; this . _getMyTimeAwayItems ( ) ; } public componentDidMount ( ) { this . _getMyTimeAwayItems ( ) ; } public render ( ) { let { isInitialized , isHaveAdminPermission , submitting } = this . state ; const classBoldWeightFont = css ( 'ms-fontSize-l' , 'ms-fontWeight-semibold' ) ; if ( isInitialized ) { return ( < div className = { styles . page } > < MyTimeAwayTab period = { this . state . period } items = { this . state . items } tabOperationClickCallback = { this . _tabOperationClickCallback . bind ( this ) } itemDeleteIconClickCallback = { this . _itemDeleteIconClickCallback . bind ( this ) } itemEditIconClickCallback = { this . _itemEditIconClickCallback . bind ( this ) } / > < CommandButton data - automation - id = 'AddMyTimeAway' iconProps = { { iconName : 'Add' } } className = { styles . addNewAction } text = { 'Add New Time Away' } onClick = { this . _addNewMyTimeAwayItemClick . bind ( this ) } / > < DeleteDialog showDialog = { this . state . showDialogType == TimeAwayDialogType . ConfirmDelete } itemDeleteConfirmOperationCallback = { this . _itemDeleteConfirmOperationCallback . bind ( this ) } / > < TimeAwayCreateDialog item = { this . _selectMyTimeAwayItem } isOpen = { this . state . showDialogType == TimeAwayDialogType . Create } itemSaveOperationCallback = { this . _itemSaveOperationCallback . bind ( this ) } itemValidOperationCallback = { this . _itemValidOperationCallback . bind ( this ) } / > < /div>); } else { return ( < div > { isHaveAdminPermission ? ( < div className = { styles . page } > < p className = { styles . error } > The Time Away list is not fully configured in this site . < /p> < PrimaryButton onClick = { this . _provisioningLists . bind ( this ) } text = 'Create Time Away list' disabled = { submitting } / > < /div>) : (<div className={styles.error}> < p > Time Away is not configured yet . < /p> < /div>)} < /div>); } } private _provisioningLists ( ) { var utility = ca . SharePointUtilityModule . SharePointUtility ; this . setState ( update ( this . state , { submitting : { $set : true } } ) ) ; TimeAwayManager . ensureSPListTimeAway ( this . props . context ) . then ( ( ) => { this . setState ( update ( this . state , { isInitialized : { $set : true } } ) ) ; } ) ; } private _itemEditIconClickCallback ( item ) { this . _selectMyTimeAwayItem = item ; this . setState ( { showDialogType : TimeAwayDialogType . Create } ) ; } private _itemDeleteIconClickCallback ( item ) { this . _selectMyTimeAwayItem = item ; this . setState ( { showDialogType : TimeAwayDialogType . ConfirmDelete } ) ; } private _addNewMyTimeAwayItemClick ( event ) { this . _selectMyTimeAwayItem = null ; this . setState ( { showDialogType : TimeAwayDialogType . Create } ) ; event . preventDefault ( ) ; } private _itemSaveOperationCallback ( item ) { if ( item . id != null && item . id > 0 ) { return this . props . dataProvider . updateMyTimeAwayItem ( item ) . then ( ( items ) => { this . _selectMyTimeAwayItem = item ; this . setState ( { items : items , showDialogType : TimeAwayDialogType . Hidden } ) ; return ; } ) ; } else { return this . props . dataProvider . createMyTimeAwayItem ( item ) . then ( ( items ) => { this . setState ( { items : items , showDialogType : TimeAwayDialogType . Hidden } ) ; return ; } ) ; } } private _itemValidOperationCallback ( item ) { return this . props . dataProvider . checkTimeSlot ( item ) . then ( ( isValid ) => { return Promise . resolve ( isValid ) ; } ) ; } private _itemDeleteConfirmOperationCallback ( event ) { return this . props . dataProvider . deleteMyTimeAwayItem ( this . _selectMyTimeAwayItem ) . then ( ( items ) => { this . setState ( { items : items , showDialogType : TimeAwayDialogType . Hidden } ) ; } ) ; } private _tabOperationClickCallback ( period ) { this . props . dataProvider . updatePeriod ( period ) ; this . props . dataProvider . getMyTimeAwayItems ( ) . then ( ( items ) => { this . setState ( { items : items , period : period , showDialogType : TimeAwayDialogType . Hidden } ) ; } ) ; } private _getMyTimeAwayItems ( ) { if ( this . props . isInitialized ) { this . props . dataProvider . getMyTimeAwayItems ( ) . then ( ( items ) => { this . setState ( { items : items } ) ; } ) ; } } }