WDSSearch.jsx

import React, { Component, Fragment } from 'react'
import moment from 'moment'
import 'antd/dist/antd.css'
import './resources/css/wdsSearchStyle.css'
import { Form, Input, Button, Icon, Select, Row, Col, DatePicker } from 'antd'
import * as UrlConstants from '../../../resources/js/constants/UrlConstants'

const { RangePicker } = DatePicker
const { Option } = Select

class WDSSearch extends Component {
  state = {
    isAnonymous: false,
    expand: false,
  }

  handleSelectChange = value => {
    this.setState({
      isAnonymous: value === 'true' ? true : false,
    })
  }

  toggle = () => {
    const { expand } = this.state
    this.setState({ expand: !expand })
  }

  disabledDate = current => {
    return current && current < moment().subtract(30, 'days')
  }

  _handleSubmitFn = e => {
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Transaction Search values of form: ', values)
        this.props.eventEmitter.emit(UrlConstants.SEARCH_LOGS, values)
      }
    })
  }

  render() {
    const { getFieldDecorator } = this.props.form
    return (
      <Fragment>
        <Form onSubmit={this._handleSubmitFn} hidden={this.state.expand}>
          <Row gutter={16}>
            <Col
              xs={{ span: 12 }}
              sm={{ span: 6 }}
              md={{ span: 4 }}
              lg={{ span: 4 }}>
              <Form.Item label="Log ID :">
                {getFieldDecorator('logID')(<Input placeholder="Log ID" />)}
              </Form.Item>
            </Col>

            <Col
              xs={{ span: 12 }}
              sm={{ span: 6 }}
              md={{ span: 4 }}
              lg={{ span: 4 }}>
              <Form.Item label="Anonymous :">
                {getFieldDecorator('isAnonymous', {
                  initialValue: 'false',
                })(
                  <Select onChange={this.handleSelectChange}>
                    <Option value="false">Username</Option>
                    <Option value="true">Anonymous</Option>
                  </Select>,
                )}
              </Form.Item>
            </Col>

            <Col
              xs={{ span: 12 }}
              sm={{ span: 6 }}
              md={{ span: 4 }}
              lg={{ span: 4 }}>
              <Form.Item label="Username :">
                {getFieldDecorator('username', {})(
                  <Input
                    placeholder="Username"
                    disabled={this.state.isAnonymous}
                  />,
                )}
              </Form.Item>
            </Col>

            <Col
              xs={{ span: 12 }}
              sm={{ span: 6 }}
              md={{ span: 4 }}
              lg={{ span: 4 }}>
              <Form.Item label="Mobile ID :">
                {getFieldDecorator('mobileID')(
                  <Input placeholder="Mobile ID" />,
                )}
              </Form.Item>
            </Col>
            <Col
              xs={{ span: 12 }}
              sm={{ span: 6 }}
              md={{ span: 4 }}
              lg={{ span: 4 }}>
              <Form.Item label="Device Type :">
                {getFieldDecorator('deviceType', {
                  initialValue: 'All',
                })(
                  <Select>
                    <Option value="All">All</Option>
                    <Option value="iOS">iOS</Option>
                    <Option value="Android">Android</Option>
                  </Select>,
                )}
              </Form.Item>
            </Col>

            <Col
              xs={{ span: 12 }}
              sm={{ span: 6 }}
              md={{ span: 4 }}
              lg={{ span: 4 }}>
              <Form.Item label="Screen :">
                {getFieldDecorator('screen')(<Input placeholder="Screen" />)}
              </Form.Item>
            </Col>
            <Col
              xs={{ span: 12 }}
              sm={{ span: 6 }}
              md={{ span: 4 }}
              lg={{ span: 4 }}>
              <Form.Item label="Action :">
                {getFieldDecorator('action')(<Input placeholder="Action" />)}
              </Form.Item>
            </Col>

            <Col
              xs={{ span: 12 }}
              sm={{ span: 6 }}
              md={{ span: 4 }}
              lg={{ span: 4 }}>
              <Form.Item label="Transaction Message :">
                {getFieldDecorator('message')(
                  <Input placeholder="Transaction Message" />,
                )}
              </Form.Item>
            </Col>

            <Col
              xs={{ span: 12 }}
              sm={{ span: 6 }}
              md={{ span: 4 }}
              lg={{ span: 4 }}>
              <Form.Item label="Result From :">
                {getFieldDecorator('resultFrom')(
                  <Input placeholder="Result From" />,
                )}
              </Form.Item>
            </Col>

            <Col
              xs={{ span: 12 }}
              sm={{ span: 6 }}
              md={{ span: 4 }}
              lg={{ span: 4 }}>
              <Form.Item label="Result :">
                {getFieldDecorator('result', {
                  initialValue: 'All',
                })(
                  <Select>
                    <Option value="All">All</Option>
                    <Option value="SUCCESS">SUCCESS</Option>
                    <Option value="FAIL">FAIL</Option>
                  </Select>,
                )}
              </Form.Item>
            </Col>

            <Col
              xs={{ span: 12 }}
              sm={{ span: 6 }}
              md={{ span: 4 }}
              lg={{ span: 4 }}>
              <Form.Item label="Http Status :">
                {getFieldDecorator('resultHttpStatus')(
                  <Input placeholder="Http Status" />,
                )}
              </Form.Item>
            </Col>

            <Col
              xs={{ span: 12 }}
              sm={{ span: 6 }}
              md={{ span: 4 }}
              lg={{ span: 4 }}>
              <Form.Item label="Result Code :">
                {getFieldDecorator('resultCode', {
                  initialValue: 'All',
                })(
                  <Select>
                    <Option value="All">All</Option>
                    <Option value="200">200</Option>
                    <Option value="201">201</Option>
                    <Option value="202">202</Option>
                    <Option value="203">203</Option>
                    <Option value="204">204</Option>
                    <Option value="300">300</Option>
                  </Select>,
                )}
              </Form.Item>
            </Col>

            <Col
              xs={{ span: 12 }}
              sm={{ span: 6 }}
              md={{ span: 4 }}
              lg={{ span: 4 }}>
              <Form.Item label="Result Message :">
                {getFieldDecorator('resultMessage')(
                  <Input placeholder="Result Message" />,
                )}
              </Form.Item>
            </Col>

            <Col
              xs={{ span: 24 }}
              sm={{ span: 16 }}
              md={{ span: 11 }}
              lg={{ span: 8 }}>
              <Form.Item label="Request Time :">
                {getFieldDecorator('requestTime', {
                  initialValue: [
                    moment(moment().format('HH:mm:'), 'HH:mm'),
                    moment(moment().format('HH:mm:'), 'HH:mm'),
                  ],
                })(
                  <RangePicker
                    disabledDate={this.disabledDate}
                    showTime={{ format: 'HH:mm' }}
                    format="YYYY-MM-DD HH:mm"
                  />,
                )}
              </Form.Item>
            </Col>
            <Col
              xs={{ span: 12 }}
              sm={{ span: 6 }}
              md={{ span: 4 }}
              lg={{ span: 4 }}>
              <Form.Item>
                <Button className="top" type="primary" htmlType="submit">
                  Search
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>

        <div style={{ textAlign: 'center' }}>
          <Button onClick={this.toggle} block type="primary">
            <Icon type={this.state.expand ? 'down' : 'up'} />
          </Button>
        </div>
      </Fragment>
    )
  }
}
export default Form.create({ name: 'transaction_search' })(WDSSearch)