Fakultas Ilmu Komputer UI

Commit 99c3ecfa authored by Reza Qorib's avatar Reza Qorib
Browse files

Merge branch 'DeleteVacancyCompany' into 'UserStory4'

Delete vacancy company

See merge request !9
parents 96885206 9aaede83
import React from 'react';
import { Grid, Segment, Button, Header, Icon, Modal, Form, Input, TextArea, Card, Image} from 'semantic-ui-react';
import { Grid, Segment, Header, Card, Image } from 'semantic-ui-react';
import LoginForm from './components/LoginForm';
import RegisterModal from './components/RegisterModal';
import CompanyRegisterModal from './components/CompanyRegisterModal';
export default class Login extends React.Component {
......@@ -17,18 +17,17 @@ export default class Login extends React.Component {
};
render = () => (
<div className="halamanLogin">
<div className="headerLogin">
<Header as='h2' icon textAlign='center' >
<Image src='/assets/img/logo.png' size='medium' centered />
<Header as="h2" icon textAlign="center" >
<Image src="/assets/img/logo.png" size="medium" centered />
<Header.Content >
Kanal Akses Pendaftaran KP Elektronik
</Header.Content>
</Header>
</Header>
</div>
<Grid stackable columns={2} relaxed>
<Grid stackable columns={2} relaxed>
<Grid.Column>
<Segment basic>
<LoginForm type="company" header="Company Login" imgSrc="logo.png" imgSize="small" />
......@@ -43,13 +42,12 @@ export default class Login extends React.Component {
<Header as="h3">New to us ?</Header>
</Grid.Column>
<Grid.Column>
<RegisterModal />
<CompanyRegisterModal />
</Grid.Column>
</Grid>
</Card.Content>
</Card>
</div>
</Grid.Column>
<Grid.Column>
......@@ -58,7 +56,6 @@ export default class Login extends React.Component {
{this.props.children}
</Segment>
</Grid.Column>
</Grid>
</div>
)
......
// /* eslint-disable no-unused-expressions */
// import React from 'react';
// import ReactTestUtils from 'react-addons-test-utils';
// import Vacancy from '../components/ComponentRegister';
//
// describe('Vacancy', () => {
// it('renders without problem', () => {
// let companyRegister = ReactTestUtils.renderIntoDocument(
// <CompanyRegister />);
// expect(companyRegister).to.exist;
//
// });
// });
\ No newline at end of file
......@@ -3,7 +3,7 @@ import ReactTestUtils from 'react-addons-test-utils';
import CompanyVacancy from '../../components/CompanyVacancy';
describe('CompanyVacancy', () => {
const response ={
const response = {
close_time: '2019-03-28T05:55:42Z',
company: {
address: 'kebayoran baru',
......@@ -49,4 +49,11 @@ describe('CompanyVacancy', () => {
expect(companyVacancy).to.exist;
});
it('loads when delete button clicked', () => {
const companyVacancy = ReactTestUtils.renderIntoDocument(
<CompanyVacancy data={response} />);
const button = ReactTestUtils.findRenderedDOMComponentWithTag(companyVacancy, 'Button');
ReactTestUtils.Simulate.click(button);
expect(companyVacancy.state.deleteLoading).to.equal(true);
});
});
......@@ -76,5 +76,38 @@ describe('VacancyList', () => {
expect(JSON.stringify(vacancyList.state.vacancies)).to.equal(JSON.stringify(response));
fetchMock.restore();
});
it('success delete vacancy', (done) => {
fetchMock.delete('*', response);
fetchMock.get('*', response);
const vacancyList = ReactTestUtils.renderIntoDocument(
<VacancyList userId={1} url="test" deleteCallback={() => {}} />);
vacancyList.state.vacancies = response;
vacancyList.deleteVacancy(1).then(() => {
expect(JSON.stringify(vacancyList.state.vacancies)).to.equal(JSON.stringify(response));
fetchMock.restore();
done();
}, () => {
fetchMock.restore();
done();
});
});
it('fails delete vacancy', (done) => {
fetchMock.delete('*', 404);
fetchMock.get('*', response);
const vacancyList = ReactTestUtils.renderIntoDocument(
<VacancyList userId={1} url="test" deleteCallback={() => {}} />
);
vacancyList.state.vacancies = response;
vacancyList.deleteVacancy(1).then(() => {
fetchMock.restore();
done();
}, () => {
expect(JSON.stringify(vacancyList.state.vacancies)).to.equal(JSON.stringify(response));
fetchMock.restore();
done();
});
});
});
......@@ -5,7 +5,7 @@ import ModalAlert from './../components/ModalAlert';
import Server from './../lib/Server';
import Storage from './../lib/Storage';
export default class RegisterModal extends React.Component {
export default class CompanyRegisterModal extends React.Component {
constructor(props) {
super(props);
......
import React from 'react';
import moment from 'moment';
import { Button, Icon, Item, Segment } from 'semantic-ui-react';
import { Button, Icon, Item, Grid } from 'semantic-ui-react';
import { Link } from 'react-router';
const defaultImage = 'http://semantic-ui.com/images/wireframe/image.png';
export default class ApplicantList extends React.Component {
export default class CompanyVacancy extends React.Component {
static propTypes = {
data: React.PropTypes.object.isRequired,
deleteCallback: React.PropTypes.func,
};
static defaultProps = { deleteCallback: () => {} };
constructor(props) {
super(props);
moment.locale('id');
this.state = { deleteLoading: false };
}
getLink = `/buat-lowongan/${this.props.data.id}`;
render() {
return (
<Item className="applicantItems">
<Item.Image src={this.props.data.company.logo ? this.props.data.company.logo : defaultImage} size="small" />
<Item.Content>
<Item.Header as="a">{this.props.data.name}</Item.Header>
<Segment compact basic floated="right">
{this.props.data.verified ?
(<h4> <Icon name="checkmark box" size="large" color="green" /> Terverifikasi </h4>) :
(<h4> <Icon name="remove circle" size="large" color="red" /> Belum Terverifikasi </h4>)}
<Button color="blue" floated="right" as={Link} to={this.getLink}>
Ubah <Icon name="right chevron" />
</Button>
</Segment>
<Item.Extra>
<h3> 105 Pendaftar </h3>
<Grid.Row>
<Grid.Column floated="left">
<h5> 105 Pendaftar </h5>
Ditutup {moment(moment(this.props.data.close_time)).fromNow()}
</Item.Extra>
</Grid.Column>
<Grid.Column floated="right">
{this.props.data.verified ?
(<h4> <Icon name="checkmark box" size="large" color="green" /> Terverifikasi </h4>) :
(<h4> <Icon name="remove circle" size="large" color="red" /> Belum Terverifikasi </h4>)}
<Button color="blue" floated="right" as={Link} to={this.getLink}>
Ubah <Icon name="right chevron" />
</Button>
<Button loading={this.state.deleteLoading} color="red" floated="right" onClick={() => { this.setState({ deleteLoading: true }); this.props.deleteCallback(); }} >
Hapus <Icon name="delete" />
</Button>
</Grid.Column>
</Grid.Row>
</Item.Content>
</Item>
);
}
}
......@@ -22,7 +22,7 @@ export default class LoginForm extends React.Component {
constructor(props) {
super(props);
/* istanbul ignore next */
this.state = { username: '', password: '', errorFlag: false };
this.state = { username: '', password: '', errorFlag: false, loading: false };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
......@@ -38,12 +38,12 @@ export default class LoginForm extends React.Component {
username: this.state.username,
password: this.state.password,
};
this.setState({ loading: true });
Server.post('/login/', data).then((response) => {
Storage.set('user-data', response);
browserHistory.push('/home');
}, () => {
this.setState({ errorFlag: true });
this.setState({ errorFlag: true, loading: false });
});
}
......@@ -51,33 +51,33 @@ export default class LoginForm extends React.Component {
<div className="formLogin" >
<Segment.Group>
<Segment>
<Image src={`./assets/img/${this.props.imgSrc}`} size={this.props.imgSize} verticalAlign="middle" /> <span>{ this.props.header }</span>
</Segment>
<Segment.Group>
<Segment>
<Image src={`./assets/img/${this.props.imgSrc}`} size={this.props.imgSize} verticalAlign="middle" /> <span>{ this.props.header }</span>
</Segment>
<Segment inverted className='header' >
<Form onSubmit={e => this.handleSubmit(e)} error={this.state.errorFlag}>
<Form.Group widths="equal">
<Form.Field>
<label htmlFor="id"> Username </label>
<Input type="text" id="username" icon="user" iconPosition="left" placeholder="username" onChange={e => this.handleChange(e, 'username')} required />
</Form.Field>
</Form.Group>
<Form.Group widths="equal">
<Form.Field>
<label htmlFor="password"> Password </label>
<Input type="password" id="password" icon="key" iconPosition="left" placeholder="password" onChange={e => this.handleChange(e, 'password')} required />
</Form.Field>
</Form.Group>
<Button type="submit" fluid color="blue">Login</Button>
<Message
error
content="Login gagal: username atau password salah."
/>
</Form>
</Segment>
</Segment.Group>
<Segment inverted className="header" >
<Form loading={this.state.loading} onSubmit={e => this.handleSubmit(e)} error={this.state.errorFlag}>
<Form.Group widths="equal">
<Form.Field>
<label htmlFor="id"> Username </label>
<Input type="text" id="username" icon="user" iconPosition="left" placeholder="username" onChange={e => this.handleChange(e, 'username')} required />
</Form.Field>
</Form.Group>
<Form.Group widths="equal">
<Form.Field>
<label htmlFor="password"> Password </label>
<Input type="password" id="password" icon="key" iconPosition="left" placeholder="password" onChange={e => this.handleChange(e, 'password')} required />
</Form.Field>
</Form.Group>
<Button type="submit" fluid color="blue">Login</Button>
<Message
error
content="Login gagal: username atau password salah."
/>
</Form>
</Segment>
</Segment.Group>
</div>
)
}
......@@ -32,7 +32,7 @@ export default class ModalAlert extends React.Component {
};
render = () => {
const style = { 'white-space': 'pre-wrap' };
const style = { whiteSpace: 'pre-wrap' };
return (
<Modal open={this.state.open} basic size="small">
<Header icon="warning sign" content={this.state.header} />
......
......@@ -4,6 +4,7 @@ import { Link } from 'react-router';
import Vacancy from './Vacancy';
import CompanyVacancy from './CompanyVacancy';
import Server from '../lib/Server';
import ModalAlert from '../components/ModalAlert';
export default class VacancyList extends React.Component {
......@@ -49,6 +50,15 @@ export default class VacancyList extends React.Component {
});
}
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);
}));
generateVacancies() {
if (this.props.type === 'student') {
return this.state.vacancies.map(vacancy =>
......@@ -63,19 +73,20 @@ export default class VacancyList extends React.Component {
);
}
return this.state.vacancies.map(vacancy =>
(
<CompanyVacancy key={vacancy.id} data={vacancy} />
),
return this.state.vacancies.map(vacancy => (<CompanyVacancy
key={vacancy.id}
data={vacancy}
deleteCallback={() => this.deleteVacancy(vacancy.id)}
/>),
);
}
companyHeader() {
if (this.props.type === 'company') {
return (
<Grid style={{ padding: '10px' }}>
<Button fluid size="mini" icon="eye" labelPosition="left" color="facebook" content="Lihat Semua Pendaftar" />
<Button fluid size="mini" as={Link} to="/buat-lowongan" icon="add" labelPosition="left" content="Tambah Lowongan Baru" color="teal" />
<Grid textAlign="center">
<Button size="tiny" icon="eye" labelPosition="left" color="facebook" content="Lihat Semua Pendaftar" />
<Button size="tiny" as={Link} to="/buat-lowongan" icon="add" labelPosition="left" content="Tambah Lowongan Baru" color="teal" />
</Grid>
);
}
......@@ -85,14 +96,13 @@ export default class VacancyList extends React.Component {
render = () => (
<Segment>
<Grid container columns="eleven" doubling>
{ this.companyHeader() }
<ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
<Grid container columns="eleven" doubling>
{ this.companyHeader() }
<Item.Group relaxed style={{ width: '100%' }}>
{ this.generateVacancies() }
</Item.Group>
</Grid>
</Grid>
</Segment>
);
}
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