Skip to content

Commit be2fd95

Browse files
Francesca-BitFrancesca-Bit
authored
Merge pull request #118 from terminusdb/removeCommentButtonCR
Remove comment button cr
2 parents a229863 + 38835fd commit be2fd95

File tree

5 files changed

+72
-64
lines changed

5 files changed

+72
-64
lines changed

‎packages/tdb-dashboard/src/App.css‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1165,15 +1165,6 @@ pre.CodeMirror-line > span > span.cm-string {
11651165
border-color: #3450DC !important;
11661166
}
11671167

1168-
.model-builder-copy-button {
1169-
position: absolute;
1170-
z-index: 20;
1171-
text-align: right !important;
1172-
border: 1px solid blue;
1173-
right: 0;
1174-
margin-right: 60px !important;
1175-
}
1176-
11771168
/** to display status if not on latest version */
11781169
.tdb__status_latest__version {
11791170
color: #3450DC;
@@ -1202,3 +1193,4 @@ pre.CodeMirror-line > span > span.cm-string {
12021193
width: 100px;
12031194
height: 100px;
12041195
}
1196+

‎packages/tdb-dashboard/src/components/DocumentSummary.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ export const DocumentSummary = () => {
9090
<Nav.Item className="mb-4">
9191
<Nav.Link as={RouterNavLink}
9292
title={IconBarConfig.dataProductModal.title}
93-
className="btn btn-lg btn-info d-inline text-white"
93+
className="btn btn-lg btn-info p-2 d-inline text-white"
9494
to={getUrl(IconBarConfig.dataProductModal.path)}
9595

9696
// onClick={(e) => setRoute(IconBarConfig.dataProductModal.path)}

‎packages/tdb-dashboard/src/components/JSONModelBuilder.js‎

Lines changed: 64 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,24 @@ import 'codemirror/lib/codemirror.css'
55
import 'codemirror/theme/ayu-dark.css'
66
require('codemirror/mode/css/css')
77
require('codemirror/mode/javascript/javascript')
8+
import 'codemirror/theme/material-darker.css'
89
//import 'codemirror/addon/display/autorefresh.js'
910
import {PROGRESS_BAR_COMPONENT, TERMINUS_SUCCESS} from "./constants"
1011
import {Loading} from "./Loading"
1112
import {MODEL_BUILDER_EDITOR_OPTIONS} from "./constants"
12-
import {AiOutlineCloseCircle, AiOutlineEdit, AiOutlineSave} from "react-icons/ai"
13+
import { BiUndo } from "react-icons/bi"
1314
import {FaRegEdit} from 'react-icons/fa'
1415
import {Alerts} from "./Alerts"
1516
import {TERMINUS_DANGER,DOCUMENT_PREFIX} from "./constants"
1617
import {GRAPH_TAB} from "../pages/constants"
1718
import {GraphContextObj} from "@terminusdb-live/tdb-react-components"
1819
import {CopyButton} from "./utils"
20+
import Card from "react-bootstrap/Card"
1921
import {BsSave} from "react-icons/bs"
22+
import Stack from "react-bootstrap/Stack"
2023

21-
export const JSONModelBuilder = ({tab,saveGraph,accessControlEditMode}) => {
24+
export const JSONModelBuilder = ({tab,saveGraph,accessControlEditMode, setReportMessage}) => {
25+
2226
const {getSchemaGraph,mainGraphObj} = GraphContextObj();
2327
const {dataProduct} = WOQLClientObj()
2428
const [loading, setLoading] = useState(false)
@@ -28,6 +32,9 @@ export const JSONModelBuilder = ({tab,saveGraph,accessControlEditMode}) => {
2832

2933
const [jsonSchema, setJsonSchema]=useState(false)
3034

35+
const [editMode, setEditMode]=useState(false)
36+
const [value, setValue]=useState(false)
37+
3138
let branch = "main"
3239
let ref = ""
3340

@@ -49,8 +56,7 @@ export const JSONModelBuilder = ({tab,saveGraph,accessControlEditMode}) => {
4956
getJSONSchema()
5057
}, [tab,dataProduct,mainGraphObj])
5158

52-
const [editMode, setEditMode]=useState(false)
53-
const [value, setValue]=useState(false)
59+
5460

5561

5662
MODEL_BUILDER_EDITOR_OPTIONS.readOnly=!editMode
@@ -68,69 +74,77 @@ export const JSONModelBuilder = ({tab,saveGraph,accessControlEditMode}) => {
6874
//save change in the server
6975
await saveGraph(value, commitMsg)
7076
setLoading(false)
71-
setEditMode(false)
77+
//setEditMode(false)
7278

7379
}catch(err){
7480
let jsonError= JSON.parse(JSON.stringify(err))
7581
setLoading(false)
7682
if(jsonError.data && jsonError.data["api:message"]) {
7783
setReport(<Alerts message={jsonError.data["api:message"]} type={TERMINUS_DANGER}/>)
7884
}
79-
else setReport(<Alerts message={err.toString()} type={TERMINUS_DANGER}/>)
85+
else setReport(<Alerts message={err.toString()} type={TERMINUS_DANGER}/>)
8086
}
8187
}
8288
}
83-
const editStyle = editMode ? {className:"border rounded border-warning position-sticky"} : {}
84-
const editMessage = editMode ? "Save schema or you will loose your changes" : ""
8589

86-
return <React.Fragment>
90+
function handleUndo () {
91+
// sets report messagen from modelCallServerHook to false
92+
if(setReportMessage) setReportMessage(false)
93+
setEditMode(false);
94+
getJSONSchema();
95+
}
96+
97+
const editStyle = editMode ? {className:"border rounded border-warning position-sticky"} : {}
98+
const editMessage = editMode ? "Save schema or you will lose your changes" : ""
99+
100+
//console.log("editMode", editMode)
101+
return <>
102+
<label className="text-warning mt-4">{editMessage}</label>
103+
<Card className={`border border-secondary mt-4`} {...editStyle}>
87104
{loading && loading}
88-
89-
<div {...editStyle}>
90-
<div className="d-flex align-items-center justify-content-between ml-4">
91-
<label className="text-warning mt-4 pb-2">{editMessage}</label>
92-
{accessControlEditMode && !editMode &&
93-
<button type="button" className="btn-edit-json-model btn btn-sm btn-light text-dark border-0 col-md-1 mt-3" onClick={()=>{setEditMode(true)}}>
94-
<FaRegEdit/> Edit Schema
105+
<Card.Header>
106+
<Stack direction="horizontal" className="w-100 justify-content-end">
107+
{editMode && <div className="w-100">
108+
<div role="group" className="btn-group w-100">
109+
<div className="col-md-10 pr-0 pl-0">
110+
<input id="schema_save_description" placeholder={"Enter a description to tag update"} type="text" className="form-control" onBlur={handleCommitMessage}/>
111+
</div>
112+
<button type="button" id="schema_save_button" className="btn btn-sm bg-light text-dark" onClick={saveChange}>
113+
<BsSave className="small"/> {"Save"}
95114
</button>
96-
}
97-
{editMode &&
98-
<button type="button" className="btn btn-lg border-0 col-md-1 float-right" onClick={()=>{setEditMode(false)}}>
99-
<AiOutlineCloseCircle className="float-right mr-2"/>
115+
<button type="button"
116+
title="Undo changes"
117+
className="btn btn-sm bg-danger text-white mr-2" onClick={()=>{ handleUndo() }}>
118+
<BiUndo className="h5"/> {"Undo"}
100119
</button>
101-
}
102-
</div>
103-
104-
{editMode &&
105-
<div role="group" className="btn-group w-100">
106-
<div className="ml-4 flex-grow-1">
107-
<input id="schema_save_description" placeholder={"Enter a description to tag update"} type="text" className="form-control" onBlur={handleCommitMessage}/>
108120
</div>
109-
<button type="button" id="schema_save_button" className="col-md-1 btn btn-md bg-light text-dark mr-4" onClick={saveChange}>
110-
<BsSave className="small"/> <label className="mt-1">Save</label>
111-
</button>
112121
</div>
113-
}
114-
115-
<div className="h-100 m-4">
116-
{report && <span className="w-100 m-4">{report}</span>}
117-
122+
}
123+
{accessControlEditMode && !editMode &&
124+
<button type="button" className="btn-edit-json-model btn btn-md btn-light text-dark float-right mr-2"
125+
onClick={()=>{setEditMode(true)}}>
126+
<FaRegEdit className="mb-1"/> Edit Schema
127+
</button>
128+
}
118129
<CopyButton text={jsonSchema}
119-
label={"Copy schema"}
130+
label={""}
120131
title={`Copy JSON schema`}
121-
css={"btn btn-sm bg-light text-dark model-builder-copy-button"}/>
122-
<CodeMirror
123-
onBlur={(editor, data) => {
124-
const editorValue =editor.doc.getValue()
125-
onBlurHandler(editorValue)
126-
}}
127-
value={value}
128-
options={MODEL_BUILDER_EDITOR_OPTIONS}
129-
className="model-builder-code-mirror"
130-
/>
131-
{/*<div><pre>{schema}</pre></div>*/}
132-
</div>
132+
css={"btn btn-md bg-light text-dark float-right"}/>
133+
</Stack>
134+
</Card.Header>
135+
<div className="h-100">
136+
{report && <span className="w-100 m-4">{report}</span>}
137+
<CodeMirror
138+
onBlur={(editor, data) => {
139+
const editorValue =editor.doc.getValue()
140+
onBlurHandler(editorValue)
141+
}}
142+
value={value}
143+
options={MODEL_BUILDER_EDITOR_OPTIONS}
144+
className="model-builder-code-mirror"
145+
/>
146+
{/*<div><pre>{schema}</pre></div>*/}
133147
</div>
134-
</React.Fragment>
135-
148+
</Card>
149+
</>
136150
}

‎packages/tdb-dashboard/src/components/constants.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -439,14 +439,16 @@ export const EDITOR_READ = {
439439
}
440440

441441
export const MODEL_BUILDER_EDITOR_OPTIONS = {
442-
theme: "ayu-dark",
442+
//theme: "ayu-dark",
443+
theme: "material-darker",
443444
height: "auto",
444445
viewportMargin: Infinity,
445-
mode: {
446+
mode: "application/ld+json",
447+
/*mode: {
446448
name: "javascript",
447449
json: true,
448450
statementIndent: 2
449-
},
451+
},*/
450452
lineNumbers: true,
451453
lineWrapping: true,
452454
indentWithTabs: false,

‎packages/tdb-dashboard/src/pages/ModelBuilder.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export const ModelBuilder = (props) =>{
6363
{callServerLoading && <Loading message={`Fetching schema of ${dataProduct}...`}/>}
6464

6565
{!callServerLoading && dataProduct &&
66-
<JSONModelBuilder accessControlEditMode={isEditMode} tab={tab} saveGraph={saveData} />
66+
<JSONModelBuilder accessControlEditMode={isEditMode} tab={tab} saveGraph={saveData} setReportMessage={setReport}/>
6767
}
6868
</Tab>
6969

0 commit comments

Comments
 (0)