fixing lexical key hidden bug in edit mode

Author: KittyJose

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

@@ -2,7 +2,7 @@ import React, {useEffect, useState} from "react"
 import {Modal, Button, Form} from "react-bootstrap" 
 import {deleteDataProductForm} from "./constants"
 import {AiOutlineDelete} from "react-icons/ai"
-import {Loading} from "./Loading"
+import {Loading} from "../components/Loading"
 import {PROGRESS_BAR_COMPONENT} from "./constants"
 import {WOQLClientObj} from "../init-woql-client"
 import {TERMINUS_DANGER} from "./constants"
@@ -65,12 +65,12 @@ export const DeleteDatabaseModal = ({showModal,setShowModal, dataProductDetails}
     }, [showModal])
 
     return <Modal size="lg" className="modal-dialog-right" show={showModal} onHide={handleClose}>
-        {loading && <Loading message={`Deleting Data Product ${dataProductDetails.label} ...`} type={PROGRESS_BAR_COMPONENT}/>}
-        <Modal.Header>
+        {loading && <div style={{height: "300px"}}><Loading message={`Deleting Data Product ${dataProductDetails.label} ...`}/></div>}
+        {!loading && <><Modal.Header>
             <Modal.Title className="h6">{`Are you sure to delete Data Product - ${dataProductDetails.label} ?`} </Modal.Title>
             <Button variant="close" aria-label="Close" onClick={handleClose} />
         </Modal.Header>
-        <Modal.Body className="p-5">
+         <Modal.Body className="p-5">
             {reportAlert && <Alerts message={reportAlert} type={TERMINUS_DANGER}/>}
             <div className="d-flex align-items-center col-md-12 mb-3">
                 <h6 className="fw-normal text-muted mb-2">Data Product ID </h6>
@@ -102,7 +102,7 @@ export const DeleteDatabaseModal = ({showModal,setShowModal, dataProductDetails}
                 onClick={handleClick}>
                 <AiOutlineDelete className="me-2" /> Delete 
             </Button>
-        </Modal.Footer>
+        </Modal.Footer> </> }
     </Modal>
 }
 

packages/tdb-documents-ui/src/arrayTypeFrames/arrayTypeFrames copy.js

@@ -12,7 +12,8 @@ export const POINT_TYPE_UI_LAYOUT=[
         classNames: "tdb__input mb-3"
     }
 ]
-export const POINT_TYPE_LAYOUT = [ {type: "number"}, {type: "number"} ]
+//export const POINT_TYPE_LAYOUT = [ {type: "number"}, {type: "number"} ]
+export const POINT_TYPE_LAYOUT = [ {type: CONST.STRING_TYPE}, {type: CONST.STRING_TYPE} ]
 export const LINE_TYPE_UI_LAYOUT={
     "items" : POINT_TYPE_UI_LAYOUT,
     "classNames": "d-block tdb__input",

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

@@ -110,12 +110,13 @@ export function getChoiceSubDocumentsArrayItems (frame, item, formData, mode) {
             //title: choice,
             anyOf: frame.properties[item].anyOf
         }
-    
     }
 
     if(!formData) return arrayItems
     if(!Array.isArray(formData)) return arrayItems
 
+    arrayItems=[]
+
     formData.map(data => {
         // get the choice which have been added
         let choice = data["@type"]

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

@@ -10,8 +10,6 @@
     max-height: 20px;
 }
 
-
-
 .tdb__input,
 .tdb__input > input, 
 .tdb__input > select, 
@@ -32,6 +30,20 @@
     color: #adb5bd;
 }
 
+/** lexical key */
+/* disable key filed if filled */
+.tdb__key__field textarea,
+.tdb__key__field input {
+    pointer-events: none !important;
+}
+
+
+/* enable key filed if empty */
+.tdb__key__field textarea:empty,
+.tdb__key__field input:empty  {
+    pointer-events: auto !important;
+}
+
 /* 
 ul's list-style is set to none in tdb-react-components 
 set list-style to inital inorder to display bullets in Markdown preview 

packages/tdb-documents-ui/src/css/terminusdb__styles.css

@@ -16,7 +16,8 @@ export function getUILayout(frame, item, uiFrame, mode, formData, documentation)
     let uiLayout=helper.getUIBasedOnType(frame, item, uiFrame, mode, data, documentation)
     // if property is lexical key then make read only
     if(mode !== CONST.CREATE && frame && frame.hasOwnProperty("@key") && util.checkIfKey(item, frame["@key"])) {
-        uiLayout["ui:readonly"] = true
+        //uiLayout["ui:readonly"] = true
+        uiLayout["classNames"] = uiLayout["classNames"] + " tdb__key__field "
     } 
     //let addedCustomUI=util.addCustomUI(item, uiFrame, uiLayout)
     return uiLayout

packages/tdb-documents-ui/src/dataTypeFrames/dataType.utils.js

@@ -12,12 +12,20 @@ const matchType ={
     [CONST.XDD_HTML]: CONST.STRING_TYPE,
 
     [CONST.SYS_JSON_TYPE] : CONST.JSON_TYPE,
-    [CONST.XSD_DOUBLE] : CONST.NUMBER_TYPE,
+    /*[CONST.XSD_DOUBLE] : CONST.NUMBER_TYPE,
     [CONST.XSD_NONNEGATIVEINTEGER] : CONST.NUMBER_TYPE,
     [CONST.XSD_FLOAT] : CONST.NUMBER_TYPE,
     [CONST.XSD_POSITIVE_INTEGER] : CONST.NUMBER_TYPE,
     [CONST.XSD_DECIMAL] : CONST.NUMBER_TYPE,
-    [CONST.XSD_INTEGER] : CONST.NUMBER_TYPE,
+    [CONST.XSD_INTEGER] : CONST.NUMBER_TYPE,*/
+    /** all decimals and integers are treated as strings under the hood */
+    [CONST.XSD_DECIMAL] : CONST.STRING_TYPE,
+    [CONST.XSD_INTEGER] : CONST.STRING_TYPE,
+    [CONST.XSD_DOUBLE] : CONST.STRING_TYPE,
+    [CONST.XSD_NONNEGATIVEINTEGER] : CONST.STRING_TYPE,
+    [CONST.XSD_FLOAT] : CONST.STRING_TYPE,
+    [CONST.XSD_POSITIVE_INTEGER] : CONST.STRING_TYPE,
+
     [CONST.XSD_BOOLEAN] : CONST.BOOLEAN_TYPE,
 
     [CONST.XSD_DATE_TIME] : CONST.DATE_TYPE,

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

@@ -26,7 +26,13 @@ export function getUILayout (fullFrame, frame, item, uiFrame, mode, formData, do
         "ui:placeholder": `Select ${label} ...`,
         //"ui:description": getUI(),
         classNames: "tdb__input mb-3 mt-3"
-    }
+    } 
+
+    // if property is lexical key then make read only
+    if(mode !== CONST.CREATE && frame && frame.hasOwnProperty("@key") && util.checkIfKey(item, frame["@key"])) {
+        //uiLayout["ui:readonly"] = true
+        uiLayout["classNames"] = uiLayout["classNames"] + " tdb__key__field "
+    } 
 
     return uiLayout
 }