Skip to content

Commit e71f941

Browse files
KittyJoseKittyJose
committed
dashbaord demo
1 parent e1d088d commit e71f941

File tree

19 files changed

+840
-11
lines changed

19 files changed

+840
-11
lines changed

‎packages/tdb-documents-ui/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"playground": "webpack serve --mode development --open --progress --port 3033 --host localhost --config playground/webpack.config.js",
1313
"testDb": "webpack serve --mode development --open --progress --port 3032 --host localhost --config test/webpack.config.js",
1414
"mockTest": "webpack serve --mode development --open --progress --port 3035 --host localhost --config mockTest/webpack.config.js",
15+
"sandbox": "webpack serve --mode development --open --progress --port 3036 --host localhost --config sandbox/webpack.config.js",
1516
"diff": "webpack serve --mode development --open --progress --port 3034 --host localhost --config diff/webpack.config.js",
1617
"lint": "eslint src",
1718
"autofix": "eslint src --fix",

‎packages/tdb-documents-ui/sandbox/build/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<html>
2+
<head>
3+
<meta name="viewport" content="width=device-width, initial-scale=1">
4+
<link rel="stylesheet" href="/sandbox.css">
5+
<title>TerminusDB Document UI demo</title>
6+
</head>
7+
<body>
8+
<div id="root"/>
9+
<script src="bundle.js"></script>
10+
</body>
11+
</html>

‎packages/tdb-documents-ui/sandbox/build/sandbox.css‎

Whitespace-only changes.

‎packages/tdb-documents-ui/sandbox/index.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from "react"
2+
import ReactDOM from "react-dom"
3+
import App from "./src/Layout"
4+
import { FrameProvider } from './src/frameInit'
5+
6+
function InitComponent () {
7+
8+
return <FrameProvider>
9+
<App />
10+
</FrameProvider>
11+
}
12+
13+
ReactDOM.render(
14+
<InitComponent/>,
15+
document.getElementById("root")
16+
)

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from "react"
2+
import { FrameObj } from "./frameInit"
3+
import Button from 'react-bootstrap/Button';
4+
import ButtonGroup from 'react-bootstrap/ButtonGroup';
5+
6+
export const DocumentTypes = () => {
7+
const {
8+
frames,
9+
setType
10+
} = FrameObj()
11+
12+
if(!frames) return <div/>
13+
let docTypes = []
14+
15+
for(let docs in frames) {
16+
// display on classes
17+
if(frames[docs].hasOwnProperty("@type") &&
18+
frames[docs]["@type"] === "Class" &&
19+
!frames[docs].hasOwnProperty("@subdocument")) {
20+
docTypes.push(<Button variant="secondary" key={docs} onClick={(e) => setType(docs)}>{docs}</Button>)
21+
}
22+
}
23+
24+
return <ButtonGroup aria-label="Basic example" vertical>
25+
{docTypes}
26+
</ButtonGroup>
27+
28+
}

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react'
2+
import { NavBar } from './Nav';
3+
import { Container, Row, Stack } from 'react-bootstrap';
4+
import { View } from "./View"
5+
import { ModeBar } from "./ModeBar"
6+
import { DocumentTypes } from "./DocumentTypes"
7+
8+
9+
const App= (props) =>{
10+
11+
return <Container>
12+
<NavBar/>
13+
<ModeBar/>
14+
<Stack direction='horizontal' gap={3}>
15+
<DocumentTypes/>
16+
<View/>
17+
</Stack>
18+
</Container>
19+
20+
}
21+
22+
export default App

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React, {useState} from "react"
2+
import Stack from 'react-bootstrap/Stack'
3+
import { CREATE, EDIT, VIEW, MODE_HELP_TEXT } from "./constants"
4+
import { FrameObj } from "./frameInit"
5+
6+
const RadioButtons = ({ mode, handleChange, checked }) => {
7+
return <div>
8+
<label>
9+
<input
10+
type="radio"
11+
name="letter"
12+
data-cy={`${mode}_mode`}
13+
value={mode}
14+
checked={checked === mode}
15+
onChange={handleChange}
16+
/>{" "}
17+
{mode}
18+
</label>
19+
</div>
20+
}
21+
22+
export const ModeBar = () => {
23+
24+
const [checked, setChecked]=useState(CREATE)
25+
const {
26+
mode,
27+
setMode,
28+
} = FrameObj()
29+
30+
function handleChange (event) {
31+
setChecked(event.target.value)
32+
setMode(event.target.value)
33+
}
34+
35+
return <div className="mb-3">
36+
<Stack direction="horizontal" gap={3} className="p-3">
37+
<RadioButtons mode={CREATE} handleChange={handleChange} checked={checked} />
38+
<RadioButtons mode={EDIT} handleChange={handleChange} checked={checked}/>
39+
<RadioButtons mode={VIEW} handleChange={handleChange} checked={checked}/>
40+
</Stack>
41+
<Stack direction="horizontal" gap={1} >
42+
<div className="text-muted small">{`${MODE_HELP_TEXT}. `} </div>
43+
<div className="text-warning small">{`${mode}`}</div>
44+
<div className="text-muted small">{` mode selected.`} </div>
45+
</Stack>
46+
</div>
47+
}

