Merge pull request #220 from terminusdb/newDoc

fix pagination

Author: KittyJose

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

@@ -121,7 +121,7 @@ export const DocumentsGraphqlTable = ({gqlQuery,apolloClient,tableConfig, type,
                  <Accordion className="mb-4">
                     <Accordion.Item eventKey="0">
                         <Accordion.Header>Advanced filter</Accordion.Header>
-                        <Accordion.Body>
+                        <Accordion.Body className="p-0">
                             <AdvancedSearch fields={advSearchFields} setFilter={setAdvancedFilters} />
                         </Accordion.Body>
                     </Accordion.Item>   

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

@@ -18,8 +18,7 @@ export function useTDBGraphqlQuery (apolloClient, graphqlQuery, documentType, op
     const [data, setData] = useState(null)
     const [extractedData, setExtractedData] = useState(null)
 
-    const startHiddenColumns = options && options.hiddenColumns || hiddenColumnsStart()
-    const [hiddenColumnsArr,setHiddenColumnsArr] = useState(startHiddenColumns)
+    const [hiddenColumnsArr,setHiddenColumnsArr] = useState(["_id"])
 
     //filter is the filter formatted for the query
     let filterTable  = []
@@ -31,7 +30,12 @@ export function useTDBGraphqlQuery (apolloClient, graphqlQuery, documentType, op
     const [filterBy, setFilters] = useState(filterTable)
     const [queryFilters, setQueryFilters] = useState(false)
 
-   
+    useEffect(() => {
+      if(documentType){       
+          setHiddenColumnsArr(options.hiddenColumns || hiddenColumnsStart())    
+      }
+   },[documentType]);
+
     function hiddenColumnsStart(){
       const startHiddenColumns = []
       if(options && Array.isArray(options.tableConfigObj)){
@@ -49,6 +53,17 @@ export function useTDBGraphqlQuery (apolloClient, graphqlQuery, documentType, op
       return startHiddenColumns
     }
 
+    const callGraphqlServer = (currentlimit,currentpage,queryOrders,queryFilters)=>{
+      setStart(currentpage)
+      setLimit(currentlimit)
+      setQueryOrderBy(queryOrders)
+      setQueryFilters(queryFilters)
+      setFilters([])
+      setOrderBy([])
+
+      callFetchMore(currentlimit,currentpage,queryOrders,queryFilters) 
+    }
+
     const callFetchMore = async (currentlimit,currentpage,currentOrderBy,currentFilter) =>{
         setLoading(true)
         setError(false)
@@ -187,7 +202,7 @@ export function useTDBGraphqlQuery (apolloClient, graphqlQuery, documentType, op
 
     return {
         setError,
-        callGraphqlServer:callFetchMore,
+        callGraphqlServer,
         error,
         changeOrders,
         changeLimits,

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

@@ -99,7 +99,7 @@ export const AdvancedSearch = (props) =>{
       operators,fields:props.fields || {}} 
 
     const renderBuilder = (props) => (
-      <div className="query-builder-container" style={{padding: '10px'}}>
+      <div className="query-builder-container">
         <div className="query-builder qb-lite">
             <Builder {...props} />
         </div>
@@ -254,7 +254,7 @@ export const AdvancedSearch = (props) =>{
         onChange={onChange}
         renderBuilder={renderBuilder}
       />
-      <Button onClick={()=>{onClick()}}>Filter Data</Button>
+      <Button onClick={()=>{onClick()}} className='ml-3 mb-3'>Filter Data</Button>
       </form>
     </div>