Merge pull request #237 from soham4abc/all_jobs

feat(ui): Pagination in Browse page Reviewed-by: mishra.gaurav@siemens.com
fossology · Jul 17, 2022 · 6a87bc9 · 6a87bc9
2 parents e34bb1e + 899f8e5
commit 6a87bc9
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 20 deletions.
diff --git a/src/pages/Browse/index.jsx b/src/pages/Browse/index.jsx
@@ -38,6 +38,7 @@ import {
   getFileNameFromContentDispostionHeader,
   handleError,
 } from "shared/helper";
+import Pagination from "@material-ui/lab/Pagination";
 
 import {
   statusOptions,
@@ -74,6 +75,7 @@ const Browse = () => {
   const [showMessage, setShowMessage] = useState(false);
   // qurey used for searching in the current page
   const [query, setQuery] = useState("");
+  const [pages, setPages] = useState();
 
   useEffect(() => {
     setMessage({
@@ -85,6 +87,7 @@ const Browse = () => {
       .then((res) => {
         setBrowseDataList(res.res);
         const arr = [];
+        setPages(res.pages);
         for (let i = 0; i < res.pages; i++) {
           arr.push({
             id: i + 1,
@@ -126,7 +129,7 @@ const Browse = () => {
         handleError(error, setMessage);
         setShowMessage(true);
       });
-  }, []);
+  }, [browseData]);
 
   const handleChange = (e) => {
     if (e.target.name === "limit") {
@@ -187,9 +190,15 @@ const Browse = () => {
 
   const handleClick = (e, id) => {
     e.preventDefault();
-    setBrowseData({ ...browseData, folderId: id });
+    setPages(1);
+    setBrowseData({ ...browseData, folderId: id, page: 1 });
+  };
+  const handlePageChange = (e, value) => {
+    if (value >= 1) {
+      setPages(value);
+      setBrowseData({ ...browseData, [`page`]: value });
+    }
   };
-
   return (
     <>
       <Title title="Browse" />
@@ -325,19 +334,34 @@ const Browse = () => {
                       <td>{data?.uploaddate.split(".")[0]}</td>
                     </tr>
                   ))}
-                <tr>
+                <tr className="text-left">
                   <td colSpan="6">
-                    Page:
-                    {pagesOptions && (
-                      <InputContainer
-                        name="page"
-                        type="select"
-                        onChange={(e) => handleChange(e)}
-                        options={pagesOptions}
-                        property="value"
-                        className="mt-n4"
-                      />
-                    )}
+                    <div className="right-pagination">
+                      Page:
+                      {pagesOptions && (
+                        <div className="row">
+                          <Pagination
+                            name="page"
+                            className="col-md-6 pagination-div "
+                            property="value"
+                            count={pages}
+                            page={browseData.page}
+                            onChange={handlePageChange}
+                          />
+                          <div className="row ">
+                            Go to: &nbsp;
+                            <input
+                              type="number"
+                              className="pagination-textarea"
+                              size="3"
+                              onChange={(event) =>
+                                handlePageChange(event, event.target.value)
+                              }
+                            />
+                          </div>
+                        </div>
+                      )}
+                    </div>
                   </td>
                 </tr>
               </tbody>

diff --git a/src/pages/Jobs/AllJobs/index.jsx b/src/pages/Jobs/AllJobs/index.jsx
@@ -188,10 +188,8 @@ const AllJobs = () => {
                     </tr>
                   ))}
                 <tr className="text-left">
-                  <td />
-                  <td />
-                  <td>
-                    <div>
+                  <td colSpan="6">
+                    <div className="right-pagination">
                       Page:
                       {pagesOptions && (
                         <div className="row">
@@ -210,6 +208,7 @@ const AllJobs = () => {
                               type="number"
                               maxLength="4"
                               size="3"
+                              className="pagination-textarea"
                               onChange={(event) =>
                                 handlePageChange(event, event.target.value)
                               }

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -130,5 +130,14 @@ h6 {
 
 /* Width for pagination UI */
 .pagination-div {
-  min-width: 70%;
+  min-width: 71.5%;
+}
+.right-pagination {
+  width: 100%;
+  padding-left: 65%;
+}
+
+/* eight for textarea in pagination module */
+.pagination-textarea {
+  height: 30px;
 }