Skip to content
Developer home
Product homepage
X3

Order history component

  Less than to read

In this step, we add Order history component.

  1. Add order-list-component.js for order history which contains a filter component:

    import * as React from 'react';
import { Option, Select } from 'carbon-react/lib/__experimental__/components/select';
import Loader from 'carbon-react/lib/components/loader';
import Tile from 'carbon-react/lib/components/tile';
import Heading from 'carbon-react/lib/components/heading';
import { Checkbox } from 'carbon-react/lib/__experimental__/components/checkbox';
import { Query } from 'react-apollo';
import Content from 'carbon-react/lib/components/content';
import OrderListDetailComponent from './order-list-detail-component';
import { customerListQuery } from '../queries';

export default class OrderListComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { closedOrder: false };
  }

  onCustomerSelected = ({ target }) => {
    if (target.value && target.value.length > 0) {
      this.setState({ onCustomerSelected: target.value[0].optionValue });
    } else {
      this.setState({ onCustomerSelected: undefined });
    }
  };

  onOrderStatusClick = () => {
    this.setState({ closedOrder: !this.state.closedOrder });
  }

  render() {
    return (
      <div className='se-page-body'>
        <Heading title='Order History' />
        <Tile>
          <Content title='Customer'>Please choose one</Content>
          <Content title=''>
            <div className='se-navbar-site-select'>
              <Query query={ customerListQuery }>
                {({ loading, data, error }) => {
                  if (loading) return <Loader />;
                  if (error) return <div>error</div>;
                  if (!data) return <div>no data</div>;
                  return (
                    <Select
                      size='small' placeholder='Select a customer'
                      onChange={ this.onCustomerSelected }
                    >
                      {data.sage.x3BusinessPartners.customer.edges.map((e) => {
                        return (
                          <Option
                            key={ e.node.code } value={ e.node.code }
                            text={ e.node.companyName }
                          />
                        );
                      })}
                    </Select>
                  );
                }}
              </Query>
            </div>
          </Content>
          <Content>
            <Checkbox
              name='CB'
              label='Show Closed Order'
              size='small'
              checked={ this.state.closedOrder }
              onChange={ this.onOrderStatusClick }
            />
          </Content>
        </Tile>
        {this.state.onCustomerSelected && <OrderListDetailComponent selectedCustomer={ this.state.onCustomerSelected } closedOrder={ this.state.closedOrder } />}
      </div>
    );
  }
}

  2. Add component to display the result order-list-detail-component.js:

    import * as React from 'react';
import {
  Table, TableRow, TableCell, TableHeader
} from 'carbon-react/lib/components/table';
import Button from 'carbon-react/lib/components/button';
import Loader from 'carbon-react/lib/components/loader';
import { Query } from 'react-apollo';

import { orderDetailsQuery } from '../queries';

export default class OrderListDetailComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onOrderSelected = (order) => {
    return () => {
      this.setState({ orderOpen: order });
    };
  };

  totalOrder = (line) => {
    const lineCost = line.map(e => e.node.grossPrice * e.node.quantityInSalesUnitOrdered);
    const linesTotal = lineCost.reduce((a, b) => (a + b), 0);
    return Math.round(linesTotal).toFixed(2);
  };

  renderTableOrder = orders => (
    <Table>
      <TableRow>
        <TableHeader>Order ID</TableHeader>
        <TableHeader>Order date</TableHeader>
        <TableHeader>Order status</TableHeader>
        <TableHeader>Order amount</TableHeader>
        <TableHeader />
      </TableRow>
      {orders.filter((order) => {
        if (this.props.closedOrder === true) {
          return true;
        }
        return order.node.orderStatus !== 'closed';
      }).map(p => (
        <TableRow key={ `${p.node.id} ${p.node.orderDate}` }>
          <TableCell>{p.node.id}</TableCell>
          <TableCell>{p.node.orderDate}</TableCell>
          <TableCell>{p.node.orderStatus}</TableCell>
          <TableCell>{`${p.node.currency.code} ${this.totalOrder(p.node.lines.edges)}`}</TableCell>
          <TableCell>
            <Button
              iconType='info'
              buttonType='tertiary'
              onClick={ this.onOrderSelected(p.node) }
              key={ p.node.id }
            >Detail
            </Button>
          </TableCell>
        </TableRow>
      ))}
    </Table>
  );

  render() {
    return (
      <div className='se-site-details'>
        <Query
          query={ orderDetailsQuery }
          variables={ {
            soldToCustomer: `{soldToCustomer:{ code: '${this.props.selectedCustomer}' }}`,
            orderBy: '{ orderDate: -1 }'
          } }
        >
          {({ loading, data, error }) => {
            if (loading) return <Loader size='large' style={ { textAlign: 'center' } } />;
            if (error) return <div>error</div>;
            if (!data) return <div>no data</div>;
            return (
              this.renderTableOrder(data.sage.x3Sales.salesOrder.edges)
            );
          }}
        </Query>
      </div>
    );
  }
}

  3. Then we plug this component to the order-component.js:

    import * as React from 'react';
import OrderListComponent from './order-list-component';

export default class OrderComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const { mode } = this.props;
    return (
      <div className='se-page-body'>
        {mode === 'History' && <OrderListComponent />}
      </div>
    );
  }
}

    You can also download the VSCode project at the end of this step.

Steps