Fakultas Ilmu Komputer UI

CreateVacancy.jsx 3.68 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
import React from 'react';
import { Segment, Button, Form, Header, Icon, Input } from 'semantic-ui-react';
import { browserHistory } from 'react-router';
import DatePicker from 'react-datepicker';
import moment from 'moment';
import ModalAlert from './components/ModalAlert';
import Server from './lib/Server';
import Dumper from './lib/Dumper';

export default class CreateVacancy extends React.Component {

12
13
  static propTypes = {
    params: React.PropTypes.object.isRequired,
Zamil Majdy's avatar
Zamil Majdy committed
14
    user: React.PropTypes.object.isRequired,
15
16
  };

17
18
19
20
21
  constructor(props) {
    super(props);
    /* istanbul ignore next */
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
22
23
    this.setCloseTime = this.setCloseTime.bind(this);
    this.setOpenTime = this.setOpenTime.bind(this);
24

25
26
    this.state = {
      formLoading: false,
Zamil Majdy's avatar
Zamil Majdy committed
27
      company: this.props.user.data.company,
28
      vacancyId: this.props.params.id,
29
30
      open_time: moment(),
      close_time: moment(),
31
32
      name: '',
      description: '',
33
    };
34
35
36
37
38
39
40
41
42

    this.state.vacancyId && Server.get(`/vacancies/${this.state.vacancyId}/`).then((r) => {
      this.setState({
        description: r.description,
        name: r.name,
        open_time: moment(r.open_time),
        close_time: moment(r.close_time),
      });
    });
43
44
  }

45
46
47
48
49
50
51
52
  setOpenTime(date) {
    this.setState({ open_time: date });
  }

  setCloseTime(date) {
    this.setState({ close_time: date });
  }

53
54
55
56
57
58
59
60
61
62
63
64
65
  handleChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };

  handleSubmit = (e) => {
    e.preventDefault();
    this.setState({ formLoading: true });

    const data = Object.assign({}, this.state);
    data.open_time = data.open_time.format();
    data.close_time = data.close_time.format();
    data.company = this.state.company.id;

66
67
68
69
    const url = this.state.vacancyId ? `/vacancies/${this.state.vacancyId}/` : '/vacancies/';
    const method = this.state.vacancyId ? 'PATCH' : 'POST';

    Server.sendRequest(url, method, data).then(() => {
70
71
      browserHistory.push('/lowongan');
    }, error => error.then((r) => {
72
      this.modalAlert.open('Gagal Membuat Lowongan', r.detail);
73
74
75
76
77
78
79
80
81
82
83
84
      this.setState({ formLoading: false });
    }));
  };

  render = () => (
    <div className="create-lowongan" >
      <ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
      <Segment className="form-segment">
        <Header as="h2" icon textAlign="center">
          <Icon name="briefcase" circular />
          <Header.Content>
              Lowongan KP
85
          </Header.Content>
86
87
        </Header>
        <Form loading={this.state.formLoading} onSubmit={this.handleSubmit}>
88
89
90
91
92
93
94
95
          <Form.Field label="Posisi" name="name" control={Input} onChange={this.handleChange} value={this.state.name} required />
          <Form.TextArea
            name="description"
            label="Deskripsi"
            placeholder="Deskripsi Lowongan..."
            onChange={this.handleChange}
            value={this.state.description} required
          />
96
97
98
99
100
101
          <Form.Group widths="equal">
            <Form.Field
              className="open-time-field"
              control={DatePicker}
              label="Waktu Buka Lowongan"
              selected={this.state.open_time}
102
              onChange={this.setOpenTime}
103
104
105
106
107
108
109
              required
            />
            <Form.Field
              className="close-time-field"
              control={DatePicker}
              label="Waktu Tutup Lowongan"
              selected={this.state.close_time}
110
              onChange={this.setCloseTime}
111
112
113
114
115
116
117
118
119
              required
            />
          </Form.Group>
          <Button type="submit" primary floated="right">Submit</Button>
        </Form>
      </Segment>
    </div>
  );
}