Class: OrdersAdd

Extends

• React.Component

Members

---

entity

Entity name which this component represents to.

Entity name which this component represents to

Source:

• orders/OrdersAdd.js, line 33

---

foundation

access to foundation instance.

access to foundation instance

Source:

• orders/OrdersAdd.js, line 37

---

pagination

default pagination to list data.

default pagination to list data

Source:

• orders/OrdersAdd.js, line 41

---

state

component state.

component state

Source:

• orders/OrdersAdd.js, line 48

Methods

---

<static> componentDidMount()

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

Once component is monted we are now ready to get customer list to use on select html item. We could also listen to changes in Customer and change the select values based on those events

Source:

• orders/OrdersAdd.js, line 60

Example

async componentDidMount() {
  const { Customer } = this.foundation.data
  if (!this.state.toDashboard) {
    this.form = document.querySelectorAll('.needs-validation')[0]
    this.form.addEventListener('submit', this.handleFormSubmit, false)
  }
  const findCustomers = await Customer.find({})
  if (!findCustomers) {
    return
  }
  if (findCustomers.data) {
    this.setState({
      customers: findCustomers.data
    })
  }
}

---

<static> handleChangeFieldValue(event)

Event handler that change form field values and set it state

Parameters:

Name	Type	Description
event	event	The HTML event triggered on User interation

Source:

• orders/OrdersAdd.js, line 99

Example

handleChangeFieldValue(e) {
  const { Customer } = this.foundation.data

  if (e.target) {
    if (e.target.value === null || e.target.value === 'null') {
      const copy = { ...orderObj }
      delete copy.amount
      // console.debug(copy)
      this.setState({ order: copy })
      return
    }
  }
  const newHash = { ...this.state.order }
  if (e.target.id === 'amount') {
    newHash[e.target.id] = e.target.value
  } else if (e.target.id === 'name') {
    const { data, error } = await Customer.findById(e.target.value)
    if (error) {
      return
    }
    // console.error({ data, error })
    newHash.customerId = data.__id
    newHash.name = data.name
    newHash.shipTo = data.address
    newHash.paymentMethod = data.cards[0]
  }

  // console.error(newHash)
  this.setState({ order: newHash })
}

---

<async, static> handleFormSubmit(event)

Event handler that handles the form submission

Parameters:

Name	Type	Description
event	event	The HTML event triggered on User interation

Source:

• orders/OrdersAdd.js, line 166

Example

async handleFormSubmit(e) {
  const { Order } = this.foundation.data
  if (!this.form.checkValidity()) {
    // console.log('not validated')
  }
  e.preventDefault()
  e.stopPropagation()
  this.form.classList.add('was-validated')
  const doc = { ...this.state.order }
  const { data, error } = await Order.add(doc)
  if (error) {
    swal('Database error', error.message, 'error')
    return
  }
  this.setState({ toDashboard: true })
}

---

<async, static> render()

Component render function.

Renders a form to create the Order data

Source:

• orders/OrdersAdd.js, line 206