Fakultas Ilmu Komputer UI

Commit d7c86abe authored by HANIF AGUNG PRAYOGA's avatar HANIF AGUNG PRAYOGA
Browse files

Merge branch '1606884344-58' into 'master'

1606884344 58

See merge request !124
parents 44e4882a 07a36d36
Pipeline #24581 passed with stages
in 11 minutes and 46 seconds
......@@ -325,3 +325,11 @@ test/*
package-lock.json
# MacOS related files
.DS_Store
kape/files/student-photo/
kape/files/student-resume/
kape/files/student-sertifikat/
kape/files/student-ui-ux-portofolio/
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
import React from 'react';
import { Segment, Image, Header, Icon, Checkbox, Container, Button, Form, Grid, Message } from 'semantic-ui-react';
import Server from './lib/Server';
import Storage from './lib/Storage';
import ModalAlert from './components/ModalAlert';
import Dumper from './lib/Dumper';
export default class ProfilePage extends React.Component {
static propTypes = {
route: React.PropTypes.object.isRequired,
params: React.PropTypes.object.isRequired,
user: React.PropTypes.object.isRequired,
};
constructor(props) {
super(props);
/* istanbul ignore next */
this.state = {
id: '',
npm: '',
name: '',
major: '',
batch: '',
email: '',
gender: '',
region: '',
cityOfBirth: '',
dateOfBirth: '',
resume: '',
phone_number: '',
portfolio_link: '',
show_transcript: '',
photo: '',
age: '',
intro: '',
expected_salary: '',
job_seeking_status: '',
volunteer: '',
skills: '',
form: {
picture: '',
email: '',
phone_number: '',
gender: '',
region: '',
skills: '',
resume: '',
portfolio_link: '',
show_transcript: '',
volunteer: '',
intro: '',
job_seeking_status: '',
latest_work: '',
latest_work_desc: '',
github_url: '',
awards: '',
},
bagikanTranskrip: '',
acceptedNo: 0,
readNo: 0,
refresh: 1,
loading: false,
linkedin_url: '',
hackerrank_url: '',
self_description: '',
student_gpa: 0.0,
website_url: '',
latest_work: '',
latest_work_desc: '',
github_url: '',
awards: '',
};
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.gotoLink = this.gotoLink.bind(this);
this.gotoStudentResume = this.gotoStudentResume.bind(this);
this.gotoStudentTranscript = this.gotoStudentTranscript.bind(this);
this.getProfile();
}
getProfile() {
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,
gender: data.gender,
region: data.region,
cityOfBirth: data.birth_place,
dateOfBirth: this.parseIndonesianDateFormat(data.birth_date),
phone_number: data.phone_number,
portfolio_link: data.portfolio_link,
photo: data.photo,
show_transcript: data.show_transcript,
acceptedNo: data.accepted_no,
readNo: data.read_no,
bagikanTranskrip: data.show_transcript,
refresh: this.state.refresh + 1,
age: data.age,
intro: data.intro,
expected_salary: data.expected_salary,
job_seeking_status: data.job_seeking_status,
volunteer: data.volunteer,
linkedin_url: data.linkedin_url,
hackerrank_url: data.hackerrank_url,
self_description: data.self_description,
student_gpa: data.student_gpa,
website_url: data.website_url,
latest_work: data.latest_work,
latest_work_desc: data.latest_work_desc,
skills: data.skills,
github_url: data.github_url,
awards: data.awards,
});
if (this.props.route.own) {
const newSession = this.props.user.data;
newSession.student = data;
Storage.set('user-data', newSession);
window.scrollTo(0, 0);
}
}, error => error.then(() => {
this.state.name = 'Gagal mendapatkan informasi';
}));
}
isFromGithubLinkValid = () => {
var github_link = this.state.form.github_url;
if (github_link == null) return;
return github_link.includes("https://github.com/");
}
parseIndonesianDateFormat(dateIndex) {
const monthNameIndex = {
'01': 'Januarxi',
'02': 'Februari',
'03': 'Maret',
'04': 'April',
'05': 'Mei',
'06': 'Juni',
'07': 'Juli',
'08': 'Agustus',
'09': 'September',
'10': 'Oktober',
'11': 'November',
'12': 'Desember',
};
const dateIndexArray = dateIndex.split('-');
dateIndexArray[1] = monthNameIndex[dateIndexArray[1]];
return dateIndexArray.reverse().join(' ');
}
handleSubmit = (e) => {
e.preventDefault();
if (!this.isFromGithubLinkValid()) {
alert("Pastikan link github yang anda tulis benar. (Berpola : https://github.com/<username>");
return;
}
const submitForm = {};
Object.keys(this.state.form).forEach((key) => {
if (this.state.form[key] !== '') {
submitForm[key] = this.state.form[key];
}
});
this.setState({ loading: true });
Server.submit(`/students/${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));
}));
};
handleFile = (e) => {
const form = this.state.form;
form[e.target.name] = e.target.files[0];
this.setState({ form });
};
handleChange = (e) => {
const form = this.state.form;
form[e.target.name] = e.target.value;
this.setState({ form });
};
handleCheckbox = (e, d) => {
const form = this.state.form;
form[d.name] = d.checked;
this.setState({ form, show_transcript: d.checked });
};
handleRadioGender = (e, {value}) => {
const form = this.state.form;
form.gender = value;
this.setState({ form })
}
handleRadio = (e, { value }) => {
const form = this.state.form;
form.job_seeking_status = value;
this.setState({ form });
}
gotoLink = (url) => {
const win = window.open(url);
win.focus();
};
gotoStudentResume = () => this.gotoLink(this.state.resume || '#');
gotoStudentTranscript = () => this.gotoLink(`transkrip/${this.state.id}`);
updateForm(show){
if (show) {
return (
<Segment className="profile-form">
<Header as="h3" textAlign="center">
<Icon name="edit" />
<Header.Content>
Edit Profile Page
</Header.Content>
</Header>
<ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
<Form ref={(input) => { this.form = input; }} key={this.state.refresh} size="small" onSubmit={this.handleSubmit}>
<Form.Field>
<label htmlFor="photo">Profile Picture</label>
<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={this.state.email === null ? 'jojon@email.com' : this.state.email}
defaultValue={this.state.email === null ? null : this.state.email}
name="email"
/>
</Form.Field>
<Form.Field>
<label htmlFor="phone_number">No. Hp</label>
<input
onChange={this.handleChange}
placeholder={this.state.phone_number === null ? '08123456789' : this.state.phone_number}
defaultValue={this.state.phone_number === null ? null : this.state.phone_number}
name="phone_number"
/>
</Form.Field>
<Form.Field>
<label htmlFor="gender">Jenis Kelamin</label>
<Form.Radio
label="Perempuan"
name='gender'
value="Perempuan"
onClick={this.handleRadioGender}
/>
<Form.Radio
label="Laki-laki"
name='gender'
value="Laki-laki"
onClick={this.handleRadioGender}
/>
</Form.Field>
<Form.Field>
<label htmlFor="self_description">Deskripsi Diri</label>
<input onChange={this.handleChange} placeholder="Saya suka belajar" name="self_description" />
</Form.Field>
<Form.Field>
<label htmlFor="linkedin_url">URL Profile LinkedIn</label>
<input
onChange={this.handleChange}
placeholder={this.state.linkedin_url === null ? 'https://www.linkedin.com/in/jojo/' : this.state.linkedin_url}
defaultValue={this.state.linkedin_url === null ? null : this.state.linkedin_url}
name="linkedin_url"
/>
</Form.Field>
<Form.Field>
<label htmlFor="hackerrank_url">URL Profile Hackerrank</label>
<input
onChange={this.handleChange}
placeholder={this.state.hackerrank_url === null ? 'https://www.hackerrank.com/james' : this.state.hackerrank_url}
defaultValue={this.state.hackerrank_url === null ? null : this.state.hackerrank_url}
name="hackerrank_url"
/>
</Form.Field>
<Form.Field>
<label htmlFor="portfolio_link">Portfolio Link</label>
<input
onChange={this.handleChange}
placeholder={this.state.portfolio_link === null ? 'https://www.example.com/myproject/' :
this.state.portfolio_link}
defaultValue={this.state.portfolio_link === null ? null : this.state.portfolio_link}
name="portfolio_link"
/>
</Form.Field>
<Form.Field>
<label htmlFor="website_url">Website URL</label>
<input
onChange={this.handleChange}
placeholder={this.state.website_url === null ? 'https://www.example.com/' : this.state.website_url}
defaultValue={this.state.website_url === null ? null : this.state.website_url}
name="website_url"
/>
</Form.Field>
<Form.Field>
<label htmlFor="linkedin_url">URL Profile Github</label>
<input onChange={this.handleChange} placeholder="https://github.com/bob" name="github_url" />
</Form.Field>
<Form.Field>
<label htmlFor="region">Region</label>
<input
onChange={this.handleChange}
placeholder={this.state.region === null ? 'Indonesia' : this.state.region}
defaultValue={this.state.region === null ? null : this.state.region}
name="region"
/>
</Form.Field>
<Form.Field>
<label htmlFor="skills">Skills</label>
<input onChange={this.handleChange} placeholder="Isi sesuai dengan keahlian anda" name="skills"/>
</Form.Field>
<Form.Field>
<label htmlFor="latest_work">Latest Working Experience</label>
<input
onChange={this.handleChange}
placeholder={this.state.latest_work === null ? 'Teaching Asssistant at Fasilkom UI' : this.state.latest_work}
defaultValue={this.state.latest_work === null ? null : this.state.latest_work}
name="latest_work"
/>
</Form.Field>
<Form.Field>
<label htmlFor="latest_work_desc">Latest Working Experience Description</label>
<input
onChange={this.handleChange}
placeholder={this.state.latest_work_desc === null ? 'Evaluate weekly assignment for 15 students' : this.state.latest_work_desc}
defaultValue={this.state.latest_work_desc === null ? null : this.state.latest_work_desc}
name="latest_work_desc"
/>
</Form.Field>
<Form.Field>
<label htmlFor="awards">Awards and Achievements</label>
<input
onChange={this.handleChange}
placeholder={this.state.awards === null ? 'Juara 2 UIUX Gemastik 2019' : this.state.awards}
defaultValue={this.state.awards === null ? null : this.state.awards}
name="awards"
/>
</Form.Field>
<Form.Field>
<label htmlFor="resume">Resume</label>
<input onChange={this.handleFile} placeholder="Resume" name="resume" type="File" />
</Form.Field>
<Form.Field>
<label htmlFor="phone_number">Expected Salary</label>
<input onChange={this.handleChange} placeholder="2000000" name="expected_salary" />
</Form.Field>
<Form.Field>
<label htmlFor="intro">Intro</label>
<input
onChange={this.handleChange}
placeholder={this.state.intro === null ? 'Ceritakan dirimu secara singkat' : this.state.intro}
defaultValue={this.state.intro === null ? null : this.state.intro}
name="intro"
/>
</Form.Field>
<Form.Field>
<label htmlFor="volunteer">Volunteering Experience</label>
<input onChange={this.handleChange} placeholder="Ketua Organisasi A - 2020" name="volunteer" />
</Form.Field>
<Form.Field>
<label htmlFor="intro">Status Pencarian Kerja</label>
<Form.Radio
label="Aktif"
name="job_seeking_status"
value="Active"
onClick={this.handleRadio}
/>
<Form.Radio
label="Pasif"
name="job_seeking_status"
value="Passive"
onClick={this.handleRadio}
/>
</Form.Field>
<Form.Field>
<Checkbox
onChange={this.handleCheckbox}
checked={!!this.state.show_transcript}
label="Ijinkan perusahaan tempat saya mendaftar untuk melihat transkrip akademik saya"
name="show_transcript"
/>
</Form.Field>
<Form.Field>
<label htmlFor="student_gpa">GPA</label>
<input
onChange={this.handleChange}
placeholder={this.state.student_gpa === null ? '3.50' : this.state.student_gpa}
defaultValue={this.state.student_gpa === null ? null : this.state.student_gpa}
name="student_gpa"
/>
</Form.Field>
<Button type="submit" size="small" loading={this.state.loading} primary floated="right">Submit</Button>
</Form>
</Segment>
);
}
return (<div />);
}
render() {
return (
<div className="profilePage">
{ this.updateForm(this.props.route.own) }
</div>
);
}
}
\ No newline at end of file
File mode changed from 100644 to 100755
......@@ -719,8 +719,8 @@ export default class ProfilePage extends React.Component {
</div>
</Segment>
{ this.updateForm(this.props.route.own) }
{/* { this.updateForm(this.props.route.own) } */}
</div>
);
}
}
}
\ No newline at end of file
File mode changed from 100644 to 100755
import React from 'react';
import ReactTestUtils from 'react-addons-test-utils';
import fetchMock from 'fetch-mock';
import EditProfil from '../EditProfile';
describe('EditProfil', () => {
const studentSession = {
url: 'http://localhost:8000/api/users/9/',
username: 'muhammad.reza42',
email: 'muhammad.reza42@ui.ac.id',
is_staff: false,
company: null,
supervisor: null,
student: {
id: 3,
user: {
url: 'http://localhost:8000/api/users/9/',
username: 'muhammad.reza42',
email: 'muhammad.reza42@ui.ac.id',
is_staff: false,
},
name: 'Muhammad R.',
created: '2017-03-28T13:33:46.147241Z',
updated: '2017-03-28T13:33:46.148248Z',
npm: 1406543593,
resume: null,
phone_number: null,
birth_place: null,
birth_date: '1995-02-24',
major: null,
batch: null,
show_resume: false,
bookmarked_vacancies: [
3,
2,
],
applied_vacancies: [
3,
1,
],
},
};
const companyUser = {
role: 'company',
data: {
url: 'http://localhost:8001/api/users/8/',
username: 'Tutuplapak',
email: '',
is_staff: false,
company: {
id: 3,
user: {
url: 'http://localhost:8001/api/users/8/',
username: 'Tutuplapak',
email: '',
is_staff: false,
},
name: 'Tutuplapak',
created: '2017-03-28T07:30:10.535000Z',
updated: '2017-03-28T07:30:10.535000Z',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet semper neque a fermentum. Duis ac tellus vitae augue iaculis ultrices. Curabitur commodo et neque nec feugiat. Morbi ac diam vel nunc commodo cursus. Phasellus nulla sapien, hendrerit vitae bibendum at, sollicitudin eu ante. Maecenas maximus, ante eu sollicitudin convallis, mauris nunc posuere risus, eu porttitor diam lacus vitae enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse at lectus a elit sollicitudin tempor. Nullam condimentum, justo nec tincidunt maximus, neque mi vulputate leo, sit amet lacinia massa ex eget sem. Duis ac erat facilisis, fringilla mauris in, consequat neque. In et neque consequat, vehicula magna at, efficitur ante. Mauris ac lacinia nibh.\r\n\r\nProin sagittis, lectus quis maximus varius, libero justo sollicitudin augue, non lacinia risus orci a enim. Curabitur iaculis enim quis ullamcorper commodo. Vivamus id nisi rhoncus, dignissim tellus quis, interdum est. Fusce sollicitudin eu libero ac feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas semper posuere ex, sed accumsan libero iaculis faucibus. Fusce laoreet ac ligula ut consectetur. Donec tortor mauris, rutrum at sodales et, viverra in dolor. Sed bibendum elit et maximus volutpat. Phasellus justo ipsum, laoreet sit amet faucibus eu, ultricies suscipit mauris. Nullam aliquam libero eu ante ultrices mattis. Donec non justo hendrerit neque volutpat placerat. Ut euismod est nec sem mollis, sit amet porttitor massa rhoncus. Aenean id erat sit amet nunc ultrices scelerisque non in ipsum. Curabitur sollicitudin nulla id mi accumsan venenatis.',
verified: true,
logo: 'http://localhost:8001/files/company-logo/8a258a48-3bce-4873-b5d1-538b360d0059.png',
address: 'Jl. Kebayoran Baru nomor 13, Jakarta Barat',
},
supervisor: null,
student: null,
},
};
const response = {
id: 3,
name: 'Muhammad R.',
user: {
url: 'http://localhost:8000/api/users/9/',
username: 'muhammad.reza42',
email: 'muhammad.reza42@ui.ac.id',
is_staff: false,
},
npm: 1406543593,
resume: null,
phone_number: '082213130098',
birth_place: null,
birth_date: '1995-02-24',
photo: 'dor',
major: null,
batch: null,
show_transcript: false,
github_url: '',
};
const response2 = {
id: 3,
name: 'Muhammad R.',
user: {
url: 'http://localhost:8000/api/users/9/',
username: 'muhammad.reza42',
email: 'muhammad.reza42@ui.ac.id',
is_staff: false,
},
npm: 1406543593,
resume: null,
phone_number: null,
birth_place: null,
birth_date: null,
major: null,
batch: null,
show_transcript: true,
};
it('show/hide transcript without problem', () => {
fetchMock.get('*', response2);
const profile = ReactTestUtils.renderIntoDocument(
<EditProfil route={{ own: true, data: studentSession }} user={{ data: studentSession }} params={{ id: 3 }} />);
const checkboxNode = ReactTestUtils.scryRenderedDOMComponentsWithTag(profile, 'Input')[8];
const checkbox = false;
checkboxNode.value = checkbox;
profile.getProfile().then(()=> expect(profile.state.show_transcript).to.equal(true));
profile.handleCheckbox({name: 'show_transcript', value: checkbox}, {name: 'show_transcript', checked: false});
// ReactTestUtils.Simulate.change(checkboxNode, { target: {name: 'show_transcript', value: checkbox} }, {name: 'show_transcript', checked: false});
expect(profile.state.form.show_transcript).to.equal(false);
fetchMock.restore();
});