Fakultas Ilmu Komputer UI

Vacancy.jsx 5.24 KB
Newer Older
1
import React from 'react';
2
import { Item, Rating, Button, Grid } from 'semantic-ui-react';
3
import moment from 'moment';
4
import ApplyModal from './ApplyModal';
5
import Server from '../lib/Server';
6
7
import ConfirmationModal from './ConfirmationModal';
import ModalAlert from './ModalAlert';
8

9
const defaultImage = 'http://semantic-ui.com/images/wireframe/image.png';
10

M. Reza Qorib's avatar
M. Reza Qorib committed
11
export default class Vacancy extends React.Component {
12
  static propTypes = {
13
14
    user: React.PropTypes.object.isRequired,
    // studentId: React.PropTypes.number.isRequired,
15
    data: React.PropTypes.object.isRequired,
16
    bookmarked: React.PropTypes.number,
17
    status: React.PropTypes.number,
18
19
20
21
  };

  static defaultProps = {
    bookmarked: 0,
22
23
24
    status: 0,
  };

Zamil Majdy's avatar
Zamil Majdy committed
25
  static APPLICATION_STATUS_TEXT = ['Dikirim', 'Dibaca', 'Ditandai', 'Ditolak', 'Diterima'];
26
27
28
29
30
31
32

  static APPLICATION_STATUS = {
    NEW: 0,
    READ: 1,
    BOOKMARKED: 2,
    REJECTED: 3,
    ACCEPTED: 4,
33
34
  };

35
36
37
  constructor(props) {
    super(props);
    /* istanbul ignore next */
38
39
    this.state = {
      bookmarked: this.props.bookmarked,
Zamil Majdy's avatar
Zamil Majdy committed
40
      registeredStatus: this.props.status,
41
      deleteLoading: false,
42
    };
43
    moment.locale('id');
44
    this.bookmark = this.bookmark.bind(this);
45
    this.updateStatus = this.updateStatus.bind(this);
46
    this.generateAction = this.generateAction.bind(this);
47
48
    this.openConfirmationModal = this.openConfirmationModal.bind(this);
    this.removeVacancyApplication = this.removeVacancyApplication.bind(this);
49
50
51
52
  }

  bookmark() {
    const data = { vacancy_id: this.props.data.id };
53
    if (this.state.bookmarked < 1) {
54
      Server.post(`/students/${this.props.user.data.student.id}/bookmarked-vacancies/`, data);
55
    } else {
56
      Server.delete(`/students/${this.props.user.data.student.id}/bookmarked-vacancies/${this.props.data.id}/`);
57
58
    }
    this.state.bookmarked = 1 - this.state.bookmarked;
59
60
  }

Zamil Majdy's avatar
Zamil Majdy committed
61
  updateStatus = (registeredStatus = null) => this.setState({ registeredStatus });
62

63
64
  removeVacancyApplication() {
    this.setState({ deleteLoading: true });
65
    Server.delete(`/students/${this.props.user.data.student.id}/applied-vacancies/${this.props.data.id}/`).then(() => {
66
      this.modalAlert.open('Pendaftaran Berhasil Dibatalkan', 'Pendaftaran anda berhasil dihapus dari sistem\n');
Zamil Majdy's avatar
Zamil Majdy committed
67
      this.setState({ registeredStatus: null, deleteLoading: false });
68
69
    }, () => {
      this.modalAlert.open('Permintaan Gagal', 'Maaf permintaan anda gagal diproses sistem. Harap ulangi pendaftaran atau hubungi administrator\n');
70
      this.setState({ deleteLoading: false });
71
72
73
74
75
76
77
78
79
80
81
82
    });
  }

  openConfirmationModal() {
    this.confirmationModal.open(
      'Batalkan Pendaftaran?',
      'Aksi ini tidak dapat direka ulang. Pastikan anda benar-benar ingin membatalkan pendaftaran',
      'trash',
      this.removeVacancyApplication,
    );
  }

83
  generateAction() {
84
85
86
    const applyModal = (
      <ApplyModal
        updateStatus={this.updateStatus}
Zamil Majdy's avatar
Zamil Majdy committed
87
        active={this.state.registeredStatus === null}
88
89
90
91
92
93
94
95
96
97
        data={{
          header: this.props.data.name,
          description: this.props.data.description,
          id: this.props.data.id,
        }}
        resume={this.props.user.data.student.resume}
        buttonTitle="Detail"
        studentId={this.props.user.data.student.id}
      />
    );
98

99
    const cancelButton = <Button loading={this.state.deleteLoading} floated="right" color="red" onClick={this.openConfirmationModal}>Batal</Button>;
100
    const rejectedButton =
Zamil Majdy's avatar
Zamil Majdy committed
101
      <Button floated="right" color="red" disabled>{Vacancy.APPLICATION_STATUS_TEXT[this.state.registeredStatus]}</Button>;
102
    const acceptedButton =
Zamil Majdy's avatar
Zamil Majdy committed
103
      <Button floated="right" color="blue" disabled>{Vacancy.APPLICATION_STATUS_TEXT[this.state.registeredStatus]}</Button>;
104

Zamil Majdy's avatar
Zamil Majdy committed
105
    if (this.state.registeredStatus == null) {
106
      return applyModal;
Zamil Majdy's avatar
Zamil Majdy committed
107
    } else if (this.state.registeredStatus === Vacancy.APPLICATION_STATUS.REJECTED) {
108
      return rejectedButton;
Zamil Majdy's avatar
Zamil Majdy committed
109
    } else if (this.state.registeredStatus === Vacancy.APPLICATION_STATUS.ACCEPTED) {
110
111
112
      return acceptedButton;
    }
    return cancelButton;
113
114
  }

115
116
  render() {
    return (
117
      <Item className="applicantItems">
118
119
        <ConfirmationModal ref={(modal) => { this.confirmationModal = modal; }} />
        <ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
120
        <Item.Image size="small" src={this.props.data.company.logo ? this.props.data.company.logo : defaultImage} />
121
        <Item.Content verticalAlign="middle" style={{ wordWrap: 'break-word', width: '100%' }} >
122
          <Item.Extra>
123
124
125
126
            <Grid.Row>
              <Grid.Column floated="left">
                <h4>{ this.props.data.name }</h4>
                { this.props.data.company.name }<br />
127
128
                { this.props.data.company.address }<br /><br />
                <b>{`Ditutup ${moment(moment(this.props.data.close_time)).fromNow()}`}</b>
129
130
131
132
133
134
135
136
137
138
              </Grid.Column>
              <Grid.Column floated="right" >
                <Grid.Row textAlign="center">
                  <Rating icon="star" onRate={this.bookmark} size="massive" defaultRating={this.props.bookmarked} maxRating={1} />
                </Grid.Row>
                <Grid.Row>
                  { this.generateAction() }
                </Grid.Row>
              </Grid.Column>
            </Grid.Row>
139
140
141
142
143
          </Item.Extra>
        </Item.Content>
      </Item>
    );
  }
144
}