adding custom UI for boolean field

Author: KittyJose

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)