merge newDoc

Author: Francesca-Bit

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

@@ -15,7 +15,7 @@ export const DocumentEdit = () => {
     const [showModal, setShowModal] = useState(false) 
     const {type, docid} = useParams()
     const navigate = useNavigate()
-    
+     
     const {
         updateDocument,
         getSelectedDocument,
@@ -61,7 +61,7 @@ export const DocumentEdit = () => {
                 type={type}
                 frames={frames}
                 closeButtonClick={closeButtonClick}
-                selectedDocument={selectedDocument}
+                documentJson={selectedDocument}
             />
         }
         </React.Fragment>

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

@@ -8,6 +8,7 @@ import {CreateChangeRequestModal} from "../components/CreateChangeRequestModal"
 import {DocumentSearchComponent} from "../components/DocumentSearchComponent"
 import '@terminusdb/terminusdb-documents-ui/dist/css/terminusdb__darkly.css'
 
+
 export const DocumentNew = () => {  
     const {organization,dataProduct,type} = useParams()
     const {setChangeRequestBranch, branch,woqlClient,currentChangeRequest} = WOQLClientObj()
@@ -18,7 +19,8 @@ export const DocumentNew = () => {
         error,
         setError,
         getDocumentFrames,
-        createDocument
+        createDocument, 
+        formData
     } = useTDBDocuments(woqlClient)
     const navigate = useNavigate()
 
@@ -50,10 +52,10 @@ export const DocumentNew = () => {
             {showModal && <CreateChangeRequestModal showModal={showModal} type={type}  setShowModal={setShowModal}  updateViewMode={setChangeRequestBranch}/>}
             {error && <ErrorMessageReport error={error} setError={setError}/>}
             {currentChangeRequest &&  frames &&  
-                <NewDocumentComponent
+                <NewDocumentComponent 
                     SearchComponent={DocumentSearchComponent}
                     frames={frames}
-                    formData={{}}
+                    documentJson={formData}
                     createDocument={callCreateDocument}
                     type={type}
                     closeButtonClick={closeButtonClick}

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

@@ -10,6 +10,7 @@ import {CreateChangeRequestModal} from '../components/CreateChangeRequestModal'
 import {ErrorMessageReport} from "../components/ErrorMessageReport"
 import '@terminusdb/terminusdb-documents-ui/dist/css/terminusdb__darkly.css'
 
+
 export const DocumentView = () => {   
     const { branch,setChangeRequestBranch,woqlClient,currentChangeRequest} = WOQLClientObj()
     const {type, docid} = useParams()
@@ -67,7 +68,7 @@ export const DocumentView = () => {
         <ViewDocumentComponent 
           type={type}
           getDocumentById={getDocumentById}
-          selectedDocument={selectedDocument}
+          documentJson={selectedDocument}
           frames={frames}
           closeButtonClick={()=>navigate(-1)}
           documentID={documentID}

packages/tdb-documents-ui-template/src/EditDocumentComponent.js

@@ -43,7 +43,7 @@ export const EditDocumentComponent = ({type,updateDocument,documentJson,frames,c
             <FrameViewer frame={frames}
                 type={type}
                 mode={CONST.EDIT_DOCUMENT}
-                onSubmit={updateDocument}
+                onSubmit={updateDocument} 
                 //onChange={handleChange}
                 language={selectedLanguage}
                 {...onSelect}  

packages/tdb-documents-ui-template/src/NewDocumentComponent.js

@@ -38,7 +38,7 @@ export const NewDocumentComponent = ({type,createDocument,documentJson,frames,cl
                 <JsonFrameViewer jsonData={{}} mode={CONST.CREATE_DOCUMENT} setExtracted={createDocument}/>
             }
             {view === CONST.FORM_VIEW && 
-            <FrameViewer frame={frames}
+            <FrameViewer frame={frames} 
                     type={type}
                     formData={documentJson}
                     mode={CONST.CREATE_DOCUMENT}

packages/tdb-documents-ui-template/src/hook/useTDBDocuments.js

@@ -22,7 +22,8 @@ export const useTDBDocuments = (woqlClient) => {
     // bool|Object
     const [frames, setFrames]=useState(false)
 
-    
+    // store the state of formData  entered by the user
+    const [formData, setFormData]= useState()
 
     //get all the Document Classes (no abstract or subdocument)
     //improve performance with check last commit
@@ -116,6 +117,7 @@ export const useTDBDocuments = (woqlClient) => {
             //return the new document id
             return res
         }catch(err){ 
+            setFormData(jsonDocument)
             setError(err.data || {message:err.message})
         }finally{
             setLoading(false)
@@ -177,12 +179,14 @@ export const useTDBDocuments = (woqlClient) => {
             return true
         }catch(err){
             //display conflict
+            setSelectedDocument(jsonDoc)
             setError(err.data || {message:err.message})
        }finally{setLoading(false)}
     }
 
     return {
             setError,
+            formData, 
             selectedDocument,
             getSelectedDocument,
             getDocumentById,

packages/tdb-documents-ui/sandbox/README.md

@@ -5,10 +5,15 @@ SDK to build UI from terminusdb documents. This package includes a ``<FrameViewe
 ## Installation
 Install the dependancy from npm
 ```npm install @terminusdb/terminusdb-documents-ui```
-
+ 
 ## Usage
 Then import dependancy as shown below
 ```import {FrameViewer} from '@terminusdb/terminusdb-documents-ui'```
+
+To import css is light or dark mode 
+
+```import '@terminusdb/terminusdb-documents-ui/dist/css/terminusdb__darkly.css'```   or
+```import '@terminusdb/terminusdb-documents-ui/dist/css/terminusdb__light.css'```
 
 ## Run sandbox
 
@@ -152,18 +157,31 @@ return <FrameViewer
 	type={"Theme"}/> 							// type of document to display in form
 ```
 ### Theme Selector
-FrameViewer is based on [Bootswatch](https://bootswatch.com/cosmo/) Themes. Use props ``theme`` in ``<FrameViewer/>`` component to change themes at an application level.
+FrameViewer is based on [Bootswatch](https://bootswatch.com/cosmo/) Themes. Use props ``theme`` in ``<FrameViewer/>`` component to change themes at an application level. Note that if using ``theme`` parameter in FrameViewers the css will change at an application level. If the preference is to just alter the look & feel of the FrameViwer in a project then the ``<FrameViewer/>`` component is shipped with a dark mode and a light mode. 
+
+
 ```
 import { FrameViewer } from  '@terminusdb/terminusdb-documents-ui'
 return <FrameViewer
 	frame={frame} 								// frames
-	mode={"View"} 							    // mode in which to display the form
-	onTraverse={handleTraverse} 				// Callback traverse links function
+	mode={"View"} 							  // mode in which to display the form
+	onTraverse={handleTraverse} 	// Callback traverse links function
 	formData={data} 							// instance data 
 	theme="darkly"								// pass a bootswatch theme - like darkly/ pulse
 	type={"Theme"}/> 							// type of document to display in form
 ```
 
+```
+import { FrameViewer } from  '@terminusdb/terminusdb-documents-ui'
+return <FrameViewer
+	frame={frame} 								// frames
+	mode={"View"} 							  // mode in which to display the form
+	onTraverse={handleTraverse} 	// Callback traverse links function
+	formData={data} 							// instance data 
+	theme="minty"								// pass a bootswatch theme - like darkly/ pulse
+	type={"Theme"}/> 							// type of document to display in form
+```
+
 A Theme selector can also be enabled by passing ``showThemeSelector={true}`` 
 ```
 import { FrameViewer } from  '@terminusdb/terminusdb-documents-ui'

packages/tdb-documents-ui/sandbox/src/ModeBar.js

@@ -0,0 +1,56 @@
+import React, {useState} from "react"
+import Stack from 'react-bootstrap/Stack'
+import { CREATE, EDIT, VIEW, MODE_HELP_TEXT } from "./constants"
+import { FrameObj } from "./frameInit"
+import { Card } from "react-bootstrap"
+
+const RadioButtons = ({ mode, handleChange, checked }) => {
+	return <div>
+		<label>
+				<input
+						type="radio"
+						name="letter"
+						data-cy={`${mode}_mode`}
+						value={mode}
+						checked={checked === mode}
+						onChange={handleChange}
+				/>{" "}
+				{mode}
+		</label>
+	</div>
+}
+
+export const ModeBar = () => {
+
+	const [checked, setChecked]=useState(CREATE)
+	const {
+		mode,
+		setMode,
+		setData
+	} = FrameObj()
+
+	function handleChange (event) {
+		let mode = event.target.value
+		setChecked(mode)
+		setMode(mode)
+		if(mode === CREATE) setData({})
+	}
+
+	return <Card className="mb-3">
+		<Card.Header>
+			<div>{`${MODE_HELP_TEXT}. `} </div>
+		</Card.Header>
+		<Card.Body>
+			<Stack direction="horizontal" gap={1} className="mb-2" >
+				<div className="text-warning">{`${mode}`}</div>
+				<div className="text-muted">{` mode selected.`} </div>
+			</Stack>
+			<Stack direction="horizontal" gap={3}>
+				<RadioButtons mode={CREATE} handleChange={handleChange} checked={checked} />
+				<RadioButtons mode={EDIT} handleChange={handleChange} checked={checked}/>
+				<RadioButtons mode={VIEW} handleChange={handleChange} checked={checked}/>
+			</Stack>
+			
+		</Card.Body>
+	</Card>
+}

packages/tdb-documents-ui/sandbox/src/View.js

@@ -11,7 +11,7 @@ import { Search } from "./SearchComponent"
 //import '@terminusdb/terminusdb-documents-ui/dist/css/terminusdb__darkly.css'
 //import '@terminusdb/terminusdb-documents-ui/dist/css/terminusdb__light.css'
 //import '../../src/css/terminusdb__darkly.css'
-//import '../../src/css/terminusdb__light.css'
+import '../../src/css/terminusdb__light.css'
 
 export const View = () => { 
 
@@ -41,7 +41,7 @@ export const View = () => {
         formData={getFormData(mode, type, setData)}
         onTraverse={handleTraverse}
         onSelect={<Search/>}
-        theme="darkly"
+        //theme="minty"
         //showThemeSelector={true}
         onSubmit={handleSubmit}
         type={type}

packages/tdb-documents-ui/sandbox/src/generateCode.js

@@ -0,0 +1,38 @@
+/** Generates Frame Viewer code with current params
+ * @param {*} uiFrames - uiFrames to alter look and feel of form
+ * @param {*} data - instance data to view form in Edit/View Mode
+ * @param {*} mode - mode in which form is to be displayed - Create, Edit or View
+ * @param {*} type - type of Document being displayed in form
+ */
+export const generateFrameViewerCode = function(data, mode, type){
+    return `
+
+/***
+ * frames - JSON frames of all document types (mandatory)
+ * type - document type to be displayed (mandatory)
+ * data - data to be displayed in form (mandatory for EDIT/ VIEW mode - if nothing to display pass {})
+ * mode - the mode in which form is to be displayed - Create/ Edit or View
+ * onTraverse - a js function which gets back the ID of a document on click
+ */
+export const Form = ({ frames, type, data, mode }) => {
+
+    /* Callback submit function which extracts all user input fields */
+    function handleSubmit(data) {
+        console.log("Data submitted from form", data)
+    }
+
+    /* filled data */
+    let fData= ${JSON.stringify(data, null, 4)}
+
+    if(!frames) return <>LOADING ... <>
+
+    return <FrameViewer
+        frame={frames}                              // frames
+        type={"${type}"}                            // type of document to display in form 
+        formData={fData}                            // instance data 
+        mode={"${mode}"}                            // mode in which to display the form
+        onSubmit={handleSubmit}                     // Callback submit function
+    />
+}
+`
+}