Fakultas Ilmu Komputer UI

CreateVacancy.jsx 5.23 KB
Newer Older
1
2
3
4
5
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';
6
import CKEditor from 'react-ckeditor-wrapper';
7
8
9
10
11
import ModalAlert from './components/ModalAlert';
import Server from './lib/Server';

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.handleEditorChange = this.handleEditorChange.bind(this);
    this.handleEditor = this.handleEditor.bind(this);
24
25
    this.setCloseTime = this.setCloseTime.bind(this);
    this.setOpenTime = this.setOpenTime.bind(this);
26

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

38
39
40
41
42
43
44
45
46
    if (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),
          loading: false,
        });
47
      });
48
    }
49
50
  }

51
52
53
54
55
56
57
58
  setOpenTime(date) {
    this.setState({ open_time: date });
  }

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

59
60
61
62
  handleChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };

63
64
65
66
67
68
69
70
71
72
  handleEditor(value) {
    this.setState({ description: value });
    console.log('dor');
  }

  handleEditorChange = (e) => {
    this.setState({ description: e.target.getContent() });
    console.log('Content was updated:', this.state.description);
  };

73
74
  handleSubmit = (e) => {
    e.preventDefault();
75
    console.log(this.state);
76
77
    this.setState({ formLoading: true });

78
79
80
81
82
83
84
85
    const data = {};
    data.name = this.state.name;
    data.description = this.state.description;
    data.open_time = this.state.open_time.format();
    data.close_time = this.state.close_time.format();
    if (!this.state.vacancyId) {
      data.company = this.state.company.id;
    }
86

87
88
89
90
    const url = this.state.vacancyId ? `/vacancies/${this.state.vacancyId}/` : '/vacancies/';
    const method = this.state.vacancyId ? 'PATCH' : 'POST';

    Server.sendRequest(url, method, data).then(() => {
91
92
      browserHistory.push('/lowongan');
    }, error => error.then((r) => {
93
      this.modalAlert.open('Gagal Membuat Lowongan', r.detail);
94
95
96
97
      this.setState({ formLoading: false });
    }));
  };

98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
  modules = {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
      [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
      ['link', 'image'],
      ['clean'],
    ],
  };

  formats = ['header', 'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link', 'image',
  ];

113
114
115
116
117
118
119
120
  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
121
          </Header.Content>
122
123
        </Header>
        <Form loading={this.state.formLoading} onSubmit={this.handleSubmit}>
124
          <Form.Field label="Posisi" name="name" control={Input} onChange={this.handleChange} value={this.state.name} required />
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
          { !this.state.loading && <CKEditor value={this.state.description} onChange={this.handleEditor} /> }
          {/*<TinyMCE*/}
            {/*content={this.state.description}*/}
            {/*config={{*/}
              {/*plugins: 'link image code',*/}
              {/*toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code image',*/}
            {/*}}*/}
            {/*onChange={this.handleEditorChange}*/}
          {/*/>*/}
          {/*<Form.TextArea*/}
            {/*name="description"*/}
            {/*label="Deskripsi"*/}
            {/*placeholder="Deskripsi Lowongan..."*/}
            {/*onChange={this.handleChange}*/}
            {/*value={this.state.description} required*/}
          {/*/>*/}
          <script>CKEDITOR.replace( 'description' );</script>
142
143
144
145
146
147
          <Form.Group widths="equal">
            <Form.Field
              className="open-time-field"
              control={DatePicker}
              label="Waktu Buka Lowongan"
              selected={this.state.open_time}
148
              onChange={this.setOpenTime}
149
150
151
152
153
154
155
              required
            />
            <Form.Field
              className="close-time-field"
              control={DatePicker}
              label="Waktu Tutup Lowongan"
              selected={this.state.close_time}
156
              onChange={this.setCloseTime}
157
158
159
160
161
162
163
164
165
              required
            />
          </Form.Group>
          <Button type="submit" primary floated="right">Submit</Button>
        </Form>
      </Segment>
    </div>
  );
}