[#144502159] [Refactor] #49 Filter applicant by vacancy works well now

assets/js/ApplicantPage.jsx

 import React from 'react';
+import { Grid, Dropdown } from 'semantic-ui-react';
 import Tabs from './components/Tabs';
 import ApplicantList from './components/ApplicantList';
 import Applicant from './components/Applicant';
 import Pagination from './components/Pagination';
+import Server from './lib/Server';
 
 export default class ApplicantPage extends React.Component {
 
@@ -18,57 +20,104 @@ export default class ApplicantPage extends React.Component {
       password: '',
       errorFlag: false,
       company: { id: 1 },
+      urls: [],
+      selected: `/companies/${this.props.user.data.company.id}/applications/`,
+      refresh: 0,
     };
+    this.getVacancyList = this.getVacancyList.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.getVacancyList();
   }
 
+  handleChange = (e, data) => {
+    this.setState({ selected: data.value, refresh: this.state.refresh + 5 });
+  };
+
+  getVacancyList= () => Server.get(`/companies/${this.props.user.data.company.id}/vacancies/`, false).then((data) => {
+    const results = data.results;
+    const names = ['Semua Lowongan'];
+    const urls = [{
+      key: 0,
+      value: `/companies/${this.props.user.data.company.id}/applications/`,
+      text: 'Semua Lowongan',
+    }];
+    results.map( (vacancy) => {
+      names.push(vacancy.name);
+      const url = `/companies/${this.props.user.data.company.id}/applications/${vacancy.id}/by_vacancy/`;
+      const info = {
+        key: vacancy.id,
+        value: url,
+        text: vacancy.name,
+      };
+      urls.push(info);
+      return urls;
+    } );
+    this.setState({ urls });
+    console.log('hasil');
+    console.log(this.state.urls);
+  }, error => error.then((r) => {
+    this.modalAlert.open('Gagal mendapatkan daftar lowongan', r.detail);
+  }));
+
   render() {
     const company = this.props.user.data.company;
     return (
-      <Tabs selected={0}>
-        <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>
+      <Grid>
+        <div>
+          <Dropdown placeholder="Semua Lowongan" search selection options={this.state.urls} onChange={this.handleChange} />
+        </div>
+        <Tabs selected={0}>
+          <Pagination
+            key={1 + this.state.refresh}
+            url={`${this.state.selected}?status=${Applicant.APPLICATION_STATUS.NEW}`}
+            label="Lamaran Baru"
+            child={
+              <ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.NEW} />
+            }
+          />
+          <Pagination
+            key={2 + this.state.refresh}
+            url={`${this.state.selected}?status=${Applicant.APPLICATION_STATUS.READ}`}
+            label="Lamaran Dibaca"
+            child={
+              <ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.READ} />
+            }
+          />
+          <Pagination
+            key={3 + this.state.refresh}
+            url={`${this.state.selected}?status=${Applicant.APPLICATION_STATUS.BOOKMARKED}`}
+            label="Lamaran Ditandai"
+            child={
+              <ApplicantList
+                companyId={company.id}
+                status={Applicant.APPLICATION_STATUS.BOOKMARKED}
+              />
+            }
+          />
+          <Pagination
+            key={4 + this.state.refresh}
+            url={`${this.state.selected}?status=${Applicant.APPLICATION_STATUS.ACCEPTED}`}
+            label="Lamaran Diterima"
+            child={
+              <ApplicantList
+                companyId={company.id}
+                status={Applicant.APPLICATION_STATUS.ACCEPTED}
+              />
+            }
+          />
+          <Pagination
+            key={5 + this.state.refresh}
+            url={`${this.state.selected}?status=${Applicant.APPLICATION_STATUS.REJECTED}`}
+            label="Lamaran Ditolak"
+            child={
+              <ApplicantList
+                companyId={company.id}
+                status={Applicant.APPLICATION_STATUS.REJECTED}
+              />
+            }
+          />
+        </Tabs>
+      </Grid>
     );
   }
 }

assets/js/Login.jsx

@@ -28,7 +28,7 @@ export default class Login extends React.Component {
         </Header>
       </div>
 
-      <Grid stackable={true} columns={2} padded style={{ display: 'flex', justifyContent: 'center' }}>
+      <Grid stackable 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" />
@@ -38,7 +38,7 @@ export default class Login extends React.Component {
 
         <Grid.Column width="seven">
           <Segment basic>
-            <LoginForm type="company" header="Company Login" imgSrc="logo.png" imgSize="small" />
+            <LoginForm type="company" header="Company Login" imgSrc="logo.png" imgSize="small" usernameLabel="Email"/>
             {this.props.children}
           </Segment >
 

assets/js/components/LoginForm.jsx

 import React from 'react';
-import { Form, Input, Button, Message, Image, Card, Header, Segment } from 'semantic-ui-react';
+import { Form, Input, Button, Message, Image, Segment } from 'semantic-ui-react';
 import { browserHistory } from 'react-router';
 import Server from '../lib/Server';
 import Storage from '../lib/Storage';
@@ -10,12 +10,14 @@ export default class LoginForm extends React.Component {
     type: React.PropTypes.string.isRequired,
     imgSrc: React.PropTypes.string,
     header: React.PropTypes.string,
+    usernameLabel: React.PropTypes.string,
   };
 
   static defaultProps = {
     imgSrc: '',
     imgSize: 'small',
     header: 'Login',
+    usernameLabel: 'Username',
   };
 
   constructor(props) {
@@ -56,17 +58,37 @@ export default class LoginForm extends React.Component {
         </Segment>
 
         <Segment inverted className="header" >
-          <Form loading={this.state.loading} onSubmit={e => this.handleSubmit(e)} error={this.state.errorFlag}>
+          <Form
+            loading={this.state.loading}
+            onSubmit={e => this.handleSubmit(e)}
+            error={this.state.errorFlag}
+          >
             <Form.Group widths="equal">
               <Form.Field>
-                <label htmlFor="id"> Email </label>
-                <Input type="text" id="username" icon="user" iconPosition="left" placeholder="username" onChange={e => this.handleChange(e, 'username')} required />
+                <label htmlFor="id"> { this.props.usernameLabel } </label>
+                <Input
+                  type="text"
+                  id="email"
+                  icon="user"
+                  iconPosition="left"
+                  placeholder={this.props.usernameLabel}
+                  onChange={e => this.handleChange(e, 'username')}
+                  required
+                />
               </Form.Field>
             </Form.Group>
             <Form.Group widths="equal">
               <Form.Field>
                 <label htmlFor="password"> Password </label>
-                <Input type="password" id="password" icon="key" iconPosition="left" placeholder="password" onChange={e => this.handleChange(e, 'password')} required />
+                <Input
+                  type="password"
+                  id="password"
+                  icon="key"
+                  iconPosition="left"
+                  placeholder="password"
+                  onChange={e => this.handleChange(e, 'password')}
+                  required
+                />
               </Form.Field>
             </Form.Group>
             <Button type="submit" fluid color="blue">Login</Button>