Fakultas Ilmu Komputer UI

Skip to content
GitLab
Commit d2914308 authored by M. Reza Qorib's avatar M. Reza Qorib
Browse files

[#140655219] [REFACTOR] #25 Finalize student profile page

parents 72aedee9 099cb4d7
Hide whitespace changes
Inline Side-by-side
assets/css/custom.css
View file @ d2914308
......@@ -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%;
}
assets/js/ProfilePage.jsx
View file @ d2914308
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 >
......
assets/js/components/VacancyList.jsx
View file @ d2914308
......@@ -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() }
......
assets/js/lib/Server.jsx
View file @ d2914308
......@@ -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);
......
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

Excellence In Teamwork