118 lines
3.0 KiB
JavaScript
118 lines
3.0 KiB
JavaScript
/** @format */
|
|
/**
|
|
* External dependencies
|
|
*/
|
|
import { __ } from '@wordpress/i18n';
|
|
import { Component, Fragment } from '@wordpress/element';
|
|
import { compose } from '@wordpress/compose';
|
|
import { Button } from '@wordpress/components';
|
|
import { withSelect, withDispatch } from '@wordpress/data';
|
|
import moment from 'moment';
|
|
import { partial } from 'lodash';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import Header from 'layout/header/index';
|
|
import Card from 'components/card';
|
|
import DatePicker from 'components/date-picker';
|
|
import FilterPicker, { FILTER_PARAM } from 'components/filter-picker';
|
|
import AdvancedFilters from 'components/advanced-filters';
|
|
import { filters, filterPaths, advancedFilterConfig } from './constants';
|
|
import './style.scss';
|
|
|
|
class OrdersReport extends Component {
|
|
constructor( props ) {
|
|
super( props );
|
|
|
|
this.toggleStatus = this.toggleStatus.bind( this );
|
|
}
|
|
|
|
toggleStatus( order ) {
|
|
const { requestUpdateOrder } = this.props;
|
|
const updatedOrder = { ...order };
|
|
const status = updatedOrder.status === 'completed' ? 'processing' : 'completed';
|
|
updatedOrder.status = status;
|
|
requestUpdateOrder( updatedOrder );
|
|
}
|
|
|
|
render() {
|
|
const { orders, orderIds, query, path } = this.props;
|
|
return (
|
|
<Fragment>
|
|
<Header
|
|
sections={ [
|
|
[ '/analytics', __( 'Analytics', 'wc-admin' ) ],
|
|
__( 'Orders', 'wc-admin' ),
|
|
] }
|
|
/>
|
|
<div className="woocommerce-orders__pickers">
|
|
<DatePicker query={ query } path={ path } key={ JSON.stringify( query ) } />
|
|
<FilterPicker
|
|
query={ query }
|
|
path={ path }
|
|
filters={ filters }
|
|
filterPaths={ filterPaths }
|
|
/>
|
|
</div>
|
|
{ 'advanced' === query[ FILTER_PARAM ] && (
|
|
<AdvancedFilters
|
|
config={ advancedFilterConfig }
|
|
filterTitle={ __( 'Orders', 'wc-admin' ) }
|
|
/>
|
|
) }
|
|
<p>Below is a temporary example</p>
|
|
<Card title="Orders">
|
|
<table style={ { width: '100%' } }>
|
|
<thead>
|
|
<tr style={ { textAlign: 'left' } }>
|
|
<th>Id</th>
|
|
<th>Date</th>
|
|
<th>Total</th>
|
|
<th>Status</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{ orderIds &&
|
|
orderIds.map( id => {
|
|
const order = orders[ id ];
|
|
return (
|
|
<tr key={ id }>
|
|
<td>{ id }</td>
|
|
<td>{ moment( order.date_created ).format( 'LL' ) }</td>
|
|
<td>{ order.total }</td>
|
|
<td>{ order.status }</td>
|
|
<td>
|
|
<Button isPrimary onClick={ partial( this.toggleStatus, order ) }>
|
|
Toggle Status
|
|
</Button>
|
|
</td>
|
|
</tr>
|
|
);
|
|
} ) }
|
|
</tbody>
|
|
</table>
|
|
</Card>
|
|
</Fragment>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default compose(
|
|
withSelect( select => {
|
|
const { getOrders, getOrderIds } = select( 'wc-admin' );
|
|
return {
|
|
orders: getOrders(),
|
|
orderIds: getOrderIds(),
|
|
};
|
|
} ),
|
|
withDispatch( dispatch => {
|
|
return {
|
|
requestUpdateOrder: function( updatedOrder ) {
|
|
dispatch( 'wc-admin' ).requestUpdateOrder( updatedOrder );
|
|
},
|
|
};
|
|
} )
|
|
)( OrdersReport );
|