review pagination

Author: Francesca-Bit

package-lock.json

@@ -76,7 +76,6 @@
     "react": "^18.2.0",
     "react-anchor-link-smooth-scroll": "^1.0.12",
     "react-bootstrap": "^2.7.0",
-    "react-bootstrap-pagination-control": "^1.0.5",
     "react-codemirror2": "^7.2.1",
     "react-collapsed": "^3.6.0",
     "react-collapsible-component": "^1.3.4",

packages/tdb-dashboard/package.json

@@ -1340,3 +1340,4 @@ button.graphiql-tab-add>svg
 .accordion{
   --bs-accordion-bg: #303030 !important;
 }
+

packages/tdb-dashboard/src/App.css

@@ -12,7 +12,7 @@ import {CopyButton} from "./utils"
 import { ManageDatabase } from "../hooks/ManageDatabase"
 import { useParams } from "react-router-dom"
 import { Loading } from "./Loading"
-import {useTDBDocuments} from "@terminusdb/terminusdb-documents-ui"
+import {useTDBDocuments} from "@terminusdb/terminusdb-documents-ui-template"
 
 import { UTILS } from "@terminusdb/terminusdb-client"
 

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

@@ -1,6 +1,6 @@
 import React, {useState, useEffect} from 'react'
 import {Card} from "react-bootstrap"
-import {DocumentHook} from "../hooks/DocumentHook"
+import {useDiff} from "../hooks/useDiff"
 import {WOQLClientObj} from "../init-woql-client"
 import {DiffView} from "../components/DiffView"
 import Badge from 'react-bootstrap/Badge'
@@ -11,6 +11,7 @@ import Stack from 'react-bootstrap/Stack'
 import {Loading} from "../components/Loading"
 import Alert from 'react-bootstrap/Alert'
 import { useParams } from 'react-router-dom'
