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

 npm install @terminusdb/terminusdb-documents-ui
 npm install @terminusdb/terminusdb-react-table
 npm install @terminusdb/terminusdb-documents-ui-templates

Properties

Properties	Description
type	The document type
gqlQuery	The graphql query
apolloClient	An apollo client instance - documentation
tableConfig	An object with the table configuration to pass to the TDBReactTable Component
advancedSearchConfig	An object with the advancedSearch configuration to pass to the Advanced Search Component
onRowClick	A function that acts as a callback when the table row is clicked
onViewButtonClick	A function that acts as a callback when the table row view button is clicked
onEditButtonClick	A function that acts as a callback when the table row edit button is clicked
onDeleteButtonClick	A function that acts as a callback when the table row delete button is clicked
onCreateButtonClick	A function that acts as a callback when the create button is clicked
showGraphqlTab	A boolean property that enables the GraphQL query view tab

Example

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