Fakultas Ilmu Komputer UI

Commit d4e22340 authored by Zamil Majdy's avatar Zamil Majdy
Browse files

[#140657435] [#40] [Green] implement admin dasboard

parent 1e286c79
import React from 'react';
import { Button } from 'semantic-ui-react';
import Tabs from './components/Tabs';
import CompanyList from './components/CompanyList';
import Company from './components/Company';
export default class CompanyPage extends React.Component {
static propTypes = {
user: React.PropTypes.object.isRequired,
};
handleClick = () => window.open('/admin/');
render() {
return (
<div>
<div style={{ paddingLeft: '10px' }}>
<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} />
</Tabs>
</div>
);
}
}
import React from 'react';
import { Item, Button, Grid, Icon } from 'semantic-ui-react';
import Server from '../lib/Server';
import ModalAlert from './ModalAlert';
import Storage from './../lib/Storage';
const defaultImage = 'http://semantic-ui.com/images/wireframe/image.png';
export default class Company extends React.Component {
static propTypes = {
data: React.PropTypes.object.isRequired,
updateStatus: React.PropTypes.func.isRequired,
};
static COMPANY_STATUS = {
NEW: 0,
UNVERIFIED: 1,
VERIFIED: 2,
ALL: 3,
};
constructor(props) {
super(props);
/* istanbul ignore next */
this.state = {
rejectLoading: false,
acceptLoading: false,
};
this.accept = this.accept.bind(this);
this.reject = this.reject.bind(this);
this.goToCompanyHome = this.goToCompanyHome.bind(this);
}
reject = () => {
const data = { status: Company.COMPANY_STATUS.UNVERIFIED };
this.setState({ rejectLoading: true });
Server.patch(`/companies/${this.props.data.id}/`, data).then((response) => {
this.setState({ rejectLoading: false });
this.props.updateStatus(this.props.data.id, response.status);
}, () => this.setState({ rejectLoading: false }));
};
accept = () => {
const data = { status: Company.COMPANY_STATUS.VERIFIED };
this.setState({ acceptLoading: true });
Server.patch(`/companies/${this.props.data.id}/`, data).then((response) => {
this.setState({ acceptLoading: false });
this.props.updateStatus(this.props.data.id, response.status);
}, () => this.setState({ acceptLoading: false }));
};
goToCompanyHome = () => {
const userData = Storage.get('user-data');
userData.company = this.props.data;
Storage.set('user-data', userData);
const win = window.open('/lowongan');
win.focus();
};
render() {
return (
<Item >
<ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
<Item.Image size="small" src={this.props.data.logo ? this.props.data.logo : defaultImage} />
<Item.Content verticalAlign="middle" style={{ wordWrap: 'break-word', width: '100%' }} >
<Item.Extra>
<Grid.Row>
<Grid.Column floated="left" style={{ width: '100%' }}>
<h4> {this.props.data.name} </h4>
{this.props.data.address}
</Grid.Column>
<Grid.Column floated="right" textAlign="center">
<div>
{this.props.data.status === Company.COMPANY_STATUS.VERIFIED || <Button loading={this.state.acceptLoading} onClick={this.accept} floated="right" color="green" >
<Icon name="checkmark" />Terima
</Button>}
{this.props.data.status === Company.COMPANY_STATUS.UNVERIFIED || <Button loading={this.state.rejectLoading} onClick={this.reject} floated="right" color="red" >
<Icon name="remove" />Tolak
</Button>}
<Button onClick={this.goToCompanyHome} floated="right" color="facebook" >
<Icon name="home" />Login
</Button>
</div>
</Grid.Column>
</Grid.Row>
</Item.Extra>
</Item.Content>
</Item>
);
}
}
import React from 'react';
import { Item, Grid, Loader } from 'semantic-ui-react';
import Company from '../components/Company';
import Server from '../lib/Server';
export default class CompanyList extends React.Component {
static propTypes = {
url: React.PropTypes.string.isRequired,
status: React.PropTypes.number.isRequired,
};
constructor(props) {
super(props);
/* istanbul ignore next */
this.state = { companies: [], loading: true };
Server.get(this.props.url, false).then((data) => {
this.setState({ companies: data, loading: false });
});
this.generateCompanies = this.generateCompanies.bind(this);
this.updateStatus = this.updateStatus.bind(this);
}
updateStatus(id, status) {
const obj = [];
this.state.companies.map((company) => {
const clonedObj = {};
Object.assign(clonedObj, company);
if (company.id === id) clonedObj.status = status;
return obj.push(clonedObj);
});
this.setState({ companies: obj });
}
generateCompanies() {
return this.state.companies.map(company =>
(company.status === this.props.status || Company.COMPANY_STATUS.ALL === this.props.status) && (<Company
key={company.id} data={company}
updateStatus={this.updateStatus}
/>),
);
}
render = () => (
<div>
<Loader active={this.state.loading} />
<Grid>
<Item.Group style={{ width: '100%' }}>
{ this.generateCompanies() }
</Item.Group>
</Grid>
</div>
);
}
Markdown is supported
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