merge newDoc

Author: Francesca-Bit

package-lock.json

@@ -76,6 +76,7 @@
     "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

@@ -65,7 +65,7 @@ export const Alerts = ({message, type, onCancel, time}) => {
             <div className="d-flex justify-content-between">
                 <div className="w-100">
                     <FaExclamationTriangle className="me-1 mb-1" />
-                    <strong>Oops! Something went wrong.</strong> 
+                    <strong>ERROR: </strong>
                     <div className="text-wrap">{message}</div>
                 </div> 
                 <AlertCloseButton className={"alert_btn_close alert_danger_text"} onClick={() => onClose("danger")}/>

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

@@ -15,6 +15,8 @@ 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 
@@ -134,7 +136,7 @@ function DiffViewDocument ({documentID,diffObj, CRObject,propertyModifiedCount,f
         onTraverse(documentID, setClicked)
     }
 
-   return <Accordion className="accordion__button padding-0 diff__accordian" id={eventKey} onSelect={getDocumentStatesOnClick}> 
+   return <Accordion className="accordion__button padding-0 diff__accordian mb-3" id={eventKey} onSelect={getDocumentStatesOnClick}> 
         <Accordion.Item eventKey={eventKey} className="border-0">
             <Accordion.Header className="w-100 bg-secondary rounded">
             <Stack direction="horizontal" gap={1} className="w-100">
@@ -197,23 +199,20 @@ export const DiffView = ({diffs, CRObject}) => {
     const [activePage, setActivePage]=useState(1)
     const [current, setCurrent]=useState(0)
 
+    const [page, setPage] = useState(1)
+
     let elements=[], paginationItems=[]
 
-    let divide = diffs.length/DIFFS_PER_PAGE_LIMIT
+    let divide = Math.ceil(diffs.length/DIFFS_PER_PAGE_LIMIT)
 
     useEffect(() => {
         getDocumentFrames()
 	},[])
     // function to handle on click of page
     function handlePagination(number) {
-        if(number > activePage) {
-            let newCurrent=current+DIFFS_PER_PAGE_LIMIT+1
-            setCurrent(newCurrent)
-        }
-        else {
-            let newCurrent=current-DIFFS_PER_PAGE_LIMIT-1
-            setCurrent(newCurrent)
-        }
+        let position=DIFFS_PER_PAGE_LIMIT * (number-1)
+        
+        setCurrent(position)
         setActivePage(number) 
 
     }
@@ -232,10 +231,10 @@ export const DiffView = ({diffs, CRObject}) => {
 
 
     // looping through diff lists
-    for(let start=current; start<=(current + DIFFS_PER_PAGE_LIMIT); start++) {
+    for(let start=current; start<(current + DIFFS_PER_PAGE_LIMIT); start++) {
 
         if(start >= diffs.length) continue
-
+      
         const propertyModifiedCount = getPropertyModifiedCount(diffs[start])
         const diffObj = diffs[start]
         const action = diffObj["@op"] || "Change"
@@ -260,9 +259,20 @@ export const DiffView = ({diffs, CRObject}) => {
     return <React.Fragment>
         {elements}
         <Row className="w-100">
-            <Col/>
+            <Col/> 
             <Col>
-                <Pagination className="justify-content-center ">{paginationItems}</Pagination>
+                {/*<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>

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

@@ -100,7 +100,7 @@ export function makeArrayFrames(args, property, arrayType)  {
 		}
 		return { layout, uiLayout }
 	}
-	if(mode === CONST.VIEW && 
+	if(mode === CONST.VIEW &&  
 		documentFrame[property].hasOwnProperty(CONST.CLASS) && 
 		documentFrame[property][CONST.CLASS] === CONST.FEATURE && 
 		documentFrame.hasOwnProperty("type") && 
@@ -114,6 +114,7 @@ export function makeArrayFrames(args, property, arrayType)  {
 		}
 		return { layout, uiLayout }
 	}
+	
 
 	function showEachField(props) {
 		return template.ArrayFieldTemplate(argsHolder, props, property)

packages/tdb-documents-ui/src/FrameViewer_work.js

@@ -26,7 +26,7 @@ export const ArrayFieldTemplate = ({ args, props, property, items, handleAdd, ha
 	 */
 	const [update, setUpdate] = useState({})
 	const [refresh, setRefresh] = useState(Date.now())
-
+ 
 	//console.log("props", props)
 
 	let { extractedDocumentation, mode } = args
@@ -55,7 +55,7 @@ export const ArrayFieldTemplate = ({ args, props, property, items, handleAdd, ha
 						{update && <GetFieldDisplay args={args} 
 							props={props} 
 							element={element} 
-							id={id} 
+							id={id}  
 							update={update} 
 							setUpdate={setUpdate}
 							property={property}/>}