Skip to content
Developer home
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