+import {useTDBDocuments} from "@terminusdb/terminusdb-documents-ui-template"
 import {
     DIFFS, 
     MERGED, 
@@ -58,11 +59,18 @@ export const ChangeDiffComponent = () => {
         currentCRObject
     } = WOQLClientObj() 
 
-    const {getDiffList,error:errorMsg,loading,result} = DocumentHook()
+    const {getDiffList,error:errorMsg,loading,result,start} = useDiff()
 
     const [key, setKey] = useState(DIFFS)
+
+    const woqlClientCopy = client.copy()
+    woqlClientCopy.checkout(currentCRObject.original_branch)
+
+    const {frames,getDocumentFrames} = useTDBDocuments(woqlClientCopy)
+   
 
     useEffect(() => {
+        getDocumentFrames()
         getDiffList(changeid)
     }, [])
 
@@ -73,6 +81,10 @@ export const ChangeDiffComponent = () => {
     // email address 
     let author= currentCRObject && currentCRObject.hasOwnProperty("creator_email") ?  currentCRObject["creator_email"] : "creator"
 
+    const changePage=(page)=>{
+        getDiffList(changeid,page)
+    }
+
     return  <Tabs
         id="change_request_tabs"
         activeKey={key}
@@ -98,7 +110,7 @@ export const ChangeDiffComponent = () => {
                 <Card.Body>                 
                     {currentCRObject.status === SUBMITTED && 
                     <ReviewComponent/> }
-                    <DiffView diffs={result} CRObject={currentCRObject}/> 
+                    <DiffView frames={frames} diffs={result} start={start} changePage={changePage} CRObject={currentCRObject}/> 
                 </Card.Body> 
             </Card>
         </Tab>

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

@@ -1,6 +1,7 @@
 import React, {useState} from "react"
 import {getCommitsTabConfig} from "./ViewConfig"
-import {WOQLTable,useTDBWOQLQuery} from '@terminusdb/terminusdb-react-table'
+import {WOQLTable} from '@terminusdb/terminusdb-react-table'
+import {useTDBWOQLQuery} from '@terminusdb/terminusdb-documents-ui-template'
 import {Button} from "react-bootstrap"
 import {printts, copyToClipboard} from "./utils"
 import {BsClipboard} from "react-icons/bs"

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

@@ -7,7 +7,7 @@ import {getPropertyRelation} from '../queries/GeneralQueries'
 import {Button, Badge, ButtonGroup} from "react-bootstrap"
 import {BiPlus} from "react-icons/bi"
 import {SearchBox} from "./SearchBox"
-import {useTDBDocuments} from "@terminusdb/terminusdb-documents-ui"
+import {useTDBDocuments} from "@terminusdb/terminusdb-documents-ui-template"
 import {Loading} from "./Loading"
 import {NEW_DOC} from "../routing/constants"
 import {useParams, useNavigate} from "react-router-dom"

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

@@ -7,16 +7,12 @@ import {TbExchange} from "react-icons/tb"
 import Stack from 'react-bootstrap/Stack'
 import Pagination from 'react-bootstrap/Pagination'
 import {DIFFS_PER_PAGE_LIMIT} from "./constants"
-import {Row, Col} from "react-bootstrap"
-import {DocumentHook} from "../hooks/DocumentHook"
+import {useDiff} from "../hooks/useDiff"
 import Alert from 'react-bootstrap/Alert'
 import {BsPlus} from "react-icons/bs"
 import {BiMinusCircle} from "react-icons/bi"
 import {Loading} from "./Loading"
-import {useTDBDocuments} from "@terminusdb/terminusdb-documents-ui"
 import {WOQLClientObj} from '../init-woql-client'
-
-import { PaginationControl } from 'react-bootstrap-pagination-control';
 /**
  * 
  * @param {*} diff diff list 
@@ -116,7 +112,7 @@ function DiffViewDocument ({documentID,diffObj, CRObject,propertyModifiedCount,f
     const {getDocumentByBranches, 
         error,
         originalValue, 
-        changedValue} = DocumentHook() 
+        changedValue} = useDiff() 
 
     const [clicked, setClicked]=useState(false)
 
@@ -186,53 +182,13 @@ function DiffViewDocument ({documentID,diffObj, CRObject,propertyModifiedCount,f
  * @param {*} originBranchDocumentList document list of origin branch
  * @returns 
  */
-export const DiffView = ({diffs, CRObject}) => { 
-    const {woqlClient} = WOQLClientObj()
-
-    // I need to copy the woqlClient and set the original_branch 
-    // to get the right frame
-    const woqlClientCopy = woqlClient.copy()
-    woqlClientCopy.checkout(CRObject.original_branch)
-
-    const {frames,getDocumentFrames} = useTDBDocuments(woqlClientCopy)
-    // pagination constants
-    const [activePage, setActivePage]=useState(1)
-    const [current, setCurrent]=useState(0)
-
-    const [page, setPage] = useState(1)
-
+export const DiffView = ({diffs, CRObject, changePage, start,frames}) => { 
     let elements=[], paginationItems=[]
 
-    let divide = Math.ceil(diffs.length/DIFFS_PER_PAGE_LIMIT)
-
-    useEffect(() => {
-        getDocumentFrames()
-	},[])
-    // function to handle on click of page
-    function handlePagination(number) {
-        let position=DIFFS_PER_PAGE_LIMIT * (number-1)
-        
-        setCurrent(position)
-        setActivePage(number) 
-        
-    }
-
-    // populate pagination Item
-    for (let number = 1; number <= divide; number++) {
-        paginationItems.push(
-            <Pagination.Item key={number} active={number === activePage} onClick={(e) => handlePagination(number)}>
-                {number}
-            </Pagination.Item>
-        )
-    }
-    
     if(!frames) return <Loading message={`Loading Frames ...`}/>
     if(!diffs) return <Loading message={`Loading Diffs ...`}/>
 
-    
-    // looping through diff lists
-    for(let start=current; start<(current + DIFFS_PER_PAGE_LIMIT); start++) {
-       
+    for (let start=0;  start<5; start++) {
         if(start >= diffs.length) continue
 
         const propertyModifiedCount = getPropertyModifiedCount(diffs[start])
@@ -256,26 +212,31 @@ export const DiffView = ({diffs, CRObject}) => {
         )
     }
 
+    const changePageCallNext =()=>{
+        changePage(start+5)
+    }
+
+
+    const changePageCallPreview =()=>{
+        changePage(start-5)
+    }
+
+    const prevActive = start>1 ? {onClick:changePageCallPreview} : {active:false}
+    const nextActive = diffs.length> 5  ? {onClick:changePageCallNext} : {active:false}
+
+    const lastDiff = start + Math.min(diffs.length,5)
+
+    let page = Math.ceil(start/5)
     return <React.Fragment>
         {elements}
-        <Row className="w-100">
-            <Col/> 
-            <Col>
-                {/*<Pagination className="justify-content-center ">{paginationItems}</Pagination>*/}
-                <PaginationControl
-                    page={page}
-                    between={3}
-                    total={diffs.length}
-                    limit={5}
-                    changePage={(page) => {
-                        setPage(page)
-                        handlePagination(page)
-                    }}
-                    ellipsis={1}
-                />
-            </Col>
-            <Col/>
-        </Row>
+        <div className="w-100 d-flex justify-content-center">
+            <Pagination size={"ls"}>
+                <Pagination.Prev {...prevActive} />
+                <Pagination.Item active>{`Page ${page+1} -- Diff from ${start+1} to ${lastDiff}`}</Pagination.Item>
+                <Pagination.Next {...nextActive} />
+            </Pagination>
+        </div>
     </React.Fragment>
 }
+   
 

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

@@ -1,7 +1,7 @@
 import React, {useEffect} from "react"
 import {DocumentsGraphqlTable} from "@terminusdb/terminusdb-documents-ui-template"
 import {gql} from "@apollo/client"
-import {useTDBDocuments} from "@terminusdb/terminusdb-documents-ui"
+import {useTDBDocuments} from "@terminusdb/terminusdb-documents-ui-template"
 import {WOQLClientObj} from '../init-woql-client'
 /**
  * 
@@ -14,8 +14,7 @@ export const DocumentSearchComponent = ({setSelected, doctype}) => {
     if(!apolloClient) return <div/>
     const {documentTablesConfig,getGraphqlTablesConfig} = useTDBDocuments(woqlClient)
 
-    
-    
+
     useEffect(() => {
         if(doctype){       
             getGraphqlTablesConfig()         

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

@@ -1,13 +1,13 @@
 import React, {useState, useEffect} from "react"
 import {Card, Row, Col, Button} from "react-bootstrap"
-import {WOQLTable,useTDBDocumentQuery} from '@terminusdb/terminusdb-react-table'
+import {WOQLTable} from '@terminusdb/terminusdb-react-table'
+import {useTDBDocumentQuery} from '@terminusdb/terminusdb-documents-ui-template'
 import {getDocumentOfTypeTabConfig} from "./ViewConfig" 
 import {WOQLClientObj} from '../init-woql-client'
 import {getDocumentTools, getDeleteTool, getCopyIDTool} from "./DocumentActions"
 import {getColumnsFromResults, displayIDOfLinkedDocuments, isArray} from "./utils"
 import {Loading} from "./Loading"
 import { useParams,useNavigate } from "react-router-dom"
-import {UTILS} from '@terminusdb/terminusdb-client'
 
 export const DocumentWoqlTable = () => {
     const {