Fakultas Ilmu Komputer UI

Commit c5cdb1af authored by sirinbaisa's avatar sirinbaisa
Browse files

#140654507 #12 modal Pendaftaran

parent 7e863ffc
import React from 'react';
import { Button, Checkbox, Form, Input, TextArea, Grid, Divider, Header, Icon} from 'semantic-ui-react';
export default class companyRegister extends React.Component {
render = () => (
<div className="register">
<div className="registerForm">
<Form>
<Header as='h2' icon textAlign='center'>
<Icon name='signup' circular />
<Header.Content>
Register
</Header.Content>
</Header>
<Form.Field required>
<label>Email</label>
<Input type="text" id="email" icon='user' iconPosition='left' placeholder="email" required />
</Form.Field>
<Form.Field required>
<label>Password</label>
<Input type='password' id="password" icon='key' iconPosition='left' placeholder="password" required />
</Form.Field>
<Form.Field required>
<label>Konfirmasi Password</label>
<Input type='password' icon="key" iconPosition="left" placeholder='password' required />
</Form.Field>
<Form.Field required>
<label>Nama Perusahaan</label>
<Input placeholder='Nama Perusahaan' required />
</Form.Field>
<Form.Field required>
<label>Logo</label>
<Input
icon={{ name: 'attach', circular: true, link: true }}
placeholder='attach logo'
required
/>
</Form.Field>
<Form.Field required>
<label>Deskripsi</label>
<TextArea placeholder='Tell us more' required/>
</Form.Field>
<Form.Field required>
<label>Alamat</label>
<Input placeholder='Alamat' required />
</Form.Field>
<Form.Field required>
<label>Kota</label>
<Input placeholder='Kota' required />
</Form.Field>
<Form.Field required>
<label>Provinsi</label>
<Input placeholder='Provinsi' required />
</Form.Field >
<Button type='submit' floated='right' color='blue'>Submit</Button>
</Form>
</div>
</div>
)
}
......@@ -7,7 +7,8 @@ import Login from './Login';
import Register from './CompanyRegister'
import Pane from './components/Pane';
import Tabs from './components/Tabs';
import ModalAlert from './components/ModalAlert';
import ModalPendaftaran from './components/ModalPendaftaran';
import Lowongan from './components/Lowongan';
export const Profile = () => (
<Segment>
......@@ -19,7 +20,7 @@ export const Home = () => (
<div>
<Tabs selected={0}>
<Pane label="Semua Lowongan">
<ItemExampleFloated />
<Lowongan data={paragraph} header="Lowongan" content={paragraph} image={imageWireFrame}/>
</Pane>
<Pane label="Lamaran saya">
<div>This is my tab 2 contents!</div>
......@@ -44,96 +45,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'));
......@@ -3,17 +3,19 @@ import { Button, Image as ImageComponent, Item, Rating } from 'semantic-ui-react
import ModalPendaftaran from './ModalPendaftaran';
// const paragraph = <ImageComponent src="http://semantic-ui.com/images/wireframe/short-paragraph.png" />;
const paragraph = <ImageComponent src="http://semantic-ui.com/images/wireframe/short-paragraph.png" />;
export default class Lowongan extends React.Component {
static propTypes = {
data: React.PropTypes.object.isRequired,
image: React.PropTypes.object.isRequired,
header:React.PropTypes.string.isRequired,
content:React.PropTypes.object.isRequired
};
render() {
return (
<<<<<<< HEAD
<Item.Group relaxed>
<Item>
{this.props.image}
......@@ -22,7 +24,7 @@ export default class Lowongan extends React.Component {
<Item.Description>{this.props.content}</Item.Description>
<Item.Extra>
<div className="daftar">
<ModalPendaftaran data={{ tes: 'dor' }} buttonTitle="Daftar" />
<ModalPendaftaran data={paragraph} buttonTitle="Daftar" id="1"/>
</div>
</Item.Extra>
</Item.Content>
......@@ -31,26 +33,3 @@ export default class Lowongan extends React.Component {
);
}
}
=======
<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
......@@ -30,6 +30,7 @@ export default class ModalPendaftaran extends React.Component {
}
handleOpen() {
this.setState({ modalOpen: true });
const data = { coverLetter: this.state.coverLetter };
Server.post(`/students/${this.props.id}/application`, data).then((data) => {
this.setState({
......@@ -42,14 +43,17 @@ export default class ModalPendaftaran extends React.Component {
responseText: this.failedResponse + JSON.stringify(error),
});
});
this.setState({ modalOpen: true });
}
handleClose = () => this.setState({
modalOpen: false,
});
render = () => (
<Modal
trigger={<Button onClick={this.handleOpen} >{this.props.buttonTitle}</Button>}
closeIcon="close"
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment