Fakultas Ilmu Komputer UI

Skip to content
GitLab
Commit b6cc7fbf authored by Syahrul Findi's avatar Syahrul Findi
Browse files

Change PropTypes with prop-types package

parent 36edf174
Expand all Hide whitespace changes
Inline Side-by-side
.prettierrc 0 → 100644
View file @ b6cc7fbf
{
"trailingComma": "all",
"singleQuote": true,
"arrowParens": "always"
}
assets/js/AdminVacancyPage.jsx
View file @ b6cc7fbf
......@@ -4,13 +4,11 @@ import Pane from './components/Pane';
import AdminVacancy from './components/AdminVacancy';
import { Item } from 'semantic-ui-react';
export default class AdminVacancyPage extends React.Component {
render() {
return (
<Tabs selected={0}>
<Pane label="Lowongan Belum Terferivikasi" >
<Pane label="Lowongan Belum Terferivikasi">
<Item.Group>
<AdminVacancy />
</Item.Group>
......
assets/js/ApplicantPage.jsx
View file @ b6cc7fbf
import React from 'react';
import PropTypes from 'prop-types';
import { Dropdown } from 'semantic-ui-react';
import Tabs from './components/Tabs';
import ApplicantList from './components/ApplicantList';
......@@ -8,7 +9,7 @@ import Server from './lib/Server';
export default class ApplicantPage extends React.Component {
static propTypes = {
user: React.PropTypes.object.isRequired,
user: PropTypes.object.isRequired,
};
constructor(props) {
......@@ -29,7 +30,10 @@ export default class ApplicantPage extends React.Component {
}
getVacancyList = () =>
Server.get(`/companies/${this.props.user.data.company.id}/vacancies/`, false).then(
Server.get(
`/companies/${this.props.user.data.company.id}/vacancies/`,
false,
).then(
(data) => {
const results = data.results;
const urls = [
......@@ -52,7 +56,7 @@ export default class ApplicantPage extends React.Component {
});
this.setState({ urls });
},
error =>
(error) =>
error.then((r) => {
this.modalAlert.open('Gagal mendapatkan daftar lowongan', r.detail);
}),
......@@ -81,7 +85,10 @@ export default class ApplicantPage extends React.Component {
url={`${this.state.selected}`}
label="Semua Lamaran"
child={
<ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.ALL} />
<ApplicantList
companyId={company.id}
status={Applicant.APPLICATION_STATUS.ALL}
/>
}
/>
<Pagination
......@@ -89,7 +96,10 @@ export default class ApplicantPage extends React.Component {
url={`${this.state.selected}?status=${Applicant.APPLICATION_STATUS.NEW}`}
label="Lamaran Baru"
child={
<ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.NEW} />
<ApplicantList
companyId={company.id}
status={Applicant.APPLICATION_STATUS.NEW}
/>
}
/>
<Pagination
......@@ -97,7 +107,10 @@ export default class ApplicantPage extends React.Component {
url={`${this.state.selected}?status=${Applicant.APPLICATION_STATUS.READ}`}
label="Lamaran Dibaca"
child={
<ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.READ} />
<ApplicantList
companyId={company.id}
status={Applicant.APPLICATION_STATUS.READ}
/>
}
/>
<Pagination
......
assets/js/CompanyPage.jsx
View file @ b6cc7fbf
import React from 'react';
import PropTypes from 'prop-types';
import { Button } from 'semantic-ui-react';
import Tabs from './components/Tabs';
import CompanyList from './components/CompanyList';
......@@ -6,9 +7,8 @@ import Company from './components/Company';
import Pagination from './components/Pagination';
export default class CompanyPage extends React.Component {
static propTypes = {
user: React.PropTypes.object.isRequired,
user: PropTypes.object.isRequired,
};
handleClick = () => window.open('/admin/');
......@@ -17,7 +17,13 @@ export default class CompanyPage extends React.Component {
return (
<div>
<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"
/>
</div>
<Tabs selected={0}>
......@@ -25,33 +31,25 @@ export default class CompanyPage extends React.Component {
key={1}
url={`/companies/?status=${Company.COMPANY_STATUS.NEW}`}
label="Belum Diverifikasi"
child={
<CompanyList status={Company.COMPANY_STATUS.NEW} />
}
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} />
}
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} />
}
child={<CompanyList status={Company.COMPANY_STATUS.UNVERIFIED} />}
/>
<Pagination
key={4}
url={'/companies/'}
label="Semua Perusahaan"
child={
<CompanyList status={Company.COMPANY_STATUS.ALL} />
}
child={<CompanyList status={Company.COMPANY_STATUS.ALL} />}
/>
</Tabs>
</div>
......
assets/js/CompanyProfile.jsx
View file @ b6cc7fbf
import React from 'react';
import { Segment, Header, Image, Container, Form, Button, Icon, TextArea } from 'semantic-ui-react';
import TopMenu from './components/TopMenu';
import PropTypes from 'prop-types';
import {
Segment,
Header,
Image,
Container,
Form,
Button,
Icon,
TextArea,
} from 'semantic-ui-react';
import { Doughnut } from 'react-chartjs-2';
import TopMenu from './components/TopMenu';
import Server from './lib/Server';
import Dumper from './lib/Dumper';
import ModalAlert from './components/ModalAlert';
export default class CompanyProfile extends React.Component {
static propTypes = {
route: React.PropTypes.object.isRequired,
params: React.PropTypes.object.isRequired,
user: React.PropTypes.object.isRequired,
route: PropTypes.object.isRequired,
params: PropTypes.object.isRequired,
user: PropTypes.object.isRequired,
};
constructor(props) {
......@@ -39,25 +48,41 @@ export default class CompanyProfile extends React.Component {
this.getProfile = this.getProfile.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
Server.get(`/companies/${this.props.user.data.company.id}/vacancies/`, false).then((result) => {
Server.get(
`/companies/${this.props.user.data.company.id}/vacancies/`,
false,
).then((result) => {
this.setState({ vacancies: result.results });
});
Server.get(`/companies/${this.props.user.data.company.id}/applications/`, false).then((result) => {
Server.get(
`/companies/${this.props.user.data.company.id}/applications/`,
false,
).then((result) => {
this.setState({ applications: result.results });
});
}
getProfile() {
return Server.get(`/companies/${this.state.id}/`).then((result) => {
this.setState({name:result.name, address:result.address, category:result.category, id:result.id,
description:result.description, refresh: this.state.refresh + 1, website:result.website
});
if(result.logo != '') {
this.setState({logo: result.logo});
}
}, error => error.then(() => {
this.state.name = 'Gagal mendapatkan informasi';
}));
return Server.get(`/companies/${this.state.id}/`).then(
(result) => {
this.setState({
name: result.name,
address: result.address,
category: result.category,
id: result.id,
description: result.description,
refresh: this.state.refresh + 1,
website: result.website,
});
if (result.logo != '') {
this.setState({ logo: result.logo });
}
},
(error) =>
error.then(() => {
this.state.name = 'Gagal mendapatkan informasi';
}),
);
}
handleSubmit = (e) => {
......@@ -70,13 +95,25 @@ export default class CompanyProfile extends React.Component {
}
});
this.setState({ loading: true });
Server.submit(`/companies/${this.state.id}/profile/`, submitForm, 'PATCH').then(() => {
this.setState({ loading: false });
this.modalAlert.open('Profil berhasil diperbaharui', 'Silakan periksa kembali profil anda', this.getProfile);
}, error => error.then((r) => {
this.setState({ loading: false });
this.modalAlert.open('Pembaharuan profil gagal', Dumper.dump(r));
}));
Server.submit(
`/companies/${this.state.id}/profile/`,
submitForm,
'PATCH',
).then(
() => {
this.setState({ loading: false });
this.modalAlert.open(
'Profil berhasil diperbaharui',
'Silakan periksa kembali profil anda',
this.getProfile,
);
},
(error) =>
error.then((r) => {
this.setState({ loading: false });
this.modalAlert.open('Pembaharuan profil gagal', Dumper.dump(r));
}),
);
};
handleChange = (e) => {
......@@ -86,44 +123,44 @@ export default class CompanyProfile extends React.Component {
};
render() {
const defaultLogo = 'https://semantic-ui.com/images/wireframe/square-image.png';
const defaultLogo =
'https://semantic-ui.com/images/wireframe/square-image.png';
const { applications } = this.state;
const rejectedApplications = applications.filter(apl => apl.status === 3).length;
const acceptedApplications = applications.filter(apl => apl.status === 4).length;
const sisaApplications = applications.length - rejectedApplications - acceptedApplications;
const rejectedApplications = applications.filter((apl) => apl.status === 3)
.length;
const acceptedApplications = applications.filter((apl) => apl.status === 4)
.length;
const sisaApplications =
applications.length - rejectedApplications - acceptedApplications;
const chartData = {
labels: [
'Lamaran Ditolak',
'Lamaran Diterima',
'Lamaran Pending',
labels: ['Lamaran Ditolak', 'Lamaran Diterima', 'Lamaran Pending'],
datasets: [
{
data: [rejectedApplications, acceptedApplications, sisaApplications],
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
},
],
datasets: [{
data: [rejectedApplications, acceptedApplications, sisaApplications],
backgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56',
],
hoverBackgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56',
],
}],
}
};
return (
<div className="companyProfile">
<Segment className="segmentProfileCompany" >
<Segment className="segmentProfileCompany">
<Header as="h2" icon textAlign="center">
<Image src={this.state.logo || defaultLogo} size="small" shape="circular" />
<Image
src={this.state.logo || defaultLogo}
size="small"
shape="circular"
/>
</Header>
<Container textAlign="center" className="profile-biodata">
<div className="biodataCompany">
<h2>{ this.state.name }</h2>
<h3>{ this.state.address }</h3>
<p>{ this.state.category } - { this.state.description }</p>
<p>{ this.state.website }</p>
<h2>{this.state.name}</h2>
<h3>{this.state.address}</h3>
<p>
{this.state.category} - {this.state.description}
</p>
<p>{this.state.website}</p>
</div>
</Container>
<Container textAlign="center" className="statistik">
......@@ -135,35 +172,76 @@ export default class CompanyProfile extends React.Component {
<Segment className="profileFormCompany">
<Header as="h3" textAlign="center">
<Icon name="edit" />
<Header.Content>
Edit Profile Page
</Header.Content>
<Header.Content>Edit Profile Page</Header.Content>
</Header>
<ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
<Form size="small" ref={(input) => { this.form = input; }} key={this.state.refresh} onSubmit={this.handleSubmit}>
<ModalAlert
ref={(modal) => {
this.modalAlert = modal;
}}
/>
<Form
size="small"
ref={(input) => {
this.form = input;
}}
key={this.state.refresh}
onSubmit={this.handleSubmit}
>
<Form.Field>
<label htmlFor="name">Nama Perusahaan</label>
<input placeholder="Nama Perusahaan" name="name" onChange={this.handleChange}
defaultValue={this.state.name === null ? null : this.state.name}/>
<input
placeholder="Nama Perusahaan"
name="name"
onChange={this.handleChange}
defaultValue={this.state.name === null ? null : this.state.name}
/>
</Form.Field>
<Form.Field>
<label htmlFor="address">Alamat Perusahaan</label>
<input placeholder="Alamat Perusahaan" name="address" onChange={this.handleChange}
defaultValue={this.state.address === null ? null : this.state.address}/>
<input
placeholder="Alamat Perusahaan"
name="address"
onChange={this.handleChange}
defaultValue={
this.state.address === null ? null : this.state.address
}
/>
</Form.Field>
<Form.Field>
<label htmlFor="description">Deskripsi</label>
<TextArea placeholder='Try adding multiple lines' name="description" onChange={this.handleChange}
autoHeight
defaultValue={this.state.description === null ? null : this.state.description}/>
<TextArea
placeholder="Try adding multiple lines"
name="description"
onChange={this.handleChange}
autoHeight
defaultValue={
this.state.description === null
? null
: this.state.description
}
/>
</Form.Field>
<Form.Field>
<label htmlFor="website">Website</label>
<input placeholder="Alamat Website" name="website" onChange={this.handleChange}
defaultValue={this.state.website === null ? null : this.state.website}/>
<input
placeholder="Alamat Website"
name="website"
onChange={this.handleChange}
defaultValue={
this.state.website === null ? null : this.state.website
}
/>
</Form.Field>
<Button type="submit" size="small" loading={this.state.loading} primary floated="right">Submit</Button>
</Form>
<Button
type="submit"
size="small"
loading={this.state.loading}
primary
floated="right"
>
Submit
</Button>
</Form>
</Segment>
</div>
);
......
assets/js/CreateVacancy.jsx
View file @ b6cc7fbf
import React from 'react';
import PropTypes from 'prop-types';
import { Segment, Button, Form, Header, Icon, Input } from 'semantic-ui-react';
import { browserHistory } from 'react-router';
import DatePicker from 'react-datepicker';
......@@ -8,10 +9,9 @@ import ModalAlert from './components/ModalAlert';
import Server from './lib/Server';
export default class CreateVacancy extends React.Component {
static propTypes = {
params: React.PropTypes.object.isRequired,
user: React.PropTypes.object.isRequired,
params: PropTypes.object.isRequired,
user: PropTypes.object.isRequired,
};
constructor(props) {
......@@ -47,7 +47,7 @@ export default class CreateVacancy extends React.Component {
this.setState({
description: r.description,
benefits: r.benefits,
requirements : r.requirements,
requirements: r.requirements,
responsibilities: r.responsibilities,
name: r.name,
salary: r.salary,
......@@ -78,7 +78,6 @@ export default class CreateVacancy extends React.Component {
this.setState({ description: value });
}
handleBenefits(value) {
this.setState({ benefits: value });
}
......@@ -110,54 +109,127 @@ export default class CreateVacancy extends React.Component {
data.company = this.state.company.id;
}
const url = this.state.vacancyId ? `/vacancies/${this.state.vacancyId}/` : '/vacancies/';
const url = this.state.vacancyId
? `/vacancies/${this.state.vacancyId}/`
: '/vacancies/';
const method = this.state.vacancyId ? 'PATCH' : 'POST';
Server.sendRequest(url, method, data).then(() => {
browserHistory.push('/lowongan');
}, error => error.then((r) => {
this.modalAlert.open('Gagal Membuat Lowongan', r.error);
this.setState({ formLoading: false });
}));
Server.sendRequest(url, method, data).then(
() => {
browserHistory.push('/lowongan');
},
(error) =>
error.then((r) => {
this.modalAlert.open('Gagal Membuat Lowongan', r.error);
this.setState({ formLoading: false });
}),
);
};
render = () => (
<div className="create-lowongan" >
<ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
<div className="create-lowongan">
<ModalAlert
ref={(modal) => {
this.modalAlert = modal;
}}
/>
<Segment className="form-segment">
<Header as="h2" icon textAlign="center">
<Icon name="briefcase" circular />
<Header.Content>
Lowongan KP
</Header.Content>
<Header.Content>Lowongan KP</Header.Content>
</Header>
<Form loading={this.state.formLoading} onSubmit={this.handleSubmit}>
<Form.Field label="Posisi" name="name" control={Input} onChange={this.handleChange} value={this.state.name} required />
<label htmlFor="description"> <b> Deskripsi Lowongan </b> </label>
{ !this.state.loading &&
<CKEditor value={this.state.description} onChange={this.handleDescription} /> }
<Form.Field
label="Posisi"
name="name"
control={Input}
onChange={this.handleChange}
value={this.state.name}
required
/>
<label htmlFor="description">
{' '}
<b> Deskripsi Lowongan </b>{' '}
</label>
{!this.state.loading && (
<CKEditor
value={this.state.description}
onChange={this.handleDescription}
/>
)}
<script>CKEDITOR.replace( 'description' );</script>
<Form.Field label="Periode Kerja" name="working_period" control={Input} onChange={this.handleChange} value={this.state.working_period} />
<label htmlFor="responsibilities"> <b> Tanggung Jawab Lowongan </b> </label>
{ !this.state.loading &&
<CKEditor value={this.state.responsibilities} onChange={this.handleResponsibilities} /> }
<Form.Field
label="Periode Kerja"
name="working_period"
control={Input}
onChange={this.handleChange}
value={this.state.working_period}
/>
<label htmlFor="responsibilities">
{' '}
<b> Tanggung Jawab Lowongan </b>{' '}
</label>
{!this.state.loading && (
<CKEditor
value={this.state.responsibilities}
onChange={this.handleResponsibilities}
/>
)}
<script>CKEDITOR.replace( 'responsibilities' );</script>
<br />
<Form.Field label="Jumlah yang Diterima" name="max_accepted_applicants" type="number" min="1" control={Input} onChange={this.handleChange} value={this.state.max_accepted_applicants} required />
<label htmlFor="benefits"> <b> Keuntungan </b> </label>
{ !this.state.loading && <CKEditor value={this.state.benefits} onChange={this.handleBenefits} /> }
<script>CKEDITOR.replace( 'benefits' );</script>
<Form.Field
label="Jumlah yang Diterima"
name="max_accepted_applicants"
type="number"
min="1"
control={Input}
onChange={this.handleChange}
value={this.state.max_accepted_applicants}
required
/>
<label htmlFor="benefits">
{' '}
<b> Keuntungan </b>{' '}
</label>
{!this.state.loading && (
<CKEditor
value={this.state.benefits}
onChange={this.handleBenefits}
/>