sandbox progress

Author: KittyJose

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

@@ -258,7 +258,7 @@ export const DiffView = ({diffs, CRObject}) => {
             <Col/>
             <Col>
                 <Pagination className="justify-content-center ">{paginationItems}</Pagination>
-            </Col>
+                </Col>
             <Col/>
         </Row>
     </React.Fragment>

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

@@ -1,9 +1,9 @@
-import React from "react"
+import React, { useState } from "react"
 import { FrameObj } from "./frameInit"
-import Button from 'react-bootstrap/Button';
-import ButtonGroup from 'react-bootstrap/ButtonGroup';
+import Nav from 'react-bootstrap/Nav';
 
 export const DocumentTypes = () => {
+  const [activeKey, setActiveKey] = useState("Theme")
   const {
 		frames,
     setType
@@ -12,17 +12,28 @@ export const DocumentTypes = () => {
   if(!frames) return <div/>
   let docTypes = []
 
+  function handleNavClick(selectedKey) {
+    setActiveKey(selectedKey)
+    setType(selectedKey)
+  }
+
   for(let docs in frames) {
     // display on classes 
     if(frames[docs].hasOwnProperty("@type") && 
       frames[docs]["@type"] === "Class" && 
       !frames[docs].hasOwnProperty("@subdocument")) {
-        docTypes.push(<Button variant="secondary" key={docs} onClick={(e) => setType(docs)}>{docs}</Button>)
+        docTypes.push(<Nav.Item>
+          <Nav.Link eventKey={docs}>{docs}</Nav.Link>
+        </Nav.Item>)
       }
   }
 
-  return <ButtonGroup aria-label="Basic example" vertical>
+  return <Nav
+    activeKey={activeKey}
+    className="mt-5 mb-3"
+    onSelect={(selectedKey) => handleNavClick(selectedKey)}
+  >
     {docTypes}
-  </ButtonGroup>
+  </Nav>
 
 }

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

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from "react"
+import Accordion from 'react-bootstrap/Accordion'
+import { SubmittedData } from "./SubmittedData"
+import { FrameEditor } from "./FrameEditor"
+
+
+export const Editor = () => {
+	const [activeKey, setActiveKey]=useState("Frames")
+
+	function handleSelect(key) {
+		setActiveKey(key)   
+	}
+
+	return <Accordion  onSelect={handleSelect}>
+		<Accordion.Item eventKey={"Frames"}>
+			<Accordion.Header>{"Frames"}</Accordion.Header>
+			<Accordion.Body>
+				<FrameEditor/>
+			</Accordion.Body>
+		</Accordion.Item>
+		<Accordion.Item eventKey={"Submitted Data"}>
+			<Accordion.Header>{"Submitted Data"}</Accordion.Header>
+			<Accordion.Body>
+				<SubmittedData/>
+			</Accordion.Body>
+		</Accordion.Item>
+	</Accordion>
+    
+}

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

@@ -0,0 +1,28 @@
+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 FrameEditor = () => {
+	const {
+		frames,
+		setFrames 
+	} = FrameObj()
+
+	if(!frames) return <Loading/>
+
+	function handleInput (data) {
+		setFrames(data.jsObject)
+	}
+	if(!frames) return <div/>
+	//JSON Editor dimensions 
+	return <JSONInput
+		id='json_type_field'
+		locale={ locale }
+		placeholder={frames}
+		height= {"550px"}
+		width= {"500px"}
+		onBlur={handleInput}
+	/>
+
+}

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

@@ -1,20 +1,20 @@
 import React from 'react'
-import { NavBar } from './Nav';
-import { Container, Row, Stack } from 'react-bootstrap';
+import { Container, Row, Col, Stack } from 'react-bootstrap';
 import { View } from "./View"
 import { ModeBar } from "./ModeBar"
 import { DocumentTypes } from "./DocumentTypes"
+import { Editor } from './Editors';
 
 
 const App= (props) =>{ 
 
 	return <Container>
-		<NavBar/>
+		<DocumentTypes/>
 		<ModeBar/>
-		<Stack direction='horizontal' gap={3}>
-			<DocumentTypes/>
-			<View/>
-		</Stack>
+		<Row>
+			<Col md={5}><Editor/></Col>
+			<Col md={7}><View/></Col>
+		</Row>
 	</Container>
 
 }

packages/tdb-documents-ui/sandbox/src/Nav.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= {"500px"}
+	/>
+}

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

@@ -2,21 +2,34 @@ 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"
 
 export const View = () => { 
 
   const {
     frames,
     type,
-    mode
+    mode,
+    setData 
   } = FrameObj()
 
+  function handleSubmit(data) {
+    setData(data)
+  }
+
   return <Card className="w-100">
-    <Card.Header>{`Document Type - ${type}`}</Card.Header>
+    <Card.Header className="d-flex">
+      <div> {`Document Type - `}</div>
+      <div className="text-warning fw-bolder">{type}</div>
+    </Card.Header>
     <Card.Body>
       <FrameViewer frame={frames}
         mode={mode}
+        formData={getFormData(mode, type)}
+        onTraverse={handleTraverse}
+        //onSelect={handleSelect}
         theme="darkly"
+        onSubmit={handleSubmit}
         type={type}
       />
     </Card.Body>

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

@@ -1,6 +1,5 @@
 // DATA PRODUCTS
 export const LEGO = "Lego"
-export const STARWARS = "StarWars"
 
 //modes 
 export const CREATE="Create"

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

@@ -0,0 +1,24 @@
+import { CREATE } from "./constants"
+import * as lego from "./lego.constants"
+
+
+export function getFormData(mode, type) {
+  if(mode === CREATE) return {}
+
+  if(type === "Color")  return lego.COLOR_DATA
+  else if(type === "Element") return lego.ELEMENT_DATA
+  else if(type === "Inventory") return lego.INVENTORY_DATA
+  else if(type === "LegoSet") return lego.LEGO_SET_DATA
+  else if(type === "Minifig") return lego.MINIFIG_DATA
+  else if(type === "Part") return lego.PART_DATA
+  else if(type === "PartRelation") return lego.PART_RELATION_DATA
+  else if(type === "Theme") return lego.THEME_DATA
+}
+
+/**
+ * 
+ * @param {*} clicked callback function which returns back the ID of element clicked
+ */
+export function handleTraverse (clicked) {
+  alert(`You have clicked on document ID ${clicked}`)
+}