github.com/muhammedhassanm/blockchain@v0.0.0-20200120143007-697261defd4d/build-blockchain-insurance-app-master/web/src/repair-shop/components/RepairOrderComponent.js (about)

     1  'use strict';
     2  
     3  import React, { Props } from 'react';
     4  import PropTypes from 'prop-types';
     5  import { FormattedMessage } from 'react-intl';
     6  
     7  class RepairOrderComponent extends React.Component {
     8  
     9    static get propTypes() {
    10      return {
    11        repairOrder: PropTypes.object.isRequired,
    12        onMarkedComplete: PropTypes.func.isRequired
    13      };
    14    }
    15  
    16    constructor(props) {
    17      super(props);
    18  
    19      this.markComplete = this.markComplete.bind(this);
    20    }
    21  
    22    markComplete() {
    23      const { repairOrder, onMarkedComplete } = this.props;
    24      if (typeof onMarkedComplete === 'function') {
    25        setTimeout(() => { onMarkedComplete(repairOrder.uuid); });
    26      }
    27    }
    28  
    29    render() {
    30      const { repairOrder } = this.props;
    31  
    32      return (
    33        <div className='ibm-col-5-1 ibm-col-medium-6-2'>
    34          <div className='ibm-card ibm-border-gray-50'>
    35            <div className='ibm-card__content'>
    36              <h4 className='ibm-bold ibm-h4'>
    37                <FormattedMessage id='Repair Order' />
    38              </h4>
    39              <div style={{ wordWrap: 'break-word' }}>
    40                <p>
    41                  <FormattedMessage id='Brand' />:
    42                    {repairOrder.item.brand} <br />
    43                  <FormattedMessage id='Model' />:
    44                    {repairOrder.item.model} <br />
    45                  <FormattedMessage id='Description' />:
    46                    {repairOrder.item.description} <br />
    47                </p>
    48                <p>
    49                  <button type='button'
    50                    className='ibm-btn-sec ibm-btn-small ibm-btn-blue-50'
    51                    onClick={this.markComplete}>
    52                    <FormattedMessage id='Mark Completed' />
    53                  </button>
    54                </p>
    55              </div>
    56              <br />
    57            </div>
    58          </div>
    59        </div>
    60      );
    61    }
    62  }
    63  
    64  export default RepairOrderComponent;