Merge pull request #156 from terminusdb/bool

adding custom UI for boolean field

Author: Francesca-Bit

packages/tdb-documents-ui/diff/src/Output.js

@@ -142,6 +142,11 @@ export const Output = () => {
           }
         },
         "@type": "Class",
+        "m_like": "xsd:boolean",
+        "like": {
+          "@class": "xsd:boolean",
+          "@type": "Optional"
+        },
         "optMarkDown": {
           "@class": "xsd:string",
           "@type": "Optional"

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

@@ -3,6 +3,8 @@ export const oldData = {
 	"body": {
 		"@id": "body/6230f55d381076aa7f94b6b01a7a7ae1692ef40c44e233a52c1c280b5d339839",
 		"@type": "body",
+		"m_like": true,
+		"like": false,
 		"optMarkDown": "### opt",
 		"setMarkDown": [
 		  "### set 1",
@@ -17,6 +19,8 @@ export const changedData = {
 	"body": {
 		"@id": "body/6230f55d381076aa7f94b6b01a7a7ae1692ef40c44e233a52c1c280b5d339839",
 		"@type": "body",
+		"m_like": true,
+		"like": true,
 		"optMarkDown": "### opt changed",
 		"setMarkDown": [
 		  "### set 1 changed",

packages/tdb-documents-ui/src/dataTypeFrames/helpers.js

@@ -126,6 +126,7 @@ export function getFormat(frame, item) {
         */ 
         return widget.getTextareaUIWidget(CONST.XSD_STRING, mode, data) 
     }
+    if(frame[item] === CONST.XSD_BOOLEAN) return widget.getBooleanUI(mode, data) 
     /** Commenting out HTML support as of now */
     /*else if (frame[item] === CONST.XDD_HTML) {
         return { ["ui:field"]: widget.getEditHTMLUI }

packages/tdb-documents-ui/src/dataTypeFrames/widget.js

@@ -12,6 +12,36 @@ import * as util from "../utils"
 import MDEditor, { commands }  from '@uiw/react-md-editor';
 import mermaid from "mermaid";
 import uuid from 'react-uuid'
+import InputGroup from 'react-bootstrap/InputGroup';
+
+function booleanField(mode, props) {
+    const [checked, setChecked] = useState(mode !== CONST.CREATE ? props.formData : false)
+
+    function handleClick() {
+        setChecked(!checked)
+        props.onChange(!checked)
+    }
+    return <InputGroup className="mb-3 w-100">
+        {mode !== CONST.VIEW && <div className={`control-label`}>
+            {props.name}
+            {props.required && <span className="required">{"*"}</span>}
+        </div>}
+        <Stack direction={"horizontal"} gap={2}>
+            {checked && <input type="checkbox" id={props.name} name={props.name} checked onChange={handleClick}/>}
+            {!checked && <input type="checkbox" id={props.name} name={props.name} onChange={handleClick}/>}
+            <span>{props.name}</span>
+        </Stack>
+    </InputGroup>
+}
+
+export function getBooleanUI (mode, data) {
+    let uiLayout = {}
+    function displayBooleanField(props) {
+        return booleanField(mode, props)
+    }
+    uiLayout["ui:field"] = displayBooleanField
+    return uiLayout
+}
 
 // function to provide a ui widget to textarea for xsd:string types
 export function getTextareaUIWidget(placeholder, mode, data) {

packages/tdb-documents-ui/src/helpers/formDataHelper.js

@@ -7,6 +7,7 @@ export function getFormData(frame, item, mode, formData) {
     if(!frame.hasOwnProperty(item)) return null
 
     if(util.isDataType(frame[item])) {
+        if(frame[item] === CONST.XSD_BOOLEAN) return false
         return util.getDefaultValue(item, formData)
     }
 

packages/tdb-documents-ui/src/mandatoryFrames.js

@@ -75,6 +75,10 @@ export function makeMandatoryFrames (fullFrame, item, frame, uiFrame, mode, form
         let data=dataProvider.getFormData(frame, item, mode, formData)
         if(data) layout["default"]=data
     }
+    if(layout["type"] === CONST.BOOLEAN_TYPE) {
+        let data=dataProvider.getFormData(frame, item, mode, formData)
+        if(!data) layout["default"]=data
+    }
 
     /** gather ui layout of property to change look and feel */
     let uiLayout = generateUI(fullFrame, frame, item, uiFrame, mode, formData, onTraverse, onSelect, documentation, extractedFrames, docType)

packages/tdb-documents-ui/src/templates.js

@@ -47,7 +47,7 @@ const DisplayLabel = ({schema, id, label, formData}) => {
 
 	//console.log("props", id, props) 
 	// return empty div when no data available
-	if(!formData && !uiSchema.hasOwnProperty("ui:field")) {
+	//if(!formData && !uiSchema.hasOwnProperty("ui:field")) {
 		// check for ui field -  we use custom fields some times to represent null fields
 		if(schema.info === CONST.DATA_TYPE && schema.type === CONST.BOOLEAN_TYPE) {
 			// display a different widget for bool type 
@@ -61,12 +61,13 @@ const DisplayLabel = ({schema, id, label, formData}) => {
 				</label>
 				<div className="checkbox disabled">
 					<label>
-						<input type="checkbox" id="root_transparent" disabled="" checked=""/>
+						{formData && <input type="checkbox" id="root_transparent" disabled="" checked/>}
+						{!formData && <input type="checkbox" id="root_transparent" disabled=""/>}
 						<span>{schema.title}</span>
 					</label>
 				</div>
 			</div>
-		}
+		//}
 		return <div className="empty__field"/>
 	}