adding delete CR logic

Author: KittyJose

packages/tdb-dashboard/src/components/DocumentComponents.js

@@ -21,6 +21,7 @@ import Popover from "react-bootstrap/Popover"
 import OverlayTrigger from "react-bootstrap/OverlayTrigger"
 import Row from "react-bootstrap/Row"
 import {DocumentsGraphqlTable} from "./DocumentsGraphqlTable"
+import {WOQLClientObj} from '../init-woql-client'
 
 // button to view frames
 const ViewFramesButton = () => {
@@ -102,8 +103,8 @@ const EditHeader = ({type, id, setView}) => {
 /**
  * function to display are you sure to delete a document message
  */
-const DeleteMessage = ({handleDelete, handleToggle}) => {
-    return <Card className="border-0">
+export const DeleteMessage = ({handleDelete}) => {
+    return <Card className="border-0 w-100">
         <Card.Header className="bg-transparent w-100 fw-bold">
             <span>{"Are you sure you want to delete ?"}</span>
         </Card.Header>
@@ -116,10 +117,10 @@ const DeleteMessage = ({handleDelete, handleToggle}) => {
                     onClick={handleDelete}> 
                     <RiDeleteBin7Line className="mb-1" /> Delete
                 </Button>
-                <Button className="btn-sm bg-light text-dark"
-                    onClick={handleToggle}> 
+                {/*<Button className="btn-sm bg-light text-dark"
+                    onClick={onCancel}> 
                     <FaTimes className="mr-1" /> Cancel
-                </Button>
+                </Button>*/}
             </div>
 
         </Card.Body>
@@ -152,23 +153,29 @@ const UpdatingPopover = React.forwardRef(
  * @param {*} setView useState constant to set view in Form or JSON View
  * @returns View Header 
  */
-const ViewHeader = ({type, id, startCRMode, setView, setClickedDelete}) => {
+const ViewHeader = ({type, id, setView, setShowCRModal, setClickedDelete}) => {
+    const { 
+        branch
+    } = WOQLClientObj()
 
     const navigate=useNavigate()
     const [show, setShow] = React.useState(false);
+    
 
     const handleToggle = () => {
         setShow((prev) => !prev);
       };
 
     function handleEdit(e) {
-        startCRMode(CONST.EDIT_DOCUMENT)
         navigate(`${PATH.EDIT_DOC}`)
     }
-
+ 
     function handleDelete(e) {
-        startCRMode(CONST.DELETE_DOCUMENT)
-        setClickedDelete(Date.now())
+        // show Change Request component if branch is main 
+        if(branch === "main"){
+            setShowCRModal(Date.now())
+        }
+        else setClickedDelete(Date.now())
     }
 
 
@@ -193,7 +200,16 @@ const ViewHeader = ({type, id, startCRMode, setView, setClickedDelete}) => {
                 Edit
             </Button>
 
-            <OverlayTrigger trigger="click" 
+            <Button variant="danger" 
+                    type="button" 
+                    title="Delete Document" 
+                    onClick={handleDelete}
+                    className="btn-sm btn text-gray">
+                    <RiDeleteBin7Line className=" mb-1"/>
+            </Button>
+
+            {/** commenting overlay trigger for delete */}
+            {/*<OverlayTrigger trigger="click" 
                 placement="bottom" 
                 rootClose={true}
                 show={show}
@@ -209,7 +225,7 @@ const ViewHeader = ({type, id, startCRMode, setView, setClickedDelete}) => {
                     className="btn-sm btn text-gray">
                         <RiDeleteBin7Line className=" mb-1"/>
                 </Button>
-            </OverlayTrigger>
+            </OverlayTrigger>*/}
         </div>
         <CloseButton type={type}/>
     </Stack>
@@ -224,15 +240,15 @@ const ViewHeader = ({type, id, startCRMode, setView, setClickedDelete}) => {
  * @param {*} setView useState constant to set view in Form or JSON View
  * @returns 
  */ 
-export const Header = ({mode, type, id, startCRMode, setClickedDelete}) => {
+export const Header = ({mode, type, id, setShowCRModal, setClickedDelete}) => {
     const {
         setView
     } = DocumentControlObj()
 
     let matchHeader ={
         [CONST.CREATE_DOCUMENT] : <CreateHeader type={type} setView={setView}/>,
         [CONST.EDIT_DOCUMENT]   : <EditHeader type={type} id={id} setView={setView}/>,
-        [CONST.VIEW_DOCUMENT]   : <ViewHeader type={type} id={id} startCRMode={startCRMode} setView={setView} setClickedDelete={setClickedDelete}/>
+        [CONST.VIEW_DOCUMENT]   : <ViewHeader type={type} id={id} setView={setView} setShowCRModal={setShowCRModal} setClickedDelete={setClickedDelete}/>
     }
     return matchHeader[mode]
 }

packages/tdb-dashboard/src/hooks/ChangeRequest.js

@@ -4,7 +4,7 @@ import React, {useState} from "react";
 
 // import {WOQLClientObj} from '../init-woql-client'
 import { formatErrorMessage } from './hookUtils'
-
+ 
 export function ChangeRequest(woqlClient){  
     const [loading, setLoading] = useState(false)
     const [errorMessage, setError] = useState(false)
@@ -96,7 +96,7 @@ export function ChangeRequest(woqlClient){
         }finally{
             setLoading(false)
         }     
-    }
+    } 
 
 
     return {

packages/tdb-dashboard/src/pages/DocumentEdit.js

@@ -130,10 +130,7 @@ export const DocumentEdit = () => {
             setShowModal(false)
         }*/
 	},[branch])
-    // create a change request before editing document
-    const startCRMode = (mode) => {
-        // logic to start CR mode
-    }
+  
 
     const updateViewMode =(newBranchName, changeRequestId)=>{
         setChangeRequestBranch(newBranchName, changeRequestId)

packages/tdb-dashboard/src/pages/DocumentView.js

@@ -4,13 +4,15 @@ import Card from "react-bootstrap/Card"
 import {FrameViewer} from "@terminusdb/terminusdb-documents-ui"
 import * as CONST from "../components/constants"
 import { useNavigate, useParams } from "react-router-dom";
-import {Header, onTraverse} from "../components/DocumentComponents"
+import {Header, onTraverse, DeleteMessage} from "../components/DocumentComponents"
 import {JsonFrameViewer} from "../components/JsonFrameViewer"
 import {GetDocumentHook, DeleteDocumentHook} from "../hooks/DocumentHook"
 import Alert from 'react-bootstrap/Alert'
 import {Loading} from "../components/Loading"
 import {DocumentControlObj} from "../hooks/DocumentControlContext"
 import {TarverseDocumentLinks} from "../components/TarverseDocumentLinks"
+import {CreateChangeRequestModal} from "../components/CreateChangeRequestModal"
+import Modal from 'react-bootstrap/Modal';
 
 const DisplayDocumentBody = ({setLoading, setErrorMsg, setClicked, setModalShow}) => {
     const { 
@@ -58,7 +60,9 @@ const DisplayDocumentBody = ({setLoading, setErrorMsg, setClicked, setModalShow}
 export const DocumentView = () => {   
 
     const { 
-        woqlClient 
+        woqlClient,
+        setChangeRequestBranch,
+        branch
     } = WOQLClientObj()
 
     const {type, id} = useParams()
@@ -68,23 +72,47 @@ export const DocumentView = () => {
     const [loading, setLoading]=useState(false)
     const [errorMsg, setErrorMsg]=useState(false)
     const [clickedDelete, setClickedDelete]=useState(false)
+    const [deleteDocument, setDeleteDocument] = useState(false)
 
     //constants to traverse through documents 
     const [clicked, setClicked]=useState(false)
     const [modalShow, setModalShow] = React.useState(false);
+    const [showCRModal, setShowCRModal] = useState(false)
+    
+    /*useEffect(() => {
+        if(clickedDelete && branch === "main"){
+            //setShowModal(true)
+        }
+	},[clickedDelete])*/
+
+    const handleClose = () => setClickedDelete(false);
 
     let documentID=atob(id)
-    const deleteResult=DeleteDocumentHook(woqlClient, documentID, type, clickedDelete, setLoading, setErrorMsg) 
+    const deleteResult=DeleteDocumentHook(woqlClient, documentID, type, deleteDocument, setLoading, setErrorMsg) 
+
+    const updateViewMode =(newBranchName, changeRequestId)=>{
+        setChangeRequestBranch(newBranchName, changeRequestId)
+        setClickedDelete(Date.now())
+       // setCurrentMode(currentMode)
+    }
 
-    // create a change request before editing document
-    const startCRMode = (mode) => {
-        // logic to start CR mode
+    function handleDelete () {
+        setDeleteDocument(Date.now())
     }
 
     return <main className="content w-100 document__interface__main">
         {errorMsg && <Alert variant={"danger"} className="mr-3">
             {errorMsg}
-        </Alert>}
+        </Alert>} 
+        { clickedDelete && <Modal show={clickedDelete} onHide={handleClose}>
+            {loading && <span className="text-warning text-break p-3">{`Deleting document ${documentID} ...`}</span>}
+            {!loading && <DeleteMessage handleDelete={handleDelete}/>}
+        </Modal>
+        }
+        {showCRModal && <CreateChangeRequestModal showModal={showCRModal}
+            type={type} 
+            setShowModal={setShowCRModal} 
+            updateViewMode={updateViewMode}/>}
         <TarverseDocumentLinks
             setClicked={setClicked}
             clicked={clicked}
@@ -96,7 +124,7 @@ export const DocumentView = () => {
                     type={type} 
                     id={documentID} 
                     setClickedDelete={setClickedDelete}
-                    startCRMode={startCRMode}/>
+                    setShowCRModal={setShowCRModal}/>
             </Card.Header>
             <Card.Body className="text-break">
                 <DisplayDocumentBody setLoading={setLoading}