Pagination enabled.

Author: marek-kozlovsky-ata

src/App.js

@@ -9,6 +9,7 @@ import HeaderNavigationBar from "./components/navigation/HeaderNavigationBar";
 import {connect} from "react-redux";
 import {ConnectionsOverview} from "./components/connections/ConnectionsOverview";
 import AddConnectionForm from "./components/connections/AddConnectionForm";
+import {FormGenOverview} from "./components/form/FormGenOverview";
 
 
 class App extends React.Component {
@@ -28,7 +29,7 @@ class App extends React.Component {
                         <Route exact path="/">
                             <WelcomePage/>
                         </Route>
-                        <Route exact path="/browse/forms/:connectionName" component={ContextOverview}>
+                        <Route exact path="/browse/forms/:connectionName" component={FormGenOverview}>
                         </Route>
                         <Route exact path="/browse/contexts/:connectionName" component={ContextOverview}>
                         </Route>

src/App.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import {render} from '@testing-library/react';
 import App from './App';
 
 test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+    const {getByText} = render(<App/>);
+    const linkElement = getByText(/learn react/i);
+    expect(linkElement).toBeInTheDocument();
 });

src/api/index.js

@@ -9,5 +9,5 @@ if (process.env.REACT_APP_MOCK_REST_API == "true") {
 }
 
 export default axios.create({
-  baseURL: apiUrl
+    baseURL: apiUrl
 });

src/components/Paginator.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import Pagination from "react-bootstrap/Pagination";
+import Alert from "react-bootstrap/Alert";
+
+export const ITEMS_PER_PAGE = 30;
+
+export class Paginator extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            activePage: Math.round(this.props.offset / ITEMS_PER_PAGE) + 1,
+            numberOfPages: Math.round(this.props.totalItems / ITEMS_PER_PAGE),
+        }
+    }
+
+    handleSelectPage(selectedPage) {
+        if (selectedPage > 0 && selectedPage <= this.state.numberOfPages) {
+            this.setState({activePage: selectedPage, loading: true})
+
+            this.props.requestItemsHandler((selectedPage - 1) * ITEMS_PER_PAGE, ITEMS_PER_PAGE)
+        }
+    }
+
+    render() {
+        if (!this.props.totalItems) {
+            return <div>Paginator not initialized correctly.</div>
+        }
+        let loadingMessage;
+        if (this.props.loading) {
+            loadingMessage = <Alert style={{margin: '0.0'}} variant={"light"} className={"h-10"}>
+                Reloading...
+            </Alert>
+        }
+
+        let leftEllipses;
+        if (this.state.activePage > 5) {
+            leftEllipses = <Pagination.Ellipsis/>;
+        }
+        let rightEllipses;
+        if (this.state.activePage < this.state.numberOfPages - 5) {
+            rightEllipses = <Pagination.Ellipsis/>;
+        }
+
+        let items = [];
+        let firstDisplayedPage = this.state.activePage > 5 ? this.state.activePage - 4 : 1;
+        let lastDisplayedPage = this.state.activePage < this.state.numberOfPages - 5 ? this.state.activePage + 4 : this.state.numberOfPages;
+        for (let pageNumber = firstDisplayedPage; pageNumber <= lastDisplayedPage; pageNumber++) {
+            items.push(
+                <Pagination.Item key={pageNumber} active={pageNumber === this.state.activePage}
+                                 onClick={() => this.handleSelectPage(pageNumber)}>
+                    {pageNumber}
+                </Pagination.Item>,
+            );
+        }
+
+        return <div>
+
+            <Pagination>
+                <Pagination.First onClick={() => this.handleSelectPage(1)}/>
+                <Pagination.Prev onClick={() => this.handleSelectPage(this.state.activePage - 1)}/>
+                {leftEllipses}
+                {items}
+                {rightEllipses}
+                <Pagination.Next onClick={() => this.handleSelectPage(this.state.activePage + 1)}/>
+                <Pagination.Last onClick={() => this.handleSelectPage(this.state.numberOfPages)}/>
+                {loadingMessage}
+            </Pagination>
+        </div>;
+    }
+}

