gistfile1.txt

import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {TextInput} from 'Components/Global/Form';
import moment from 'moment';
import InventoryTableComponent from './Tables/InventoryTableComponent';
import AvailabilityTableComponent from './Tables/AvailabilityTableComponent';
import {getAvailability, getInventory} from "root/Components/Redux/Actions/inventory";
import {updateBulkInventory} from "root/Components/Redux/Actions/inventory";
import LoadingMessage from "root/Components/Global/Loading/LoadingMessage";


class FacilityInventory extends Component {
    constructor() {
        super();
        this.state = {
            inventoryShown   : true,
            availabilityShown: false,
            shown            : true,
            dayShown         : false,
            hourShown        : false,
            inputAvailability: '',
            macro            : '',
            day              : '',
            hr               : '',
            loaderShown      : false,
            tableShown       : true,
            facilities       : {}
        };
    }

    toggle(e, type) {
        if (type === 'inventory') {
            this.setState({
                inventoryShown   : true,
                availabilityShown: false
            });
        } else {
            this.setState({
                inventoryShown   : false,
                availabilityShown: true
            });
        }
    }


    // send initial call to server to pull data before mounting the component ?
    componentWillMount = () => {
        if (!this.props.params.facilityId) return false;
        this.props.dispatch(getInventory({ 'facility_id': this.props.params.facilityId }));
        this.props.dispatch(getAvailability({ 'facility_id': this.props.params.facilityId }));
        /*setTimeout(() => {
            this.props.dispatch(getInventory({ 'facility_id': this.props.params.facilityId }));
        }, 3000);*/
    };

    componentWillReceiveProps(props) {
        // set state facilities when props are loaded
        this.setState({ facilities: props.facilities });
    }

    // change the state whenever user types in anything in the input box
    inputFieldOnChangeHandler = (event) => {
        const identifier = event.target.getAttribute('data-id');
        // split the identifier into 2 pieces, first is date and second is hour
        let date = identifier.split('_');
        // copy the data for a particular day in a new variable
        let singleRecord = this.state.facilities.facility.data[ date[ 0 ] ];
        //validate that the supplied value is numeric
        let bool = /^[0-9]*$/.test(event.target.value);
        //if the regex test returns true then only update the state
        if (bool) {
            // change the value of particular hour in new variable
            singleRecord[ date[ 1 ] ] = event.target.value;
            // create a copy of state's facilities object
            const newFacilities = { ...this.state.facilities };
            // append the single record into the object
            newFacilities.facility.data[ date[ 0 ] ] = singleRecord;
            // copy the object back to the state
            this.setState({ facilities: newFacilities });
        }
    };

    // handle on click event of update button on inventory tab
    updateButtonClickHandler = () => {
        //send the data to server
        this.props.dispatch(updateBulkInventory({
            'facility_id' : this.props.params.facilityId,
            'availability': this.state.facilities.facility.data,
            'macro'       : 'json',
            'hr'          : this.state.hr,
            'day'         : this.state.day
        }));

        /*
        * pull fresh data from server after 3 seconds,
        * doing it synchronously doesn't populates
        * the columns for some reason
        * */

        setTimeout(() => {
            this.props.dispatch(getInventory({ 'facility_id': this.props.params.facilityId }));
            this.props.dispatch(getAvailability({ 'facility_id': this.props.params.facilityId }));
        }, 3000);
    };

    // change the state when users types in anything into availability input box
    availabilityChangeHandler = (event) => {
        //validate that the supplied value is numeric
        let bool = /^(\s*|\d+)$/.test(event.target.value);
        if (bool) {
            this.setState({ inputAvailability: event.target.value });
        }
    };

    // change the state when users changes hr dropdown
    hrChangedHandler = (event) => {
        this.setState({
            hr: event.target.value
        });
    };

    // change the state when users changes day dropdown
    dayChangedHandler = (event) => {
        this.setState({
            day: event.target.value
        });
    };

    // change the state when users changes macro dropdown
    macroOnChangeHandler = (event) => {
        if (event.target.value === 'all-day') {
            this.setState({
                dayShown : false,
                hourShown: false,
                macro    : 'all-day'
            });
        }
        if (event.target.value === 'dow') {
            this.setState({
                dayShown : true,
                hourShown: false,
                macro    : 'dow'
            });
        }
        if (event.target.value === 'hr') {
            this.setState({
                dayShown : false,
                hourShown: true,
                macro    : 'hr'
            });
        }
        if (event.target.value === '') {
            this.setState({
                dayShown : false,
                hourShown: false,
                macro    : ''
            });
        }
    };

