components/PerpanjanganSanksi/TableRiwayatCatatan.js

@@ -1,46 +1,80 @@
 import Datatable from "@/components/Tables/Datatable";
-import {
-    Button, Dropdown,
-    DropdownToggle,
-    DropdownMenu,
-    DropdownItem,
-} from "reactstrap";
+import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Modal, ModalBody, ModalFooter, ModalHeader } from "reactstrap";
 import Link from "next/link";
 import moment from "moment";
 import { ENV } from '../../env.js';
 import CopyToClipboard from "react-copy-to-clipboard";
 import { useState } from "react";
-import { EditorState, ContentState, convertFromHTML, convertToRaw, convertFromRaw } from 'draft-js';
-import ReactToPrint from "react-to-print";
-import ComponentToPrint from "./presensi_print";
 import { deleteCatatan } from "../../actions/catatan.js";
 import { toast } from "react-toastify";
+import { useSelector } from "react-redux";
+import Router from "next/router";
 
 
 
 
 
-function TableRiwayatCatatan({ listData, query, editFilePage, newFilePage, readOnly }) {
+
+function TableRiwayatCatatan({ listData, query, editFilePage, newFilePage, readOnly, role }) {
     const [dropdownState, setDropdownState] = useState(false);
+    const [seledtedID, setSelectedID] = useState("")
+    const [modalIsOpen, setModalIsOpen] = useState(false)
+    const token = useSelector((state) => state.token)
+
     const toggleDD = (dd) => {
         setDropdownState(prevState => ({
             ...prevState,
             [dd]: !prevState[dd]
         }));
     };
-// const deletedcatatan = async(id)=>{
-
-//             const toastid = toast.loading("Please wait...");
-//             const added = await deleteCatatan(id);
-//             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=${this.state.catatan.sanksi_id}`);
-//             }
-// }
+    // const deletedcatatan = async(id)=>{
+
+    //             const toastid = toast.loading("Please wait...");
+    //             const added = await deleteCatatan(id);
+    //             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=${this.state.catatan.sanksi_id}`);
+    //             }
+    // }
+    const setmodal = (id) => {
+        setModalIsOpen(!modalIsOpen)
+        setSelectedID(id)
+    }
     return (
         <div className="card b ">
+            <Modal isOpen={modalIsOpen} >
+                <ModalBody>Apakah Anda yakin akan menghapus catatan ini?</ModalBody>
+                <ModalFooter>
+
+                    <Button color className="btn-login" onClick={async () => {
+                        if (role === 2024) {
+                            Swal.fire({
+                                icon: 'error',
+                                title: 'Oops...',
+                                html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
+                                confirmButtonColor: "#3e3a8e",
+                                confirmButtonText: 'Oke'
+                            })
+                        } else {
+
+                            await toast.promise(deleteCatatan(token, seledtedID), {
+                                pending: "Loading",
+                                success: "Success",
+                                error: "Error",
+                            });
+                            Router.push(`/app/perpanjangan-sanksi/detail?id=${query.id}`);
+                            setModalIsOpen(false)
+                        }
+                    }}>
+                        <span className="font-color-white">Ya</span>
+                    </Button>
+                    <Button color className="btn-v2" onClick={setmodal}>
+                        Tidak
+                    </Button>
+                </ModalFooter>
+            </Modal>
             <div className=" card-header">
                 <div className=" card-title">Riwayat Catatan</div>
             </div>
@@ -72,7 +106,7 @@ function TableRiwayatCatatan({ listData, query, editFilePage, newFilePage, readO
                             <tr>
                                 <th>Tanggal dibuat</th>
                                 <th>Nama File</th>
-                                <th>Terakhir Diedit</th>
+                                <th>Terakhir diedit</th>
                                 <th>Aksi</th>
                             </tr>
                         </thead>
@@ -86,7 +120,7 @@ function TableRiwayatCatatan({ listData, query, editFilePage, newFilePage, readO
                                         </td>
                                         <td>{moment(data.updatedAt).format("D MMMM YYYY")}</td>
                                         <td
-                                        // style={{ width: "40%" }}
+                                        // style={{ width: "30%" }}
                                         >
                                             {/* <span className=" float-left  d-flex mr-2">
                                                 <Button className="btn-v3" color >
@@ -95,14 +129,14 @@ function TableRiwayatCatatan({ listData, query, editFilePage, newFilePage, readO
                                                     </span>
                                                 </Button>
                                             </span>
-                                            <span className=" d-flex">
+                                            <span className=" mr-2">
                                               <Button className="btn-v3" color>
                                                   <span className="font-color-black">
                                                       Lihat
                                                   </span>
                                               </Button>
                                           </span>
-                                            <span className=" float-none d-flex">
+                                            <span className="">
                                               
                                                 <Button className="btn-v3" color>
                                                     <span className="font-color-black">
@@ -110,14 +144,17 @@ function TableRiwayatCatatan({ listData, query, editFilePage, newFilePage, readO
                                                     </span>
                                                 </Button>
                                             </span> */}
-                                            <span className=" float-right mt-2">
+                                            <span className="">
                                                 <Dropdown isOpen={dropdownState[`ddSplit${i}`]}
                                                     toggle={() => toggleDD(`ddSplit${i}`)}  >
                                                     <DropdownToggle
                                                         data-toggle="dropdown"
                                                         tag="span"
                                                     >
-                                                        <em className="fas fa-ellipsis-v" />
+                                                        <Button color className="btn-v3">
+                                                            Info
+                                                        </Button>
+                                                        {/* <em className="fas fa-ellipsis-v" /> */}
                                                     </DropdownToggle>
                                                     <DropdownMenu>
                                                         {ENV === "local" &&
@@ -129,16 +166,16 @@ function TableRiwayatCatatan({ listData, query, editFilePage, newFilePage, readO
                                                                 </DropdownItem>
                                                             </CopyToClipboard>
                                                         }
-                                                         <Link
-                                                                href={{
-                                                                    pathname: readOnly,
-                                                                    query: { id: data?._id },
-                                                                }}
-
-                                                            >
-                                                                <DropdownItem>
-                                                           <span className=" font-color-black">Lihat</span>
-                                                        </DropdownItem>
+                                                        <Link
+                                                            href={{
+                                                                pathname: readOnly,
+                                                                query: { id: data?._id },
+                                                            }}
+
+                                                        >
+                                                            <DropdownItem>
+                                                                <span className=" font-color-black">Lihat</span>
+                                                            </DropdownItem>
                                                         </Link>
                                                         <Link
                                                             href={{
@@ -150,10 +187,12 @@ function TableRiwayatCatatan({ listData, query, editFilePage, newFilePage, readO
                                                                 <span className=" font-color-black">Edit</span>
                                                             </DropdownItem>
                                                         </Link>
-                                                        <DropdownItem >
-                                                           Hapus
-                                                            
-                                                            </DropdownItem>
+                                                        <DropdownItem onClick={() => { setmodal(data._id) }}>
+                                                            <span  >
+                                                                Hapus
+                                                            </span>
+
+                                                        </DropdownItem>
                                                     </DropdownMenu>
                                                 </Dropdown>
                                             </span>
@@ -173,5 +212,4 @@ function TableRiwayatCatatan({ listData, query, editFilePage, newFilePage, readO
 
     )
 }
-
-export default TableRiwayatCatatan
+export default TableRiwayatCatatan;

pages/app/perpanjangan-sanksi/detail.js

@@ -82,7 +82,7 @@ class Detail extends Component {
 					<Row>
 						<Col>
 
-							<TableRiwayatCatatan query={this.props.query} newFilePage ="/app/perpanjangan-sanksi/newfile" editFilePage ="/app/perpanjangan-sanksi/editfile" readOnly ="/app/perpanjangan-sanksi/readOnly" listData={AllCatatan}/>
+							<TableRiwayatCatatan query={this.props.query} role={this.props.user.role.id} newFilePage ="/app/perpanjangan-sanksi/newfile" editFilePage ="/app/perpanjangan-sanksi/editfile" readOnly ="/app/perpanjangan-sanksi/readOnly" listData={AllCatatan}/>
 						</Col>
 					</Row>
 					{sanksi.data && (

pages/app/perpanjangan-sanksi/editfile.js

@@ -119,9 +119,7 @@ class EditFile extends Component {
     };
     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();
     };

pages/app/perpanjangan-sanksi/readOnly.js

@@ -120,9 +120,7 @@ class EditFile extends Component {
     };
     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();
     };
@@ -220,9 +218,87 @@ class EditFile extends Component {
                                     </div>
                                 </Col>
                             </Row>
+                            <Row>
+                                <Col>
+                                    {ENV === "local" &&
+                                        <CopyToClipboard
+                                            text={`http://localhost:3000/signature/letter/${catatan?._id}`}
+                                            options={{ asHtml: 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" />&nbsp;Link Dokumen</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen</h5> */}
+                                                    </Button>
+                                                </span>
+                                                <Popover placement="bottom" isOpen={this.state.copiedd} target="Popover1" toggle={this.Copiedd}>
+                                                    <PopoverHeader>Link Berhasil Disalin</PopoverHeader>
+                                                </Popover>
+                                            </div>
+
+                                        </CopyToClipboard>
+                                    }
+                                    {ENV === "production" &&
+                                        <CopyToClipboard
+                                            text={`https://sidali.kemdikbud.go.id/signature/letter/${catatan?._id}`}
+                                            options={{ asHtml: true }}
+                                        >
+                                            <div>
+                                                <span className="btn-radius">
+                                                    <Button color id="Popover1" className="ml-0 mt-2 mb-2 btn-v1-outline-purple" onClick={() => {
+                                                        this.CloseCopiedd()
+                                                    }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen</h5> */}
+                                                    </Button>
+                                                </span>
+                                                <Popover placement="bottom" isOpen={this.state.copiedd} target="Popover1" toggle={this.Copiedd}>
+                                                    <PopoverHeader>Link Berhasil Disalin</PopoverHeader>
+                                                </Popover>
+                                            </div>
+
+                                        </CopyToClipboard>
+                                    }
+                                    {ENV === "development" &&
+                                        <CopyToClipboard
+                                            text={`https://dev.sidali.kemdikbud.go.id/signature/letter/${catatan?._id}`}
+                                            options={{ asHtml: true }}
+                                        >
+                                            <div>
+                                                <span className="btn-radius">
+                                                    <Button color id="Popover1" className="ml-0 mt-2 mb-2 btn-v1-outline-purple" onClick={() => {
+                                                        this.CloseCopiedd()
+                                                    }} ><span><em className="fas fa-project-diagram float-left mt-1 mr-1" />&nbsp;Link Dokumen</span>
+
+                                                        {/* <h5 className="p-0 mt-3 float-right"> <em className="fas fa-project-diagram float-left mt-1" /> &nbsp;Link Dokumen</h5> */}
+                                                    </Button>
+                                                </span>
+                                                <Popover placement="bottom" isOpen={this.state.copiedd} target="Popover1" toggle={this.Copiedd}>
+                                                    <PopoverHeader>Link Berhasil Disalin</PopoverHeader>
+                                                </Popover>
+                                            </div>
+
+                                        </CopyToClipboard>
+                                    }
+
+                                </Col>
+                                <Col>
+                                    <div>
+                                        <Button color className="btn-login float-right" disabled={true} >
+                                            <span className="font-color-white">
+                                                Simpan Catatan
+                                            </span>
+                                        </Button>
+                                    </div>
+
+                                </Col>
+                            </Row>
                         </Card>
                     </Col>
-
+              
                 </Row>
             </ContentWrapper>
         );