List Documents ListDocumentsComponent
The ListDocumentsComponent
element allows you to visualize the documents inside the TDBReactTable and query the documents using the advanced search component.
Installation
Install the dependencies from npm
Copy npm install @terminusdb/terminusdb-documents-ui
npm install @terminusdb/terminusdb-react-table
npm install @terminusdb/terminusdb-documents-ui-templates
Properties
Example
Copy import React , {useEffect} from "react" ;
import {gql} from "@apollo/client" ;
import { ListDocumentsComponent , useTDBDocuments } from "@terminusdb/terminusdb-documents-ui-template" ;
// I pass this so I'm sure it exists before loading the component
export const ListDocuments = ({type , apolloClient , tdbClient}) => {
const { deleteDocument ,
loading ,
error ,
getGraphqlTablesConfig ,
documentTablesConfig ,
setError } = useTDBDocuments (tdbClient)
const navigate = useNavigate ()
useEffect (() => {
getGraphqlTablesConfig ()
} , [tdbClient])
async function callDeleteDocument (row){
var answer = window .confirm ( "Are you sure you want to delete this document" );
if (answer) {
let fullId = row[ 'id' ]
const delCall = await deleteDocument (fullId)
if (delCall){
//do something after delete
}
}
}
const onViewClick = (row) => {
let fullId = row[ 'id' ]
let fullIdEncode = btoa (fullId)
//do something after row view button click
}
const onEditClick = (row) => {
let fullId = row[ 'id' ]
let fullIdEncode = btoa (fullId)
//do something after row edit button click
}
function handleCreate (e) {
//do something after create button click
}
if (loading) return < div >{ `Fetching ${ type } ...` }></ div >
const querystr = documentTablesConfig ? documentTablesConfig .objQuery[type].query : null
const query = querystr ? gql ` ${ querystr } ` : false
const tableConfig = documentTablesConfig && documentTablesConfig.tablesColumnsConfig ? documentTablesConfig.tablesColumnsConfig[type] : []
const advancedSearchConfig = documentTablesConfig && documentTablesConfig.advancedSearchObj ? documentTablesConfig.advancedSearchObj[type] : null
const errorMessage = typeof error === "object" ? JSON .stringify (error , null , 4 ) : error
return < React.Fragment >
{errorMessage && < div >Server Error: {errorMessage} </ div >}}
{query && tableConfig &&
< ListDocumentsComponent type = {type}
gqlQuery = {query}
apolloClient = {apolloClient}
tableConfig = {tableConfig}
advancedSearchConfig = {advancedSearchConfig}
onRowClick = {onViewClick}
onViewButtonClick = {onViewClick}
onEditButtonClick = {onEditClick}
onDeleteButtonClick = {callDeleteDocument}
onCreateButtonClick = {handleCreate}/>}
</ React.Fragment >
}
View the ListDocumentsComponent integrated inside a dashboard here
ListDocumentsComponent full example JS code
Code Sandbox