    getInventory(){
        this.props.dispatch(getInventory({ 'facility_id': this.props.params.facilityId}));
    }

    getAvailability() {
        this.props.dispatch(getAvailability({ 'facility_id': this.props.params.facilityId }));
    }

    // send data to server when user clicks on update button on inventory tab
    submitButtonClickHandler = () => {
        this.setState({
            loaderShown      : true,
            inventoryShown   : false,
            availabilityShown: false

        });
        this.setState({ tableShown: false });
        this.setState({ loadershown: false });

        const { dispatch } = this.props;

        dispatch(updateBulkInventory({
            'facility_id' : this.props.params.facilityId,
            'availability': this.state.inputAvailability,
            'macro'       : this.state.macro,
            'hr'          : this.state.hr,
            'day'         : this.state.day
        })).then(() => {
            this.getInventory();
            this.getAvailability();
            //this.props.dispatch(getInventory({ 'facility_id': this.props.params.facilityId }));
            //this.props.dispatch(getAvailability({ 'facility_id': this.props.params.facilityId }));

            this.setState({
                loaderShown      : false,
                inventoryShown   : true,
                availabilityShown: false

            });
        });

        /*this.props.dispatch(updateBulkInventory({
            'facility_id' : this.props.params.facilityId,
            'availability': this.state.inputAvailability,
            'macro'       : this.state.macro,
            'hr'          : this.state.hr,
            'day'         : this.state.day
        }).then(() => {
            this.props.dispatch(getInventory({ 'facility_id': this.props.params.facilityId }));
            this.props.dispatch(getAvailability({ 'facility_id': this.props.params.facilityId }));

            this.setState({
                loaderShown      : false,
                inventoryShown   : true,
                availabilityShown: false

            });
        }));*/
        if (!this.props.params.facilityId) return false;
        /*
         * pull fresh data from server after 3 seconds,
         * doing it synchronously doesn't populates
         * the columns for some reason
         * */
        /*setTimeout(() => {
            this.props.dispatch(getInventory({ 'facility_id': this.props.params.facilityId }));
            this.props.dispatch(getAvailability({ 'facility_id': this.props.params.facilityId }));

            this.setState({
                loaderShown      : false,
                inventoryShown   : true,
                availabilityShown: false

            });
        }, 3000);*/
    };

    // pass the number of days and the list will be generated
    getDays(days, weekFromSunday = true) {
        let ar = [];
        let start = moment();
        if (weekFromSunday) {
            start = start.startOf('week');
        }
        for (let end = moment(start).add(days, 'days'); start.isBefore(end); start.add(1, 'day')) {
            ar.push(start.format('YYYY-MM-DD'));
        }
        return ar;
    }

    conditionalFunction(value, index, i) {
        if (value.availabilities && value.availabilities[ index ]) {
            if (value.availabilities[ index ][ i ] === null) {
                return 'updating...';
            } else if (value.availabilities[ index ][ i ]) {
                return value.availabilities[ index ][ i ];
            } else {
                return '-';
            }
        } else {
            return '-';
        }
    };

