Merge branch 'develop' of https://gitlab.com/PPL2017csui/PPLA1 into Features/VerifyVacancyForAdmin

# Conflicts:
#	assets/css/custom.css
#	assets/js/Dashboard.jsx
#	assets/js/VacancyPage.jsx
#	assets/js/components/TopMenu.jsx
#	assets/js/index.jsx

assets/css/custom.css

@@ -13,13 +13,19 @@
   color:black;
 }
 
+.item-list {
+  word-wrap: break-word;
+  width: 100%;
+}
 
 .ui.card.register{
 background-color: #EEEEEE;
 }
 
 .create-lowongan{
-  margin: 60px 19% 100px;
+padding-bottom: 7%;
+padding-left:15%;
+padding-right:15%;
 }
 
 .ui.segment.form-segment{
@@ -30,7 +36,7 @@ background-color: #EEEEEE;
   background: #fff;
   border: 1px solid #e5e5e5;
   border-radius: 3px;
-  margin: 100px 100px 30px;
+  margin: 80px 100px 30px;
 }
 .tabs__labels {
   margin: 0;
@@ -69,8 +75,8 @@ background-color: #EEEEEE;
 }
 
 .formLogin{
-  margin: 30px auto 0;
-  width: 430px;
+  /*margin: auto;*/
+  /*width: 430px;*/
 }
 
 .registerModal{
@@ -106,18 +112,6 @@ font-size: 32px;
   margin-top:10px;
 }
 
