Test01

package.json

@@ -2,9 +2,10 @@
   "name": "terminusdb-dashboard",
   "private": true,
   "workspaces": [
-    "./packages/tdb-react-components",
     "./packages/react-worker",
     "./packages/tdb-react-layout",
+    "./packages/tdb-react-table",
+    "./packages/tdb-react-components",
     "./packages/tdb-access-control-component",
     "./packages/tdb-documents-ui",
     "./packages/tdb-dashboard"

packages/tdb-access-control-component/demo/webpack.config.js

@@ -31,7 +31,6 @@ module.exports = {
     alias: {
       "@terminusdb/terminusdb-access-control-component": path.join(__dirname, '..', 'src/index.js'),
       "@terminusdb/terminusdb-client": path.resolve('../../../terminusdb-client/index.js'),
-      "@terminusdb/terminusdb-react-table": path.resolve('../../../terminusdb-react-table/src/index.js'),
       react: path.resolve('../../node_modules/react')
     },
     extensions: ['.js', '.jsx', '.json', '.css'],

packages/tdb-dashboard/package.json

@@ -52,6 +52,7 @@
     "dotenv": "^9.0.2",
     "dotenv-webpack": "^7.0.2",
     "file-loader": "^6.2.0",
+    "history": "^5.3.0",
     "moment": "^2.29.1",
     "papaparse": "^5.3.0",
     "postcss-loader": "^5.3.0",
@@ -98,7 +99,7 @@
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
     "less": "^4.1.3",
-    "less-loader": "^11.0.0",
+    "less-loader": "^11.1.0",
     "mini-css-extract-plugin": "^2.6.1",
     "style-loader": "^3.3.1",
     "webpack": "^5.74.0",

packages/tdb-dashboard/src/App.css

@@ -945,3 +945,10 @@ pre.CodeMirror-line  > span > span.cm-string {
   }
 
 
+.table td{
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 200px;
+}
+

packages/tdb-dashboard/src/App.js

@@ -1,4 +1,4 @@
-import React from "react"
+import React from "react" 
 import {Routes,Route,useNavigate} from "react-router-dom"
 import {Loading} from "./components/Loading"
 import {SERVER_LOADING_MESSAGE} from "./components/constants"
@@ -53,7 +53,7 @@ export function App (props){
 }
 
 function getRoutes(clientUser,isAdmin){
-    if(localSettings.connection_type==="LOCAL"){
+    if(localSettings.connection_type==="LOCAL"){ 
     return <React.Fragment>
         <Route index element={<Home/>} />
             { clientUser.user === "admin" && <Route path="administrator" element={<UserManagement/>}/>}

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

@@ -1,7 +1,8 @@
 import React, {useEffect, useState} from "react"
 import SplitPane from 'react-split-pane'
 import {handleWidthChange} from "../pages/utils"
-import {WOQLTable, WOQLGraph} from '@terminusdb-live/tdb-react-components'
+import { WOQLGraph} from '@terminusdb-live/tdb-react-components'
+//import {WOQLTable} from '@terminusdb/terminusdb-react-table'
 import {ControlledQueryHook} from '@terminusdb-live/tdb-react-components'
 import {ClassFromSchema} from "../queries/GeneralQueries"
 import {getPropertyMetaTabConfig, getClassesGraphConfig} from "./ViewConfig"

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

@@ -1,8 +1,7 @@
 import React, {useState, useEffect} from "react"
 import {getBranchCommits} from "../queries/BranchQueries"
 import {getCommitsTabConfig, getCommitViewTabConfig} from "./ViewConfig"
-import {WOQLTable} from '@terminusdb-live/tdb-react-components'
-import {ControlledQueryHook} from '@terminusdb-live/tdb-react-components'
+import {WOQLTable,ControlledQueryHook} from '@terminusdb/terminusdb-react-table'
 import {getRemovedTriplesQuery, getAddedTriplesQuery} from "../queries/BranchQueries"
 import {Row, Button, Toast} from "react-bootstrap"
 import {getUsing, printts, copyToClipboard} from "./utils"

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

@@ -10,7 +10,6 @@ import {BiPlus} from "react-icons/bi"
 import {SearchBox} from "./SearchBox"
 import {getCountOfDocumentClass} from "../queries/GeneralQueries"
 import { executeQueryHook } from "../hooks/executeQueryHook"
-import {CREATE_DOCUMENT, FORM_VIEW} from "./constants"
 import {handleCreate} from "./documents.utils"
 import {DocumentControlObj, getDocumentFrame} from '../hooks/DocumentControlContext'
 import {Loading} from "./Loading"

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

@@ -32,7 +32,6 @@ export const DocumentFrames = () => {
     }
     const {
         frames,
-        docs,
         woqlClient
     } = WOQLClientObj()
 
@@ -57,7 +56,7 @@ export const DocumentFrames = () => {
     }
 
     useEffect(() =>{
-        if(documentObject.frames) {
+        if(Object.keys(documentObject.frames).length > 0) {
             setLoading(false)
             //documentObject.loading = <Loading message={`Fetching frames ...`} type={PROGRESS_BAR_COMPONENT}/>
         }
@@ -188,10 +187,16 @@ export const DocumentFrames = () => {
                         {/*(currentView==FORM_VIEW) && documentObjectWithFrames.frames && <FrameViewer/> */}
 
                         {(currentView==FORM_VIEW) && documentObjectWithFrames.frames &&
+                            /*<FrameViewer frame={frames}
+                                type={documentObjectWithFrames.type}
+                                mode={documentObjectWithFrames.action}
+                                onSubmit={onSubmit}
+                                onSelect={onSelect}
+                                formData={documentObjectWithFrames.filledFrame}
+                            />*/
                             <FrameViewer frame={frames}
                                 type={documentObjectWithFrames.type}
                                 mode={documentObjectWithFrames.action}
-                                documents={docs}
                                 onSubmit={onSubmit}
                                 onSelect={onSelect}
                                 formData={documentObjectWithFrames.filledFrame}

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

@@ -22,7 +22,6 @@ export const DocumentInfo = () => {
     const {
         woqlClient,
         documentClasses,
-        docs,
         frames
     } = WOQLClientObj()
 
@@ -64,7 +63,7 @@ export const DocumentInfo = () => {
         </React.Fragment>
     }
 
-    function handleEdit () {
+    function handleEdit () { 
         setDocumentObject({
             action: EDIT_DOCUMENT,
             type: documentObjectWithFrames.type,
@@ -101,11 +100,13 @@ export const DocumentInfo = () => {
 
     const DocumentContents = ({documentObject, currentView}) => {
 
+        //console.log("documentObject", documentObject)
+
         if (currentView == JSON_VIEW) return <JsonDocument documentObject={documentObject}/>
         return <FrameViewer frame={frames}
+            hideSubmit={true}
             type={documentObjectWithFrames.type}
             mode={documentObjectWithFrames.action}
-            documents={docs}
             formData={documentObjectWithFrames.filledFrame}
             onTraverse={onTraverse}
         />

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

@@ -1,6 +1,6 @@
 
 import React, {useState, useEffect} from "react"
-import {ListGroup, Container, Card, Row, Col, Button} from "react-bootstrap"
+import {ListGroup, Container, Card, Row, Col, Button, Stack} from "react-bootstrap"
 import {BiPlus, BiNetworkChart} from "react-icons/bi"
 import {WOQLClientObj} from '../init-woql-client'
 import {
@@ -63,8 +63,12 @@ export const DocumentSummary = () => {
                     <Button id={type} className="bg-transparent border-0 p-0 w-100" onClick={(e) => handleCardClick(type)}>
                         <Card bg="dark" style={{maxHeight: "220px", cursor: "pointer"}} >
                             <Card.Header className="bg-transparent border-0 d-flex text-wrap">
-                                <h4 className="col-md-8 text-muted text-left">{key}</h4>
-                                <h4 className="text-muted col-md-4 text-right">{val}/{getTotalNumberOfDocuments(totalDocumentCount)}</h4>
+                                <div>
+                                    <div class="hstack gap-3 minBreakpoint-xs">
+                                        <h6 className="fw-bold text-muted text-left">{key}</h6>
+                                        <h6 className="text-muted ms-auto text-right">{val}/{getTotalNumberOfDocuments(totalDocumentCount)}</h6>
+                                    </div>
+                                </div>
                             </Card.Header>
                             <Card.Body>
                                 <Row className="ml-3">
@@ -95,7 +99,6 @@ export const DocumentSummary = () => {
         return count
     }
 
-
     return  <main className="content  ml-5 w-100">
         <Container>
             <Row>

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

@@ -0,0 +1,182 @@
+
+import React, {useState, useEffect} from "react"
+import {WOQLTable,ControlledGetDocumentQuery} from '@terminusdb/terminusdb-react-table'
+import {getDocumentOfTypeTabConfig} from "./ViewConfig"
+import {NoDocumentsAvailable} from "./NoDocumentsAvailable"
+import {WOQLClientObj} from '../init-woql-client'
+import {DocumentControlObj} from '../hooks/DocumentControlContext'
+import {Card, Row, Col, Button} from "react-bootstrap"
+import {getColumnsFromResults, displayIDOfLinkedDocuments, isArray} from "./utils"
+import {getDocumentTools, getDeleteTool, getCopyIDTool} from "./DocumentActions"
+import {FORM_VIEW, VIEW_DOCUMENT, PROGRESS_BAR_COMPONENT} from "./constants"
+import {Loading} from "./Loading"
+
+export const DocumentTable = ({barloading, setBarLoading, viewTable, setViewTable}) => {
+    const {
+        woqlClient,
+        perDocumentCount,
+        documentClasses,
+        frames
+    } = WOQLClientObj()
+
+    if(!woqlClient) return <div/>
+
+    const dataProduct  = woqlClient.db()
+    const [extractedResults, setExtractedResults]=useState([])
+    const {
+        documentObject,
+        setDocumentObject,
+        setDocumentObjectWithFrames,
+        documentObjectWithFrames,
+        actionControl
+    } = DocumentControlObj()
+
+    console.log("documentObjectWithFrames", documentObjectWithFrames)
+    console.log("documentObject", documentObject, tableConfig)
+
+    if (documentObjectWithFrames.action) return <div/>
+    //if (documentObject.action) return <div/>
+
+    const {
+        updateQuery,
+        changeOrder,
+        changeLimits,
+        controlledDocument,
+        result,
+        limit,
+        start,
+        orderBy, 
+        loading,
+        rowCount,
+        documentResults,
+        setDocumentResults,
+        setControlledRefresh,
+        controlledRefresh
+    } = ControlledGetDocumentQuery(woqlClient, documentObject.type, 10)
+
+    const [tableConfig, setTableConfig] = useState(false)
+
+    useEffect(() => { // get documents on click of document types
+        setBarLoading(true)
+        setTableConfig(false)
+        setDocumentResults(false)
+        setControlledRefresh(controlledRefresh+1)
+    }, [documentObject.type])
+
+    useEffect(() => { // reload table on update
+        if(documentObjectWithFrames.update) {
+            setBarLoading(true)
+            setTableConfig(false)
+            setDocumentResults(false)
+            setControlledRefresh(controlledRefresh+1)
+        }
+    }, [documentObjectWithFrames.update])
+
+    useEffect(() => {
+        setBarLoading(true)
+    }, [limit])
+
+    function extractDocuments(documentResults) {
+        var extractedResults=[]
+
+        documentResults.map(item=> {
+            var newJson={}
+            for(var key in item){
+                if(Array.isArray(item[key])){
+                    var type = item[key][0]["@type"]
+                    if(frames[`terminusdb:///schema#${type}`] && frames[`terminusdb:///schema#${type}`]["@subdocument"]){
+                        // this is a subdocument
+                        var newArray=[]
+                        item[key].map(thing => {
+                            newArray.push(thing["@id"])
+                        })
+                        newJson[key]=newArray
+                    }
+                }
+                else if(typeof item[key] === "object"){
+                    if(item[key].hasOwnProperty("@id")){ // object - we do not display sys json data as part of table
+                        newJson[key]=item[key]["@id"]
+                    }
+                }
+                else {
+                    newJson[key]=item[key]
+                }
+            }
+            extractedResults.push(newJson)
+        })
+        //console.log("extractedResults", extractedResults)
+        return extractedResults
+    }
+
+    useEffect(() => { // set table view config
+        if(!documentResults) return
+        setBarLoading(false)
+        setViewTable(true)
+        let extractedResults = extractDocuments(documentResults)
+        setExtractedResults(extractedResults)
+        let tConf = getDocumentOfTypeTabConfig(extractedResults, getDeleteTool, getCopyIDTool, onRowClick)
+        setTableConfig(tConf)
+    }, [documentResults])
+
+
+
+    // on click document table row
+    function onRowClick (row) {
+        let docObj={
+            action: VIEW_DOCUMENT,
+            type: row.original["@type"],
+            view: documentObject.view ? documentObject.view : FORM_VIEW,
+            submit: false,
+            currentDocument: row.original["@id"],
+            frames: {},
+            filledFrame: {},
+            loading: <Loading message={`Fetching document ${row.original["@id"]} ...`} type={PROGRESS_BAR_COMPONENT}/>,
+            message: false,
+            update:false
+        }
+        setDocumentObjectWithFrames(docObj)
+        setDocumentObject(docObj)
+    }
+
+    if (documentResults.length == 0) {
+        return <NoDocumentsAvailable 
+            type={documentObject.type} 
+            documentObject={documentObject} 
+            setDocumentObject={setDocumentObject}
+        />
+    }
+
+    console.log("tableConfig", tableConfig)
+
+    if(tableConfig) {
+        return <main className="content mr-3 ml-5 w-100 ">
+            <Row className="w-100 mb-5">
+                <Col md={11}>
+                    <Card className="content mr-3 ml-5 w-100" varaint="light">
+                        <Card.Header>
+                            <h6>Documents of type - <strong className="text-success">{documentObjectWithFrames.type}</strong></h6>
+                        </Card.Header>
+                        <Card.Body>
+                            <WOQLTable
+                                result={extractedResults}
+                                freewidth={true}
+                                view={(tableConfig ? tableConfig.json() : {})}
+                                limit={limit}
+                                start={start}
+                                orderBy={orderBy}
+                                setLimits={changeLimits}
+                                setOrder={changeOrder}
+                                resultColumns={getColumnsFromResults(extractedResults)}
+                                query={false}
+                                loading={loading}
+                                totalRows={rowCount}
+                            />
+                        </Card.Body>
+                    </Card>
+                </Col>
+            </Row>
+        </main>
+    }
+
+    return <div/>
+}