From 1bb468521f8bf0a49b293a01e27338e1e4f91cb4 Mon Sep 17 00:00:00 2001
From: "M. Reza Qorib" <rezaqorib96@gmail.com>
Date: Tue, 28 Mar 2017 09:01:36 +0700
Subject: [PATCH] [#140382397] #12 Change vacancy page
---
assets/js/Index.jsx | 112 +--------------------------
assets/js/VacancyPage.jsx | 42 ++++++++++
assets/js/components/Lowongan.jsx | 29 +------
assets/js/components/VacancyList.jsx | 6 +-
4 files changed, 52 insertions(+), 137 deletions(-)
create mode 100644 assets/js/VacancyPage.jsx
diff --git a/assets/js/Index.jsx b/assets/js/Index.jsx
index b4312a76..172105c6 100644
--- a/assets/js/Index.jsx
+++ b/assets/js/Index.jsx
@@ -4,7 +4,8 @@ import { Router, Route, browserHistory } from 'react-router';
import { Segment, Modal, Button, Icon, Image as ImageComponent, Item, TextArea, Forms } from 'semantic-ui-react';
import Dashboard from './Dashboard';
import Login from './Login';
-import Register from './CompanyRegister'
+import VacancyPage from './VacancyPage';
+// import Register from './CompanyRegister'
import Pane from './components/Pane';
import Tabs from './components/Tabs';
import ModalAlert from './components/ModalAlert';
@@ -15,27 +16,14 @@ export const Profile = () => (
</Segment>
);
-export const Home = () => (
- <div>
- <Tabs selected={0}>
- <Pane label="Semua Lowongan">
- <ItemExampleFloated />
- </Pane>
- <Pane label="Lamaran saya">
- <div>This is my tab 2 contents!</div>
- </Pane>
- </Tabs>
- </div>
-);
-
export const App = () => (
<Router history={browserHistory}>
<Route path="/login" component={Login} />
- <Route path="/register" component={Register} />
+ {/*<Route path="/register" component={Register} />*/}
<Route component={Dashboard}>
<Route path="/" component={Profile} />
<Route path="profile" component={Profile} />
- <Route path="home" component={Home} />
+ <Route path="lowongan" component={VacancyPage} />
<Route path="users" component={Profile} />
</Route>
</Router>
@@ -44,96 +32,4 @@ export const App = () => (
const paragraph = <ImageComponent src="http://semantic-ui.com/images/wireframe/short-paragraph.png" />;
const imageWireFrame = <Item.Image size="small" src="http://semantic-ui.com/images/wireframe/image.png" />;
-export const ItemExampleFloated = () => (
- <Item.Group relaxed>
- <Item>
- {imageWireFrame}
- <Item.Content verticalAlign="middle">
- <Item.Header>Lowongan 1</Item.Header>
- <Item.Description>{paragraph}</Item.Description>
- <Item.Extra>
- <div className="daftar">
- <ModalExampleMultiple />
- </div>
- </Item.Extra>
- </Item.Content>
- </Item>
-
- <Item>
- {imageWireFrame}
- <Item.Content verticalAlign="middle">
- <Item.Header>Lowongan 2</Item.Header>
- <Item.Description>{paragraph}</Item.Description>
- <Item.Extra>
- <div className="daftar">
- <ModalExampleMultiple />
- </div>
- </Item.Extra>
- </Item.Content>
- </Item>
- <Item>
- {imageWireFrame}
- <Item.Content verticalAlign="middle">
- <Item.Header>Lowongan 3</Item.Header>
- <Item.Description>{paragraph}</Item.Description>
- <Item.Extra>
- <div className="daftar">
- <ModalExampleMultiple />
- </div>
- </Item.Extra>
- </Item.Content>
- </Item>
- </Item.Group>
- );
-
-
-export class ModalExampleMultiple extends React.Component {
-
- state = { modalOpen: false };
-
- handleOpen = () => this.setState({
- modalOpen: true,
- });
-
- handleClose = () => this.setState({
- modalOpen: false,
- });
-
- render = () => (
- <Modal
- trigger={<Button onClick={this.handleOpen} >Daftar</Button>}
- closeIcon="close"
- open={this.state.modalOpen}
- onClose={this.handleClose}
- >
-
- <Modal.Header>Pendaftaran Lowongan</Modal.Header>
- <Modal.Content image>
- <div className="image">
- <Icon name="right arrow" />
- </div>
- <Modal.Description>
- <Modal.Header> <h3> Deskripsi Lowongan </h3></Modal.Header>
- {paragraph}
-
- <div className="linkCV">
- <a> your latest CV </a>
- </div>
-
- <div className="coverLetter">
- <h5> Write your Cover Letter </h5>
- <Form>
- <TextArea placeholder="Tell us more" />
- </Form>
- </div>
-
- </Modal.Description>
- </Modal.Content>
- <Modal.Actions>
- <ModalAlert onChangeValue={this.handleClose} header="Pendaftaran" content="Terima kasih sudah mendaftar!" />
- </Modal.Actions>
- </Modal>
- )
-}
-
ReactDOM.render(<App />, document.getElementById('react-app'));
diff --git a/assets/js/VacancyPage.jsx b/assets/js/VacancyPage.jsx
new file mode 100644
index 00000000..6e256bfd
--- /dev/null
+++ b/assets/js/VacancyPage.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Segment, Input, Menu } from 'semantic-ui-react'
+import Tabs from './components/Tabs';
+import Pane from './components/Pane';
+import VacancyList from './components/VacancyList';
+
+export default class VacancyPage extends React.Component {
+
+ constructor(props) {
+ super(props);
+ /* istanbul ignore next */
+ this.state = { email: '', password: '', errorFlag: false };
+ this.handleItemClick = this.handleItemClick.bind(this);
+ }
+
+ handleItemClick = (e, { name }) => this.setState({ activeItem: name });
+
+ render() {
+ const {activeItem} = this.state;
+
+ return (
+ <div className="tabs">
+ <Menu tabular>
+ <Menu.Item name='Semua Lowongan' active={activeItem === 'Semua Lowongan'} onClick={this.handleItemClick}/>
+
+ <Menu.Item name='Lamaran Saya' active={activeItem === 'Lamaran Saya'} onClick={this.handleItemClick}/>
+
+
+ <Menu.Menu position='right'>
+ <Menu.Item>
+ <Input transparent icon={{name: 'search', link: true}} placeholder='Search users...'/>
+ </Menu.Item>
+ </Menu.Menu>
+ </Menu>
+
+ <Segment>
+ <VacancyList vacancies={[]}/>
+ </Segment>
+ </div>
+ );
+ };
+}
\ No newline at end of file
diff --git a/assets/js/components/Lowongan.jsx b/assets/js/components/Lowongan.jsx
index 54ae62dd..58573886 100644
--- a/assets/js/components/Lowongan.jsx
+++ b/assets/js/components/Lowongan.jsx
@@ -12,9 +12,6 @@ export default class Lowongan extends React.Component {
render() {
return (
-
-<<<<<<< HEAD
- <Item.Group relaxed>
<Item>
{this.props.image}
<Item.Content verticalAlign="middle">
@@ -27,30 +24,6 @@ export default class Lowongan extends React.Component {
</Item.Extra>
</Item.Content>
</Item>
- </Item.Group>
);
}
-}
-=======
- <Item.Group relaxed>
- <Item>
- {this.props.image}
- <Item.Content verticalAlign="middle">
- <Item.Header>
- {this.props.header}
-
- </Item.Header>
- <Rating />
- <Item.Description>{this.props.content}</Item.Description>
- <Item.Extra>
- <div className="daftar">
- <ModalPendaftaran content={this.props.paragraph} header="Pendaftaran Lowongan" buttontTitle="Daftar" />
- </div>
- </Item.Extra>
- </Item.Content>
- </Item>
- </Item.Group>
- );
- }
-}
->>>>>>> 8fff9b6... [#140382397] #12 page lowongan
+}
\ No newline at end of file
diff --git a/assets/js/components/VacancyList.jsx b/assets/js/components/VacancyList.jsx
index 49ac6d5a..583774e9 100644
--- a/assets/js/components/VacancyList.jsx
+++ b/assets/js/components/VacancyList.jsx
@@ -1,4 +1,5 @@
import React from 'react';
+import { Item } from 'semantic-ui-react';
import Lowongan from './Lowongan';
export default class VacancyList extends React.Component {
@@ -14,7 +15,10 @@ export default class VacancyList extends React.Component {
}
render = () => (
- <div className="vacancyList" >{ this.generateVacancies() }
+ <div className="vacancyList" >
+ {/*<Item.Group relaxed>*/}
+ { this.generateVacancies() }
+ {/*</Item.Group>*/}
</div>
)
}
\ No newline at end of file
--
GitLab