merge origin newDoc

Francesca-Bit · Francesca-Bit · commit 6ef97d9b6c65 · 2023-05-02T11:54:28.000+01:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,7 +12,8 @@
   "dependencies": {
     "bootswatch": "^5.2.3",
     "esbuild-jest": "^0.5.0",
-    "jsonlint-mod": "^1.7.6"
+    "jsonlint-mod": "^1.7.6",
+    "react-pro-sidebar": "^0.6.0"
   },
   "devDependencies": {
     "@testing-library/react": "^13.4.0"
diff --git a/packages/tdb-dashboard/src/components/AboutDataProduct.js b/packages/tdb-dashboard/src/components/AboutDataProduct.js
@@ -96,6 +96,7 @@ export const AboutDataProduct = ({dataProductDetails, setShowDeleteModal, setSho
         <Card className="bg-transparent p-1 mb-5 tdb__align__container" border="muted">
             <Card.Body>
                 <h4 className="text-light mb-3 fw-bold">About</h4>
+                
                 {dataProductDetails.comment!== 'false' && <span className="text-light mb-4 ">
                     {dataProductDetails.comment}
                 </span>}
@@ -145,10 +146,10 @@ export const AboutDataProduct = ({dataProductDetails, setShowDeleteModal, setSho
                 </span>
                 {accessControlDashboard && accessControlDashboard.createDB() && <Fragment>
                     <div className="w-100 d-block align-items-center gx-0">
-                        <Button variant="secondary" 
+                        <Button variant="light" 
                             id="update_database"
                             title={`Update Data Product ${dataProduct} info`} 
-                            className=" btn btn-lg h2 fw-bold w-100 mt-4"
+                            className=" btn btn-md h4 w-100 mt-4 text-dark"
                             onClick={showUpdateHandler}>
                              Update Dataproduct details 
                         </Button>
diff --git a/packages/tdb-dashboard/src/components/ChangeDiffComponent.js b/packages/tdb-dashboard/src/components/ChangeDiffComponent.js
@@ -110,7 +110,7 @@ export const ChangeDiffComponent = () => {
                 <Card.Body>                 
                     {currentCRObject.status === SUBMITTED && 
                     <ReviewComponent/> }
-                    <DiffView frames={frames} diffs={result} start={start} changePage={changePage} CRObject={currentCRObject}/> 
+                    {!loading && <DiffView diffs={result} CRObject={currentCRObject} start={start} setStart={setStart}/>} 
                 </Card.Body> 
             </Card>
         </Tab>
diff --git a/packages/tdb-dashboard/src/hooks/useDiff.js b/packages/tdb-dashboard/src/hooks/useDiff.js
@@ -1,5 +1,6 @@
 import React, {useState,useEffect} from "react";
 import { WOQLClientObj } from "../init-woql-client";
+import { DIFFS_PER_PAGE_LIMIT } from "../components/constants"
 
 export function useDiff(){
     const {woqlClient,currentChangeRequest} = WOQLClientObj()
@@ -51,7 +52,7 @@ export function useDiff(){
        }finally{setLoading(false)}
     }
 
-    async function getDiffList(changeRequestID,start=0,count=5) {
+    async function getDiffList(changeRequestID, start=0, count=DIFFS_PER_PAGE_LIMIT) {
         try{
             setStart(start)
             if(totalResult[`start__${start}`]){
diff --git a/packages/tdb-dashboard/src/pages/ChangeRequestsPage.js b/packages/tdb-dashboard/src/pages/ChangeRequestsPage.js
@@ -196,9 +196,9 @@ export const ChangeRequestsPage = () => {
 					<div className="ms-2 me-auto">
 						<div className="fw-bold text-success">
 							{name}
-							<span class="text-dark ml-1 badge badge-info mr-1">{item.tracking_branch}</span>
+							<span class="text-dark ml-1 badge bg-light mr-1">{item.tracking_branch}</span>
 						 		from branch 
-							<span class="text-dark ml-1 badge badge-success">{item.original_branch}</span>
+							<span class="text-dark ml-1 badge bg-success">{item.original_branch}</span>
 						
 						</div>					
 						<div className="text-gray font-italic">
diff --git a/packages/tdb-dashboard/src/pages/DocumentNew.js b/packages/tdb-dashboard/src/pages/DocumentNew.js
@@ -53,6 +53,7 @@ export const DocumentNew = () => {
                 <NewDocumentComponent
                     SearchComponent={DocumentSearchComponent}
                     frames={frames}
+                    formData={{}}
                     createDocument={callCreateDocument}
                     type={type}
                     closeButtonClick={closeButtonClick}
diff --git a/packages/tdb-documents-ui-template/src/NewDocumentComponent.js b/packages/tdb-documents-ui-template/src/NewDocumentComponent.js
@@ -10,7 +10,7 @@ import {ViewDocumentFrames} from "./components/ViewDocumentFrames"
 import { LanguageSelectComponent } from "./components/SelectLanguageComponent"
  
 //onSelect={<SearchComponent/>} 
-export const NewDocumentComponent = ({type,createDocument,frames,closeButtonClick,SearchComponent}) => {
+export const NewDocumentComponent = ({type,createDocument,documentJson,frames,closeButtonClick,SearchComponent}) => {
     const [view, setView] = useState(CONST.FORM_VIEW)
     const [showFrames, setShowFrames] = useState(false)
     const [selectedLanguage, setSelectedLanguage] = useState(false) 
@@ -40,6 +40,7 @@ export const NewDocumentComponent = ({type,createDocument,frames,closeButtonClic
             {view === CONST.FORM_VIEW && 
             <FrameViewer frame={frames}
                     type={type}
+                    formData={documentJson}
                     mode={CONST.CREATE_DOCUMENT}
                     language={selectedLanguage}
                     onSubmit={createDocument} 
diff --git a/packages/tdb-documents-ui-template/src/components/JsonFrameViewer.js b/packages/tdb-documents-ui-template/src/components/JsonFrameViewer.js
@@ -50,7 +50,7 @@ export const JsonFrameViewer = ({type, jsonData, mode, setExtracted}) => {
                 Syntax Error: {error} </Alert>}
             
         <CodeMirror 
-            value={JSON.stringify(data || {}, null, 2)}
+            value={JSON.stringify(!data ? {} : data, null, 2)}
             options={cmOptions}
             className={"document__interface__main"}
             onBlur={(editor, data, value) => {
diff --git a/packages/tdb-documents-ui-template/src/hook/useTDBDocuments.js b/packages/tdb-documents-ui-template/src/hook/useTDBDocuments.js
@@ -22,6 +22,8 @@ export const useTDBDocuments = (woqlClient) => {
     // bool|Object
     const [frames, setFrames]=useState(false)
 
+    
+
     //get all the Document Classes (no abstract or subdocument)
     //improve performance with check last commit
     async function getDocumentClasses() {
diff --git a/packages/tdb-documents-ui/sandbox/README.md b/packages/tdb-documents-ui/sandbox/README.md
@@ -182,7 +182,7 @@ If you dont want to use themes at an application level then import CSS to make t
 #### Light mode
 ```
 import { FrameViewer } from  '@terminusdb/terminusdb-documents-ui'
-import "terminusdb__light.css"
+import "@terminusdb/terminusdb-documents-ui/dist/css/terminusdb__light.css"
 return <FrameViewer
 	frame={frame} 								// frames
 	mode={"View"} 							    // mode in which to display the form
@@ -194,7 +194,7 @@ return <FrameViewer
 #### Dark mode
 ```
 import { FrameViewer } from  '@terminusdb/terminusdb-documents-ui'
-import  "terminusdb__darkly.css"
+import  "@terminusdb/terminusdb-documents-ui/dist/css/terminusdb__darkly.css"
 return <FrameViewer
 	frame={frame} 								// frames
 	mode={"View"} 							    // mode in which to display the form
diff --git a/packages/tdb-documents-ui/sandbox/src/SubmittedData.js b/packages/tdb-documents-ui/sandbox/src/SubmittedData.js
@@ -0,0 +1,19 @@
+import React from "react"
+import { FrameObj } from "./frameInit"
+import JSONInput from 'react-json-editor-ajrm'
+import locale    from 'react-json-editor-ajrm/locale/en'
+
+export const SubmittedData = () => {
+  const {
+		data
+	} = FrameObj()
+
+	return <JSONInput
+		id='submitted_data_field'
+		locale={ locale }
+		placeholder={data}
+		viewOnly={true}
+		height= {"550px"}
+		width= {"380px"}
+	/>
+}
diff --git a/packages/tdb-documents-ui/sandbox/src/View.js b/packages/tdb-documents-ui/sandbox/src/View.js
@@ -0,0 +1,51 @@
+import React from "react"
+import Card from "react-bootstrap/Card"
+import { FrameObj } from "./frameInit"
+import { FrameViewer } from '@terminusdb/terminusdb-documents-ui'
+import { getFormData, handleTraverse } from "./controller"
+import Button from "react-bootstrap/Button"
+import { Stack } from "react-bootstrap"
+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'
+
+export const View = () => { 
+
+  const {
+    frames,
+    type,
+    mode,
+    setData,
+    setShowCode 
+  } = FrameObj()
+
+  function handleSubmit(data) {
+    setData(data)
+  }
+
+  return <Card className="w-100">
+    <Card.Header className="w-100">
+      <Stack direction="horizontal">
+        <div> {`Document Type - `}</div>
+        <div className="text-warning fw-bolder">{type}</div>
+        <Button className="ms-auto btn btn-sm" onClick={(e) => setShowCode(Date.now())}>View Code</Button>
+      </Stack>
+    </Card.Header>
+    <Card.Body>
+      <FrameViewer frame={frames}
+        mode={mode}
+        formData={getFormData(mode, type, setData)}
+        onTraverse={handleTraverse}
+        onSelect={<Search/>}
+        theme="darkly"
+        //showThemeSelector={true}
+        onSubmit={handleSubmit}
+        type={type}
+      />
+    </Card.Body>
+  </Card>
+}
