Unmaintained package
These packages (@terminusdb/terminusdb-documents-ui etc.) were last published December 2023 and are no longer actively maintained. The documentation is preserved for reference. Community contributions and pull requests are welcome.
The ViewDocumentComponent allows you to view existing documents using the FrameViewer component.
Installation
Install the dependencies from npm
Example: Bash
npm install @terminusdb/terminusdb-documents-ui
npm install @terminusdb/terminusdb-react-table
npm install @terminusdb/terminusdb-documents-ui-templatesProperties
| Properties | Description |
|---|---|
type | The document type |
documentID | The document ID |
documentJson | The document object |
frames | The database Class Frame, or object of all class frames |
closeButtonClick | A function that acts as a callback when the panel exit x button is clicked |
deleteDocument | A function that acts as a callback when the delete button is clicked |
editDocument | A function that acts as a callback when the edit button is clicked |
getDocumentById | A function that acts as a callback when the a link property (a link to another document) is clicked inside the document interface |
Example
Example: Python
import React, {useEffect} from "react";
import {ViewDocumentComponent,useTDBDocuments} from "@terminusdb/terminusdb-documents-ui-template"
export const DocumentView = ({tdbClient,type, documentID}) => {
const {
frames,
selectedDocument,
error,
deleteDocument,
getSelectedDocument,
getDocumentById,
getDocumentFrames,
setError
} = useTDBDocuments(tdbClient)
useEffect(() => {
getDocumentFrames()
getSelectedDocument(documentID)
}, [] )
async function callDeleteDocument(){
var answer = window.confirm("Are you sure you want to delete this document");
if (answer) {
const delCall = await deleteDocument(documentID)
if(delCall){
//do something after delete document
}
}
}
const closeButtonClick = () =>{
// do something after click the close panel button the interface
// like navigate to the list of documents
}
const gotToEditDocument = () =>{
// do something after click the edit button like navigate to the
// edit page
}
if(!frames) return <div>{`Fetching frames for document type ${type} ...`}</div>
const errorMessage = typeof error === "object" ? JSON.stringify(error,null,4) : error
return <React.Fragment>
{error && <div>Server Error: {errorMessage} </div>}
<ViewDocumentComponent
type={type}
getDocumentById={getDocumentById}
documentJson={selectedDocument}
frames={frames}
closeButtonClick={closeButtonClick}
documentID={documentID}
deleteDocument={callDeleteDocument}
editDocument = {gotToEditDocument}
/>
</React.Fragment>
}View the ViewDocumentComponent integrated inside a dashboard here