Fakultas Ilmu Komputer UI

VacancyList.jsx 6.35 KB
Newer Older
1
import React from 'react';
2
import PropTypes from 'prop-types';
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
3
4
5
6
import {
  Item, Grid, Container, Dropdown,
} from 'semantic-ui-react';
import moment from 'moment';
7
import Vacancy from './Vacancy';
8
import CompanyVacancy from './CompanyVacancy';
9
import AdminVacancy from './AdminVacancy';
10
import Server from '../lib/Server';
11
12
13

export default class VacancyList extends React.Component {
  static propTypes = {
14
15
16
17
    user: PropTypes.object.isRequired,
    userId: PropTypes.number.isRequired,
    items: PropTypes.array,
    sort: PropTypes.string.isRequired,
18
19
20
  };

  static defaultProps = {
21
    items: [],
22
23
  };

24
25
  constructor(props) {
    super(props);
M. Reza Qorib's avatar
M. Reza Qorib committed
26
    /* istanbul ignore next */
27
28
29
30
31
    this.state = {
      vacancies: this.props.items,
      bookmarkList: [],
      appliedList: [],
      loading: true,
32
33
34
35
36
37
38
39
      salaryFilter: 0,
      salaryFilterBy: [
        { key: 0, text: 'Semua', value: 0 },
        { key: 1, text: '< 1 juta', value: 1 },
        { key: 2, text: '1-3 juta', value: 2 },
        { key: 3, text: '3-5 juta', value: 3 },
        { key: 4, text: '> 5 juta', value: 4 },
      ],
Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
40
41
42
43
44
45
      vacancyStateFilter: 0,
      vacancyStateFilterBy: [
        { key: 0, text: 'Semua', value: 0 },
        { key: 1, text: 'Masih Menerima', value: 1 },
        { key: 2, text: 'Sudah Tutup', value: 2 },
      ],
46
    };
47
    this.generateVacancies = this.generateVacancies.bind(this);
48
    this.updateStatus = this.updateStatus.bind(this);
49
    this.handleChangeSalaryFilter = this.handleChangeSalaryFilter.bind(this);
50
51
52
    this.handleChangeVacancyStateFilter = this.handleChangeVacancyStateFilter.bind(
      this,
    );
53
  }
54

55
56
57
58
59
60
61
  updateStatus(id, status) {
    const obj = [];
    this.state.vacancies.map((vacancy) => {
      if (vacancy.id !== id) return obj.push(vacancy);
      return null;
    });
    this.setState({ vacancies: obj });
62
63
  }

Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
64
65
66
67
68
69
70
71
72
73
74
75
76
  deleteVacancy = (id) => Server.delete(`/vacancies/${id}/`, this.state).then(
    () => {
      this.modalAlert.open('Hapus Lowongan', 'Lowongan berhasil dihapus');
      const newVacancies = [];
      this.state.vacancies.map(
        (vacancy) => vacancy.id !== id && newVacancies.push(vacancy),
      );
      this.setState({ vacancies: newVacancies });
    },
    (error) => error.then((r) => {
      this.modalAlert.open('Gagal Menghapus Lowongan', r.error);
    }),
  );
77

78
  filterVacanciesBasedOnSalary = (vacancies) => {
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
79
    const { salaryFilter } = this.state;
80
81
    let filteredVacancies = vacancies;
    if (salaryFilter === 1) {
82
83
84
      filteredVacancies = filteredVacancies.filter(
        (vacancy) => vacancy.props.data.salary < 1000000,
      );
85
    } else if (salaryFilter === 2) {
86
      filteredVacancies = filteredVacancies.filter(
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
87
88
        (vacancy) => vacancy.props.data.salary >= 1000000
          && vacancy.props.data.salary < 3000000,
89
      );
90
    } else if (salaryFilter === 3) {
91
      filteredVacancies = filteredVacancies.filter(
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
92
93
        (vacancy) => vacancy.props.data.salary >= 3000000
          && vacancy.props.data.salary < 5000000,
94
95
96
97
98
      );
    } else if (salaryFilter === 4) {
      filteredVacancies = filteredVacancies.filter(
        (vacancy) => vacancy.props.data.salary >= 5000000,
      );
99
100
101
    }

    return filteredVacancies;
102
  };
103

Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
104
  filterVacanciesBasedOnVacancyStatus = (vacancies) => {
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
105
    const { vacancyStateFilter } = this.state;
Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
106
107
    let filteredVacancies = vacancies;
    if (vacancyStateFilter === 1) {
108
109
110
      filteredVacancies = filteredVacancies.filter(
        (vacancy) => vacancy.props.data.close_time >= moment().format(),
      );
Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
111
    } else if (vacancyStateFilter === 2) {
112
113
114
      filteredVacancies = filteredVacancies.filter(
        (vacancy) => vacancy.props.data.close_time < moment().format(),
      );
Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
115
116
117
    }

    return filteredVacancies;
118
  };
Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
119

120
121
  handleChangeSalaryFilter = (e, data) => {
    this.setState({ salaryFilter: data.value });
122
  };
123

Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
124
125
  handleChangeVacancyStateFilter = (e, data) => {
    this.setState({ vacancyStateFilter: data.value });
126
  };
Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
127

128
  generateVacancies() {
Zamil Majdy's avatar
Zamil Majdy committed
129
130
131
132
133
    if (this.state.vacancies.length === 0) {
      return (
        <Item className="vacancyItems">
          <Grid.Row>
            <Container textAlign="center">
134
135
              <p>Tidak ada</p>
              <br />
Zamil Majdy's avatar
Zamil Majdy committed
136
137
138
139
140
            </Container>
          </Grid.Row>
        </Item>
      );
    }
141
    if (this.props.user.role === 'student') {
142
143
144
145
146
147
148
149
150
151
152
      let vacancies = this.state.vacancies.map((vacancy) => (
        <Vacancy
          key={vacancy.id}
          status={vacancy.status}
          user={this.props.user}
          bookmarked={vacancy.bookmarked ? 1 : 0}
          data={vacancy}
          studentId={this.props.userId}
          salary={this.props.salary}
        />
      ));
153
      if (this.props.sort === 'ASC') {
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
154
155
156
        return vacancies.sort((vac1, vac2) => vac1.props.data.name.localeCompare(vac2.props.data.name));
      } if (this.props.sort === 'DESC') {
        return vacancies.sort((vac1, vac2) => vac2.props.data.name.localeCompare(vac1.props.data.name));
157
      }
158
      vacancies = this.filterVacanciesBasedOnSalary(vacancies);
Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
159
      vacancies = this.filterVacanciesBasedOnVacancyStatus(vacancies);
160
      return vacancies;
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
161
162
163
164
    } if (
      (this.props.user.role === 'admin'
        && this.props.user.data.company != null)
      || this.props.user.role === 'company'
165
166
    ) {
      return this.state.vacancies.map((vacancy) => (
Zamil Majdy's avatar
Zamil Majdy committed
167
168
169
170
171
172
173
        <Item.Group key={vacancy.id} relaxed style={{ width: '100%' }}>
          <CompanyVacancy
            key={vacancy.id}
            data={vacancy}
            deleteCallback={() => this.deleteVacancy(vacancy.id)}
          />
        </Item.Group>
174
      ));
175
    }
176

177
    return this.state.vacancies.map((vacancy) => (
178
179
180
181
      <AdminVacancy
        key={vacancy.id}
        data={vacancy}
        updateStatus={this.updateStatus}
182
183
      />
    ));
184
185
  }

186
  render = () => (
187
    <div>
188
      <Dropdown
189
190
191
192
193
194
        placeholder="Filter Berdasarkan Gaji"
        className="dropdownApplicant"
        selection
        options={this.state.salaryFilterBy}
        onChange={this.handleChangeSalaryFilter}
      />
Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
195
      <Dropdown
196
197
198
199
200
201
        placeholder="Filter Berdasarkan Batas Daftar Lowongan"
        className="dropdownApplicant"
        selection
        options={this.state.vacancyStateFilterBy}
        onChange={this.handleChangeVacancyStateFilter}
      />
Zamil Majdy's avatar
Zamil Majdy committed
202
      <Grid container columns="eleven" doubling style={{ display: 'block' }}>
203
        <Item.Group relaxed style={{ width: '100%' }}>
204
          {this.generateVacancies()}
205
        </Item.Group>
206
      </Grid>
207
    </div>
208
  );
209
}