Merge branch 'newDoc' of https://github.com/terminusdb/terminusdb-dashboard into newDoc

Author: KittyJose

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

@@ -3,6 +3,7 @@ import {DocumentsGraphqlTable} from "@terminusdb/terminusdb-documents-ui-templat
 import {gql} from "@apollo/client"
 import {useTDBDocuments} from "@terminusdb/terminusdb-documents-ui-template"
 import {WOQLClientObj} from '../init-woql-client'
+import { Loading } from "./Loading"
 /**
  * 
  * @param {*} setSelected function to get selected document link by user 
@@ -22,7 +23,7 @@ export const DocumentSearchComponent = ({setSelected, doctype}) => {
      },[doctype]);
     const querystr  = documentTablesConfig && documentTablesConfig.objQuery ? documentTablesConfig.objQuery[doctype].query : null
     const gqlQuery = querystr ? gql`${querystr}` : null
-    if(!gqlQuery) return <div/>
+    if(!gqlQuery)  return <Loading message={`Loading the .... ${doctype} documents`} type={'PROGRESS_BAR_COMPONENT'}/>
 
     return  <DocumentsGraphqlTable tableConfig={documentTablesConfig} 
                 type={doctype} 

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

@@ -26,7 +26,7 @@ export function GraphIqlEditor({}) {
     <Layout mainClassName={layoutClass} showLeftSideBar={false}>
         <GraphiQL 
           editorTheme="shadowfox"
-          defaultQuery={'{}'}
+          defaultQuery={'query{}'}
           fetcher={fetcher}
 
         />

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

@@ -70,7 +70,7 @@ export const Layout = (props) => {
         return <ConnectedDataProduct/>
     }   
 
-    const headerElement = changeRequestHolder()
+    const headerElement = dataProduct ? changeRequestHolder() : ""
 
     //defaultSize={340} 
     return <Container fluid className="p-0 flex-row">

packages/tdb-documents-ui-template/docs/useTDBDocuments.md

@@ -17,7 +17,7 @@
  - `state.frame:Object|Bool`
 	 - this is the current documents frames object, the starting value is false, you need to call the `getDocumentFrames`function to fill this property status
  - `state.documentTablesConfig:Object|Bool`
-	 - this is the current document tables template, this property status store the graphQL query for every documents and the configuration for the tables and the advanced search components, the starting value is false, you need to call the `getGraphqlTablesConfig`function to fill this property status
+	 - this is the current document tables template, this property status store the graphQL query for every documents and the configuration for the tables and the advanced search components, the starting value is null, you need to call the `getGraphqlTablesConfig`function to fill this property status, after the call the status will be the table config Object or false if the call failed
  - `setError: Function(value:Object|Bool)` 
 	 - this function set the error property status.
 - `getDocumentClasses: Function()`

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

@@ -56,21 +56,24 @@ export const DocumentsGraphqlTable = ({gqlQuery,apolloClient,tableConfig, type,
         }
     }
 
-    const deleteAction =(row)=>{
+    const deleteAction =(evt,row)=>{
+        evt.stopPropagation()
         if (onDeleteButtonClick) {
             const rowTmp = row && row.original ? {label:row.original.name, id:row.original.fullID}: {}
             onDeleteButtonClick(rowTmp)
         }
     }
 
-    const viewAction =(row)=>{
+    const viewAction =(evt,row)=>{
+         evt.stopPropagation()
          if (onViewButtonClick) {
             const rowTmp = row && row.original ? {label:row.original.name, id:row.original.fullID}: {}
             onViewButtonClick(rowTmp)
         }
     }
 
-    const editAction =(row)=>{
+    const editAction =(evt,row)=>{
+        evt.stopPropagation()
         if (onEditButtonClick) {
             const rowTmp = row && row.original ? {label:row.original.name, id:row.original.fullID}: {}
             onEditButtonClick(rowTmp)
@@ -83,13 +86,13 @@ export const DocumentsGraphqlTable = ({gqlQuery,apolloClient,tableConfig, type,
         //const name = cell.row.original['name']
         return <React.Fragment>
                 <span className="d-flex justify-content-end mr-4">  
-                    {onViewButtonClick && <Button variant="success" size="sm" className="ml-3" title={`view document`} onClick={() => viewAction(invFullId)}>
+                    {onViewButtonClick && <Button variant="success" size="sm" className="ml-3" title={`view document`} onClick={(evt) => viewAction(evt,invFullId)}>
                         <HiOutlineDocument/> 
                     </Button>}        
-                    {onEditButtonClick && <Button variant="success" size="sm" className="ml-3" title={`edit document`} onClick={() => editAction(invFullId)}>
+                    {onEditButtonClick && <Button variant="success" size="sm" className="ml-3" title={`edit document`} onClick={(evt) => editAction(evt,invFullId)}>
                         <RiEdit2Fill/> 
                     </Button>}  
-                    {onDeleteButtonClick && <Button variant="danger" size="sm" className="ml-3" title={`delete document`} onClick={() => deleteAction(invFullId)}>
+                    {onDeleteButtonClick && <Button variant="danger" size="sm" className="ml-3" title={`delete document`} onClick={(evt) => deleteAction(evt,invFullId)}>
                         <RiDeleteBin7Line/> 
                     </Button>}
                 </span>

packages/tdb-documents-ui-template/src/hook/useTDBDocuments.js

@@ -15,7 +15,10 @@ export const useTDBDocuments = (woqlClient) => {
     const [totalDocumentCount, setTotalDocumentCount]=useState(false)
 
     // bool|Object
-    const [documentTablesConfig,setDocumentTablesConfig]=useState(false)
+    //the  default value is null and false if it will be failed
+    //start status null 
+    //after the call can be an object or false
+    const [documentTablesConfig,setDocumentTablesConfig]=useState(null)
 
     // bool|Object
     const [selectedDocument, setSelectedDocument] = useState(false)

packages/tdb-react-table/src/AdvancedSearch.js

@@ -7,7 +7,7 @@ import '@react-awesome-query-builder/ui/css/styles.css';
 //import '@react-awesome-query-builder/ui/css/styles.css';
 //import {Query, Builder, BasicConfig, Utils as QbUtils} from 'react-awesome-query-builder';
 import {Button} from 'react-bootstrap'
-import './style.css';
+//import './style.css';
 
 
 // Choose your skin (ant/material/vanilla):