PendingInvoices.js

import React, {PropTypes} from 'react';
import CompaniesList from './CompaniesList';
import Pagination from 'react-js-pagination';
import Fetcher from '../common/Fetcher';

export default class PendingInvoices extends React.Component {
    constructor() {
        super();
        this.state = {
            companies: [],
            clients: [],
            updating: false,
            search: '',
            totalItems:0,
            totalPages:0,
            currentPage: 1
        };

        this.setCompanyClient = this.setCompanyClient.bind(this);
        this.DraftCompanyInvoices = this.DraftCompanyInvoices.bind(this);
        this.MarkAsDoneCompanyInvoices = this.MarkAsDoneCompanyInvoices.bind(this);
        this.getCompanyInvoicesIds = this.getCompanyInvoicesIds.bind(this);
        this.updateJobPrice = this.updateJobPrice.bind(this);
        this.draftJobInvoice = this.draftJobInvoice.bind(this);
        this.markAsDoneJobInvoice = this.markAsDoneJobInvoice.bind(this);
        this.setJobCompany = this.setJobCompany.bind(this);
        this.setInvoicesStatus = this.setInvoicesStatus.bind(this);
        this.search = this.search.bind(this);
        this.setPage = this.setPage.bind(this);

        this.searchTimer = false;
        this.Fetcher = Fetcher;
    }

    componentDidMount() {
        this.refreshData();
    }

    refreshData() {
        this.isUpdating( true );
        this.Fetcher.getInvoices( this.state.currentPage )
            .then( function( json ) {
                if ( ! json.error ) {
                    this.setState({
                        companies:json.companies,
                        clients:json.clients,
                        totalItems:json.totalItems,
                        totalPages:json.totalPages
                    });
                }
                this.isUpdating( false );
            }.bind(this));
    }

    setPage( page ) {
        this.setState( { currentPage: page }, this.refreshData );
    }

    /**
     * Set a Harvest client to a given company
     */
    setCompanyClient( companyId, clientId ) {
        this.isUpdating( true );

        if ( clientId === '' ) {
            clientId = 0;
        }

        this.state.companies.map( function( company ) {
            if ( company.id === companyId ) {
                this.Fetcher.setCompanyClient( company.id, clientId )
                    .then( ( json ) => {
                        if ( ! json.error ) {
                            this.refreshData();
                        }
                    });
            }
        }.bind(this));
    }

    setInvoicesStatus( invoices, status ) {
        this.isUpdating( true );
        this.Fetcher.setInvoiceStatus( invoices, status )
            .then( () => this.refreshData() );
    }

    /**
     * Set all companies invoices as draft
     */
    DraftCompanyInvoices( companyId ) {
        if ( ! confirm( 'Are you sure? Invoices will be generated in Harvest.' ) ) {
            return;
        }
        this.isUpdating( true );
        const invoices = this.getCompanyInvoicesIds( companyId );
        if ( ! invoices.length ) {
            return;
        }
        this.setInvoicesStatus( invoices, 'draft' );
    }

    /**
     * Set all companies invoices as done
     */
    MarkAsDoneCompanyInvoices( companyId ) {
        if ( ! confirm( 'Are you sure? The invoices will disappear from the list.' ) ) {
            return;
        }
        this.isUpdating( true );
        const invoices = this.getCompanyInvoicesIds( companyId );
        if ( ! invoices.length ) {
            return;
        }
        this.setInvoicesStatus( invoices, 'done' );
    }

    updateJobPrice( jobId, price ) {
        let companies = this.state.companies;
        console.log(companies);
        this.isUpdating( true );
        this.Fetcher.setJobPrice( jobId, price )
            .then( function(json) {
                debugger;
                companies = companies.map( function( company ) {
                    company.jobs = company.jobs.map( function( job ) {
                        if ( job.id == jobId ) {
                            job.price = 'dssdf';
                        }
                        return job;
                    });
                    return company;
                });
                this.setState( {companies} );
                this.isUpdating( false );
            }.bind(this));
    }

    draftJobInvoice( jobId ) {
        if ( ! confirm( 'Are you sure? The invoice will be generated in Harvest.' ) ) {
            return;
        }
        this.setInvoicesStatus( [ jobId ], 'draft' );
    }

    markAsDoneJobInvoice( jobId ) {
        if ( ! confirm( 'Are you sure? The invoice will disappear from the list.' ) ) {
            return;
        }
        this.setInvoicesStatus( [ jobId ], 'done' );
    }

    setJobCompany( jobId, companyId ) {
        this.isUpdating( true );
        console.log( jobId, companyId );
        this.isUpdating( false );
    }

    search( e ) {
        const value = e.target.value;
        if ( this.searchTimer ) {
            window.clearTimeout( this.searchTimer );
        }

        this.searchTimer = window.setTimeout( () => {
            this.isUpdating( true );
            console.log( 'search', value );
            this.isUpdating( false );
        }, 1000 );
    }


    /**
     * Set updating state. Ot will toggle the backdrop loader
     *
     * @param updating
     */
    isUpdating( updating ) {
        this.setState({ updating })

    }

    /**
     * Get all company invoices
     */
    getCompanyInvoicesIds( companyId ) {
        if ( companyId === 0 ) {
            return [];
        }

        let invoices = [];
        this.state.companies.map( function( company ) {
            if ( company.id === companyId ) {
                invoices = company.jobs;
            }
        });

        return invoices.map( function( job ) {
            return job.id;
        });
    }

    render() {
        return <div id="harvest-pending-invoices">
            {
                this.state.updating ?
                    <div id="harvest-backdrop">
                        <div className="backdrop-spinner"></div>
                    </div>
                : null
            }

            <div className="harvest-actions">
                <input type="text" placeholder="Search" defaultValue={ this.state.search } onChange={ this.search } />
                <div className="harvest-pagination">
                    {
                        this.state.totalPages > 1 ?
                            <Pagination
                                activePage={this.state.currentPage}
                                itemsCountPerPage={10}
                                totalItemsCount={this.state.totalItems}
                                pageRangeDisplayed={5}
                                onChange={this.setPage}
                            />
                            : null

                    }

                </div>
                <div className="clear" />
            </div>

            <CompaniesList
                companies={this.state.companies}
                clients={this.state.clients}
                onChangeCompanyClient={ this.setCompanyClient }
                onDraftCompanyInvoices = { this.DraftCompanyInvoices }
                onDoneCompanyInvoices = { this.MarkAsDoneCompanyInvoices }
                onChangeJobPrice={ this.updateJobPrice }
                onDraftJobInvoice={ this.draftJobInvoice }
                onDoneJobInvoice={ this.markAsDoneJobInvoice }
                onSetJobCompany={ this.setJobCompany }
            />
        </div>;
    }
}