From 9c6a4670c5a5a5b1616c17e7c1c807e691919762 Mon Sep 17 00:00:00 2001
From: Farhan Farasdak <farhan.farasdak@gmail.com>
Date: Wed, 26 Apr 2017 07:19:44 +0700
Subject: [PATCH] [#33] [#140655219] Transcript JS
---
assets/js/TranscriptPage.jsx | 59 +++++++++++++++++++++++++++++
assets/js/components/Course.jsx | 20 ++++++++++
assets/js/components/CourseList.jsx | 48 +++++++++++++++++++++++
3 files changed, 127 insertions(+)
create mode 100644 assets/js/TranscriptPage.jsx
create mode 100644 assets/js/components/Course.jsx
create mode 100644 assets/js/components/CourseList.jsx
diff --git a/assets/js/TranscriptPage.jsx b/assets/js/TranscriptPage.jsx
new file mode 100644
index 00000000..69da971a
--- /dev/null
+++ b/assets/js/TranscriptPage.jsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import CourseList from './components/CourseList';
+
+export default class TranscriptPage extends React.Component {
+ constructor(props) {
+ super(props);
+ /* istanbul ignore next */
+ this.state = {
+ data: {"transcript":[{
+ "url": "http://api.cs.ui.ac.id/siakngcs/riwayat-mahasiswa/99731/",
+ "npm": "1406622616",
+ "kelas": {
+ "url": "http://api.cs.ui.ac.id/siakngcs/kelas/473569/",
+ "kd_kls": "473569",
+ "nm_kls": "MD 1 - B",
+ "nm_mk_cl": {
+ "url": "http://api.cs.ui.ac.id/siakngcs/matakuliah/817/",
+ "kd_mk": "CSF1600100",
+ "nm_mk": "Matematika Diskret 1",
+ "kd_org": "06.00.12.01",
+ "kd_kur": "06.00.12.01-2012",
+ "jml_sks": 3
+ },
+ "kd_kur_cl": "06.00.12.01-2012",
+ "kd_mk_cl": "CSF1600100",
+ "periode": {
+ "url": "http://api.cs.ui.ac.id/siakngcs/periode/25/",
+ "term": 1,
+ "tahun": 2014
+ },
+ "pengajar": [
+ {
+ "url":
+"http://api.cs.ui.ac.id/siakngcs/dosen/196111251992031001/",
+ "nomor": "196111251992031001",
+ "nama": "Prof. Drs. T. Basaruddin M.Sc., Ph.D",
+ "id_skema": 1,
+ "nm_skema": "Skema Inti",
+ "maks_sks": 8
+ }
+ ]
+ },
+ "kd_kls": "473569",
+ "kd_kur": "06.00.12.01-2012",
+ "kd_mk": "CSF1600100",
+ "kd_org": "01.00.12.01",
+ "term": 1,
+ "tahun": 2014,
+ "nilai": "A"
+ }],"name":"Si jagoan neon" }};//ambil dari database
+
+ }
+
+ render() {
+ return (
+ <CourseList data={this.state.data.transcript} name={this.state.data.name}/>
+ );
+ }
+}
diff --git a/assets/js/components/Course.jsx b/assets/js/components/Course.jsx
new file mode 100644
index 00000000..87138462
--- /dev/null
+++ b/assets/js/components/Course.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Table } from 'semantic-ui-react';
+
+export default class Course extends React.Component {
+ static propTypes = {
+ courseName: React.PropTypes.string.isRequired,
+ grade: React.PropTypes.string.isRequired,
+ };
+
+
+ render() {
+ return (
+
+ <Table.Row>
+ <Table.Cell>{this.props.courseName}</Table.Cell>
+ <Table.Cell>{this.props.grade}</Table.Cell>
+ </Table.Row>
+ );
+ }
+}
diff --git a/assets/js/components/CourseList.jsx b/assets/js/components/CourseList.jsx
new file mode 100644
index 00000000..cc0357a0
--- /dev/null
+++ b/assets/js/components/CourseList.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Grid, Segment, Table } from 'semantic-ui-react';
+import Course from './Course';
+export default class CourseList extends React.Component {
+
+ static propTypes = {
+ data: React.PropTypes.array.isRequired,
+ name: React.PropTypes.array.isRequired,
+ };
+
+ constructor(props) {
+ super(props);
+ /* istanbul ignore next */
+ this.state = { course: this.props.data };
+ }
+
+
+ generateCourse() {
+ return this.state.course.map((course, index) =>
+ <Course
+ key={index}
+ courseName={course.kelas.nm_kls}
+ grade={course.nilai}
+ />,
+ );
+ }
+
+ render = () => (
+ <Grid.Column centered>
+
+ <Segment>
+ <h2>Nama : {this.props.name}</h2>
+ <Table unstackable>
+ <Table.Header>
+ <Table.Row>
+ <Table.HeaderCell>Mata Kuliah</Table.HeaderCell>
+ <Table.HeaderCell>Nilai</Table.HeaderCell>
+ </Table.Row>
+ </Table.Header>
+
+ <Table.Body>
+ { this.generateCourse() }
+ </Table.Body>
+ </Table>
+ </Segment>
+ </Grid.Column>
+ );
+}
--
GitLab