    render() {
        let shown = {
            display: this.state.shown ? "block" : "none"
        };

        let hidden = {
            display: this.state.shown ? "none" : "block"
        };

        let dayShown = {
            display: this.state.dayShown ? "block" : "none"
        };

        let hourShown = {
            display: this.state.hourShown ? "block" : "none"
        };

        let loaderShown = {
            display: this.state.loaderShown ? "block" : "none"

        };
        let tableShown = {
            display: this.state.tableShown ? "block" : "none"
        };
        let inventoryShown = {
            display: this.state.inventoryShown ? "block" : "none"
        };
        let availabilityShown = {
            display: this.state.availabilityShown ? "block" : "none"
        };

        return (
            <div className="inventoryForm">
                <form>
                    <div className="flaotBox">
                        <div className="row formGroup">
                            <div className="col">
                                <div className="CustomeRadio">
                                    <input type="radio" className="radio-btn" name="choice" id="a-opt"
                                           onClick={(e) => this.toggle(e, 'inventory')} defaultChecked/>
                                    <label htmlFor="a-opt" className="label"> Inventory</label>
                                </div>
                                <div className="CustomeRadio">
                                    <input type="radio" className="radio-btn" name="choice" id="b-opt"
                                           onClick={(e) => this.toggle(e, 'availability')}/>
                                    <label htmlFor="b-opt" className="label">Availability</label>
                                </div>
                            </div>
                        </div>
                        <div className="row" style={inventoryShown}>
                            <div className="col">
                                <div className="row">
                                    <div className="col label">Select Macro</div>
                                    <div className="col">
                                        <select className="form-control" onChange={this.macroOnChangeHandler}>
                                            <option value="">Select One</option>
                                            <option value="all-day">All Day</option>
                                            <option value="dow">DOW</option>
                                            <option value="hr">HR</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div className="col">
                                <div className="row">
                                    <div className="col label">
                                        Input Availability
                                    </div>
                                    <div className="col">
                                        <TextInput placeholder="Input Availability" type="text"
                                                   value={this.state.inputAvailability}
                                                   onChange={this.availabilityChangeHandler} name="rates"/>
                                    </div>
                                </div>
                            </div>

                            <div className="col" id="day" style={dayShown}>
                                <div className="row">
                                    <div className="col label">Select Day</div>
                                    <div className="col">
                                        <select className="form-control" onChange={this.dayChangedHandler}>
                                            <option value="">Select One</option>
                                            {this.getDays(7).map((index, value) => {
                                                return <option value={moment(index).format('dddd')}
                                                               key={value}>{moment(index).format('dddd')}</option>;
                                            })}
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div className="col" id="day" style={hourShown}>
                                <div className="row">
                                    <div className="col label">Select Hour</div>
                                    <div className="col">
                                        <select className="form-control" onChange={this.hrChangedHandler}>
                                            <option value="">Select One</option>
                                            {[ ...Array(24).keys() ].map((index) => {
                                                return <option value={index}
                                                               key={index}>{index === 0 ? '12' : index > 12 ? index - 12 : index} {index < 12 ? 'AM' : 'PM'}</option>;
                                            })}
                                        </select>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div className="row">
                            <div className="col" style={inventoryShown}>
                                <button className="iconButton btn-dark" type="button"
                                        onClick={this.submitButtonClickHandler}>Submit
                                </button>
                            </div>
                        </div>
                    </div>
                </form>

                {/* Inventory table */}
                <div className="loader" style={loaderShown}><LoadingMessage messages={[ 'Updating facility...' ]}/>
                </div>
                <div className="tableWrapInventory" style={inventoryShown} id="tableInventory">
                    <InventoryTableComponent
                        availabilities={(this.state.facilities.facility) ? this.state.facilities.facility.data : ''}
                        dayNames={this.getDays(7)} style={shown}
                        textInput={(event) => this.inputFieldOnChangeHandler(event)}
                        testFunction={this.conditionalFunction}
                    />
                </div>
                <div className="row" style={inventoryShown}>
                    <div className="col">
                        <button className="iconButton btn-dark" onClick={this.updateButtonClickHandler}>Update</button>
                    </div>
                </div>

                <div className="tableWrapAvailability" style={availabilityShown} id="tableAvailability">
                    <AvailabilityTableComponent
                        generateDays={this.getDays(15, false)}
                        availabilities={(this.props.facilities.availability) ? this.props.facilities.availability.data : ''}
                    />
                </div>
            </div>
        );
    }
}

// Declare propTypes
FacilityInventory.propTypes = {
    dispatch      : PropTypes.func,
    isFetching    : PropTypes.bool,
    inventory     : PropTypes.object,
    params        : PropTypes.object,
    availability  : PropTypes.object,
    availabilities: PropTypes.object,
    dayNames      : PropTypes.array,
    facilities    : PropTypes.object
};

// Map redux state to component props
const mapStateToProps = ({ inventory }) => {
    return {
        isFetching    : inventory.isFetching,
        facilities    : inventory,
        availabilities: inventory.availabilities
    }; // Return props object
};

export default connect(mapStateToProps)(FacilityInventory);