Fakultas Ilmu Komputer UI

Skip to content

GitLab

Commit 94e146d9 authored by M. Reza Qorib's avatar M. Reza Qorib
Browse files

[#144502159] [Refactor] #48 add CKEditor as a text editor in Kape

parent fcd5a4a7
Hide whitespace changes
Inline Side-by-side
assets/js/CreateVacancy.jsx
View file @ 94e146d9
......@@ -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"
......
assets/js/VacancyPage.jsx
View file @ 94e146d9
......@@ -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/`}
......
assets/js/components/ApplyModal.jsx
View file @ 94e146d9
......@@ -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>
);
}
}
core/templates/core/index.html
View file @ 94e146d9
......@@ -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" />
......
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

Excellence In Teamwork