diff --git a/assets/css/custom.css b/assets/css/custom.css
index 952d5128d9259ef649fe13edb3b581de2d62b2f8..55678587b83b02673ef5315a03ad52b53da1b3ae 100755
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -175,3 +175,47 @@ card .formRegis{
color: black;
}
+.biodata h5{
+ line-height: 30%;
+}
+
+.biodata-company h4{
+ color: grey;
+}
+
+.button-profile{
+ margin-top:30px;
+}
+
+.ui.segment.profile-form{
+ padding-bottom: 37px;
+ margin-top:4%;
+}
+
+.profilePage{
+ margin-bottom:40px;
+ margin-left:5%;
+ margin-right:5%;
+}
+
+.ui.segment.segment-profile-company{
+ margin-left: 10%;
+ margin-right: 10%;
+ padding: 5%;
+}
+
+.ui.segment.profile-form-company{
+ margin-top:4%;
+ margin-left: 10%;
+ margin-right: 10%;
+ padding-bottom:3%;
+}
+
+.company-profile{
+ padding-bottom:5%;
+}
+
+.ui.segment.vacancyList-company{
+ margin-left: 10%;
+ margin-right: 10%;
+}
diff --git a/assets/js/ProfilePage.jsx b/assets/js/ProfilePage.jsx
index b3ce4d416861c7d80abfa88e46c7129e8e7164cb..383877d05ccf8eda8e6c63e594895ba0bfe85b38 100644
--- a/assets/js/ProfilePage.jsx
+++ b/assets/js/ProfilePage.jsx
@@ -1,6 +1,7 @@
import React from 'react';
import { Segment, Image, Header, Icon, Checkbox, Container, Button, Form } from 'semantic-ui-react';
import Server from './lib/Server';
+import ModalAlert from './components/ModalAlert';
export default class ProfilePage extends React.Component {
@@ -23,81 +24,90 @@ export default class ProfilePage extends React.Component {
cityOfBirth: '',
dateOfBirth: '',
resume: '',
- phone: '',
- showTranscript: '',
+ phone_number: '',
+ show_transcript: '',
+ photo: '',
form: {
picture: '',
name: '',
- phone: '',
+ phone_number: '',
resume: '',
- showTranscript: '',
+ show_transcript: '',
},
+ needRefresh: 0,
+ bagikanTranskrip: '',
};
this.getProfile = this.getProfile.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleCheckbox = this.handleCheckbox.bind(this);
+ this.handleSubmit = this.handleSubmit.bind(this);
+ this.handleFile = this.handleFile.bind(this);
+ this.refresh = this.refresh.bind(this);
this.getProfile();
}
getProfile() {
- if (this.props.route.own) {
- // check api format in /api#!/login
- this.state = {
- id: this.props.user.data.student.id,
- npm: this.props.user.data.student.npm,
- name: this.props.user.data.student.name,
- major: this.props.user.data.student.major,
- batch: this.props.user.data.student.batch,
- email: this.props.user.data.student.user.email,
- cityOfBirth: this.props.user.data.student.birth_place,
- dateOfBirth: this.props.user.data.student.birth_date,
- resume: this.props.user.data.student.resume,
- phone: this.props.user.data.student.phone_number,
- showTranscript: this.props.user.data.student.show_transcript,
- form: {
- picture: '',
- name: '',
- phone: '',
- resume: '',
- showTranscript: '',
- },
- };
- return Promise.resolve(this.state);
- } else {
- return Server.get(`/students/${this.props.params.id}/`).then((data) => {
- this.setState({
- id: data.id,
- name: data.name,
- npm: data.npm,
- resume: data.resume,
- major: data.major,
- batch: data.batch,
- email: data.user.email,
- cityOfBirth: data.birth_place,
- dateOfBirth: data.birth_date,
- phone: data.phone_number,
- showTranscript: data.show_transcript,
- });
- }, error => error.then(() => {
+ const id = this.props.route.own ? this.props.user.data.student.id : this.props.params.id;
+ return Server.get(`/students/${id}/`).then((data) => {
+ this.setState({
+ id: data.id,
+ name: data.name,
+ npm: data.npm,
+ resume: data.resume,
+ major: data.major,
+ batch: data.batch,
+ email: data.user.email,
+ cityOfBirth: data.birth_place,
+ dateOfBirth: data.birth_date,
+ phone_number: data.phone_number,
+ photo: data.photo,
+ show_transcript: data.show_transcript,
+ bagikanTranskrip: (data.show_transcript ? 'Ya' : 'Tidak'),
+ });
+ }, error => error.then(() => {
// this.modalAlert.open('Gagal Mengambil ', r.error);
- this.state.name = 'Gagal mendapatkan informasi';
- }));
- }
+ this.state.name = 'Gagal mendapatkan informasi';
+ }));
+ }
+
+ handleSubmit = (e) => {
+ e.preventDefault();
+
+ const submitForm = {};
+ console.log(this.state.form);
+ Object.keys(this.state.form).forEach((key) => {
+ if (this.state.form[key] !== '') {
+ submitForm[key] = this.state.form[key];
+ }
+ });
+ console.log(submitForm);
+ Server.submit(`/profiles/students/${this.state.id}/`, submitForm, 'PATCH').then(() => {
+ this.modalAlert.open('Profil berhasil diperbaharui', 'Silakan periksa kembali profil anda', this.refresh );
+ }, error => error.then((r) => {
+ this.modalAlert.open('Pembaharuan profil gagal', r.error);
+ }));
+ };
+
+ refresh = () => {
+ this.setState({ needRefresh: (this.state.needRefresh + 1) });
+ }
+
+ handleFile = (e) => {
+ const form = this.state.form;
+ form[e.target.name] = e.target.files[0];
+ this.setState({ form });
}
handleChange = (e) => {
- console.log(e.target.name);
const form = this.state.form;
form[e.target.name] = e.target.value;
this.setState({ form });
- console.log(this.state.form);
};
handleCheckbox = (e, d) => {
const form = this.state.form;
form[d.name] = d.checked;
- this.setState({ form });
- console.log(this.state.form);
+ this.setState({ form, show_transcript: d.checked });
};
updateForm(show) {
@@ -110,28 +120,30 @@ export default class ProfilePage extends React.Component {
Edit Profile Page
</Header.Content>
</Header>
+ <ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
<Form size="small" onSubmit={this.handleSubmit}>
<Form.Field>
<label htmlFor="photo">Profile Picture</label>
- <input onChange={this.handleChange} placeholder="Profile Photo.jpg" name="photo" type="File" />
+ <input onChange={this.handleFile} placeholder="Profile Photo.jpg" name="photo" type="File" />
</Form.Field>
<Form.Field>
<label htmlFor="email">Email</label>
<input onChange={this.handleChange} placeholder="jojon@email.com" name="email" />
</Form.Field>
<Form.Field>
- <label htmlFor="phone">No. Hp</label>
- <input onChange={this.handleChange} placeholder="08123456789" name="phone" />
+ <label htmlFor="phone_number">No. Hp</label>
+ <input onChange={this.handleChange} placeholder="08123456789" name="phone_number" />
</Form.Field>
<Form.Field>
<label htmlFor="resume">Resume</label>
- <input onChange={this.handleChange} placeholder="Resume" name="resume" type="File" />
+ <input onChange={this.handleFile} placeholder="Resume" name="resume" type="File" />
</Form.Field>
<Form.Field>
<Checkbox
onChange={this.handleCheckbox}
+ checked={ this.state.show_transcript ? true : false }
label="Ijinkan perusahaan tempat saya mendaftar untuk melihat transkrip akademik saya"
- name="showTranscript"
+ name="show_transcript"
/>
</Form.Field>
<Button type="submit" size="small" primary floated="right">Submit</Button>
@@ -144,23 +156,29 @@ export default class ProfilePage extends React.Component {
}
render() {
+ const defaultPicture = 'http://semantic-ui.com/images/wireframe/square-image.png';
return (
<div className="profilePage">
<Segment className="biodata-section">
<Header as="h2" icon textAlign="center">
- <Image src="http://semantic-ui.com/images/wireframe/square-image.png" size="small" shape="circular" />
+ <Image src={this.state.photo ? this.state.photo : defaultPicture} size="small" shape="circular" />
</Header>
<Container textAlign="center" className="profile-biodata">
<div className="biodata">
<h3> { this.state.name } </h3>
<h5> { this.state.major }, { this.state.batch } </h5>
<h5> { this.state.email } </h5>
- <h5> { this.state.phone } </h5>
+ <h5> { this.state.phone_number } </h5>
<h5> { this.state.cityOfBirth}, { this.state.dateOfBirth } </h5>
</div>
<div className="button-profile">
- <Button primary size="small">Resume</Button>
- { this.state.showTranscript ? <Button primary size="small">Transkrip</Button> : <div /> }
+ <a href={this.state.resume ? this.state.resume : '#'} ><Button primary size="small">Resume</Button></a>
+ { this.state.show_transcript && (this.state.needRefresh > 0) &&
+ <Button primary size="small">Transkrip</Button>
+ }
+ </div>
+ <div>
+ Bagikan Transkrip: <b>{ this.state.bagikanTranskrip }</b>
</div>
</Container>
</Segment >
diff --git a/assets/js/components/VacancyList.jsx b/assets/js/components/VacancyList.jsx
index fdd6237514cfdc07dd25448da9b54f9cdda93265..e6fdad2ae3ff05387549b60a7e5cd3c7e1ac9714 100644
--- a/assets/js/components/VacancyList.jsx
+++ b/assets/js/components/VacancyList.jsx
@@ -105,7 +105,7 @@ export default class VacancyList extends React.Component {
}
render = () => (
- <Segment>
+ <Segment padded className="vacancyList-company">
<ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
<Grid container columns="eleven" doubling>
{ this.companyHeader() }
diff --git a/assets/js/lib/Server.jsx b/assets/js/lib/Server.jsx
index 030bba1c45f3698def46a04d7d0534b882cab53f..6100dcc427252b020d105807c8d3265ba5d72c0b 100644
--- a/assets/js/lib/Server.jsx
+++ b/assets/js/lib/Server.jsx
@@ -19,14 +19,15 @@ export default class Server {
static submit(path, data, method = 'POST', useCache = false) {
const form = new FormData();
- Object.keys(data).map(k => form.append(k, data[k]));
+ Object.keys(data).map(k => {
+ form.append(k, data[k]);
+ });
const requestData = {
- 'X-CSRFToken': Server.getCookie('csrftoken'),
- mode: 'no-cors',
- method: 'POST',
+ headers: { 'X-CSRFToken': Server.getCookie('csrftoken') },
body: form,
credentials: 'same-origin',
+ method,
};
return this.handleFetchRequest(requestData, path, useCache);