From c7d185e6150902d28d252c1682dd6fc3cb8eee70 Mon Sep 17 00:00:00 2001
From: Ivana Irene Thomas <ivanaairenee@gmail.com>
Date: Tue, 12 Nov 2019 21:59:21 +0700
Subject: [PATCH] add filter based on salary on vacancy list
---
assets/js/components/VacancyList.jsx | 41 ++++++++++++++++++++++++++--
1 file changed, 39 insertions(+), 2 deletions(-)
diff --git a/assets/js/components/VacancyList.jsx b/assets/js/components/VacancyList.jsx
index 65040f5f..164a7eb5 100755
--- a/assets/js/components/VacancyList.jsx
+++ b/assets/js/components/VacancyList.jsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Item, Grid, Container } from 'semantic-ui-react';
+import { Item, Grid, Container, Dropdown } from 'semantic-ui-react';
import Vacancy from './Vacancy';
import CompanyVacancy from './CompanyVacancy';
import AdminVacancy from './AdminVacancy';
@@ -26,9 +26,18 @@ export default class VacancyList extends React.Component {
bookmarkList: [],
appliedList: [],
loading: true,
+ 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 },
+ ],
};
this.generateVacancies = this.generateVacancies.bind(this);
this.updateStatus = this.updateStatus.bind(this);
+ this.handleChangeSalaryFilter = this.handleChangeSalaryFilter.bind(this);
}
updateStatus(id, status) {
@@ -49,6 +58,26 @@ export default class VacancyList extends React.Component {
this.modalAlert.open('Gagal Menghapus Lowongan', r.error);
}));
+ filterVacanciesBasedOnSalary = (vacancies) => {
+ const salaryFilter = this.state.salaryFilter;
+ let filteredVacancies = vacancies;
+ if (salaryFilter === 1) {
+ filteredVacancies = filteredVacancies.filter((vacancy) => vacancy.props.data.salary < 1000000);
+ } else if (salaryFilter === 2) {
+ filteredVacancies = filteredVacancies.filter((vacancy) => vacancy.props.data.salary >= 1000000 && vacancy.props.data.salary < 3000000);
+ } else if (salaryFilter === 3) {
+ filteredVacancies = filteredVacancies.filter((vacancy) => vacancy.props.data.salary >= 3000000 && vacancy.props.data.salary < 5000000);
+ } else if (salaryFilter === 4){
+ filteredVacancies = filteredVacancies.filter((vacancy) => vacancy.props.data.salary >= 5000000);
+ }
+
+ return filteredVacancies;
+ }
+
+ handleChangeSalaryFilter = (e, data) => {
+ this.setState({ salaryFilter: data.value });
+ }
+
generateVacancies() {
if (this.state.vacancies.length === 0) {
return (
@@ -62,7 +91,7 @@ export default class VacancyList extends React.Component {
);
}
if (this.props.user.role === 'student') {
- const vacancies = this.state.vacancies.map(vacancy =>
+ let vacancies = this.state.vacancies.map(vacancy =>
(
<Vacancy
key={vacancy.id}
@@ -84,6 +113,7 @@ export default class VacancyList extends React.Component {
return vac2.props.data.name.localeCompare(vac1.props.data.name);
});
}
+ vacancies = this.filterVacanciesBasedOnSalary(vacancies);
return vacancies;
} else if ((this.props.user.role === 'admin' && this.props.user.data.company != null)
|| this.props.user.role === 'company') {
@@ -110,6 +140,13 @@ export default class VacancyList extends React.Component {
render = () => (
<div>
+ <Dropdown
+ placeholder="Filter Berdasarkan Gaji"
+ className="dropdownApplicant"
+ selection
+ options={this.state.salaryFilterBy}
+ onChange={this.handleChangeSalaryFilter}
+ />
<Grid container columns="eleven" doubling style={{ display: 'block' }}>
<Item.Group relaxed style={{ width: '100%' }}>
{ this.generateVacancies() }
--
GitLab