Dashboard Pagination (branch→dev)

client/src/App.js

@@ -37,6 +37,7 @@ import ManageTraining from './components/ManageTraining/ManageTraining';
 import { isAdminUser } from './utils/AdminReportingRoles';
 import NightMonitoring from './components/Forms/NightMonitoring';
 
+
 const hideStyle = {
   display: 'none',
 };
@@ -77,7 +78,13 @@ class App extends Component {
     },
     flip: false,
     showMessageSent: false,
+    loading: false,
+    currentPage: 1,
+
   };
+
+
+
 
   doFetchFormApprovalCount = async () => {
     try {
@@ -177,13 +184,17 @@ class App extends Component {
     }
   };
 
-  componentDidUpdate = () => {
+  callGetAllUsers = () => {
     if (
       this.state.loggedIn &&
       (this.state.allUsersSet === false || this.state.allUsers.length === 0)
     ) {
       this.getAllUsers();
     }
+  }
+
+  componentDidUpdate = () => {
+    setTimeout((callGetAllUsers) => {}, 10000)
 
     if (
       !this.state.messagesInitLoad &&
@@ -194,20 +205,19 @@ class App extends Component {
     }
   };
 
-  loadMessage = (userObj) => {
+    loadMessage = (userObj, pageNumber) => {
+    if (pageNumber === undefined) {pageNumber = 1};
     this.setState({
       ...this.state,
       discussionMessagesLoading: true,
     });
-    Axios.get(`/api/discussionMessages/${userObj.homeId}`)
+    Axios.get(`/api/discussionMessages/${userObj.homeId}?page=${pageNumber}&limit=20`)
       .then((response) => {
-        setTimeout(() => {
           this.setState({
             discussionMessages: response.data,
             messagesInitLoad: true,
             discussionMessagesLoading: false,
           });
-        }, 1000);
       })
       .catch((error) => {
         this.setState({
@@ -217,6 +227,7 @@ class App extends Component {
       });
   };
 
+
   appendMessage = async (message) => {
     let newMessage = {
       message: message,
@@ -518,6 +529,8 @@ class App extends Component {
                       setDMs={this.setDMs}
                       updateUserData={this.updateUserData}
                       getAllUsers={this.getAllUsers}
+                      currentPage={this.currentPage}
+                      loadMessage={this.loadMessage}
                     />
                   </div>
                 </div>
@@ -692,18 +705,25 @@ function ToggleScreen({
   setDMs,
   updateUserData,
   getAllUsers,
+  currentPage,
+  loadMessage,
 }) {
   if (name === 'Dashboard') {
     return (
       <div>
+
         <MessageBoard
           discussionMessagesLoading={discussionMessagesLoading}
           messages={appState.discussionMessages}
           appendMessage={appendMessage}
           toggleDisplay={toggleDisplay}
           userObj={appState.userObj}
           removeMessage={removeMessage}
+          postsPerPage={20}
+          currentPage={appState.currentPage}
+          loadMessage={loadMessage}
         />
+
       </div>
     );
   }
@@ -1357,4 +1377,4 @@ function DisplayExtra({
   }
 }
 
-export default App;
+export default App;

client/src/components/DirectMessageBoard/DirectMessageBoard.css

@@ -1,7 +1,7 @@
 /* desktop */
 @media only screen and (min-width: 1226px) {
   #messageBoard {
-    margin-top: 50px;
+    margin-top: 10px;
     width: 100%;
     background-color: white;
 
@@ -38,7 +38,7 @@
 /* ipad */
 @media only screen and (min-width: 768px) and (max-width: 1225px) {
   #messageBoard {
-    margin-top: 50px;
+    margin-top: 10px;
     width: 100%;
     background-color: white;
 

client/src/components/Forms/FormSubmitterListContainer.js

@@ -64,6 +64,11 @@ class FormSubmitterListContainer extends Component {
     }
   }
 
+  disablePrint() {
+    console.log('submissions', this.props.submittions)
+    return (this.props.submittions.find(submission => submission.status === 'COMPLETED')) !== undefined
+  }
+
   triggerPrint = () => {
     this.state.formsLoaded = false;
     /*
@@ -166,13 +171,25 @@ class FormSubmitterListContainer extends Component {
           </div>
           )} */}
         <div className="hide-on-print" style={{ paddingBottom: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center', pageBreakBefore: "avoid", pageBreakInside: "avoid" }}>
-          <button onClick={this.triggerPrint}
-            className='btn btn-link'
-            // disable button if no completed forms
-            disabled={(this.props.submittions.find(submission => submission.status === 'COMPLETED')) !== undefined ? false : true}
-          >
-            <span className='fa fa-print'></span> Print {this.props.formType} Forms
-          </button>
+          {this.props.submittions.find(submission => submission.status === 'COMPLETED') ?
+            <button onClick={this.triggerPrint}
+              className='btn btn-link'
+            >
+              <span className='fa fa-print'></span> Print {this.props.formType} Forms
+            </button>
+            :
+            // show tooltip if print button disabled
+            <span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="No completed forms to print." style={{ display: "none" }}>
+              <button onClick={this.triggerPrint}
+                className='btn btn-link'
+                // disable button if no completed forms
+                disabled={(this.props.submittions.find(submission => submission.status === 'COMPLETED')) !== undefined ? false : true}
+              >
+                <span className='fa fa-print'></span> Print {this.props.formType} Forms
+              </button>
+            </span>
+          }
+
         </div>
         {this.props.submittions.length > 0 ? (
           this.props.submittions.map((form, formIndex) => (

client/src/components/MessageBoard/MessageBoard.css

@@ -1,7 +1,20 @@
+#recentPageBtn {
+  width:100px;
+}
+.page-link {
+  height: auto;
+  width: 50px;
+  margin: 3px;
+  color: black;
+}
+.active {
+  background-color: maroon;
+  color: white;
+}
 /* desktop */
 @media only screen and (min-width: 1226px) {
   #messageBoard {
-    margin-top: 50px;
+    margin-top: 10px;
     width: 100%;
     background-color: white;
 
@@ -38,7 +51,7 @@
 /* ipad */
 @media only screen and (min-width: 768px) and (max-width: 1225px) {
   #messageBoard {
-    margin-top: 50px;
+    margin-top: 10px;
     width: 100%;
     background-color: white;
 

client/src/components/MessageBoard/MessageBoard.js

@@ -5,6 +5,8 @@ import "./MessageBoard.css";
 import "../../App.css";
 import ClipLoader from "react-spinners/ClipLoader";
 import { isAdminUser } from "../../utils/AdminReportingRoles";
+import Pagination from "./Pagination";
+
 
 const ContentAfterLoad = ({ messages, isLoading, removeMessage, userObj }) => {
   const [currentMessages, setCurrentMessage] = useState(messages);
@@ -34,6 +36,7 @@ const ContentAfterLoad = ({ messages, isLoading, removeMessage, userObj }) => {
           {item.message}
         </MessagePost>
       ))}
+
     </div>
   );
 };
@@ -44,7 +47,35 @@ class MessageBoard extends Component {
     this.state = {
       showModal: "",
       messageText: "",
-    };
+      postsPerPage: 20,
+      currentPage: 1,
+      indexOfFirstPost: 0,
+      indexOfLastPost: 19,
+       };
+  }
+
+  handlePagination = (pageNumber) => {
+    this.state.currentPage = pageNumber;
+    this.props.loadMessage(this.props.userObj, pageNumber)
+    let firstIndex = (((this.props.currentPage) - 1) * 20);
+    // this.setState({currentPage: pageNumber});
+    this.setState({indexOfFirstPost: firstIndex})
+    this.setState({indexOfLastPost: (this.props.currentPage*20) - 1 })
+  };
+
+  recentPageMessage = () => {
+    this.state.currentPage = 1;
+    this.props.loadMessage(this.props.userObj, this.state.currentPage)
+  }
+
+  nextPageMessage = () => {
+    this.state.currentPage += 1;
+    this.props.loadMessage(this.props.userObj, this.state.currentPage)
+  }
+
+  prevPageMessage = () => {
+    this.state.currentPage -= 1;
+    this.props.loadMessage(this.props.userObj, this.state.currentPage)
   }
 
   openModal = (modalName) => {
@@ -125,9 +156,23 @@ class MessageBoard extends Component {
             </div>
           </>
         )}
+        {/* hide pagination on load */}
+        {!this.props.discussionMessagesLoading && 
+        <Pagination
+        length={this.props.messages.length}
+        postsPerPage={this.state.postsPerPage}
+        prevPageMessage = {this.prevPageMessage}
+        nextPageMessage = {this.nextPageMessage}
+        recentPageMessage = {this.recentPageMessage}
+        currentPage={this.state.currentPage}
+        loadMessage={this.props.loadMessage}
+        userObj={this.props.userObj}
+      />
+        }
+
         <ContentAfterLoad
           removeMessage={this.props.removeMessage}
-          messages={this.props.messages}
+          messages={this.props.messages.slice(((this.props.currentPage-1)*this.state.postsPerPage), ((this.props.currentPage*this.state.postsPerPage)-1))}
           isLoading={this.props.discussionMessagesLoading}
           userObj={this.props.userObj}
         />
@@ -141,4 +186,4 @@ class MessageBoard extends Component {
   }
 }
 
-export default MessageBoard;
+export default MessageBoard;

client/src/components/MessageBoard/Pagination.js

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import "./MessageBoard.css";
+import "../../App.css";
+
+const Pagination = ({
+    nextPageMessage,
+    recentPageMessage,
+    prevPageMessage,
+    currentPage,
+}) => {
+
+    const recentPage = () => {
+        currentPage = 1;
+        recentPageMessage();
+    }
+
+    const nextPage = () => {
+        currentPage += 1;
+        nextPageMessage();
+    }
+
+    const prevPage = () => {
+        currentPage -= 1;
+        prevPageMessage();
+    }
+
+    return (
+        <ul id='pagination' className="pagination">
+
+            <li className="page-item">
+                <a
+                    onClick={() => recentPage()}
+                    className= {currentPage === 1 ? 'btn btn-light page-link disabled' : 'btn btn-light page-link'}
+                    id={'recentPageBtn'}
+                >
+                    Recent
+                </a>
+            </li>
+
+            <li className="page-item">
+                <a
+                    onClick={() => prevPage()}
+                    className= {currentPage === 1 ? 'btn btn-light page-link disabled' : 'btn btn-light page-link'}
+                    id={'prevPageBtn'}
+                >
+                    &larr;
+                </a>
+            </li>
+
+            <li className="page-item">
+                <a
+                    onClick={() => nextPage()}
+                    className='btn btn-light page-link'
+                    id={'nextPageBtn'}
+                >
+                    &rarr;
+                </a>
+            </li>
+        </ul>
+    )
+}
+export default Pagination