-.coverLetter{
-  margin-top:30px;
-
-}
-
-.linkCV{
-  float: right;
-  margin-top: 30px;
-  margin-bottom: 10px;
-}
-
-
 .registerForm{
   margin: 0 auto;
   /*padding:50px;*/
@@ -165,6 +159,8 @@ card .formRegis{
 
 .ui.pointing.secondary.menu{
   background-color: #ffffff;
+  margin-bottom: 10px;
+  margin-top: 0px;
 }
 
 .extra.extra-company h3{
@@ -192,6 +188,34 @@ card .formRegis{
   margin-top:4%;
 }
 
+.profilePage {
+  margin-bottom: 40px;
+  margin-left: 5%;
+  margin-right: 5%;
+}
+
+#react-app{
+ position: relative; /* needed for footer positioning*/
+ height: auto !important; /* real browsers */
+ min-height: 100%; /* real browsers */
+ background-color: #EEEEEE;
+}
+
+.content{
+  padding-bottom: 5%;
+}
+
+.footer{
+ background-color: #031634;
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ padding: 1%;
+}
+
+.footer h5{
+  color:white;
+}
 .profilePage{
   margin-bottom:40px;
   margin-left:5%;
@@ -220,3 +244,12 @@ card .formRegis{
   margin-right: 10%;
 }
 
+.admin-bar{
+  margin: 0;
+  padding: 0 10px 0 0;
+  width: 100%;
+  text-align: right;
+  background-color: #304D8A;
+  color: white;
+}
+

assets/js/ApplicantPage.jsx

 import React from 'react';
 import Tabs from './components/Tabs';
-import Pane from './components/Pane';
-import Storage from './lib/Storage';
-import VacancyList from './components/VacancyList';
+import ApplicantList from './components/ApplicantList';
+import Applicant from './components/Applicant';
+import Pagination from './components/Pagination';
 
-export default class VacancyPage extends React.Component {
+export default class ApplicantPage extends React.Component {
+
+  static propTypes = {
+    user: React.PropTypes.object.isRequired,
+  };
 
   constructor(props) {
     super(props);
@@ -13,31 +17,58 @@ export default class VacancyPage extends React.Component {
       email: '',
       password: '',
       errorFlag: false,
-      vacancies: [],
+      company: { id: 1 },
     };
-    this.handleItemClick = this.handleItemClick.bind(this);
   }
 
-  handleItemClick = (e, { name }) => this.setState({ activeItem: name });
-
   render() {
-    const student = Storage.get('user-data').student;
+    const company = this.props.user.data.company;
     return (
-  <div className="halamanPendaftar">
       <Tabs selected={0}>
-        <Pane label="Lamaran Baru" >
-          <VacancyList key={1} studentId={student.id}  url="/vacancies/" />
-        </Pane>
-        <Pane label="Bintangi" >
-          <VacancyList key={2} status="Batal" studentId={student.id} url={`/students/${student.id}/applied-vacancies/`} />
-        </Pane>
-        <Pane label="Semua Lamaran" >
-          <VacancyList key={3} studentId={student.id}  url={`/students/${student.id}/bookmarked-vacancies/`} />
-        </Pane>
+        <Pagination
+          key={1}
+          url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.NEW}`}
+          label="Lamaran Baru"
+          child={
+            <ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.NEW} />
+          }
+        />
+        <Pagination
+          key={2}
+          url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.READ}`}
+          label="Lamaran Dibaca"
+          child={
+            <ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.READ} />
+          }
+        />
+        <Pagination
+          key={3}
+          url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.BOOKMARKED}`}
+          label="Lamaran Ditandai"
+          child={
+            <ApplicantList
+              companyId={company.id}
+              status={Applicant.APPLICATION_STATUS.BOOKMARKED}
+            />
+          }
+        />
+        <Pagination
+          key={4}
+          url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.ACCEPTED}`}
+          label="Lamaran Diterima"
+          child={
+            <ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.ACCEPTED} />
+          }
+        />
+        <Pagination
+          key={5}
+          url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.REJECTED}`}
+          label="Lamaran Ditolak"
+          child={
+            <ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.REJECTED} />
+          }
+        />
       </Tabs>
-
-  </div>
-
     );
   }
 }

assets/js/CompanyPage.jsx

+import React from 'react';
+import { Button } from 'semantic-ui-react';
+import Tabs from './components/Tabs';
+import CompanyList from './components/CompanyList';
+import Company from './components/Company';
+import Pagination from './components/Pagination';
+
+export default class CompanyPage extends React.Component {
+
+  static propTypes = {
+    user: React.PropTypes.object.isRequired,
+  };
+
+  handleClick = () => window.open('/admin/');
+  handleVacancy = () => window.open('/lowongan');
+
+  render() {
+    return (
+      <div>
+        <div style={{ paddingLeft: '10px' }}>
+          <Button onClick={this.handleClick} icon="dashboard" labelPosition="left" color="facebook" content="Buka Menu Administrasi" />
+        </div>
+        
+        <div style={{ paddingLeft: '10px', paddingTop : '10px'}}>
+          <Button onClick={this.handleVacancy} icon="dashboard" labelPosition="left" color="facebook" content="Halaman Verifikasi Lowongan" />
+        </div>
+
+        <Tabs selected={0}>
+          <Pagination
+            key={1}
+            url={`/companies/?status=${Company.COMPANY_STATUS.NEW}`}
+            label="Baru"
+            child={
+              <CompanyList status={Company.COMPANY_STATUS.NEW} />
+            }
+          />
+          <Pagination
+            key={2}
+            url={`/companies/?status=${Company.COMPANY_STATUS.VERIFIED}`}
+            label="Terverifikasi"
+            child={
+              <CompanyList status={Company.COMPANY_STATUS.VERIFIED} />
+            }
+          />
+          <Pagination
+            key={3}
+            url={`/companies/?status=${Company.COMPANY_STATUS.UNVERIFIED}`}
+            label="Ditolak"
+            child={
+              <CompanyList status={Company.COMPANY_STATUS.UNVERIFIED} />
+            }
+          />
+          <Pagination
+            key={4}
+            url={'/companies/'}
+            label="Semua Perusahaan"
+            child={
+              <CompanyList status={Company.COMPANY_STATUS.ALL} />
+            }
+          />
+        </Tabs>
+      </div>
+    );
+  }
+}

assets/js/CreateVacancy.jsx

@@ -5,13 +5,13 @@ import DatePicker from 'react-datepicker';
 import moment from 'moment';
 import ModalAlert from './components/ModalAlert';
 import Server from './lib/Server';
-import Storage from './lib/Storage';
 import Dumper from './lib/Dumper';
 
 export default class CreateVacancy extends React.Component {
 
   static propTypes = {
     params: React.PropTypes.object.isRequired,
+    user: React.PropTypes.object.isRequired,
   };
 
   constructor(props) {
@@ -19,10 +19,12 @@ export default class CreateVacancy extends React.Component {
     /* istanbul ignore next */
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
+    this.setCloseTime = this.setCloseTime.bind(this);
+    this.setOpenTime = this.setOpenTime.bind(this);
 
     this.state = {
       formLoading: false,
-      company: Storage.get('user-data').company,
+      company: this.props.user.data.company,
       vacancyId: this.props.params.id,
       open_time: moment(),
       close_time: moment(),
@@ -40,6 +42,14 @@ export default class CreateVacancy extends React.Component {
     });
   }
 
+  setOpenTime(date) {
+    this.setState({ open_time: date });
+  }
+
+  setCloseTime(date) {
+    this.setState({ close_time: date });
+  }
+
   handleChange = (e) => {
     this.setState({ [e.target.name]: e.target.value });
   };
@@ -59,7 +69,7 @@ export default class CreateVacancy extends React.Component {
     Server.sendRequest(url, method, data).then(() => {
       browserHistory.push('/lowongan');
     }, error => error.then((r) => {
-      this.modalAlert.open('Gagal Membuat Lowongan', Dumper.dump(r, '    '));
+      this.modalAlert.open('Gagal Membuat Lowongan', r.detail);
       this.setState({ formLoading: false });
     }));
   };
@@ -89,7 +99,7 @@ export default class CreateVacancy extends React.Component {
               control={DatePicker}
               label="Waktu Buka Lowongan"
               selected={this.state.open_time}
-              onChange={date => this.setState({ open_time: date })}
+              onChange={this.setOpenTime}
               required
             />
             <Form.Field
@@ -97,7 +107,7 @@ export default class CreateVacancy extends React.Component {
               control={DatePicker}
               label="Waktu Tutup Lowongan"
               selected={this.state.close_time}
-              onChange={date => this.setState({ close_time: date })}
+              onChange={this.setCloseTime}
               required
             />
           </Form.Group>

assets/js/Dashboard.jsx

 import React from 'react';
 import TopMenu from './components/TopMenu';
 import Server from './lib/Server';
-
-
-const defaultPicture = 'http://semantic-ui.com/images/avatar/small/elliot.jpg';
+import Footer from './components/Footer';
 
 export default class Dashboard extends React.Component {
   static propTypes = {
@@ -14,44 +12,19 @@ export default class Dashboard extends React.Component {
       React.PropTypes.arrayOf(React.PropTypes.node),
       React.PropTypes.node,
     ]).isRequired,
+    user: React.PropTypes.object.isRequired,
   };
 
   constructor(props) {
     super(props);
     /* istanbul ignore next */
-    this.state = {
-      id: '',
-      name: '',
-      email: '',
-      photo: '',
-    };
-    this.getProfile = this.getProfile.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,
-        email: data.user.email,
-        photo: data.photo,
-      });
-    }, error => error.then(() => {
-        // this.modalAlert.open('Gagal Mengambil ', r.error);
-      this.state.name = 'Gagal mendapatkan informasi';
-    }));
-  }
-
-
   render = () => (
     <div>
-      <TopMenu
-        name={this.state.name} email={this.state.email}
-        photo={this.state.photo ? this.state.photo : defaultPicture}
-      />
-      {this.props.children}
+      <TopMenu user={this.props.user} />
+      <div className="content"> {this.props.children} </div>
+      <Footer />
     </div>
   )
 }

assets/js/Login.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Grid, Segment, Header, Card, Image } from 'semantic-ui-react';
 import LoginForm from './components/LoginForm';
 import CompanyRegisterModal from './components/CompanyRegisterModal';
+import Footer from './components/Footer';
 
 export default class Login extends React.Component {
 
@@ -27,8 +28,15 @@ export default class Login extends React.Component {
         </Header>
       </div>
 
-      <Grid stackable columns={2} relaxed>
-        <Grid.Column>
+      <Grid stackable={true} columns={2} padded style={{ display: 'flex', justifyContent: 'center' }}>
+        <Grid.Column width="seven">
+          <Segment basic>
+            <LoginForm type="sso-ui" header="SSO Login" imgSrc="UI.png" imgSize="tiny" />
+            {this.props.children}
+          </Segment>
+        </Grid.Column>
+
+        <Grid.Column width="seven">
           <Segment basic>
             <LoginForm type="company" header="Company Login" imgSrc="logo.png" imgSize="small" />
             {this.props.children}
@@ -49,14 +57,8 @@ export default class Login extends React.Component {
             </Card>
           </div>
         </Grid.Column>
-
-        <Grid.Column>
-          <Segment basic>
-            <LoginForm type="sso-ui" header="SSO Login" imgSrc="UI.png" imgSize="tiny" />
-            {this.props.children}
-          </Segment>
-        </Grid.Column>
       </Grid>
+      <Footer />
     </div>
   )
 }

assets/js/ProfilePage.jsx

@@ -72,13 +72,11 @@ export default class ProfilePage extends React.Component {
     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' );
     }, error => error.then((r) => {
@@ -91,7 +89,7 @@ export default class ProfilePage extends React.Component {
     const form = this.state.form;
     form[e.target.name] = e.target.files[0];
     this.setState({ form });
-  }
+  };
 
   handleChange = (e) => {
     const form = this.state.form;

assets/js/TranscriptPage.jsx

+import React from 'react';
+import CourseList from './components/CourseList';
+import Server from './lib/Server';
+
+export default class TranscriptPage extends React.Component {
+  static propTypes = {
+    params: React.PropTypes.object.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    /* istanbul ignore next */
+    this.state = {};
+    Server.get(`/applications/${this.props.params.id}/`).then(response => this.setState({ data: response }));
+  }
+
+  render() {
+    return (
+      this.state.data ? <CourseList data={this.state.data} /> : <h5 style={{ textAlign: 'center' }}> Mohon Tunggu.. </h5>
+    );
+  }
+}

assets/js/VacancyPage.jsx

@@ -4,6 +4,7 @@ import Tabs from './components/Tabs';
 import Pane from './components/Pane';
 import VacancyList from './components/VacancyList';
 import AdminVacancy from './components/AdminVacancy';
+import Pagination from './components/Pagination';
 
 export default class VacancyPage extends React.Component {
 
@@ -15,8 +16,10 @@ export default class VacancyPage extends React.Component {
     const role = user.role;
     if (role === 'student') {
       return user.data.student.id;
-    } else if (role === 'company') {
+    } else if (role === 'company' || (role === 'admin' && user.data.company != null)) {
       return user.data.company.id;
+    } else if (role === 'supervisor' || role === 'admin' && user.data.supervisor != null){
+      return user.data.supervisor.id;
     }
 
     return 0;
@@ -31,46 +34,95 @@ export default class VacancyPage extends React.Component {
     };
   }
 
+
   generateVacancies() {
     if (this.props.user.role === 'student') {
       return (
         <Tabs selected={0}>
           <Pane label="Semua Lowongan" >
-            <VacancyList
+            <Pagination
               key={1}
-              userId={this.state.id}
               url="/vacancies/"
+              child={
+                <VacancyList
+                  user={this.props.user}
+                  key={1}
+                  userId={this.state.id}
+                />
+              }
             />
           </Pane>
           <Pane label="Lamaran saya" >
-            <VacancyList
+            <Pagination
               key={2}
-              userId={this.state.id}
               url={`/students/${this.state.id}/applied-vacancies/`}
+              child={
+                <VacancyList
+                  user={this.props.user}
+                  key={2}
+                  userId={this.state.id}
+                />
+              }
             />
           </Pane>
           <Pane label="Lamaran Ditandai" >
-            <VacancyList
+            <Pagination
               key={3}
-              userId={this.state.id}
               url={`/students/${this.state.id}/bookmarked-vacancies/`}
+              child={
+                <VacancyList
+                  key={3}
+                  user={this.props.user}
+                  userId={this.state.id}
+                />
+              }
             />
           </Pane>
         </Tabs>
       );
     } else if (this.props.user.role === 'company') {
       return (
-        <VacancyList key={1} userId={this.state.id} url={`/companies/${this.state.id}/vacancies/`} type="company" />
+        <Pagination
+          url={`/companies/${this.state.id}/vacancies/`}
+          child={
+            <VacancyList
+              key={1}
+              user={this.props.user}
+              userId={this.state.id}
+            />
+          }
+          error="Anda belum diverifikasi. Harap hubungi admin"
+        />
       );
-    } else if (this.props.user.role === 'supervisor') {
+    } else if (this.props.user.role === 'admin' || this.props.user.role === 'supervisor') {
       return (
         <Tabs selected={0}>
-          <Pane label="Lowongan Belum Terferivikasi" >
-            <Item.Group>
-              <AdminVacancy />
-            </Item.Group>
+          <Pane label="Lowongan Belum Terverifikasi" >
+            <Pagination
+              key={1}
+              url="/vacancies/"
+              child={
+                <VacancyList
+                  user={this.props.user}
+                  key={1}
+                  userId={this.state.id}
+                />
+              }
+            />
+          </Pane>
+          <Pane label="Lowongan Terverifikasi" >