Fakultas Ilmu Komputer UI

Commit e7c04dca authored by M. Reza Qorib's avatar M. Reza Qorib
Browse files

[#144502159] [Refactor] #49 Filter applicant by vacancy works well now

parent 5b785c8d
import React from 'react'; import React from 'react';
import { Grid, Dropdown } from 'semantic-ui-react';
import Tabs from './components/Tabs'; import Tabs from './components/Tabs';
import ApplicantList from './components/ApplicantList'; import ApplicantList from './components/ApplicantList';
import Applicant from './components/Applicant'; import Applicant from './components/Applicant';
import Pagination from './components/Pagination'; import Pagination from './components/Pagination';
import Server from './lib/Server';
export default class ApplicantPage extends React.Component { export default class ApplicantPage extends React.Component {
...@@ -18,57 +20,104 @@ export default class ApplicantPage extends React.Component { ...@@ -18,57 +20,104 @@ export default class ApplicantPage extends React.Component {
password: '', password: '',
errorFlag: false, errorFlag: false,
company: { id: 1 }, company: { id: 1 },
urls: [],
selected: `/companies/${this.props.user.data.company.id}/applications/`,
refresh: 0,
}; };
this.getVacancyList = this.getVacancyList.bind(this);
this.handleChange = this.handleChange.bind(this);
this.getVacancyList();
} }
handleChange = (e, data) => {
this.setState({ selected: data.value, refresh: this.state.refresh + 5 });
};
getVacancyList= () => Server.get(`/companies/${this.props.user.data.company.id}/vacancies/`, false).then((data) => {
const results = data.results;
const names = ['Semua Lowongan'];
const urls = [{
key: 0,
value: `/companies/${this.props.user.data.company.id}/applications/`,
text: 'Semua Lowongan',
}];
results.map( (vacancy) => {
names.push(vacancy.name);
const url = `/companies/${this.props.user.data.company.id}/applications/${vacancy.id}/by_vacancy/`;
const info = {
key: vacancy.id,
value: url,
text: vacancy.name,
};
urls.push(info);
return urls;
} );
this.setState({ urls });
console.log('hasil');
console.log(this.state.urls);
}, error => error.then((r) => {
this.modalAlert.open('Gagal mendapatkan daftar lowongan', r.detail);
}));
render() { render() {
const company = this.props.user.data.company; const company = this.props.user.data.company;
return ( return (
<Tabs selected={0}> <Grid>
<Pagination <div>
key={1} <Dropdown placeholder="Semua Lowongan" search selection options={this.state.urls} onChange={this.handleChange} />
url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.NEW}`} </div>
label="Lamaran Baru" <Tabs selected={0}>
child={ <Pagination
<ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.NEW} /> key={1 + this.state.refresh}
} url={`${this.state.selected}?status=${Applicant.APPLICATION_STATUS.NEW}`}
/> label="Lamaran Baru"
<Pagination child={
key={2} <ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.NEW} />
url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.READ}`} }
label="Lamaran Dibaca" />
child={ <Pagination
<ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.READ} /> key={2 + this.state.refresh}
} url={`${this.state.selected}?status=${Applicant.APPLICATION_STATUS.READ}`}
/> label="Lamaran Dibaca"
<Pagination child={
key={3} <ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.READ} />
url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.BOOKMARKED}`} }
label="Lamaran Ditandai" />
child={ <Pagination
<ApplicantList key={3 + this.state.refresh}
companyId={company.id} url={`${this.state.selected}?status=${Applicant.APPLICATION_STATUS.BOOKMARKED}`}
status={Applicant.APPLICATION_STATUS.BOOKMARKED} label="Lamaran Ditandai"
/> child={
} <ApplicantList
/> companyId={company.id}
<Pagination status={Applicant.APPLICATION_STATUS.BOOKMARKED}
key={4} />
url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.ACCEPTED}`} }
label="Lamaran Diterima" />
child={ <Pagination
<ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.ACCEPTED} /> key={4 + this.state.refresh}
} url={`${this.state.selected}?status=${Applicant.APPLICATION_STATUS.ACCEPTED}`}
/> label="Lamaran Diterima"
<Pagination child={
key={5} <ApplicantList
url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.REJECTED}`} companyId={company.id}
label="Lamaran Ditolak" status={Applicant.APPLICATION_STATUS.ACCEPTED}
child={ />
<ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.REJECTED} /> }
} />
/> <Pagination
</Tabs> key={5 + this.state.refresh}
url={`${this.state.selected}?status=${Applicant.APPLICATION_STATUS.REJECTED}`}
label="Lamaran Ditolak"
child={
<ApplicantList
companyId={company.id}
status={Applicant.APPLICATION_STATUS.REJECTED}
/>
}
/>
</Tabs>
</Grid>
); );
} }
} }
...@@ -28,7 +28,7 @@ export default class Login extends React.Component { ...@@ -28,7 +28,7 @@ export default class Login extends React.Component {
</Header> </Header>
</div> </div>
<Grid stackable={true} columns={2} padded style={{ display: 'flex', justifyContent: 'center' }}> <Grid stackable columns={2} padded style={{ display: 'flex', justifyContent: 'center' }}>
<Grid.Column width="seven"> <Grid.Column width="seven">
<Segment basic> <Segment basic>
<LoginForm type="sso-ui" header="SSO Login" imgSrc="UI.png" imgSize="tiny" /> <LoginForm type="sso-ui" header="SSO Login" imgSrc="UI.png" imgSize="tiny" />
...@@ -38,7 +38,7 @@ export default class Login extends React.Component { ...@@ -38,7 +38,7 @@ export default class Login extends React.Component {
<Grid.Column width="seven"> <Grid.Column width="seven">
<Segment basic> <Segment basic>
<LoginForm type="company" header="Company Login" imgSrc="logo.png" imgSize="small" /> <LoginForm type="company" header="Company Login" imgSrc="logo.png" imgSize="small" usernameLabel="Email"/>
{this.props.children} {this.props.children}
</Segment > </Segment >
......
import React from 'react'; import React from 'react';
import { Form, Input, Button, Message, Image, Card, Header, Segment } from 'semantic-ui-react'; import { Form, Input, Button, Message, Image, Segment } from 'semantic-ui-react';
import { browserHistory } from 'react-router'; import { browserHistory } from 'react-router';
import Server from '../lib/Server'; import Server from '../lib/Server';
import Storage from '../lib/Storage'; import Storage from '../lib/Storage';
...@@ -10,12 +10,14 @@ export default class LoginForm extends React.Component { ...@@ -10,12 +10,14 @@ export default class LoginForm extends React.Component {
type: React.PropTypes.string.isRequired, type: React.PropTypes.string.isRequired,
imgSrc: React.PropTypes.string, imgSrc: React.PropTypes.string,
header: React.PropTypes.string, header: React.PropTypes.string,
usernameLabel: React.PropTypes.string,
}; };
static defaultProps = { static defaultProps = {
imgSrc: '', imgSrc: '',
imgSize: 'small', imgSize: 'small',
header: 'Login', header: 'Login',
usernameLabel: 'Username',
}; };
constructor(props) { constructor(props) {
...@@ -56,17 +58,37 @@ export default class LoginForm extends React.Component { ...@@ -56,17 +58,37 @@ export default class LoginForm extends React.Component {
</Segment> </Segment>
<Segment inverted className="header" > <Segment inverted className="header" >
<Form loading={this.state.loading} onSubmit={e => this.handleSubmit(e)} error={this.state.errorFlag}> <Form
loading={this.state.loading}
onSubmit={e => this.handleSubmit(e)}
error={this.state.errorFlag}
>
<Form.Group widths="equal"> <Form.Group widths="equal">
<Form.Field> <Form.Field>
<label htmlFor="id"> Email </label> <label htmlFor="id"> { this.props.usernameLabel } </label>
<Input type="text" id="username" icon="user" iconPosition="left" placeholder="username" onChange={e => this.handleChange(e, 'username')} required /> <Input
type="text"
id="email"
icon="user"
iconPosition="left"
placeholder={this.props.usernameLabel}
onChange={e => this.handleChange(e, 'username')}
required
/>
</Form.Field> </Form.Field>
</Form.Group> </Form.Group>
<Form.Group widths="equal"> <Form.Group widths="equal">
<Form.Field> <Form.Field>
<label htmlFor="password"> Password </label> <label htmlFor="password"> Password </label>
<Input type="password" id="password" icon="key" iconPosition="left" placeholder="password" onChange={e => this.handleChange(e, 'password')} required /> <Input
type="password"
id="password"
icon="key"
iconPosition="left"
placeholder="password"
onChange={e => this.handleChange(e, 'password')}
required
/>
</Form.Field> </Form.Field>
</Form.Group> </Form.Group>
<Button type="submit" fluid color="blue">Login</Button> <Button type="submit" fluid color="blue">Login</Button>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment