Fakultas Ilmu Komputer UI

VacancyList.jsx 7.68 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
      vacancyStateFilter: 0,
      vacancyStateFilterBy: [
        { key: 0, text: 'Semua', value: 0 },
        { key: 1, text: 'Masih Menerima', value: 1 },
        { key: 2, text: 'Sudah Tutup', value: 2 },
42
43
        { key: 3, text: 'Belum Terpenuhi', value: 3},
        { key: 4, text: 'Sudah Terpenuhi', value: 4},
Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
44
      ],
Fadhlan Hazmi's avatar
Fadhlan Hazmi committed
45
46
47
48
49
      sort: '',
      sortBy: [
        { key: 'NAME-ASC', text: 'Nama (Ascending)', value: 'NAME-ASC' },
        { key: 'NAME-DESC', text: 'Nama (Descending)', value: 'NAME-DESC' },
      ],
50
    };
51
    this.generateVacancies = this.generateVacancies.bind(this);
52
    this.updateStatus = this.updateStatus.bind(this);
53
    this.handleChangeSalaryFilter = this.handleChangeSalaryFilter.bind(this);
54
55
56
    this.handleChangeVacancyStateFilter = this.handleChangeVacancyStateFilter.bind(
      this,
    );
Fadhlan Hazmi's avatar
Fadhlan Hazmi committed
57
    this.handleChangeSortVacancy = this.handleChangeSortVacancy.bind(this);
58
  }
59

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

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

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

    return filteredVacancies;
111
  };
112

Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
113
  filterVacanciesBasedOnVacancyStatus = (vacancies) => {
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
114
    const vacancyStateFilter = this.state.vacancyStateFilter;
Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
115
116
    let filteredVacancies = vacancies;
    if (vacancyStateFilter === 1) {
117
118
119
      filteredVacancies = filteredVacancies.filter(
        (vacancy) => vacancy.props.data.close_time >= moment().format(),
      );
Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
120
    } else if (vacancyStateFilter === 2) {
121
122
123
      filteredVacancies = filteredVacancies.filter(
        (vacancy) => vacancy.props.data.close_time < moment().format(),
      );
124
125
126
127
128
129
130
131
132
133
    } else if (vacancyStateFilter === 3) {
      filteredVacancies = filteredVacancies.filter(
        (vacancy) => vacancy.props.data.total_accepted_applicants 
        < vacancy.props.data.max_accepted_applicants,
      );
    } else if (vacancyStateFilter === 4) {
      filteredVacancies = filteredVacancies.filter(
        (vacancy) => vacancy.props.data.total_accepted_applicants 
        >= vacancy.props.data.max_accepted_applicants,
      );
Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
134
135
136
    }

    return filteredVacancies;
137
  };
Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
138

Fadhlan Hazmi's avatar
Fadhlan Hazmi committed
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
  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;
    }
  };

Hema Mitta Kalyani's avatar
Hema Mitta Kalyani committed
154
  handleChangeSalaryFilter = (data) => {
155
    this.setState({ salaryFilter: data.value });
156
  };
157

Hema Mitta Kalyani's avatar
Hema Mitta Kalyani committed
158
  handleChangeVacancyStateFilter = (data) => {
Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
159
    this.setState({ vacancyStateFilter: data.value });
160
  };
Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
161

Hema Mitta Kalyani's avatar
Hema Mitta Kalyani committed
162
  handleChangeSortVacancy = (data) => {
Fadhlan Hazmi's avatar
Fadhlan Hazmi committed
163
164
165
    this.setState({ sort: data.value });
  };

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

211
    return this.state.vacancies.map((vacancy) => (
212
213
214
215
      <AdminVacancy
        key={vacancy.id}
        data={vacancy}
        updateStatus={this.updateStatus}
216
217
      />
    ));
218
219
  }

220
  render = () => (
221
    <div>
222
      <Dropdown
223
224
225
226
227
228
        placeholder="Filter Berdasarkan Gaji"
        className="dropdownApplicant"
        selection
        options={this.state.salaryFilterBy}
        onChange={this.handleChangeSalaryFilter}
      />
Hilya Auli Fesmia's avatar
Hilya Auli Fesmia committed
229
      <Dropdown
230
231
232
233
234
235
        placeholder="Filter Berdasarkan Batas Daftar Lowongan"
        className="dropdownApplicant"
        selection
        options={this.state.vacancyStateFilterBy}
        onChange={this.handleChangeVacancyStateFilter}
      />
Fadhlan Hazmi's avatar
Fadhlan Hazmi committed
236
237
238
239
240
241
242
      <Dropdown
        placeholder="Urutkan Berdasarkan"
        className="dropdownApplicant"
        selection
        options={this.state.sortBy}
        onChange={this.handleChangeSortVacancy}
      />
Zamil Majdy's avatar
Zamil Majdy committed
243
      <Grid container columns="eleven" doubling style={{ display: 'block' }}>
244
        <Item.Group relaxed style={{ width: '100%' }}>
245
          {this.generateVacancies()}
246
        </Item.Group>
247
      </Grid>
248
    </div>
249
  );
250
}