diff --git a/assets/js/CreateVacancy.jsx b/assets/js/CreateVacancy.jsx
index 7fbf853fbc6abfee5999bfb9c9896dbbbb8c377f..e521df67a8b9bb00bb89871e5c2a4c43dd2eafc5 100644
--- a/assets/js/CreateVacancy.jsx
+++ b/assets/js/CreateVacancy.jsx
@@ -3,9 +3,9 @@ import { Segment, Button, Form, Header, Icon, Input } from 'semantic-ui-react';
import { browserHistory } from 'react-router';
import DatePicker from 'react-datepicker';
import moment from 'moment';
+import CKEditor from 'react-ckeditor-wrapper';
import ModalAlert from './components/ModalAlert';
import Server from './lib/Server';
-import Dumper from './lib/Dumper';
export default class CreateVacancy extends React.Component {
@@ -19,11 +19,14 @@ export default class CreateVacancy extends React.Component {
/* istanbul ignore next */
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
+ this.handleEditorChange = this.handleEditorChange.bind(this);
+ this.handleEditor = this.handleEditor.bind(this);
this.setCloseTime = this.setCloseTime.bind(this);
this.setOpenTime = this.setOpenTime.bind(this);
this.state = {
formLoading: false,
+ loading: !!this.props.params.id,
company: this.props.user.data.company,
vacancyId: this.props.params.id,
open_time: moment(),
@@ -32,14 +35,17 @@ export default class CreateVacancy extends React.Component {
description: '',
};
- this.state.vacancyId && Server.get(`/vacancies/${this.state.vacancyId}/`).then((r) => {
- this.setState({
- description: r.description,
- name: r.name,
- open_time: moment(r.open_time),
- close_time: moment(r.close_time),
+ if (this.state.vacancyId) {
+ Server.get(`/vacancies/${this.state.vacancyId}/`).then((r) => {
+ this.setState({
+ description: r.description,
+ name: r.name,
+ open_time: moment(r.open_time),
+ close_time: moment(r.close_time),
+ loading: false,
+ });
});
- });
+ }
}
setOpenTime(date) {
@@ -54,14 +60,29 @@ export default class CreateVacancy extends React.Component {
this.setState({ [e.target.name]: e.target.value });
};
+ handleEditor(value) {
+ this.setState({ description: value });
+ console.log('dor');
+ }
+
+ handleEditorChange = (e) => {
+ this.setState({ description: e.target.getContent() });
+ console.log('Content was updated:', this.state.description);
+ };
+
handleSubmit = (e) => {
e.preventDefault();
+ console.log(this.state);
this.setState({ formLoading: true });
- const data = Object.assign({}, this.state);
- data.open_time = data.open_time.format();
- data.close_time = data.close_time.format();
- data.company = this.state.company.id;
+ const data = {};
+ data.name = this.state.name;
+ data.description = this.state.description;
+ data.open_time = this.state.open_time.format();
+ data.close_time = this.state.close_time.format();
+ if (!this.state.vacancyId) {
+ data.company = this.state.company.id;
+ }
const url = this.state.vacancyId ? `/vacancies/${this.state.vacancyId}/` : '/vacancies/';
const method = this.state.vacancyId ? 'PATCH' : 'POST';
@@ -74,6 +95,21 @@ export default class CreateVacancy extends React.Component {
}));
};
+ modules = {
+ toolbar: [
+ [{ header: [1, 2, false] }],
+ ['bold', 'italic', 'underline', 'strike', 'blockquote'],
+ [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
+ ['link', 'image'],
+ ['clean'],
+ ],
+ };
+
+ formats = ['header', 'bold', 'italic', 'underline', 'strike', 'blockquote',
+ 'list', 'bullet', 'indent',
+ 'link', 'image',
+ ];
+
render = () => (
<div className="create-lowongan" >
<ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
@@ -86,13 +122,23 @@ export default class CreateVacancy extends React.Component {
</Header>
<Form loading={this.state.formLoading} onSubmit={this.handleSubmit}>
<Form.Field label="Posisi" name="name" control={Input} onChange={this.handleChange} value={this.state.name} required />
- <Form.TextArea
- name="description"
- label="Deskripsi"
- placeholder="Deskripsi Lowongan..."
- onChange={this.handleChange}
- value={this.state.description} required
- />
+ { !this.state.loading && <CKEditor value={this.state.description} onChange={this.handleEditor} /> }
+ {/*<TinyMCE*/}
+ {/*content={this.state.description}*/}
+ {/*config={{*/}
+ {/*plugins: 'link image code',*/}
+ {/*toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code image',*/}
+ {/*}}*/}
+ {/*onChange={this.handleEditorChange}*/}
+ {/*/>*/}
+ {/*<Form.TextArea*/}
+ {/*name="description"*/}
+ {/*label="Deskripsi"*/}
+ {/*placeholder="Deskripsi Lowongan..."*/}
+ {/*onChange={this.handleChange}*/}
+ {/*value={this.state.description} required*/}
+ {/*/>*/}
+ <script>CKEDITOR.replace( 'description' );</script>
<Form.Group widths="equal">
<Form.Field
className="open-time-field"
diff --git a/assets/js/VacancyPage.jsx b/assets/js/VacancyPage.jsx
index 786a9ab349b55a5f2bba6d6c1bc1493ee93d0ffe..3163bc8e9901d9a60de96d70d1e89f90ef81eb09 100644
--- a/assets/js/VacancyPage.jsx
+++ b/assets/js/VacancyPage.jsx
@@ -47,7 +47,7 @@ export default class VacancyPage extends React.Component {
}
/>
</Pane>
- <Pane label="Lamaran saya" >
+ <Pane label="Lamaran Saya" >
<Pagination
key={2}
url={`/students/${this.state.id}/applied-vacancies/`}
diff --git a/assets/js/components/ApplyModal.jsx b/assets/js/components/ApplyModal.jsx
index 6a830a8664e2dfbd252cfd0848491783a940b5d1..68ad74796e32ca3012f2db4a15280dbdfecbe569 100644
--- a/assets/js/components/ApplyModal.jsx
+++ b/assets/js/components/ApplyModal.jsx
@@ -49,43 +49,44 @@ export default class ApplyModal extends React.Component {
);
};
- render = () => (
- <Modal
- trigger={<Button primary onClick={this.handleOpen} floated="right">{this.props.buttonTitle}</Button>}
- closeIcon="close"
- open={this.state.modalOpen}
- onClose={this.handleClose}
- >
- <Modal.Header>{this.props.data.header}</Modal.Header>
- <Modal.Content>
- <ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
- <Modal.Description>
- <Modal.Header> <h3> Deskripsi Lowongan </h3></Modal.Header>
- {this.props.data.description}
-
- </Modal.Description>
- {this.props.active && (
- <div className="coverLetter">
- <br />
- <div className="linkCV">
- <a href={this.props.resume} target="_blank" rel="noopener noreferrer"> Klik untuk lihat CV terakhirmu</a>
- </div>
- <br />
- <div>
- <h5>Cover Letter </h5>
- <Form >
- <TextArea placeholder="Tell us more" size="big" onChange={this.handleChange} />
- </Form>
+ render(){
+ return (
+ <Modal
+ trigger={<Button primary onClick={this.handleOpen} floated="right">{this.props.buttonTitle}</Button>}
+ closeIcon="close"
+ open={this.state.modalOpen}
+ onClose={this.handleClose}
+ >
+ <Modal.Header>{this.props.data.header}</Modal.Header>
+ <Modal.Content>
+ <ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
+ <Modal.Description>
+ <Modal.Header> <h3> Deskripsi Lowongan </h3></Modal.Header>
+ { <div dangerouslySetInnerHTML={{__html: this.props.data.description }} /> }
+ </Modal.Description>
+ {this.props.active && (
+ <div className="coverLetter">
+ <br />
+ <div className="linkCV">
+ <a href={this.props.resume} target="_blank" rel="noopener noreferrer"> Klik untuk lihat CV terakhirmu</a>
+ </div>
+ <br />
+ <div>
+ <h5>Cover Letter </h5>
+ <Form >
+ <TextArea placeholder="Tell us more" size="big" onChange={this.handleChange} />
+ </Form>
+ </div>
</div>
- </div>
- )}
+ )}
- </Modal.Content>
- <Modal.Actions>
- <Button loading={this.state.load} color="blue" disabled={!this.props.active} onClick={this.handleApply}>
- { this.props.active ? 'Daftar' : 'Sudah Terdaftar' } <Icon name="right chevron" />
- </Button>
- </Modal.Actions>
- </Modal>
- )
+ </Modal.Content>
+ <Modal.Actions>
+ <Button loading={this.state.load} color="blue" disabled={!this.props.active} onClick={this.handleApply}>
+ { this.props.active ? 'Daftar' : 'Sudah Terdaftar' } <Icon name="right chevron" />
+ </Button>
+ </Modal.Actions>
+ </Modal>
+ );
+ }
}
diff --git a/core/templates/core/index.html b/core/templates/core/index.html
index ebdfabf2c40d38ef365e4bb52b22a83a1a45d388..da540334ff89edaa8b744dcc9c13774b48d719b0 100755
--- a/core/templates/core/index.html
+++ b/core/templates/core/index.html
@@ -8,6 +8,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yuk Cari Tempat Kape :)</title>
<link rel="stylesheet" href="{% static 'css/custom.css' %}"/>
+ <link rel="stylesheet" href="../../../node_modules/react-quill/dist/quill.snow.css">
+ <script src="https://cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>
+ <!--<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/react-datepicker/0.44.0/react-datepicker.min.css"/>
<link rel="icon" type="image/png" href="{% static 'img/logo-sm.png'%}" sizes="32x32" />
diff --git a/package.json b/package.json
index ccd3cef7247924cd935e1083793866dcf9f9b30e..114b4c8560b7371e6989f7d5d65609d557063da1 100755
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
"axios": "^0.15.3",
"babel-core": "^6.24.0",
"babel-preset-react": "^6.16.0",
+ "ckeditor-react": "^1.0.1",
"object-assign": "^4.1.1",
"react": "15.4.2",
"react-addons-test-utils": "15.4.2",