Fakultas Ilmu Komputer UI

Skip to content

GitLab

Commit fcd5a4a7 authored by Reza Qorib's avatar Reza Qorib
Browse files

Merge branch 'Fixes/Pagination' into 'develop' 

Fixes/pagination

See merge request !15
parents c81da584 92640561
Expand all Hide whitespace changes
Inline Side-by-side
assets/css/custom.css
View file @ fcd5a4a7
......@@ -75,8 +75,8 @@ padding-right:15%;
}
.formLogin{
margin: 30px auto 0;
width: 430px;
/*margin: auto;*/
/*width: 430px;*/
}
.registerModal{
......
assets/js/ApplicantPage.jsx
View file @ fcd5a4a7
......@@ -2,6 +2,7 @@ import React from 'react';
import Tabs from './components/Tabs';
import ApplicantList from './components/ApplicantList';
import Applicant from './components/Applicant';
import Pagination from './components/Pagination';
export default class ApplicantPage extends React.Component {
......@@ -24,11 +25,49 @@ export default class ApplicantPage extends React.Component {
const company = this.props.user.data.company;
return (
<Tabs selected={0}>
<ApplicantList label="Lamaran Baru" key={1} companyId={company.id} url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.NEW}`} status={Applicant.APPLICATION_STATUS.NEW} />
<ApplicantList label="Lamaran Dibaca" key={2} companyId={company.id} url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.READ}`} status={Applicant.APPLICATION_STATUS.READ} />
<ApplicantList label="Lamaran Ditandai" key={3} companyId={company.id} url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.BOOKMARKED}`} status={Applicant.APPLICATION_STATUS.BOOKMARKED} />
<ApplicantList label="Lamaran Diterima" key={4} companyId={company.id} url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.ACCEPTED}`} status={Applicant.APPLICATION_STATUS.ACCEPTED} />
<ApplicantList label="Lamaran Ditolak" key={5} companyId={company.id} url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.REJECTED}`} status={Applicant.APPLICATION_STATUS.REJECTED} />
<Pagination
key={1}
url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.NEW}`}
label="Lamaran Baru"
child={
<ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.NEW} />
}
/>
<Pagination
key={2}
url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.READ}`}
label="Lamaran Dibaca"
child={
<ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.READ} />
}
/>
<Pagination
key={3}
url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.BOOKMARKED}`}
label="Lamaran Ditandai"
child={
<ApplicantList
companyId={company.id}
status={Applicant.APPLICATION_STATUS.BOOKMARKED}
/>
}
/>
<Pagination
key={4}
url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.ACCEPTED}`}
label="Lamaran Diterima"
child={
<ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.ACCEPTED} />
}
/>
<Pagination
key={5}
url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.REJECTED}`}
label="Lamaran Ditolak"
child={
<ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.REJECTED} />
}
/>
</Tabs>
);
}
......
assets/js/CompanyPage.jsx
View file @ fcd5a4a7
......@@ -3,6 +3,7 @@ import { Button } from 'semantic-ui-react';
import Tabs from './components/Tabs';
import CompanyList from './components/CompanyList';
import Company from './components/Company';
import Pagination from './components/Pagination';
export default class CompanyPage extends React.Component {
......@@ -19,10 +20,38 @@ export default class CompanyPage extends React.Component {
<Button onClick={this.handleClick} icon="dashboard" labelPosition="left" color="facebook" content="Buka Menu Administrasi" />
</div>
<Tabs selected={0}>
<CompanyList label="Baru" key={1} url={`/companies/?status=${Company.COMPANY_STATUS.NEW}`} status={Company.COMPANY_STATUS.NEW} />
<CompanyList label="Terverifikasi" key={2} url={`/companies/?status=${Company.COMPANY_STATUS.VERIFIED}`} status={Company.COMPANY_STATUS.VERIFIED} />
<CompanyList label="Ditolak" key={3} url={`/companies/?status=${Company.COMPANY_STATUS.UNVERIFIED}`} status={Company.COMPANY_STATUS.UNVERIFIED} />
<CompanyList label="Semua Perusahaan" key={4} url={'/companies/'} status={Company.COMPANY_STATUS.ALL} />
<Pagination
key={1}
url={`/companies/?status=${Company.COMPANY_STATUS.NEW}`}
label="Baru"
child={
<CompanyList status={Company.COMPANY_STATUS.NEW} />
}
/>
<Pagination
key={2}
url={`/companies/?status=${Company.COMPANY_STATUS.VERIFIED}`}
label="Terverifikasi"
child={
<CompanyList status={Company.COMPANY_STATUS.VERIFIED} />
}
/>
<Pagination
key={3}
url={`/companies/?status=${Company.COMPANY_STATUS.UNVERIFIED}`}
label="Ditolak"
child={
<CompanyList status={Company.COMPANY_STATUS.UNVERIFIED} />
}
/>
<Pagination
key={4}
url={'/companies/'}
label="Semua Perusahaan"
child={
<CompanyList status={Company.COMPANY_STATUS.ALL} />
}
/>
</Tabs>
</div>
);
......
assets/js/Login.jsx
View file @ fcd5a4a7
......@@ -28,15 +28,15 @@ export default class Login extends React.Component {
</Header>
</div>
<Grid stackable columns={2} relaxed>
<Grid.Column>
<Grid stackable={true} columns={2} padded style={{ display: 'flex', justifyContent: 'center' }}>
<Grid.Column width="seven">
<Segment basic>
<LoginForm type="sso-ui" header="SSO Login" imgSrc="UI.png" imgSize="tiny" />
{this.props.children}
</Segment>
</Grid.Column>
<Grid.Column>
<Grid.Column width="seven">
<Segment basic>
<LoginForm type="company" header="Company Login" imgSrc="logo.png" imgSize="small" />
{this.props.children}
......
assets/js/VacancyPage.jsx
View file @ fcd5a4a7
......@@ -2,6 +2,7 @@ import React from 'react';
import Tabs from './components/Tabs';
import Pane from './components/Pane';
import VacancyList from './components/VacancyList';
import Pagination from './components/Pagination';
export default class VacancyPage extends React.Component {
......@@ -34,32 +35,59 @@ export default class VacancyPage extends React.Component {
return (
<Tabs selected={0}>
<Pane label="Semua Lowongan" >
<VacancyList
<Pagination
key={1}
userId={this.state.id}
url="/vacancies/"
child={
<VacancyList
user={this.props.user}
key={1}
userId={this.state.id}
/>
}
/>
</Pane>
<Pane label="Lamaran saya" >
<VacancyList
<Pagination
key={2}
userId={this.state.id}
status="applied"
url={`/students/${this.state.id}/applied-vacancies/`}
child={
<VacancyList
user={this.props.user}
key={2}
userId={this.state.id}
/>
}
/>
</Pane>
<Pane label="Lamaran Ditandai" >
<VacancyList
<Pagination
key={3}
userId={this.state.id}
url={`/students/${this.state.id}/bookmarked-vacancies/`}
child={
<VacancyList
key={3}
user={this.props.user}
userId={this.state.id}
/>
}
/>
</Pane>
</Tabs>
);
} else if (this.props.user.role === 'company' || this.props.user.role === 'admin') {
return (
<VacancyList key={1} userId={this.state.id} url={`/companies/${this.state.id}/vacancies/`} type="company" />
<Pagination
url={`/companies/${this.state.id}/vacancies/`}
child={
<VacancyList
key={1}
user={this.props.user}
userId={this.state.id}
/>
}
error="Anda belum diverifikasi. Harap hubungi admin"
/>
);
}
......
assets/js/__test__/components/ApplicantList-test.jsx
View file @ fcd5a4a7
......@@ -69,14 +69,14 @@ describe('ApplicantList', () => {
it('renders without problem', () => {
const applicantList = ReactTestUtils.renderIntoDocument(
<ApplicantList status={Applicant.APPLICATION_STATUS.ACCEPTED} url="test" />);
<ApplicantList status={Applicant.APPLICATION_STATUS.ACCEPTED} />);
expect(applicantList).to.exist;
});
it('can update status', () => {
const applicantList = ReactTestUtils.renderIntoDocument(
<ApplicantList status={Applicant.APPLICATION_STATUS.ACCEPTED} url="test" />);
applicantList.setState({applications : response });
<ApplicantList status={Applicant.APPLICATION_STATUS.ACCEPTED} />);
applicantList.setState({applications: response });
expect(applicantList.state).to.not.equal(response);
applicantList.updateStatus(1, Applicant.APPLICATION_STATUS.BOOKMARKED);
......
assets/js/__test__/components/CompanyList-test.jsx
View file @ fcd5a4a7
......@@ -38,13 +38,13 @@ describe('CompanyList', () => {
it('renders without problem', () => {
const companyList = ReactTestUtils.renderIntoDocument(
<CompanyList status={Company.COMPANY_STATUS.VERIFIED} url="test" />);
<CompanyList status={Company.COMPANY_STATUS.VERIFIED} items={response} />);
expect(companyList).to.exist;
});
it('can update status', () => {
const companyList = ReactTestUtils.renderIntoDocument(
<CompanyList status={Company.COMPANY_STATUS.VERIFIED} url="test" />);
<CompanyList status={Company.COMPANY_STATUS.VERIFIED} items={response} />);
companyList.setState({ companies: response });
companyList.generateCompanies();
......
assets/js/__test__/components/Pagination-test.jsx 0 → 100644
View file @ fcd5a4a7
/* eslint-disable no-unused-expressions */
import React from 'react';
import ReactTestUtils from 'react-addons-test-utils';
import fetchMock from 'fetch-mock';
import Pagination from '../../components/Pagination';
import Logger from '../../lib/Logger';
describe('Pagination', () => {
const response = {
count: 4,
next: 'next',
previous: 'prev',
results: [{
close_time: '2019-03-28T05:55:42Z',
company: {
address: 'kebayoran baru',
id: 1,
logo: null,
name: 'tutup lapak',
},
created: '2017-03-28T07:05:47.128672Z',
description: 'Lorem ipsum dolbh.',
id: 1,
name: 'Software Engineer',
open_time: '2017-03-28T05:55:38Z',
updated: '2017-03-28T07:34:13.122093Z',
verified: true,
}, {
close_time: '2019-03-28T05:55:42Z',
company: {
address: 'kebayoran baru',
id: 2,
logo: null,
name: 'tutup lapak',
},
created: '2017-03-28T07:05:47.128672Z',
description: 'Lorem ipsum dolbh.',
id: 2,
name: 'Software Engineer',
open_time: '2017-03-28T05:55:38Z',
updated: '2017-03-28T07:34:13.122093Z',
verified: true,
},
],
};
const response2 = {
count: 4,
next: null,
previous: null,
results: [{
close_time: '2019-03-28T05:55:42Z',
company: {
address: 'kebayoran baru',
id: 1,
logo: null,
name: 'tutup lapak',
},
created: '2017-03-28T07:05:47.128672Z',
description: 'Lorem ipsum dolbh.',
id: 1,
name: 'Software Engineer',
open_time: '2017-03-28T05:55:38Z',
updated: '2017-03-28T07:34:13.122093Z',
verified: true,
}, {
close_time: '2019-03-28T05:55:42Z',
company: {
address: 'kebayoran baru',
id: 2,
logo: null,
name: 'tutup lapak',
},
created: '2017-03-28T07:05:47.128672Z',
description: 'Lorem ipsum dolbh.',
id: 2,
name: 'Software Engineer',
open_time: '2017-03-28T05:55:38Z',
updated: '2017-03-28T07:34:13.122093Z',
verified: true,
},
],
};
it('renders without problem', () => {
fetchMock.get('*', response);
const pagination = ReactTestUtils.renderIntoDocument(
<Pagination child={<div />} url="test" />);
expect(pagination).to.exist;
fetchMock.restore();
});
it('renders without problem when it is the first or last page', () => {
fetchMock.get('*', response2);
const pagination = ReactTestUtils.renderIntoDocument(
<Pagination child={<div />} url="test" />);
expect(pagination).to.exist;
fetchMock.restore();
});
it('get items without problem', () => {
fetchMock.get('*', response);
const pagination = ReactTestUtils.renderIntoDocument(
<Pagination child={<div />} url="test" />);
pagination.getItemsData().then(() => {
expect(JSON.stringify(pagination.state.items)).to.equal(JSON.stringify(response.items));
});
fetchMock.restore();
});
it('renders without problem when failed getting data', () => {
fetchMock.get('*', 404);
const pagination = ReactTestUtils.renderIntoDocument(
<Pagination child={<div />} url="test" />);
expect(pagination).to.exist;
fetchMock.restore();
});
it('can go prev without problem', () => {
fetchMock.restore();
fetchMock.get('*', response);
const pagination = ReactTestUtils.renderIntoDocument(
<Pagination child={<div />} url="test" />);
pagination.getItemsData().then(() => {
const prev = ReactTestUtils.scryRenderedDOMComponentsWithTag(pagination, 'Menu.Item')[0];
ReactTestUtils.Simulate.click(prev);
});
pagination.handlePrev();
fetchMock.restore();
});
it('can refresh without problem', () => {
fetchMock.get('*', response);
const pagination = ReactTestUtils.renderIntoDocument(
<Pagination child={<div />} url="test" />);
pagination.getItemsData().then(() => {
const next = ReactTestUtils.scryRenderedDOMComponentsWithTag(pagination, 'Menu.Item')[1];
ReactTestUtils.Simulate.click(next);
});
pagination.refresh();
fetchMock.restore();
});
it('can go next without problem', () => {
fetchMock.get('*', response);
const pagination = ReactTestUtils.renderIntoDocument(
<Pagination child={<div />} url="test" />);
pagination.getItemsData().then(() => {
const next = ReactTestUtils.scryRenderedDOMComponentsWithTag(pagination, 'Menu.Item')[2];
ReactTestUtils.Simulate.click(next);
});
pagination.handleNext();
fetchMock.restore();
});
it('cannot go next or prev without problem', () => {
fetchMock.get('*', response2);
const pagination = ReactTestUtils.renderIntoDocument(
<Pagination child={<div />} url="test" />);
pagination.getItemsData().then(() => {
const next = ReactTestUtils.scryRenderedDOMComponentsWithTag(pagination, 'Menu.Item')[2];
ReactTestUtils.Simulate.click(next);
});
pagination.state.first = true;
pagination.state.last = true;
pagination.handleNext();
pagination.handlePrev();
fetchMock.restore();
});
});
assets/js/__test__/components/Vacancy-test.jsx
View file @ fcd5a4a7
......@@ -40,34 +40,85 @@ describe('Vacancy', () => {
verified: true,
};
const studentUser = {
role: 'company',
data: {
url: 'http://localhost:8001/api/users/8/',
username: 'Tutuplapak',
email: '',
is_staff: false,
student: {
id: 3,
user: {
url: 'http://localhost:8000/api/users/9/',
username: 'muhammad.reza42',
email: 'muhammad.reza42@ui.ac.id',
is_staff: false,
},
name: 'Muhammad R.',
created: '2017-03-28T13:33:46.147241Z',
updated: '2017-03-28T13:33:46.148248Z',
npm: 1406543593,
resume: null,
phone_number: null,
birth_place: null,
birth_date: null,
major: null,
batch: null,
show_resume: false,
bookmarked_vacancies: [
3,
2,
],
applied_vacancies: [
3,
1,
],
},
},
};
it('renders with null picture and apply button without problem', () => {
const lowongan = ReactTestUtils.renderIntoDocument(
<Vacancy status="Daftar" data={response} />);
<Vacancy status={0} user={studentUser} data={response} />);
expect(lowongan).to.exist;
});
it('renders with null picture and cancel button without problem', () => {
const lowongan = ReactTestUtils.renderIntoDocument(
<Vacancy status="Batal" data={response} />);
<Vacancy status={1} user={studentUser} data={response} />);
expect(lowongan).to.exist;
});
it('renders with picture and apply button without problem', () => {
const lowongan = ReactTestUtils.renderIntoDocument(
<Vacancy status="Daftar" data={response2} />);
<Vacancy status={0} user={studentUser} data={response2} />);
expect(lowongan).to.exist;
});
it('renders with picture and cancel button without problem', () => {
const lowongan = ReactTestUtils.renderIntoDocument(
<Vacancy status="Batal" data={response2} />);
<Vacancy status={2} user={studentUser} data={response2} />);
expect(lowongan).to.exist;
});
it('renders for accepted without problem', () => {
const lowongan = ReactTestUtils.renderIntoDocument(
<Vacancy status={4} user={studentUser} data={response2} />);
expect(lowongan).to.exist;
});
it('renders for rejected without problem', () => {
const lowongan = ReactTestUtils.renderIntoDocument(
<Vacancy status={3} user={studentUser} data={response2} />);
expect(lowongan).to.exist;
});
it('bookmarks without problem', () => {
fetchMock.post('*', response);
const lowongan = ReactTestUtils.renderIntoDocument(
<Vacancy status="Daftar" data={response2} />);
<Vacancy status="Daftar" user={studentUser} data={response2} />);
const response3 = { student: { id: 1, name: 2 } };
expect(lowongan.props.data.id).to.equal(3);
Storage.set('user-data', response3);
......@@ -78,7 +129,7 @@ describe('Vacancy', () => {
it('cancel bookmarks without problem', () => {
fetchMock.delete('*', { data: 'value' });
const lowongan = ReactTestUtils.renderIntoDocument(
<Vacancy status="Daftar" data={response2} bookmarked={1} />);
<Vacancy status="Daftar" user={studentUser} data={response2} bookmarked={1} />);
const response3 = { student: { id: 1, name: 2 } };
lowongan.removeVacancyApplication();
lowongan.openConfirmationModal();
......@@ -92,7 +143,7 @@ describe('Vacancy', () => {
it('cancel bookmarks with problem', () => {
fetchMock.delete('*', 404);
const lowongan = ReactTestUtils.renderIntoDocument(
<Vacancy status="Daftar" data={response2} bookmarked={1} />);
<Vacancy status="Daftar" user={studentUser} data={response2} bookmarked={1} />);
const response3 = { student: { id: 1, name: 2 } };
lowongan.removeVacancyApplication();
expect(lowongan.props.data.id).to.equal(3);
......
assets/js/components/ApplicantList.jsx
View file @ fcd5a4a7
import React from 'react';
import { Item, Grid } from 'semantic-ui-react';
import Applicant from './Applicant';
import Server from '../lib/Server';
export default class ApplicantList extends React.Component {
static propTypes = {
url: React.PropTypes.string.isRequired,
items: React.PropTypes.array,
status: React.PropTypes.number.isRequired,
};
static defaultProps = {
items: [],
};
constructor(props) {
super(props);
/* istanbul ignore next */
this.state = { applications: [] };
Server.get(this.props.url, false).then((data) => {
this.setState({ applications: data });
});
this.state = { applications: this.props.items };
this.generateApplicants = this.generateApplicants.bind(this);
this.updateStatus = this.updateStatus.bind(this);
}
......
assets/js/components/ApplyModal.jsx
View file @ fcd5a4a7
......@@ -8,6 +8,7 @@ export default class ApplyModal extends React.Component {
data: React.PropTypes.object.isRequired,
active: React.PropTypes.bool.isRequired,
buttonTitle: React.PropTypes.string.isRequired,
resume: React.PropTypes.string.isRequired,
studentId: React.PropTypes.number.isRequired,
updateStatus: React.PropTypes.func.isRequired,
<