|
|
@@ -1,325 +0,0 @@
|
|
|
-import React, { Component } from "react";
|
|
|
-import Router from "next/router";
|
|
|
-import { connect } from "react-redux";
|
|
|
-import ContentWrapper from "@/components/Layout/ContentWrapper";
|
|
|
-import { Row, Col, Card, CardHeader, CardBody, Button, FormGroup, Popover, PopoverHeader } from "reactstrap";
|
|
|
-// import { Editor } from 'react-draft-wysiwyg';
|
|
|
-import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
|
|
|
-import { EditorState, ContentState, convertFromHTML, convertToRaw, convertFromRaw } from 'draft-js';
|
|
|
-// import 'draft-js/dist/Draft.css';
|
|
|
-import dynamic from 'next/dynamic';
|
|
|
-const Editor = dynamic(
|
|
|
- () => import('react-draft-wysiwyg').then(mod => mod.Editor),
|
|
|
- { ssr: false })
|
|
|
-import draftToHtml from 'draftjs-to-html';
|
|
|
-import pdfMake from "pdfmake/build/pdfmake";
|
|
|
-import StateToPdfMake from "draft-js-export-pdfmake";
|
|
|
-import pdfFonts from "pdfmake/build/vfs_fonts";
|
|
|
-import { toast } from "react-toastify";
|
|
|
-import { addCatatan } from "../../../actions/catatan";
|
|
|
-import { getCsrf } from "../../../actions/security";
|
|
|
-pdfMake.vfs = pdfFonts.pdfMake.vfs;
|
|
|
-import SummerNote from "../../../components/Extras/summernote";
|
|
|
-// import ReactSummernote from 'react-summernote';
|
|
|
-// import SummerNote from "./SummerNote";
|
|
|
-// import rtf2html from "../../../components/Main/trf2html";
|
|
|
-
|
|
|
-// SummerNote.ImportCode();
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-class NewFile extends Component {
|
|
|
- constructor(props) {
|
|
|
-
|
|
|
- super(props);
|
|
|
- this.editor = React.createRef();
|
|
|
- this.state = {
|
|
|
- // editorState: EditorState.createEmpty(),
|
|
|
- copiedd: false,
|
|
|
- judul: "",
|
|
|
- simpan: false,
|
|
|
- menu: "",
|
|
|
-
|
|
|
- };
|
|
|
- }
|
|
|
-
|
|
|
- static getInitialProps = async ({ query }) => {
|
|
|
- return { query };
|
|
|
-
|
|
|
- };
|
|
|
-
|
|
|
-
|
|
|
- componentDidMount() {
|
|
|
- const { query } = this.props;
|
|
|
- const { id } = query;
|
|
|
- }
|
|
|
-
|
|
|
- onEditorStateChange = (editorState) => {
|
|
|
- this.setState({
|
|
|
- editorState,
|
|
|
- });
|
|
|
- };
|
|
|
-
|
|
|
- handelSimpan = async (data) => {
|
|
|
- if (this.props?.user?.role.id === 2071) {
|
|
|
- Swal.fire({
|
|
|
- icon: 'error',
|
|
|
- title: 'Oops...',
|
|
|
- html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
|
|
|
- confirmButtonColor: "#3e3a8e",
|
|
|
- confirmButtonText: 'Oke'
|
|
|
- })
|
|
|
- } else {
|
|
|
- const getToken = await getCsrf();
|
|
|
- const _csrf = getToken.token;
|
|
|
- const { token, query } = this.props;
|
|
|
- const { id } = query;
|
|
|
- // const isi = ("editorState", draftToHtml(convertToRaw(this.state.editorState.getCurrentContent())))
|
|
|
- const toastid = toast.loading("Please wait...");
|
|
|
- const added = await addCatatan(token, id, {
|
|
|
- "judul": this.state.judul,
|
|
|
- "isi": this.state.editorState,
|
|
|
- "menu": "Perpanjangan Sanksi"
|
|
|
- }, _csrf);
|
|
|
- if (!added) {
|
|
|
- toast.update(toastid, { render: "Error", type: "error", isLoading: false, autoClose: true, closeButton: true });
|
|
|
- } else {
|
|
|
- toast.update(toastid, { render: "Success", type: "success", isLoading: false, autoClose: true, closeButton: true });
|
|
|
- Router.push(`/app/perpanjangan-sanksi/detail?id=${id}`);
|
|
|
- // this.setState({ simpan: true })
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- };
|
|
|
- handleGeneratePDF = () => {
|
|
|
- const rawContent = convertToRaw(this.state.editorState.getCurrentContent());
|
|
|
- console.log(rawContent)
|
|
|
- const stateToPdfMake = new StateToPdfMake(rawContent);
|
|
|
- console.log(stateToPdfMake.generate());
|
|
|
-
|
|
|
- pdfMake.createPdf(stateToPdfMake.generate()).download();
|
|
|
- };
|
|
|
- setHandleJudul = (e) => {
|
|
|
- this.setState({ judul: e.target.value });
|
|
|
- };
|
|
|
- CloseCopiedd = () => {
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- this.setState({
|
|
|
- copiedd: !this.state.copiedd
|
|
|
- });
|
|
|
- }, 1000);
|
|
|
- }
|
|
|
-
|
|
|
- Copiedd = () => this.setState({
|
|
|
- copiedd: !this.state.copiedd
|
|
|
- })
|
|
|
- convertFileToBase64(file) {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- const reader = new FileReader()
|
|
|
- reader.readAsDataURL(file)
|
|
|
- reader.onload = () => resolve(reader.result)
|
|
|
- reader.onerror = () => reject(console.log('FileReader Error: ', error))
|
|
|
- })
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- onImageUpload = (f, cb, e) => {
|
|
|
- let file = f
|
|
|
- if (file.length) {
|
|
|
- file = f[0]
|
|
|
- }
|
|
|
- this.convertFileToBase64(file).then(src => {
|
|
|
- const $image = $('<img>').attr('src', src).wrap('div')
|
|
|
- this.editor.current.insertNode($image[0])
|
|
|
- })
|
|
|
- }
|
|
|
- onChange(e) {
|
|
|
- //$('span[style*="mso-ignore"]').remove()
|
|
|
- //let img = $('img[src*="file://"]').attr('loading',true);
|
|
|
- // console.log(e);
|
|
|
- }
|
|
|
- onImagePasteFromWord($imgs) {
|
|
|
- console.log("onImagePasteFromWord", $imgs);
|
|
|
- }
|
|
|
- onPaste(e) {
|
|
|
- //console.log('--------- onPaste --------', e)
|
|
|
-
|
|
|
- let items = e.originalEvent.clipboardData.items;
|
|
|
- let files = e.originalEvent.clipboardData.files;
|
|
|
-
|
|
|
- for (let i = 0; i < files.length; i++) {
|
|
|
- return e.preventDefault();
|
|
|
- }
|
|
|
-
|
|
|
- //console.log('---------- items -------------', items)
|
|
|
- //console.log('---------- files -------------', files)
|
|
|
-
|
|
|
- for (let i = 0; i < items.length; i++) {
|
|
|
- //console.log('---------- item -------------', items[i])
|
|
|
- if (items[i].type.indexOf("rtf") > -1) {
|
|
|
- items[i].getAsString(function (rtf) {
|
|
|
- // const doc = rtf2html(rtf);
|
|
|
- //const meta = doc.metadata();
|
|
|
- //console.log(doc)
|
|
|
- // doc
|
|
|
- // .render()
|
|
|
- // .then(function (htmlElements) {
|
|
|
- // var imgs = [];
|
|
|
- // //console.log('meta', meta);
|
|
|
- // //console.log('htmlElements', htmlElements);
|
|
|
- // htmlElements.forEach($html => {
|
|
|
- // $html.find('img[src*="data:image"]').each((i, el) => {
|
|
|
- // imgs.push(el);
|
|
|
- // });
|
|
|
- // //$('#test').append($html)
|
|
|
- // });
|
|
|
- // //console.log(imgs)
|
|
|
- // setTimeout(() => {
|
|
|
- // //console.log(imgs)
|
|
|
- // $("img[loading]").each((i, el) => {
|
|
|
- // if (imgs[i]) el.src = imgs[i].src;
|
|
|
- // });
|
|
|
- // }, 0);
|
|
|
- // })
|
|
|
- // .catch(error => console.error(error));
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- render() {
|
|
|
- const { editorState } = this.state;
|
|
|
-
|
|
|
- return (
|
|
|
- <ContentWrapper>
|
|
|
- <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
|
|
|
- <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet" />
|
|
|
- <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
|
|
|
- <Row>
|
|
|
- <Col lg={12}>
|
|
|
- <Card body className="card-default">
|
|
|
- <FormGroup row>
|
|
|
- <label className="col-md-1 col-form-label">Judul Catatan</label>
|
|
|
- <div className="col-md-11">
|
|
|
-
|
|
|
- <input type="text" name="article-title" placeholder="Judul Catatan" className="mb-3 form-control form-control-lg" onChange={this.setHandleJudul} />
|
|
|
- </div>
|
|
|
- </FormGroup>
|
|
|
-
|
|
|
- {/* <SummerNote
|
|
|
- id='editor'
|
|
|
- destroy={false}
|
|
|
- // value={htmldata}
|
|
|
- options={{
|
|
|
- // lang: "zh-TW",
|
|
|
- lang: "eng",
|
|
|
- height: 800,
|
|
|
- dialogsInBody: true,
|
|
|
- toolbar: [
|
|
|
- ["style", ["style", "customStyle", "copyFormatting"]],
|
|
|
- ["font", ["bold", "italic", "underline", "strikethrough", "superscript", "subscript", "clear", "customCleaner"]],
|
|
|
- ["fontname", ["fontname", "customFont"]],
|
|
|
- ["fontsize", ["fontsizeInput"]],
|
|
|
- ['color', ['forecolor', 'backcolor']],
|
|
|
- ["para", ["ul", "ol", "listStyles", "paragraph"]],
|
|
|
- ["table", ["jTable"]],
|
|
|
- ["tableRow", ["jRowHeight"]],
|
|
|
- ["tableCol", ["jColWidth"]],
|
|
|
- ["insert", ["pasteHTML", "link", "unlink", "picture", "imageMap", "video", "customSpecialChar"]],
|
|
|
- ["anchor", ["anchor", "toc", "markAnchor", "editAnchor"]],
|
|
|
- ["comment", ["editPopover", "removePopover"]],
|
|
|
- ["view", ["fullscreen", "codeview", "help"]],
|
|
|
- ],
|
|
|
- canViewClasslist: true,
|
|
|
- tableClassName: 'jtable table-bordered',
|
|
|
- customFont: {
|
|
|
- fontNames: [
|
|
|
- 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana',
|
|
|
- { name: '新細明體', value: '新細明體, serif' },
|
|
|
- { name: '微軟正黑體', value: '微軟正黑體, sans-serif' },
|
|
|
- { name: '標楷體', value: '標楷體, DFKai-SB, BiauKaiTC' }
|
|
|
- ]
|
|
|
- },
|
|
|
- }}
|
|
|
- onChange={this.onEditorStateChange}
|
|
|
- onImageUpload={this.onImageUpload}
|
|
|
- onImagePasteFromWord={this.onImagePasteFromWord}
|
|
|
- onPaste={this.onPaste}
|
|
|
- onInit={e => console.log(`Using jquery version ${$().jquery}`)}
|
|
|
- ref={this.editor}
|
|
|
- /> */}
|
|
|
- <SummerNote options={{
|
|
|
- height: 350,
|
|
|
- dialogsInBody: true,
|
|
|
- toolbar: [
|
|
|
- ["style", ["style", "customStyle", "copyFormatting"]],
|
|
|
- ["font", ["bold", "italic", "underline", "strikethrough", "superscript", "subscript", "clear", "customCleaner"]],
|
|
|
- ["fontname", ["fontname", "customFont"]],
|
|
|
- ["fontsize", ["fontsizeInput"]],
|
|
|
- ['color', ['forecolor', 'backcolor']],
|
|
|
- ["para", ["ul", "ol", "listStyles", "paragraph"]],
|
|
|
- ["table", ["table", "jMerge", "jBackcolor", "jBorderColor", "jAlign", "jTableInfo", "jWidthHeightReset"]],
|
|
|
- ["tableRow", ["jRowHeight"]],
|
|
|
- ["tableCol", ["jColWidth"]],
|
|
|
- ["insert", ["pasteHTML", "link", "unlink", "picture", "imageMap", "video", "customSpecialChar"]],
|
|
|
- ["anchor", ["anchor", "toc", "markAnchor", "editAnchor"]],
|
|
|
- ["comment", ["editPopover", "removePopover"]],
|
|
|
- ["view", ["fullscreen", "codeview", "help"]],
|
|
|
- ],
|
|
|
- }} />
|
|
|
- <br />
|
|
|
-
|
|
|
- <Row>
|
|
|
- <Col>
|
|
|
- {this.state.simpan === true ?
|
|
|
- (
|
|
|
- <div>
|
|
|
- <span className="btn-radius">
|
|
|
- <Button color id="Popover1" className="ml-0 mb-2 btn-v1-outline-purple" onClick={() => {
|
|
|
- this.CloseCopiedd()
|
|
|
- }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" /> Link Dokumen Berita Acara</span>
|
|
|
-
|
|
|
- {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> Link Dokumen Berita Acara</h5> */}
|
|
|
- </Button>
|
|
|
- </span>
|
|
|
- <Popover placement="bottom" isOpen={this.state.copiedd} target="Popover1" toggle={this.Copiedd}>
|
|
|
- <PopoverHeader>Link Berhasil Disalin</PopoverHeader>
|
|
|
- </Popover>
|
|
|
- </div>
|
|
|
- ) :
|
|
|
- (
|
|
|
- <div>
|
|
|
- <span className=" text-danger">
|
|
|
- *Klik tombol 'Simpan' untuk mendapatkan link presensi
|
|
|
- </span>
|
|
|
-
|
|
|
- </div>
|
|
|
- )
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- </Col>
|
|
|
- <Col>
|
|
|
- <div>
|
|
|
- <Button color className="btn-login float-right" onClick={this.handelSimpan} disabled={this.state.judul === ""}>
|
|
|
- <span className="font-color-white">
|
|
|
- Simpan Catatan
|
|
|
- </span>
|
|
|
- </Button>
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
-
|
|
|
- </Card>
|
|
|
- </Col>
|
|
|
-
|
|
|
- </Row>
|
|
|
- </ContentWrapper>
|
|
|
- );
|
|
|
- }
|
|
|
-}
|
|
|
-const mapStateToProps = (state) => ({ user: state.user, token: state.token });
|
|
|
-export default connect(mapStateToProps)(NewFile);
|
andi