src/components/FormGenView.js src/components/SFormsDisplay.jssrc/components/FormGenView.js renamed to src/components/SFormsDisplay.js

@@ -5,7 +5,7 @@ import Alert from "react-bootstrap/Alert";
 
 // TODO: should we have one component for displaying and just changing the state or new component for each of the contexts
 
-export class FormGenView extends React.Component {
+export class SFormsDisplay extends React.Component {
 
     constructor() {
         super();
@@ -39,6 +39,12 @@ export class FormGenView extends React.Component {
     };
 
     render() {
+        if (!this.props.contextUri) {
+            return <Alert variant={"light"} className={"h-10"}>
+                Context not specified...
+            </Alert>
+        }
+
         const modalProps = {
             onHide: () => {
             },

src/components/connections/AddConnectionForm.js

@@ -52,8 +52,8 @@ class AddConnectionForm extends React.Component {
             this.state = this.baseState
             this.setState({showError: false, showSuccess: true});
         }).catch((error) => {
-            console.log(error)
-            this.setState({showError: true, showSuccess: false}); // todo: improve handling individual messages
+                console.log(error)
+                this.setState({showError: true, showSuccess: false}); // todo: improve handling individual messages
             }
         );
     }

src/components/connections/ConnectionsOverview.js

@@ -83,7 +83,8 @@ export class ConnectionsOverview extends React.Component {
                                 <Row>
                                     <Col>
                                         <Button variant="outline-secondary">Change</Button>{' '}
-                                        <DeleteConnectionForm connectionName={connectionName} refreshCallBack={this.refresh}/>
+                                        <DeleteConnectionForm connectionName={connectionName}
+                                                              refreshCallBack={this.refresh}/>
                                     </Col>
                                 </Row>
                             </ListGroup.Item>

src/components/context/ContextList.js

@@ -0,0 +1,85 @@
+import React from "react";
+import {ContextLine} from "./ContextLine";
+import Alert from "react-bootstrap/Alert";
+import {ITEMS_PER_PAGE, Paginator} from "../Paginator";
+import API from "../../api";
+
+export class ContextList extends React.Component {
+
+    constructor() {
+        super();
+        this.state = {
+            contexts: null,
+            totalItems: null,
+            offset: null,
+            loading: true
+        }
+        this.requestPaginatedContexts = this.requestPaginatedContexts.bind(this)
+    }
+
+    componentDidMount() {
+        this.requestPaginatedContexts(0, ITEMS_PER_PAGE)
+    }
+
+    requestPaginatedContexts(offset, limit) {
+        this.setState({loading: true})
+        console.log(offset)
+        console.log(limit + ".")
+        API.get("/rest/contexts/paginated", {
+            params: {
+                "connectionName": this.props.connectionName,
+                "offset": offset,
+                "limit": limit
+            }
+        }).then(response => {
+            return response.data;
+        }).then(data => {
+            this.setState({
+                contexts: data.items,
+                totalItems: data.totalItems,
+                offset: data.offset,
+                loading: false
+            });
+        });
+    }
+
+    render() {
+        if (!this.state.contexts || this.state.contexts.length == 0) {
+            return <Alert variant={"light"} className={"h-10"}>
+                Loading contexts...
+            </Alert>
+        }
+
+        let i = 0;
+        const contexts = this.state.contexts.filter((context) => {
+            if (this.props.filterProcessed) {
+                return !context.processed
+            } else {
+                return true;
+            }
+        }).map((context) => {
+            i++;
+            return (
+                <ContextLine key={i}
+                             context={context}
+                             connectionName={this.props.connectionName}
+                             clickHandler={this.props.updateActiveContextUri}/>);
+        });
+
+        let paginator;
+        if (this.state.contexts) {
+            paginator = <Paginator totalItems={this.state.totalItems}
+                                   offset={this.state.offset}
+                                   loading={this.state.loading}
+                                   requestItemsHandler={this.requestPaginatedContexts}/>;
+        }
+
+        return <div>
+
+            {paginator}
+            {contexts}
+
+        </div>
+
+    }
+}