Fakultas Ilmu Komputer UI

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

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

  static defaultProps = {
18
    items: [],
19
20
  };

21
22
  constructor(props) {
    super(props);
M. Reza Qorib's avatar
M. Reza Qorib committed
23
    /* istanbul ignore next */
24
25
26
27
28
    this.state = {
      vacancies: this.props.items,
      bookmarkList: [],
      appliedList: [],
      loading: true,
29
30
31
32
33
34
35
36
      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
37
38
39
40
41
42
      vacancyStateFilter: 0,
      vacancyStateFilterBy: [
        { key: 0, text: 'Semua', value: 0 },
        { key: 1, text: 'Masih Menerima', value: 1 },
        { key: 2, text: 'Sudah Tutup', value: 2 },
      ],
Fadhlan Hazmi's avatar
Fadhlan Hazmi committed
43
44
45
46
47
      sort: '',
      sortBy: [
        { key: 'NAME-ASC', text: 'Nama (Ascending)', value: 'NAME-ASC' },
        { key: 'NAME-DESC', text: 'Nama (Descending)', value: 'NAME-DESC' },
      ],
48
    };
49
    this.generateVacancies = this.generateVacancies.bind(this);
50
    this.updateStatus = this.updateStatus.bind(this);
51
    this.handleChangeSalaryFilter = this.handleChangeSalaryFilter.bind(this);
52
53
54
    this.handleChangeVacancyStateFilter = this.handleChangeVacancyStateFilter.bind(
      this,
    );
Fadhlan Hazmi's avatar
Fadhlan Hazmi committed
55
    this.handleChangeSortVacancy = this.handleChangeSortVacancy.bind(this);
56
  }
57

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

Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
  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);
        }),
    );
82

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

    return filteredVacancies;
109
  };
110

Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
111
  filterVacanciesBasedOnVacancyStatus = (vacancies) => {
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
112
    const vacancyStateFilter = this.state.vacancyStateFilter;
Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
113
114
    let filteredVacancies = vacancies;
    if (vacancyStateFilter === 1) {
115
116
117
      filteredVacancies = filteredVacancies.filter(
        (vacancy) => vacancy.props.data.close_time >= moment().format(),
      );
Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
118
    } else if (vacancyStateFilter === 2) {
119
120
121
      filteredVacancies = filteredVacancies.filter(
        (vacancy) => vacancy.props.data.close_time < moment().format(),
      );
Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
122
123
124
    }

    return filteredVacancies;
125
  };
Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
126

Fadhlan Hazmi's avatar
Fadhlan Hazmi committed
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
  sortVacancies = (vacancies) => {
    switch (this.state.sort) {
      case 'NAME-ASC':
        return vacancies.sort((vac1, vac2) => {
          return vac1.props.data.name.localeCompare(vac2.props.data.name);
        });
      case 'NAME-DESC':
        return vacancies.sort((vac1, vac2) => {
          return vac2.props.data.name.localeCompare(vac1.props.data.name);
        });
      default:
        return vacancies;
    }
  };

142
143
  handleChangeSalaryFilter = (e, data) => {
    this.setState({ salaryFilter: data.value });
144
  };
145

Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
146
147
  handleChangeVacancyStateFilter = (e, data) => {
    this.setState({ vacancyStateFilter: data.value });
148
  };
Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
149

Fadhlan Hazmi's avatar
Fadhlan Hazmi committed
150
151
152
153
  handleChangeSortVacancy = (e, data) => {
    this.setState({ sort: data.value });
  };

154
  generateVacancies() {
155
    if (this.props.user.role === 'student') {
156
157
158
159
160
161
162
163
164
165
166
      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}
        />
      ));
Fadhlan Hazmi's avatar
Fadhlan Hazmi committed
167
      vacancies = this.sortVacancies(vacancies);
168
      vacancies = this.filterVacanciesBasedOnSalary(vacancies);
Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
169
      vacancies = this.filterVacanciesBasedOnVacancyStatus(vacancies);
Fadhlan Hazmi's avatar
Fadhlan Hazmi committed
170
171
172
173
174
175
176
177
178
179
180
181
      if (vacancies.length === 0) {
        return (
          <Item className="vacancyItems">
            <Grid.Row>
              <Container textAlign="center">
                <p>Tidak ada</p>
                <br />
              </Container>
            </Grid.Row>
          </Item>
        );
      }
182
      return vacancies;
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
183
184
185
186
    } else if (
      (this.props.user.role === 'admin' &&
        this.props.user.data.company != null) ||
      this.props.user.role === 'company'
187
188
    ) {
      return this.state.vacancies.map((vacancy) => (
Zamil Majdy's avatar
Zamil Majdy committed
189
190
191
192
193
194
195
        <Item.Group key={vacancy.id} relaxed style={{ width: '100%' }}>
          <CompanyVacancy
            key={vacancy.id}
            data={vacancy}
            deleteCallback={() => this.deleteVacancy(vacancy.id)}
          />
        </Item.Group>
196
      ));
197
    }
198

199
    return this.state.vacancies.map((vacancy) => (
200
201
202
203
      <AdminVacancy
        key={vacancy.id}
        data={vacancy}
        updateStatus={this.updateStatus}
204
205
      />
    ));
206
207
  }

208
  render = () => (
209
    <div>
210
      <Dropdown
211
212
213
214
215
216
        placeholder="Filter Berdasarkan Gaji"
        className="dropdownApplicant"
        selection
        options={this.state.salaryFilterBy}
        onChange={this.handleChangeSalaryFilter}
      />
Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
217
      <Dropdown
218
219
220
221
222
223
        placeholder="Filter Berdasarkan Batas Daftar Lowongan"
        className="dropdownApplicant"
        selection
        options={this.state.vacancyStateFilterBy}
        onChange={this.handleChangeVacancyStateFilter}
      />
Fadhlan Hazmi's avatar
Fadhlan Hazmi committed
224
225
226
227
228
229
230
      <Dropdown
        placeholder="Urutkan Berdasarkan"
        className="dropdownApplicant"
        selection
        options={this.state.sortBy}
        onChange={this.handleChangeSortVacancy}
      />
Zamil Majdy's avatar
Zamil Majdy committed
231
      <Grid container columns="eleven" doubling style={{ display: 'block' }}>
232
        <Item.Group relaxed style={{ width: '100%' }}>
233
          {this.generateVacancies()}
234
        </Item.Group>
235
      </Grid>
236
    </div>
237
  );
238
}