Skip to content

Commit bf69cc4

Browse files
KittyJoseKittyJose
committed
diff pagination
1 parent c2c489d commit bf69cc4

File tree

6 files changed

+104
-29
lines changed

6 files changed

+104
-29
lines changed

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ export const AboutDataProduct = ({dataProductDetails, setShowDeleteModal, setSho
9696
<Card className="bg-transparent p-1 mb-5 tdb__align__container" border="muted">
9797
<Card.Body>
9898
<h4 className="text-light mb-3 fw-bold">About</h4>
99+
99100
{dataProductDetails.comment!== 'false' && <span className="text-light mb-4 ">
100101
{dataProductDetails.comment}
101102
</span>}
@@ -145,10 +146,10 @@ export const AboutDataProduct = ({dataProductDetails, setShowDeleteModal, setSho
145146
</span>
146147
{accessControlDashboard && accessControlDashboard.createDB() && <Fragment>
147148
<div className="w-100 d-block align-items-center gx-0">
148-
<Button variant="secondary"
149+
<Button variant="light"
149150
id="update_database"
150151
title={`Update Data Product ${dataProduct} info`}
151-
className=" btn btn-lg h2 fw-bold w-100 mt-4"
152+
className=" btn btn-md h4 w-100 mt-4 text-dark"
152153
onClick={showUpdateHandler}>
153154
Update Dataproduct details
154155
</Button>

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,13 +58,14 @@ export const ChangeDiffComponent = () => {
5858
currentCRObject
5959
} = WOQLClientObj()
6060

61-
const {getDiffList,error:errorMsg,loading,result} = DocumentHook()
61+
const {getDiffList,error:errorMsg,loading,result} = DocumentHook()
6262

6363
const [key, setKey] = useState(DIFFS)
64+
const [start, setStart] = useState(0)
6465

6566
useEffect(() => {
66-
getDiffList(changeid)
67-
}, [])
67+
getDiffList(changeid, start)
68+
}, [start])
6869

6970

7071
if(!client) return <div/>
@@ -98,7 +99,7 @@ export const ChangeDiffComponent = () => {
9899
<Card.Body>
99100
{currentCRObject.status === SUBMITTED &&
100101
<ReviewComponent/> }
101-
<DiffView diffs={result} CRObject={currentCRObject}/>
102+
<DiffView diffs={result} CRObject={currentCRObject} start={start} setStart={setStart}/>
102103
</Card.Body>
103104
</Card>
104105
</Tab>

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

Lines changed: 90 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {useTDBDocuments} from "@terminusdb/terminusdb-documents-ui"
1717
import {WOQLClientObj} from '../init-woql-client'
1818

1919
import { PaginationControl } from 'react-bootstrap-pagination-control';
20+
import { MdAlternateEmail } from "react-icons/md"
2021
/**
2122
*
2223
* @param {*} diff diff list
@@ -186,7 +187,7 @@ function DiffViewDocument ({documentID,diffObj, CRObject,propertyModifiedCount,f
186187
* @param {*} originBranchDocumentList document list of origin branch
187188
* @returns
188189
*/
189-
export const DiffView = ({diffs, CRObject}) => {
190+
export const DiffView_OLD = ({diffs, CRObject, start, setStart }) => {
190191
const {woqlClient} = WOQLClientObj()
191192

192193
// I need to copy the woqlClient and set the original_branch
@@ -199,7 +200,7 @@ export const DiffView = ({diffs, CRObject}) => {
199200
const [activePage, setActivePage]=useState(1)
200201
const [current, setCurrent]=useState(0)
201202

202-
const [page, setPage] = useState(1)
203+
const [page, setPage] = useState(start)
203204

204205
let elements=[], paginationItems=[]
205206

@@ -210,21 +211,22 @@ export const DiffView = ({diffs, CRObject}) => {
210211
},[])
211212
// function to handle on click of page
212213
function handlePagination(number) {
213-
let position=DIFFS_PER_PAGE_LIMIT * (number-1)
214+
alert(number)
215+
/*let position=DIFFS_PER_PAGE_LIMIT * (number-1)
214216
215217
setCurrent(position)
216-
setActivePage(number)
218+
setActivePage(number) */
217219

218220
}
219221

220222
// populate pagination Item
221-
for (let number = 1; number <= divide; number++) {
223+
/*for (let number = 1; number <= divide; number++) {
222224
paginationItems.push(
223225
<Pagination.Item key={number} active={number === activePage} onClick={(e) => handlePagination(number)}>
224226
{number}
225227
</Pagination.Item>
226228
)
227-
}
229+
}*/
228230

229231
if(!frames) return <Loading message={`Loading Frames ...`}/>
230232
if(!diffs) return <Loading message={`Loading Diffs ...`}/>
@@ -261,18 +263,88 @@ export const DiffView = ({diffs, CRObject}) => {
261263
<Row className="w-100">
262264
<Col/>
263265
<Col>
264-
{/*<Pagination className="justify-content-center ">{paginationItems}</Pagination>*/}
265-
<PaginationControl
266-
page={page}
267-
between={3}
268-
total={diffs.length}
269-
limit={5}
270-
changePage={(page) => {
271-
setPage(page)
272-
handlePagination(page)
273-
}}
274-
ellipsis={1}
275-
/>
266+
<Pagination className="justify-content-center ">
267+
<Pagination.Prev onClick={(e) => handlePagination(e)}/>
268+
<Pagination.Next onClick={(e) => handlePagination(e)}/>
269+
</Pagination>
270+
</Col>
271+
<Col/>
272+
</Row>
273+
</React.Fragment>
274+
}
275+
276+
/**
277+
*
278+
* @param {*} diffs diff list
279+
* @param {*} trackingBranchDocumentList document list of tracking branch
280+
* @param {*} originBranchDocumentList document list of origin branch
281+
* @returns
282+
*/
283+
export const DiffView = ({diffs, CRObject, start, setStart }) => {
284+
const {woqlClient} = WOQLClientObj()
285+
286+
// I need to copy the woqlClient and set the original_branch
287+
// to get the right frame
288+
const woqlClientCopy = woqlClient.copy()
289+
woqlClientCopy.checkout(CRObject.original_branch)
290+
291+
const {frames,getDocumentFrames} = useTDBDocuments(woqlClientCopy)
292+
293+
let elements=[]
294+
295+
296+
useEffect(() => {
297+
getDocumentFrames()
298+
},[])
299+
300+
// function to handle on click of page
301+
function handlePagination(action) {
302+
if(action === "next") {
303+
setStart(start+DIFFS_PER_PAGE_LIMIT+1)
304+
}
305+
else {
306+
// previous
307+
if(start) setStart(start-DIFFS_PER_PAGE_LIMIT-1)
308+
}
309+
310+
}
311+
312+
if(!frames) return <Loading message={`Loading Frames ...`}/>
313+
if(!diffs) return <Loading message={`Loading Diffs ...`}/>
314+
315+
316+
diffs.map((diffItems, index) => {
317+
const propertyModifiedCount = getPropertyModifiedCount(diffItems)
318+
const diffObj = diffItems
319+
const action = diffObj["@op"] || "Change"
320+
const actionKey = `@${action.toLowerCase()}`
321+
const eventKey= diffObj[actionKey] && diffObj[actionKey]["@id"] ? diffObj[actionKey]["@id"] : diffObj["@id"]
322+
const docType = diffObj[actionKey] && diffObj[actionKey]["@type"] ? diffObj[actionKey]["@type"] : diffObj["@type"]
323+
324+
// this are the diff panel for document
325+
elements.push(
326+
<React.Fragment key={`item__${index}`}>
327+
<DiffViewDocument frames={frames} key={actionKey}
328+
action={action}
329+
docType={docType}
330+
propertyModifiedCount={propertyModifiedCount}
331+
documentID={eventKey}
332+
diffObj={diffObj}
333+
CRObject={CRObject}/>
334+
</React.Fragment>
335+
)
336+
})
337+
338+
339+
return <React.Fragment>
340+
{elements}
341+
<Row className="w-100">
342+
<Col/>
343+
<Col>
344+
<Pagination className="justify-content-center ">
345+
<Pagination.Prev key={"previous"} onClick={(e) => handlePagination("previous")}/>
346+
<Pagination.Next key={"next"} onClick={(e) => handlePagination("next")}/>
347+
</Pagination>
276348
</Col>
277349
<Col/>
278350
</Row>

‎packages/tdb-dashboard/src/hooks/DocumentHook.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, {useState,useEffect} from "react";
22
import { WOQLClientObj } from "../init-woql-client";
3+
import { DIFFS_PER_PAGE_LIMIT } from "../components/constants"
34

45
export function DocumentHook(){
56
const {woqlClient,currentChangeRequest} = WOQLClientObj()
@@ -50,9 +51,9 @@ export function DocumentHook(){
5051
}finally{setLoading(false)}
5152
}
5253

53-
async function getDiffList(changeRequestID,start=0,count=5) {
54+
async function getDiffList(changeRequestID, start=0, count=DIFFS_PER_PAGE_LIMIT) {
5455
try{
55-
const client = woqlClient.copy()
56+
const client = woqlClient.copy()
5657
client.connectionConfig.api_extension = 'api/'
5758
const baseUrl = client.connectionConfig.dbBase("changes")
5859
const result = await client.sendCustomRequest("GET", `${baseUrl}/${changeRequestID}/diff?count=${count}&start=${start}`)

‎packages/tdb-dashboard/src/pages/ChangeRequestsPage.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -196,9 +196,9 @@ export const ChangeRequestsPage = () => {
196196
<div className="ms-2 me-auto">
197197
<div className="fw-bold text-success">
198198
{name}
199-
<span class="text-dark ml-1 badge badge-info mr-1">{item.tracking_branch}</span>
199+
<span class="text-dark ml-1 badge bg-light mr-1">{item.tracking_branch}</span>
200200
from branch
201-
<span class="text-dark ml-1 badge badge-success">{item.original_branch}</span>
201+
<span class="text-dark ml-1 badge bg-success">{item.original_branch}</span>
202202

203203
</div>
204204
<div className="text-gray font-italic">

‎packages/tdb-documents-ui-template/src/components/JsonFrameViewer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export const JsonFrameViewer = ({type, jsonData, mode, setExtracted}) => {
6565
// onBlur
6666
return <React.Fragment>
6767
<CodeMirror
68-
value={JSON.stringify(data, null, 2)}
68+
value={JSON.stringify(!data ? {} : data, null, 2)}
6969
options={cmOptions}
7070
className={"document__interface__main"}
7171
onBlur={(editor, data, value) => {

0 commit comments

Comments
 (0)