‎packages/tdb-documents-ui/sandbox/src/Nav.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react'
2+
import Nav from 'react-bootstrap/Nav';
3+
import { LEGO, STARWARS } from "./constants"
4+
5+
export const NavBar = ({}) => {
6+
return <Nav
7+
activeKey={LEGO}
8+
className="mt-5 mb-3"
9+
onSelect={(selectedKey) => alert(`selected ${selectedKey}`)}
10+
>
11+
<Nav.Item>
12+
<Nav.Link eventKey={LEGO}>{LEGO}</Nav.Link>
13+
</Nav.Item>
14+
<Nav.Item>
15+
<Nav.Link eventKey={STARWARS}>{STARWARS}</Nav.Link>
16+
</Nav.Item>
17+
</Nav>
18+
}

‎packages/tdb-documents-ui/sandbox/src/Output.js‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import React, { useState, useEffect } from "react"
2+
import {FrameViewer, DiffViewer} from '@terminusdb/terminusdb-documents-ui'
3+
import {InitObj} from "./init"
4+
import {VIEW, CARD_OUTPUT_TITLE, CREATE} from "./constants"
5+
import Card from 'react-bootstrap/Card'
6+
import {SELECT_OPTIONS, ORIGINAL_LIST, CHANGED_LIST, ORIGINAL_TEST_LIST, CHANGED_TEST_LIST, ORIGINAL_DIFF_MANDATORY_DOCUMENT, CHANGED_DIFF_MANDATORY_DOCUMENT} from "./data.constants"
7+
import Stack from 'react-bootstrap/Stack'
8+
import {Button, Col} from "react-bootstrap"
9+
import {FiCode} from "react-icons/fi"
10+
import {DIFF_VIEWER, MULTI_LANGUAGE} from "./menu.constants"
11+
import Form from 'react-bootstrap/Form'
12+
13+
const FormView = () => {
14+
const {
15+
type,
16+
uiFrames,
17+
data,
18+
mode,
19+
setData,
20+
frames,
21+
language
22+
} = InitObj()
23+
24+
if(!frames) return "LOADING ..."
25+
if(!type) return "LOADING ..."
26+
if(!mode) return "LOADING ..."
27+
if(mode !== CREATE && Object.keys(data).length === 0) return "LOADING ..."
28+
29+
function handleSubmit (data) {
30+
setData(data)
31+
}
32+
33+
function handleSelect(inp) {
34+
let options=SELECT_OPTIONS, matched=[]
35+
options.map(item => {
36+
if(item.label.toUpperCase().startsWith(inp.toUpperCase())) {
37+
//if(item.label.toUpperCase() === inp.toUpperCase()){
38+
matched.push(item)
39+
}
40+
})
41+
return matched
42+
}
43+
44+
return <FrameViewer
45+
frame={frames}
46+
uiFrame={uiFrames}
47+
type={type}
48+
formData={data}
49+
onSelect={handleSelect}
50+
mode={mode}
51+
hideSubmit={mode===VIEW ? true : false}
52+
//onTraverse={handleTraverse}
53+
//submitButton={submitJSON}
54+
language={language}
55+
onSubmit={handleSubmit}
56+
/>
57+
}
58+
59+
export const Diff = () => {
60+
61+
const {
62+
frames,
63+
type,
64+
tdbClient,
65+
diffPatch,
66+
setDiffPatch
67+
} = InitObj()
68+
69+
if(!frames) return "LOADING ..."
70+
if(!type) return "LOADING ..."
71+
72+
useEffect(() => {
73+
async function getDiffs(tdbClient) {
74+
let result_patch = await tdbClient.getJSONDiff(ORIGINAL_TEST_LIST, CHANGED_TEST_LIST)
75+
setDiffPatch(result_patch)
76+
console.log("result_patch", result_patch)
77+
}
78+
if(tdbClient) {
79+
getDiffs(tdbClient)
80+
}
81+
}, [])
82+
83+
return <div className="w-100">
84+
{diffPatch && frames && <DiffViewer
85+
oldValue={ORIGINAL_TEST_LIST}
86+
newValue={CHANGED_TEST_LIST}
87+
frame={frames}
88+
type={"ComputerStudent"}
89+
diffPatch={diffPatch}/>}
90+
</div>
91+
}
92+
93+
const TestTextArea = () => {
94+
const {
95+
data
96+
} = InitObj()
97+
98+
return <textarea data-cy="data-reader"
99+
className="opacity-0"
100+
value={JSON.stringify(data, null, 2)}>
101+
</textarea>
102+
}
103+
104+
105+
export const Output = () => {
106+
const {
107+
menuItem,
108+
type,
109+
setShowMoreInfo,
110+
setShowCode,
111+
setLanguage
112+
} = InitObj()
113+
114+
function handleMoreInfo (e) {
115+
setShowCode(Date.now())
116+
setShowMoreInfo(true)
117+
}
118+
119+
function handleLanguageChange(event) {
120+
event.preventDefault()
121+
event.stopPropagation()
122+
setLanguage(event.target.value)
123+
}
124+
125+
let label=type
126+
if(!type) label=menuItem
127+
128+
if(menuItem === DIFF_VIEWER) {
129+
return <Diff/>
130+
}
131+
132+
return <React.Fragment>
133+
{menuItem === MULTI_LANGUAGE && <Form>
134+
<Form.Group as={Col} md="12" className="tdb__input mb-3">
135+
<Form.Control type="text" placeholder="Enter language code" onBlur={handleLanguageChange}/>
136+
</Form.Group>
137+
</Form>}
138+
<Card>
139+
<Card.Header className="bg-light text-dark">
140+
<Stack direction="horizontal" gap={3}>
141+
<div className="bg-light">{`${CARD_OUTPUT_TITLE} - ${label}`}</div>
142+
<div className=""></div>
143+
<div className="bg-light ms-auto">
144+
<Button variant="primary btn btn-sm" title="View Code" onClick={handleMoreInfo}>
145+
<FiCode/>
146+
</Button>
147+
</div>
148+
</Stack>
149+
</Card.Header>
150+
<Card.Body>
151+
<FormView/>
152+
<TestTextArea/>
153+
</Card.Body>
154+
</Card>
155+
</React.Fragment>
156+
}

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from "react"
2+
import Card from "react-bootstrap/Card"
3+
import { FrameObj } from "./frameInit"
4+
import { FrameViewer } from '@terminusdb/terminusdb-documents-ui'
5+
6+
export const View = () => {
7+
8+
const {
9+
frames,
10+
type,
11+
mode
12+
} = FrameObj()
13+
14+
return <Card className="w-100">
15+
<Card.Header>{`Document Type - ${type}`}</Card.Header>
16+
<Card.Body>
17+
<FrameViewer frame={frames}
18+
mode={mode}
19+
theme="darkly"
20+
type={type}
21+
/>
22+
</Card.Body>
23+
</Card>
24+
}

0 commit comments

Comments
 (0)