Merge pull request #217 from terminusdb/oneOfFix

One of fix

Author: Francesca-Bit

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

@@ -96,6 +96,7 @@ export const AboutDataProduct = ({dataProductDetails, setShowDeleteModal, setSho
         <Card className="bg-transparent p-1 mb-5 tdb__align__container" border="muted">
             <Card.Body>
                 <h4 className="text-light mb-3 fw-bold">About</h4>
+                
                 {dataProductDetails.comment!== 'false' && <span className="text-light mb-4 ">
                     {dataProductDetails.comment}
                 </span>}
@@ -145,10 +146,10 @@ export const AboutDataProduct = ({dataProductDetails, setShowDeleteModal, setSho
                 </span>
                 {accessControlDashboard && accessControlDashboard.createDB() && <Fragment>
                     <div className="w-100 d-block align-items-center gx-0">
-                        <Button variant="secondary" 
+                        <Button variant="light" 
                             id="update_database"
                             title={`Update Data Product ${dataProduct} info`} 
-                            className=" btn btn-lg h2 fw-bold w-100 mt-4"
+                            className=" btn btn-md h4 w-100 mt-4 text-dark"
                             onClick={showUpdateHandler}>
                              Update Dataproduct details 
                         </Button>

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

@@ -58,13 +58,14 @@ export const ChangeDiffComponent = () => {
         currentCRObject
     } = WOQLClientObj() 
 
-    const {getDiffList,error:errorMsg,loading,result} = DocumentHook()
+    const {getDiffList,error:errorMsg,loading,result} = DocumentHook() 
 
     const [key, setKey] = useState(DIFFS)
+    const [start, setStart] = useState(0)
 
     useEffect(() => {
-        getDiffList(changeid)
-    }, [])
+        getDiffList(changeid, start)
+    }, [start])
 
 
     if(!client) return <div/>
@@ -98,7 +99,7 @@ export const ChangeDiffComponent = () => {
                 <Card.Body>                 
                     {currentCRObject.status === SUBMITTED && 
                     <ReviewComponent/> }
-                    <DiffView diffs={result} CRObject={currentCRObject}/> 
+                    <DiffView diffs={result} CRObject={currentCRObject} start={start} setStart={setStart}/> 
                 </Card.Body> 
             </Card>
         </Tab>

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

@@ -17,6 +17,7 @@ import {useTDBDocuments} from "@terminusdb/terminusdb-documents-ui"
 import {WOQLClientObj} from '../init-woql-client'
 
 import { PaginationControl } from 'react-bootstrap-pagination-control';
+import { MdAlternateEmail } from "react-icons/md"
 /**
  * 
  * @param {*} diff diff list 
@@ -179,14 +180,15 @@ function DiffViewDocument ({documentID,diffObj, CRObject,propertyModifiedCount,f
 </Accordion>
 }
 
+
 /**
  * 
  * @param {*} diffs diff list 
  * @param {*} trackingBranchDocumentList document list of tracking branch
  * @param {*} originBranchDocumentList document list of origin branch
  * @returns 
  */
-export const DiffView = ({diffs, CRObject}) => { 
+export const DiffView = ({diffs, CRObject, start, setStart }) => {  
     const {woqlClient} = WOQLClientObj()
 
     // I need to copy the woqlClient and set the original_branch 
@@ -195,56 +197,41 @@ export const DiffView = ({diffs, CRObject}) => {
     woqlClientCopy.checkout(CRObject.original_branch)
 
     const {frames,getDocumentFrames} = useTDBDocuments(woqlClientCopy)
-    // pagination constants
-    const [activePage, setActivePage]=useState(1)
-    const [current, setCurrent]=useState(0)
-
-    const [page, setPage] = useState(1)
-
-    let elements=[], paginationItems=[]
 
-    let divide = Math.ceil(diffs.length/DIFFS_PER_PAGE_LIMIT)
+    let elements=[]
 
+ 
     useEffect(() => {
         getDocumentFrames()
 	},[])
+
     // function to handle on click of page
-    function handlePagination(number) {
-        let position=DIFFS_PER_PAGE_LIMIT * (number-1)
-        
-        setCurrent(position)
-        setActivePage(number) 
+    function handlePagination(action) {
+        if(action === "next") {
+            setStart(start+DIFFS_PER_PAGE_LIMIT+1)
+        }
+        else {
+            // previous
+            if(start) setStart(start-DIFFS_PER_PAGE_LIMIT-1)
+        }
 
     }
 
-    // populate pagination Item
-    for (let number = 1; number <= divide; number++) {
-        paginationItems.push(
-            <Pagination.Item key={number} active={number === activePage} onClick={(e) => handlePagination(number)}>
-                {number}
-            </Pagination.Item>
-        )
-    }
-    
     if(!frames) return <Loading message={`Loading Frames ...`}/>
     if(!diffs) return <Loading message={`Loading Diffs ...`}/>
 
-    
-    // looping through diff lists
-    for(let start=current; start<(current + DIFFS_PER_PAGE_LIMIT); start++) {
-       
-        if(start >= diffs.length) continue
-      
-        const propertyModifiedCount = getPropertyModifiedCount(diffs[start])
-        const diffObj = diffs[start]
+
+    diffs.map((diffItems, index) => {
+        const propertyModifiedCount = getPropertyModifiedCount(diffItems)
+        const diffObj = diffItems
         const action = diffObj["@op"] || "Change"
         const actionKey = `@${action.toLowerCase()}`
         const eventKey= diffObj[actionKey] && diffObj[actionKey]["@id"] ? diffObj[actionKey]["@id"] : diffObj["@id"]
         const docType = diffObj[actionKey] && diffObj[actionKey]["@type"] ? diffObj[actionKey]["@type"] : diffObj["@type"]
 
         // this are the diff panel for document
         elements.push(
-            <React.Fragment key={`item__${start}`}>
+            <React.Fragment key={`item__${index}`}>
                <DiffViewDocument frames={frames} key={actionKey}
                     action={action}
                     docType={docType}
@@ -254,25 +241,18 @@ export const DiffView = ({diffs, CRObject}) => {
                     CRObject={CRObject}/>
             </React.Fragment>
         )
-    }
+    })
+       
 
     return <React.Fragment>
         {elements}
         <Row className="w-100">
             <Col/> 
             <Col>
-                {/*<Pagination className="justify-content-center ">{paginationItems}</Pagination>*/}
-                <PaginationControl
-                    page={page}
-                    between={3}
-                    total={diffs.length}
-                    limit={5}
-                    changePage={(page) => {
-                        setPage(page)
-                        handlePagination(page)
-                    }}
-                    ellipsis={1}
-                />
+                <Pagination className="justify-content-center ">
+                    <Pagination.Prev key={"previous"} onClick={(e) => handlePagination("previous")}/>
+                    <Pagination.Next key={"next"} onClick={(e) => handlePagination("next")}/>
+                </Pagination>
             </Col>
             <Col/>
         </Row>

packages/tdb-dashboard/src/hooks/DocumentHook.js

@@ -1,5 +1,6 @@
 import React, {useState,useEffect} from "react";
 import { WOQLClientObj } from "../init-woql-client";
+import { DIFFS_PER_PAGE_LIMIT } from "../components/constants"
 
 export function DocumentHook(){
     const {woqlClient,currentChangeRequest} = WOQLClientObj()
@@ -50,9 +51,9 @@ export function DocumentHook(){
        }finally{setLoading(false)}
     }
 
-    async function getDiffList(changeRequestID,start=0,count=5) {
+    async function getDiffList(changeRequestID, start=0, count=DIFFS_PER_PAGE_LIMIT) {
         try{
-            const client = woqlClient.copy()
+            const client = woqlClient.copy() 
             client.connectionConfig.api_extension = 'api/'
             const baseUrl = client.connectionConfig.dbBase("changes")
             const result = await client.sendCustomRequest("GET", `${baseUrl}/${changeRequestID}/diff?count=${count}&start=${start}`)

packages/tdb-dashboard/src/pages/ChangeRequestsPage.js

@@ -196,9 +196,9 @@ export const ChangeRequestsPage = () => {
 					<div className="ms-2 me-auto">
 						<div className="fw-bold text-success">
 							{name}
-							<span class="text-dark ml-1 badge badge-info mr-1">{item.tracking_branch}</span>
+							<span class="text-dark ml-1 badge bg-light mr-1">{item.tracking_branch}</span>
 						 		from branch 
-							<span class="text-dark ml-1 badge badge-success">{item.original_branch}</span>
+							<span class="text-dark ml-1 badge bg-success">{item.original_branch}</span>
 
 						</div>					
 						<div className="text-gray font-italic">

packages/tdb-documents-ui-template/src/components/JsonFrameViewer.js

@@ -65,7 +65,7 @@ export const JsonFrameViewer = ({type, jsonData, mode, setExtracted}) => {
     // onBlur 
     return <React.Fragment>
         <CodeMirror 
-            value={JSON.stringify(data, null, 2)}
+            value={JSON.stringify(!data ? {} : data, null, 2)}
             options={cmOptions}
             className={"document__interface__main"}
             onBlur={(editor, data, value) => {

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

@@ -1,4 +1,4 @@
-import { EDIT, OBJECT_TYPE } from "./constants"
+import { EDIT, ONEOFVALUES } from "./constants"
 
 // function to remove all empty json object 
 // this is to remove all optional subdocument data other wise database will 
@@ -21,6 +21,17 @@ function removeEmptyObject(data) {
   }, {});
 }
 
+function removeOneOfPropertyFromDocumentLevel(data) {
+  if(!data.hasOwnProperty(ONEOFVALUES)) return data
+  let newData = data 
+  let oneOfData = data[ONEOFVALUES] 
+  delete newData[ONEOFVALUES] 
+  for(let choice in oneOfData) {
+    newData[choice] = oneOfData[choice]
+  }
+  return newData
+}
+
 
 
 /**
@@ -34,7 +45,8 @@ function removeEmptyObject(data) {
 */
 export const handleSubmit = (data, onSubmit, setData, type, mode) => { 
   if(onSubmit) { 
-    let formData=removeEmptyObject(data.formData)
+    let alteredFormData=removeEmptyObject(data.formData)
+    let formData=removeOneOfPropertyFromDocumentLevel(alteredFormData)
     console.log("Before submit: ", formData)
     setData(formData)
     let extracted = formData

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

@@ -19,6 +19,7 @@ import { extractPropertyDocumentation } from "./widgetHelper"
 import { TDBRDFLanguage } from "../widgets/rdfLanguageWidget"
 import { TDBSysUnit } from "../widgets/sysUnitWidget"
 import { TDBChoiceDocuments } from "../widgets/choiceDocumentsWidget"
+import { displayDocumentFieldArrayHelpers } from "./documentFieldArrayHelpers"
 import { display } from "./display"
 import { displayGeoJSONViewUI } from "./widgetHelper"
 
@@ -247,14 +248,46 @@ export function displayChoiceSubDocument (props, args, property, id) {
     props={props}/>
 } 
 
+function getOneOfFormData (props, args) {
+  if(props.formData) return props.formData
+  else if(!props.formData && args.formData) {
+    // check args.formData if one of available at document level
+    let choices = args.documentFrame[CONST.ONEOFVALUES], populatedFormData = {}
+    choices.map(choice => {
+      for(let val in choice){
+        if(args.formData.hasOwnProperty(val)) {
+          // filled form data available
+          populatedFormData[val] = args.formData[val]
+        }
+      }
+    })
+    return populatedFormData
+  }
+}
+
 // ONE OF 
 export function displayOneOfProperty(props, args, property, id) {
-  const [oneOfDocumentData, setOneOfDocumentData] = useState(props.formData ? props.formData : [])
-
-  useEffect(() => {
-    // formdata on change
+  //const [oneOfDocumentData, setOneOfDocumentData] = useState(props.formData ? props.formData : {})
+  const [oneOfDocumentData, setOneOfDocumentData] = useState(getOneOfFormData(props, args))
+ 
+ 
+  /*useEffect(() => {
+    
     if(props.formData) setOneOfDocumentData(props.formData)
-  }, [props.formData])
+    else if(!props.formData && args.formData) {
+      // check args.formData if one of available at document level
+      let choices = args.documentFrame[CONST.ONEOFVALUES], populatedFormData = {}
+      choices.map(choice => {
+        for(let val in choice){
+          if(args.formData.hasOwnProperty(val)) {
+            // filled form data available
+            populatedFormData[val] = args.formData[val]
+          }
+        }
+      })
+      setOneOfDocumentData(populatedFormData)
+    }
+  }, [props.formData])*/
 
   return  <TDBOneOfDocuments args={args}
     property={property}
@@ -488,4 +521,34 @@ export function displayBBoxDocument (props, args, property, id) {
 
   return <TDBBBoxDocuments config={config}/>
 }
+ 
+
+// ARRAY  
+export function displayArrayWidgets (props, args, extracted, property, expand, id, hideFieldLabel, linked_to) {
+  
+  function handleArrayOnChange(data, selectedField) {
+    props.onChange(data, selectedField)
+  }
+
+  let fieldID = `root_${property}`
+  let docConfig = {
+      properties: args.reference[linked_to],
+      propertyName: property,
+      id: fieldID,
+      key: fieldID,
+      //formData: {},
+      formData: !props.formData ? {} : { [property]: props.formData },
+      required: true,
+      mode: args.mode,
+      args: args,
+      hideFieldLabel: hideFieldLabel,
+      //fieldUIFrame: fieldUIFrame,
+      onChange: (data, selectedField) => handleArrayOnChange(data, selectedField),
+      //defaultClassName: defaultClassName,
+      ///propertyDocumentation: propertyDocumentation
+  }
+  let argsHolder = {...args}
+  argsHolder.documentFrame={ [property] : linked_to }
+  return displayDocumentFieldArrayHelpers(fieldID, property, null, argsHolder, docConfig)
+}
 

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

@@ -18,7 +18,7 @@ function addUiFrameForEachField(docConfig, property) {
 function extractDocumentFrame(currentDocumentClass, fullFrame, property) {
   let documentFrame = fullFrame[currentDocumentClass]
 
-  if(util.isArrayTypeFromFrames(documentFrame, property)) {
+  if(util.isArrayTypeFromFrames(documentFrame, property)) { 
     // ARRAY TYPE
     return { [CONST.TYPE]: documentFrame[property][CONST.TYPE] , propertyFrame: documentFrame[property][CONST.CLASS] }
   }
@@ -56,9 +56,10 @@ function constructProps(fieldID, field, expanded, docConfig) {
 
   let data = null, selectedForOneOf = null
   if(field === CONST.ONEOFVALUES) {
-    let extractedData = getPropertyName(docConfig)
+    /*let extractedData = getPropertyName(docConfig)
     data = extractedData.data
-    selectedForOneOf=extractedData[CONST.ONEOF_SELECTED]
+    selectedForOneOf=extractedData[CONST.ONEOF_SELECTED] */
+    data = docConfig.formData
   }
   else data = docConfig.formData[field]
 
@@ -84,9 +85,9 @@ function constructProps(fieldID, field, expanded, docConfig) {
     hideFieldLabel: false,
     mode: docConfig.mode
   }
-  if(field === CONST.ONEOFVALUES) {
+  /*if(field === CONST.ONEOFVALUES) {
     props[CONST.ONEOF_SELECTED] = selectedForOneOf
-  }
+  }*/
   return props
 }  
 

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

@@ -16,6 +16,14 @@ export const getDisplay = (props, args, property) => {
     //(props, args, property, dataType, id, onChange) 
     return display.displayDataTypesWidget(props, args, property, field, props.id, props.onChange) // review
   } 
+  else if(util.isArrayTypeFromFrames(documentFrame, property) && property !== CONST.COORDINATES_FIELD) {
+    // ARRAY TYPES 
+    if(props.mode === CONST.VIEW && props.formData === "") return <div/>
+    let id = props.id, linked_to=props.linked_to
+    let extracted=args.reference[linked_to]
+    let expand=props.isArray ? true : props.expand
+    return display.displayArrayWidgets(props, args, extracted, property, expand, id, true, linked_to)
+  }
   else if(util.isSubDocumentType(field)){ 
     // SUBDOCUMENT TYPE
     if(props.mode === CONST.VIEW && props.formData === "") return <div/>