Merge branch 'Fixes/TextEditor' into 'develop'

Fixes/text editor

See merge request !17

.gitlab-ci.yml

@@ -10,6 +10,8 @@ test:
   - export CHROME_BIN=/usr/bin/google-chrome
   - curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
   - sudo apt-get install -y nodejs
+  - sudo apt-get install -y build-essential
+  - npm install npm -g
   - npm install
   - npm run build-production
   - service postgresql start

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"

assets/js/VacancyPage.jsx

@@ -48,7 +48,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

@@ -49,51 +49,51 @@ 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">
-              { this.props.resume ? (<a href={this.props.resume} target="_blank" rel="noopener noreferrer"> Klik untuk lihat CV terakhirmu</a>)
-                : (
-                  <Message
-                    error
-                    icon="warning sign"
-                    header="CV Tidak Ditemukan"
-                    content="Anda belum mengunggah CV. Harap ubah profil anda terlebih dahulu pada halaman Profil."
-                  />)
-              }
-            </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">
+                { this.props.resume ? (<a href={this.props.resume} target="_blank" rel="noopener noreferrer"> Klik untuk lihat CV terakhirmu</a>)
+                  : (
+                    <Message
+                      error
+                      icon="warning sign"
+                      header="CV Tidak Ditemukan"
+                      content="Anda belum mengunggah CV. Harap ubah profil anda terlebih dahulu pada halaman Profil."
+                    />)
+                  }
+              </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 || this.props.resume == null} 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

@@ -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" />