From 15a713ab441a99dc05fee6af900078cfab64c7b4 Mon Sep 17 00:00:00 2001 From: Izzatul Muttaqin Date: Fri, 6 Dec 2019 20:15:42 +0700 Subject: [PATCH] Melakukan redesign untuk memberikan UX lebih baik dengan fitur tab --- assets/js/ProfilePage.jsx | 1071 +++++++++++++++++-------------------- 1 file changed, 490 insertions(+), 581 deletions(-) diff --git a/assets/js/ProfilePage.jsx b/assets/js/ProfilePage.jsx index 3ff6454..2ae098b 100755 --- a/assets/js/ProfilePage.jsx +++ b/assets/js/ProfilePage.jsx @@ -10,6 +10,7 @@ import { Form, Grid, Message, + Tab } from 'semantic-ui-react'; import Server from './lib/Server'; import Storage from './lib/Storage'; @@ -289,286 +290,514 @@ export default class ProfilePage extends ProfileHandler { gotoStudentTranscript = () => gotoLink(`transkrip/${this.state.id}`); render() { - const sertifikat_exists = this.state.sertifikat; - let sertifikat_state; - if (sertifikat_exists == '') { - sertifikat_state =

Sertifikat belum ada

; - } else { - sertifikat_state =

Sertifikat sudah ada

; - } - const defaultPicture = 'https://semantic-ui.com/images/wireframe/square-image.png'; - return ( -
- - - -
-
- -
-
- - - -
- -

- {' '} - {this.state.name} - {' '} -

-
- - - - - - - -

- {' '} - {this.state.major || 'N/A'} - , - {' '} - {this.state.batch || 'N/A'} + const detailTab = [ + { + menuItem: 'Experience', render: () => + + + + + + + + + +

+ Latest working experience as: {' '} -

-
-
-
- - - - - - - -

+ + + {' '} + {this.state.latest_work || 'N/A'} + {' '} + + +

+

+ Description: {' '} - {this.state.email || 'N/A'} + {' '} -

-
-
-
- - - - - - - -

+ {this.state.latest_work_desc || 'N/A'} {' '} - {this.state.phone_number || 'Nomor Telepon belum ditambahkan'} -

-
-
-
+ +

+ + + - - - - - - -

- {' '} - {this.state.gender || 'Gender belum ditambahkan'} -

-
-
-
+ + + + + + +

+ {' '} + {this.state.awards || 'Awards belum ditambahkan'} + {' '} +

+
+
+
+ + + + + + + {sertifikat_state} + + + + + + + + + +

+ {' '} + {this.state.projects + || 'Projects belum ditambahkan'} + {' '} +

+
+
+
+ + + + + + +

+ {' '} + {this.state.volunteer || 'N/A'} + {' '} +

+
+
+
- - - - - - -

- {' '} - {this.state.cityOfBirth || 'N/A'} - , - {' '} - {this.state.dateOfBirth || 'N/A'} - {' '} -

-
-
-
+ + + + + + +

+ {' '} + {this.state.seminar + || 'Seminar dan Training kosong'} + {' '} +

+
+
+
+ + + + }, + { + menuItem: 'Skills', + render: () => + + + + + + + + + +

+ {' '} + {this.state.skills || 'Skills belum ditambahkan'} + {' '} +

+
+
+
+ + + + + + +

+ {' '} + {this.state.languages || 'N/A'} + {' '} +

+
+
+
+ + + + + + +

+ {' '} + {this.state.certification || 'N/A'} + {' '} +

+
+
+
+ + + + + + +

+ {' '} + {this.state.student_toefl || 'N/A'} + {' '} +

+
+
+
+ + + + + + +

+ {' '} + {this.state.ielts || 'N/A'} + {' '} +

+
+
+
+
+
+
+ }, + { + menuItem: 'Links', + render: () => + + + + + + + + + + + {' '} + {this.state.portfolio_link || 'Portofolio belum ditambahkan'} + {' '} + + + + - - - - - - -

- {' '} - {this.state.self_description || 'N/A'} -

-
-
-
+ + + + + + + + {' '} + {this.state.linkedin_url || 'N/A'} + {' '} + + + + - - - - - - -

- {' '} - {this.state.student_gpa || 'null'} - {' '} -

-
-
-
+ + + + + + + + {' '} + {this.state.hackerrank_url || 'N/A'} + {' '} + + + + - - - - - - - - {' '} - {this.state.dependants || 'N/A'} - {' '} - - - - -
+ + + + + + + + {' '} + {this.state.website_url || 'N/A'} + {' '} + + + + - + + + + {this.state.github_url ? ( + + {' '} + {this.state.github_url} + {' '} + + ) : ( +

N/A

+ )} +
+
+
+ + + + -

- {' '} - {this.state.alamat || 'N/A'} - {' '} -

+ { + this.state.gitlab_url + ? ( + + {' '} + {this.state.gitlab_url} + {' '} + + ) + :

N/A

+ }
- - - - - - - - -

- {' '} - {this.state.region || 'N/A'} - {' '} -

-
-
-
- - - - - - -

- {' '} - {this.state.expected_salary || 'N/A'} + + + + }, + { + menuItem: 'Other', + render: () => + + + + + + + +

+ {' '} + {this.state.gender || 'Gender belum ditambahkan'} +

+
+
+
+ + + + + + + +

+ {' '} + {this.state.cityOfBirth || 'N/A'} + , {' '} -

-
-
-
+ {this.state.dateOfBirth || 'N/A'} + {' '} +

+
+
+
+ + + + + + + +

+ {' '} + {this.state.alamat || 'Alamat belum dimasukkan'} + {' '} +

+
+
+
- - - - - - -

- {' '} - {this.state.volunteer || 'N/A'} - {' '} -

-
-
-
- - - - - - -

- {' '} - {this.state.awards || 'Awards belum ditambahkan'} - {' '} -

-
-
-
+ + + + + + +

+ {' '} + {this.state.region || 'Provinsi belum dimasukkan'} + {' '} +

+
+
+
+ + + + + + + + {' '} + {this.state.dependants || 'Tidak ada tanggungan'} + {' '} + + + + + + + + + + +

+ {' '} + {this.state.expected_salary || 'Belum ada Expected Salary'} + {' '} +

+
+
+
+ + + + + + +

+ {' '} + {this.state.region || 'N/A'} + {' '} +

+
+
+
+ + + + + + +

+ {' '} + {`${this.state.age} years` || 'N/A'} + {' '} +

+
+
+
+ + + + + + +

+ {' '} + {this.state.interests + || 'Interests belum ditambahkan'} + {' '} +

+
+
+
+ + + + + + +

+ {' '} + {this.state.related_course || 'Related Course belum ditambahkan'} + {' '} +

+
+
+
+ + + +

Last Seen

+
+ +

+ {' '} + {this.state.lastLoggedIn} + {' '} +

+
+
+
+ + } + ] - - - - - - - { sertifikat_state } - - - + const sertifikat_exists = this.state.sertifikat; + let sertifikat_state; + if (sertifikat_exists == '') { + sertifikat_state =

Sertifikat belum ada

; + } else { + sertifikat_state =

Sertifikat sudah ada

; + } + const defaultPicture = 'https://semantic-ui.com/images/wireframe/square-image.png'; + return ( +
+ + + +
+
+ +
+
- - - - - - -

- {' '} - {this.state.projects - || 'Projects belum ditambahkan'} - {' '} -

-
-
+ + +
+ +

+ {' '} + {this.state.name} + {' '} +

- +

{' '} - {this.state.certification || 'N/A'} - {' '} -

-
-
-
- - - - - - - -

+ {this.state.major || 'N/A'} + , {' '} - {this.state.languages || 'N/A'} + {this.state.batch || 'N/A'} {' '}

@@ -578,13 +807,12 @@ export default class ProfilePage extends ProfileHandler { - +

{' '} - {this.state.seminar - || 'Seminar dan Training kosong'} + {this.state.email || 'N/A'} {' '}

@@ -594,76 +822,46 @@ export default class ProfilePage extends ProfileHandler { - - - -

- {' '} - {this.state.interests - || 'Interests belum ditambahkan'} - {' '} -

-
-
-
- - - - +

{' '} - {this.state.related_course || 'Related Course belum ditambahkan'} - {' '} + {this.state.phone_number || 'Nomor Telepon belum ditambahkan'}

+ -

Last Seen

+

{' '} - {this.state.lastLoggedIn} - {' '} + {this.state.self_description || 'Belum ada deskripsi diri'}

+ - + -

+

{' '} - {`${this.state.age} years` || 'N/A'} + {("GPA :" + this.state.student_gpa) || 'Nilai GPA belum dimasukkan'} {' '}

-
- - - - - - - -

- {' '} - {this.state.region || 'N/A'} - {' '} -

-
-
-
+
@@ -764,298 +962,9 @@ export default class ProfilePage extends ProfileHandler {
- -

Experience

- - - - - - - - -

- Latest working experience as: - {' '} - - - {' '} - {this.state.latest_work || 'N/A'} - {' '} - - -

-

- Description: - {' '} - - {' '} - {this.state.latest_work_desc || 'N/A'} - {' '} - -

-
-
-
- - - - - - - -

- {' '} - {this.state.awards || 'Awards belum ditambahkan'} - {' '} -

-
-
-
- - - - - - - {sertifikat_state} - - - - - - - - - -

- {' '} - {this.state.projects - || 'Projects belum ditambahkan'} - {' '} -

-
-
-
- - - - - - -

- {' '} - {this.state.volunteer || 'N/A'} - {' '} -

-
-
-
- - - - - - - -

- {' '} - {this.state.seminar - || 'Seminar dan Training kosong'} - {' '} -

-
-
-
-
-
-
- - -

Skills

- - - - - - - - -

- {' '} - {this.state.skills || 'Skills belum ditambahkan'} - {' '} -

-
-
-
- - - - - - -

- {' '} - {this.state.languages || 'N/A'} - {' '} -

-
-
-
- - - - - - -

- {' '} - {this.state.certification || 'N/A'} - {' '} -

-
-
-
- - - - - - -

- {' '} - {this.state.student_toefl || 'N/A'} - {' '} -

-
-
-
- - - - - - -

- {' '} - {this.state.ielts || 'N/A'} - {' '} -

-
-
-
-
-
-
- - -

Links

- - - - - - - - - - {' '} - {this.state.portfolio_link || 'Portofolio belum ditambahkan'} - {' '} - - - - - - - - - - - - - {' '} - {this.state.linkedin_url || 'N/A'} - {' '} - - - - - - - - - - - - - {' '} - {this.state.hackerrank_url || 'N/A'} - {' '} - - - - - - - - - - - - - {' '} - {this.state.website_url || 'N/A'} - {' '} - - - - - - - - - - - - {this.state.github_url ? ( - - {' '} - {this.state.github_url} - {' '} - - ) : ( -

N/A

- )} -
-
-
- - - - - - - { - this.state.gitlab_url - ? ( - - {' '} - {this.state.gitlab_url} - {' '} - - ) - :

N/A

- } -
-
-
-
-
+ + - - {/* { this.updateForm(this.props.route.own) } */}
); } -- GitLab