Fakultas Ilmu Komputer UI

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

Appearance tweaks :)

parent c0ab366c
...@@ -176,11 +176,11 @@ card .formRegis{ ...@@ -176,11 +176,11 @@ card .formRegis{
line-height: 30%; line-height: 30%;
} }
.biodata-company h4{ .biodataCompany h4{
color: grey; color: grey;
} }
.button-profile{ .buttonProfile{
margin-top:30px; margin-top:30px;
} }
...@@ -223,51 +223,51 @@ card .formRegis{ ...@@ -223,51 +223,51 @@ card .formRegis{
margin-right:5%; margin-right:5%;
} }
.ui.segment.segment-profile-company{ .ui.segment.segmentProfileCompany{
margin-left: 10%; margin-left: 10%;
margin-right: 10%; margin-right: 10%;
padding: 5%; padding: 5%;
} }
.ui.segment.profile-form-company{ .ui.segment.profileFormCompany{
margin-top:4%; margin-top:4%;
margin-left: 10%; margin-left: 10%;
margin-right: 10%; margin-right: 10%;
padding-bottom:3%; padding-bottom:3%;
} }
.company-profile{ .companyProfile{
padding-bottom:5%; padding-bottom:5%;
} }
.ui.segment.vacancyList-company{ .ui.segment.vacancyListCompany{
margin-left: 10%; margin-left: 10%;
margin-right: 10%; margin-right: 10%;
} }
.ui.segment.paginationCompany{ .ui.segment.paginationCompany{
margin: 2% 7% 60px; margin: 2% 7%;
} }
.admin-bar{ .admin-bar{
margin: 0; margin: 0;
padding: 0 10px 0 0; padding: 10px;
width: 100%; width: 100%;
text-align: right; text-align: right;
background-color: #304D8A; background-color: #304D8A;
color: white; color: white;
} }
.dropdown-applicant{ .dropdownApplicant{
margin-left:7%; margin-left:7%;
margin-top:2%; margin-top:2%;
margin-bottom: 0; margin-bottom: 0;
} }
.button-administrasi{ .administrationButtons {
margin-left:7%; margin-left:7%;
margin-top:2%; margin-top:2%;
margin-bottom: 0; margin-bottom: 2%;
} }
.ui.segment.transkrip{ .ui.segment.transkrip{
......
...@@ -62,7 +62,7 @@ export default class ApplicantPage extends React.Component { ...@@ -62,7 +62,7 @@ export default class ApplicantPage extends React.Component {
const company = this.props.user.data.company; const company = this.props.user.data.company;
return ( return (
<div> <div>
<div className="dropdown-applicant"> <div className="dropdownApplicant">
<Dropdown placeholder="Semua Lowongan" search selection options={this.state.urls} onChange={this.handleChange} /> <Dropdown placeholder="Semua Lowongan" search selection options={this.state.urls} onChange={this.handleChange} />
</div> </div>
<Tabs selected={0}> <Tabs selected={0}>
......
...@@ -12,14 +12,12 @@ export default class CompanyPage extends React.Component { ...@@ -12,14 +12,12 @@ export default class CompanyPage extends React.Component {
}; };
handleClick = () => window.open('/admin/'); handleClick = () => window.open('/admin/');
handleVacancy = () => window.open('/lowongan');
render() { render() {
return ( return (
<div> <div>
<div className="button-administrasi"> <div className="administrationButtons">
<Button onClick={this.handleClick} icon="dashboard" labelPosition="left" color="facebook" content="Buka Menu Administrasi" /> <Button onClick={this.handleClick} icon="dashboard" labelPosition="left" color="facebook" content="Buka Menu Administrasi" />
<Button onClick={this.handleVacancy} icon="dashboard" labelPosition="left" color="facebook" content="Halaman Verifikasi Lowongan" />
</div> </div>
<Tabs selected={0}> <Tabs selected={0}>
......
...@@ -13,20 +13,20 @@ export default class CompanyProfile extends React.Component { ...@@ -13,20 +13,20 @@ export default class CompanyProfile extends React.Component {
const data = TopMenu.getInfo(this.props.user); const data = TopMenu.getInfo(this.props.user);
console.log(data); console.log(data);
return ( return (
<div className="company-profile"> <div className="companyProfile">
<Segment className="segment-profile-company" > <Segment className="segmentProfileCompany" >
<Header as="h2" icon textAlign="center"> <Header as="h2" icon textAlign="center">
<Image src={data.logo || defaultLogo} size="small" shape="circular" /> <Image src={data.logo || defaultLogo} size="small" shape="circular" />
</Header> </Header>
<Container textAlign="center" className="profile-biodata"> <Container textAlign="center" className="profile-biodata">
<div className="biodata-company"> <div className="biodataCompany">
<h2>{ data.name }</h2> <h2>{ data.name }</h2>
<h3>{ data.address }t</h3> <h3>{ data.address }t</h3>
<p>{ data.description }</p> <p>{ data.description }</p>
</div> </div>
</Container> </Container>
</Segment> </Segment>
{/* <Segment className="profile-form-company">*/} {/* <Segment className="profileFormCompany">*/}
{/* <Header as="h3" textAlign="center">*/} {/* <Header as="h3" textAlign="center">*/}
{/* <Icon name="edit" />*/} {/* <Icon name="edit" />*/}
{/* <Header.Content>*/} {/* <Header.Content>*/}
......
...@@ -102,6 +102,7 @@ export default class CreateVacancy extends React.Component { ...@@ -102,6 +102,7 @@ export default class CreateVacancy extends React.Component {
{ !this.state.loading && { !this.state.loading &&
<CKEditor value={this.state.description} onChange={this.handleEditor} /> } <CKEditor value={this.state.description} onChange={this.handleEditor} /> }
<script>CKEDITOR.replace( 'description' );</script> <script>CKEDITOR.replace( 'description' );</script>
<br />
<Form.Group widths="equal"> <Form.Group widths="equal">
<Form.Field <Form.Field
className="open-time-field" className="open-time-field"
......
import React from 'react'; import React from 'react';
import TopMenu from './components/TopMenu'; import TopMenu from './components/TopMenu';
import Server from './lib/Server';
import Footer from './components/Footer';
export default class Dashboard extends React.Component { export default class Dashboard extends React.Component {
static propTypes = { static propTypes = {
......
...@@ -234,7 +234,7 @@ export default class ProfilePage extends React.Component { ...@@ -234,7 +234,7 @@ export default class ProfilePage extends React.Component {
</div> </div>
<Container textAlign="center"> <Container textAlign="center">
<div className="button-profile"> <div className="buttonProfile">
<Button onClick={this.gotoStudentResume} primary size="small">Resume</Button> <Button onClick={this.gotoStudentResume} primary size="small">Resume</Button>
</div> </div>
<div> <div>
......
import React from 'react'; import React from 'react';
import { Segment, Item, Button } from 'semantic-ui-react'; import { Segment, Button } from 'semantic-ui-react';
import { Link } from 'react-router'; import { Link } from 'react-router';
import Tabs from './components/Tabs'; import Tabs from './components/Tabs';
import Pane from './components/Pane'; import Pane from './components/Pane';
...@@ -94,7 +94,7 @@ export default class VacancyPage extends React.Component { ...@@ -94,7 +94,7 @@ export default class VacancyPage extends React.Component {
userId={this.state.id} userId={this.state.id}
/> />
} }
error="Anda belum diverifikasi. Harap hubungi admin" error="Akun anda belum terverifikasi. Harap hubungi pihak administrasi"
/> />
</Segment> </Segment>
); );
...@@ -157,7 +157,7 @@ export default class VacancyPage extends React.Component { ...@@ -157,7 +157,7 @@ export default class VacancyPage extends React.Component {
render() { render() {
return ( return (
<div className="applicant"> <div className="applicant">
<div className="button-administrasi"> <div className="administrationButtons" style={{ display: 'inline-block' }}>
{ this.companyHeader() } { this.companyHeader() }
{(this.props.user.role === 'admin' || this.props.user.role === 'supervisor') && {(this.props.user.role === 'admin' || this.props.user.role === 'supervisor') &&
<Button as={Link} to="/rekap" icon="dashboard" labelPosition="left" color="facebook" content="Rekap Pendaftaran"/> <Button as={Link} to="/rekap" icon="dashboard" labelPosition="left" color="facebook" content="Rekap Pendaftaran"/>
......
...@@ -38,7 +38,7 @@ export default class ApplicantList extends React.Component { ...@@ -38,7 +38,7 @@ export default class ApplicantList extends React.Component {
<Item className="applicantItems"> <Item className="applicantItems">
<Grid.Row> <Grid.Row>
<Container textAlign="center"> <Container textAlign="center">
<p>Tidak ada pelamar<br /></p> <p>Tidak ada pelamar</p><br />
</Container> </Container>
</Grid.Row> </Grid.Row>
</Item> </Item>
......
...@@ -8,7 +8,7 @@ export default class ApplyModal extends React.Component { ...@@ -8,7 +8,7 @@ export default class ApplyModal extends React.Component {
data: React.PropTypes.object.isRequired, data: React.PropTypes.object.isRequired,
active: React.PropTypes.bool.isRequired, active: React.PropTypes.bool.isRequired,
buttonTitle: React.PropTypes.string.isRequired, buttonTitle: React.PropTypes.string.isRequired,
resume: React.PropTypes.string.isRequired, resume: React.PropTypes.string,
studentId: React.PropTypes.number.isRequired, studentId: React.PropTypes.number.isRequired,
updateStatus: React.PropTypes.func.isRequired, updateStatus: React.PropTypes.func.isRequired,
}; };
......
import React from 'react'; import React from 'react';
import { Item, Grid } from 'semantic-ui-react'; import { Item, Grid, Container } from 'semantic-ui-react';
import Company from '../components/Company'; import Company from '../components/Company';
export default class CompanyList extends React.Component { export default class CompanyList extends React.Component {
...@@ -34,6 +34,17 @@ export default class CompanyList extends React.Component { ...@@ -34,6 +34,17 @@ export default class CompanyList extends React.Component {
} }
generateCompanies() { generateCompanies() {
if (this.state.companies.length === 0) {
return (
<Item className="vacancyItems">
<Grid.Row>
<Container textAlign="center">
<p>Tidak ada</p><br />
</Container>
</Grid.Row>
</Item>
);
}
return this.state.companies.map(company => return this.state.companies.map(company =>
(company.status === this.props.status || Company.COMPANY_STATUS.ALL === this.props.status) && (company.status === this.props.status || Company.COMPANY_STATUS.ALL === this.props.status) &&
(<Company (<Company
......
...@@ -4,6 +4,7 @@ import { Modal, Button, Form, Input, TextArea, Header, Icon } from 'semantic-ui- ...@@ -4,6 +4,7 @@ import { Modal, Button, Form, Input, TextArea, Header, Icon } from 'semantic-ui-
import ModalAlert from './../components/ModalAlert'; import ModalAlert from './../components/ModalAlert';
import Server from './../lib/Server'; import Server from './../lib/Server';
import Storage from './../lib/Storage'; import Storage from './../lib/Storage';
import Dumper from './../lib/Dumper';
export default class CompanyRegisterModal extends React.Component { export default class CompanyRegisterModal extends React.Component {
...@@ -46,7 +47,7 @@ export default class CompanyRegisterModal extends React.Component { ...@@ -46,7 +47,7 @@ export default class CompanyRegisterModal extends React.Component {
browserHistory.push('/home'); browserHistory.push('/home');
}, error => error.then((r) => { }, error => error.then((r) => {
this.setState({ loading: false }); this.setState({ loading: false });
this.modalAlert.open('Gagal Membuat Akun', r.error); this.modalAlert.open('Gagal Membuat Akun', Dumper.dump(r));
})); }));
}; };
......
...@@ -59,6 +59,7 @@ export default class Pagination extends React.Component { ...@@ -59,6 +59,7 @@ export default class Pagination extends React.Component {
this.setState({ first, last }); this.setState({ first, last });
}, error => error.then((r) => { }, error => error.then((r) => {
this.modalAlert.open(this.props.error, r.detail); this.modalAlert.open(this.props.error, r.detail);
this.setState({ loading: false });
})); }));
refresh() { refresh() {
......
...@@ -35,7 +35,7 @@ export default class TopMenu extends React.Component { ...@@ -35,7 +35,7 @@ export default class TopMenu extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
/* istanbul ignore next */ /* istanbul ignore next */
this.state = { activeItem: 'Beranda' }; this.state = { activeItem: 'Beranda', logoutLoading: false };
this.logout = this.logout.bind(this); this.logout = this.logout.bind(this);
this.logoutCompany = this.logoutCompany.bind(this); this.logoutCompany = this.logoutCompany.bind(this);
} }
...@@ -44,10 +44,11 @@ export default class TopMenu extends React.Component { ...@@ -44,10 +44,11 @@ export default class TopMenu extends React.Component {
logout = (e) => { logout = (e) => {
e.preventDefault(); e.preventDefault();
this.setState({ logoutLoading: true });
Server.get('/api-auth/logout/?next=/', true).then(() => { Server.get('/api-auth/logout/?next=/', true).then(() => {
Storage.clear(); Storage.clear();
browserHistory.push('/login'); browserHistory.push('/login');
}); }, () => this.setState({ logoutLoading: false }));
}; };
logoutCompany = /* istanbul ignore next */ (e) => { logoutCompany = /* istanbul ignore next */ (e) => {
...@@ -65,27 +66,29 @@ export default class TopMenu extends React.Component { ...@@ -65,27 +66,29 @@ export default class TopMenu extends React.Component {
<div> <div>
{ this.props.user.data.is_staff && this.props.user.data.company && ( { this.props.user.data.is_staff && this.props.user.data.company && (
<div className="admin-bar"> <div className="admin-bar">
<br/>
<p> <p>
Anda login sebagai perusahaan: Anda login sebagai perusahaan:
<b> {this.props.user.data.company.name}</b> (#{this.props.user.data.company.id}). <b> {this.props.user.data.company.name}</b> (#{this.props.user.data.company.id}).
Untuk kembali menjadi admin, klik <a href="#" onClick={this.logoutCompany}> link ini</a> Untuk kembali menjadi admin, klik <a href="#" onClick={this.logoutCompany}> link ini</a>
</p> </p>
<br/>
</div> </div>
)} )}
<Menu color="blue" pointing secondary> <Menu color="blue" pointing secondary>
<Image as="a" size="small" src="/assets/img/logo.png" href="/" /> <Image as="a" size="small" src="/assets/img/logo.png" href="/" />
<Menu.Menu position="right"> <Menu.Menu position="right">
{ !this.props.user.data.is_staff &&
<Menu.Item as={Link} to="/home" name="Beranda" active={activeItem === 'Beranda'} onClick={this.handleItemClick} /> <Menu.Item as={Link} to="/home" name="Beranda" active={activeItem === 'Beranda'} onClick={this.handleItemClick} />
{ this.props.user.role === 'student' &&
<Menu.Item as={Link} to="/profil" name="Profil" active={activeItem === 'Profil'} onClick={this.handleItemClick} />
} }
{ this.props.user.role === 'student' &&
<Menu.Item as={Link} to="/profil" name="Profil" active={activeItem === 'Profil'} onClick={this.handleItemClick} /> }
{ this.props.user.data.is_staff &&
<Menu.Item as={Link} to="/perusahaan" name="Perusahaan" active={activeItem === 'Perusahaan' || activeItem === 'Beranda'} onClick={this.handleItemClick} /> }
{ this.props.user.data.is_staff &&
<Menu.Item as={Link} to="/lowongan" name="Lowongan" active={activeItem === 'Lowongan'} onClick={this.handleItemClick} /> }
<Menu.Item> <Menu.Item>
<Popup <Popup
trigger={<Image trigger={<Image
as={Link} to="/profil" src={(this.props.user.role === 'company' ? data.logo : data.photo) || defaultPicture} avatar src={(this.props.user.role === 'company' ? data.logo : data.photo) || defaultPicture} avatar
onClick={this.handleItemClick}
/>} />}
flowing flowing
hoverable hoverable
...@@ -94,7 +97,7 @@ export default class TopMenu extends React.Component { ...@@ -94,7 +97,7 @@ export default class TopMenu extends React.Component {
header={data.name} header={data.name}
description={data.user.email} description={data.user.email}
/> />
<Button as={Link} onClick={this.logout} name="logout" color="blue" size="tiny">Keluar</Button> <Button as={Link} onClick={this.logout} loading={this.state.logoutLoading} name="logout" color="blue" size="tiny">Keluar</Button>
</Popup> </Popup>
......
...@@ -22,7 +22,7 @@ export default class Vacancy extends React.Component { ...@@ -22,7 +22,7 @@ export default class Vacancy extends React.Component {
status: 0, status: 0,
}; };
static APPLICATION_STATUS_TEXT = ['Dikirim', 'Dibaca', 'Dibaca', 'Ditolak', 'Diterima']; static APPLICATION_STATUS_TEXT = ['Dikirim', 'Dibaca', 'Ditandai', 'Ditolak', 'Diterima'];
static APPLICATION_STATUS = { static APPLICATION_STATUS = {
NEW: 0, NEW: 0,
...@@ -37,7 +37,7 @@ export default class Vacancy extends React.Component { ...@@ -37,7 +37,7 @@ export default class Vacancy extends React.Component {
/* istanbul ignore next */ /* istanbul ignore next */
this.state = { this.state = {
bookmarked: this.props.bookmarked, bookmarked: this.props.bookmarked,
registeredStatus: this.props.status ? 'registered' : 'new', registeredStatus: this.props.status,
deleteLoading: false, deleteLoading: false,
}; };
moment.locale('id'); moment.locale('id');
...@@ -58,13 +58,13 @@ export default class Vacancy extends React.Component { ...@@ -58,13 +58,13 @@ export default class Vacancy extends React.Component {
this.state.bookmarked = 1 - this.state.bookmarked; this.state.bookmarked = 1 - this.state.bookmarked;
} }
updateStatus = (registeredStatus = 'registered') => this.setState({ registeredStatus }); updateStatus = (registeredStatus = null) => this.setState({ registeredStatus });
removeVacancyApplication() { removeVacancyApplication() {
this.setState({ deleteLoading: true }); this.setState({ deleteLoading: true });
Server.delete(`/students/${this.props.user.data.student.id}/applied-vacancies/${this.props.data.id}/`).then(() => { Server.delete(`/students/${this.props.user.data.student.id}/applied-vacancies/${this.props.data.id}/`).then(() => {
this.modalAlert.open('Pendaftaran Berhasil Dibatalkan', 'Pendaftaran anda berhasil dihapus dari sistem\n'); this.modalAlert.open('Pendaftaran Berhasil Dibatalkan', 'Pendaftaran anda berhasil dihapus dari sistem\n');
this.setState({ registeredStatus: 'new', deleteLoading: false }); this.setState({ registeredStatus: null, deleteLoading: false });
}, () => { }, () => {
this.modalAlert.open('Permintaan Gagal', 'Maaf permintaan anda gagal diproses sistem. Harap ulangi pendaftaran atau hubungi administrator\n'); this.modalAlert.open('Permintaan Gagal', 'Maaf permintaan anda gagal diproses sistem. Harap ulangi pendaftaran atau hubungi administrator\n');
this.setState({ deleteLoading: false }); this.setState({ deleteLoading: false });
...@@ -84,7 +84,7 @@ export default class Vacancy extends React.Component { ...@@ -84,7 +84,7 @@ export default class Vacancy extends React.Component {
const applyModal = ( const applyModal = (
<ApplyModal <ApplyModal
updateStatus={this.updateStatus} updateStatus={this.updateStatus}
active={this.state.registeredStatus === 'new'} active={this.state.registeredStatus === null}
data={{ data={{
header: this.props.data.name, header: this.props.data.name,
description: this.props.data.description, description: this.props.data.description,
...@@ -98,15 +98,15 @@ export default class Vacancy extends React.Component { ...@@ -98,15 +98,15 @@ export default class Vacancy extends React.Component {
const cancelButton = <Button loading={this.state.deleteLoading} floated="right" color="red" onClick={this.openConfirmationModal}>Batal</Button>; const cancelButton = <Button loading={this.state.deleteLoading} floated="right" color="red" onClick={this.openConfirmationModal}>Batal</Button>;
const rejectedButton = const rejectedButton =
<Button floated="right" color="red" disabled>{Vacancy.APPLICATION_STATUS_TEXT[this.props.status]}</Button>; <Button floated="right" color="red" disabled>{Vacancy.APPLICATION_STATUS_TEXT[this.state.registeredStatus]}</Button>;
const acceptedButton = const acceptedButton =
<Button floated="right" color="blue" disabled>{Vacancy.APPLICATION_STATUS_TEXT[this.props.status]}</Button>; <Button floated="right" color="blue" disabled>{Vacancy.APPLICATION_STATUS_TEXT[this.state.registeredStatus]}</Button>;
if (this.props.status == null) { if (this.state.registeredStatus == null) {
return applyModal; return applyModal;
} else if (this.props.status === Vacancy.APPLICATION_STATUS.REJECTED) { } else if (this.state.registeredStatus === Vacancy.APPLICATION_STATUS.REJECTED) {
return rejectedButton; return rejectedButton;
} else if (this.props.status === Vacancy.APPLICATION_STATUS.ACCEPTED) { } else if (this.state.registeredStatus === Vacancy.APPLICATION_STATUS.ACCEPTED) {
return acceptedButton; return acceptedButton;
} }
return cancelButton; return cancelButton;
......
import React from 'react'; import React from 'react';
import { Item, Button, Grid } from 'semantic-ui-react'; import { Item, Grid, Container } from 'semantic-ui-react';
import { Link } from 'react-router';
import Vacancy from './Vacancy'; import Vacancy from './Vacancy';
import CompanyVacancy from './CompanyVacancy'; import CompanyVacancy from './CompanyVacancy';
import AdminVacancy from './AdminVacancy'; import AdminVacancy from './AdminVacancy';
...@@ -50,6 +49,17 @@ export default class VacancyList extends React.Component { ...@@ -50,6 +49,17 @@ export default class VacancyList extends React.Component {
})); }));
generateVacancies() {