Feature/swodlr UI 70 - add filtering to my data page and re-generatio…

…n button (#105) * /version v1.0.0-rc.1 * /version v1.0.0-rc.2 * Pull in recent changes to 1.0.0 * /version v1.0.0-rc.3 * Fix umm-t record * /version v1.0.0-rc.4 * Fix umm-t record * /version v1.0.0-rc.5 * Fix umm-t record * /version v1.0.0-rc.6 * /version v1.0.0-rc.7 * issue/manual-granule-input-hotfix: fixed how ranged of scenes are processed (#86) Co-authored-by: jbyrne <[email protected]> * Issues/swodlr UI 72 essential UI bug fixes (#87) * issues/swodlr-ui-72: fix cps url params bug * issues/swodlr-ui-72 * issues/swodlr-ui-75: fixed a couple bugs * issues/swodlr-ui-72: fixed map movement, adjust options, data page limit, etc * issues/swodlr-ui-72: changed spatial search beginning date in range * issues/swodlr-ui-72-essential-fixes: cleaned up comments --------- Co-authored-by: jbyrne <[email protected]> * /version v1.0.0-rc.8 * feature/swodlr-ui-70: add my data filters * feature/swodlr-ui-70: fix re-generation button * feature/swodlr-ui-70: changed action buttons * feature/swodlr-ui-70: changed filter css * feature/swodlr-ui-70: add cycle pass scene input validation * feature/swodlr-ui-70: fix href for nav links * feature/swodlr-ui-70: --------- Co-authored-by: frankinspace <[email protected]> Co-authored-by: Frank Greguska <[email protected]> Co-authored-by: Jonathan M Smolenski <[email protected]> Co-authored-by: jonathansmolenski <[email protected]> Co-authored-by: jbyrne <[email protected]>
podaac · May 30, 2024 · 1993b8b · 1993b8b
1 parent b45908f
commit 1993b8b
Show file tree

Hide file tree

Showing 16 changed files with 799 additions and 252 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "array-buffer-to-hex": "^1.0.0",
     "bootstrap": "^5.2.3",
     "dotenv": "^16.3.1",
+    "formik": "^2.4.6",
     "graphql": "^16.6.0",
     "graphql-request": "^6.1.0",
     "leaflet": "^1.9.3",

diff --git a/src/components/app/App.css b/src/components/app/App.css
@@ -310,10 +310,15 @@ tfoot {
 }
 
 .table-responsive-generatedProducts {
-  max-height: 65vh;
+  max-height: 62vh;
   overflow-y: auto;
 }
 
+.table-filter {
+  background-color:#1a2535;
+  border: solid white 1px
+}
+
 .center {
   width:100%;
   display: flex;

diff --git a/src/components/history/DataPagination.tsx b/src/components/history/DataPagination.tsx
@@ -1,92 +1,35 @@
 import { Col, Pagination, Row, Spinner } from "react-bootstrap";
-import { Product } from "../../types/graphqlTypes";
-import { getUserProducts } from "../../user/userData";
 import { useAppDispatch, useAppSelector } from "../../redux/hooks";
-import { addPageToHistoryPageState, setUserProducts } from "../sidebar/actions/productSlice";
+import { setUserProducts } from "../sidebar/actions/productSlice";
 import { productsPerPage } from "../../constants/rasterParameterConstants";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 
-const DataPagination = () => {
+const DataPagination = (props: {totalNumberOfProducts: number, totalNumberOfFilteredProducts: number, }) => {
+    const {totalNumberOfProducts, totalNumberOfFilteredProducts} = props
     const dispatch = useAppDispatch()
-    const historyPageState = useAppSelector((state) => state.product.historyPageState)
-    const firstHistoryPageData = useAppSelector((state) => state.product.firstHistoryPageData)
     const userProducts = useAppSelector((state) => state.product.userProducts)
+    const allUserProducts = useAppSelector((state) => state.product.allUserProducts)
     const [noNextPage, setNoNextPage] = useState<boolean>(false)
     const [noPreviousPage, setNoPreviousPage] = useState<boolean>(true)
-    const [waitingForPagination, setWaitingForPagination] = useState<boolean>(true)
+    const [waitingForPagination, setWaitingForPagination] = useState<boolean>(false)
     const [currentPageNumber, setCurrentPageNumber] = useState<number>(1) 
-    const [totalNumberOfProducts, setTotalNumberOfProducts] = useState<number>(0)
-
-      useEffect(() => {
-        // get the data for the first page
-        // go through all the user product data to get the id of each one so that 
-        const fetchData = async () => {
-            await getUserProducts({limit: '1000000'}).then(response => {
-                const currentPageProducts = response.products as Product[]
-                const totalNumberOfProducts = currentPageProducts.length
-                setTotalNumberOfProducts(totalNumberOfProducts)
-                if(response.status === 'success' && currentPageProducts.length !== 0) {
-                    const productsPerPageToInt = parseInt(productsPerPage)
-                    const numberOfPages = Math.ceil(currentPageProducts.length/productsPerPageToInt)
-                    for (let pageIndex = 0; pageIndex < numberOfPages; pageIndex++) {
-                        // get index of the last product of each [productsPerPage]
-                        const indexToUse = totalNumberOfProducts - (pageIndex * productsPerPageToInt) < productsPerPageToInt ? totalNumberOfProducts - (pageIndex * productsPerPageToInt) : productsPerPageToInt * (pageIndex + 1)-1
-                        const idToUse = currentPageProducts[indexToUse].id
-                        dispatch(addPageToHistoryPageState(idToUse))
-                    }
-                }
-            }).then(() => setWaitingForPagination(false))
-        }
-        fetchData()
-        .catch(console.error);
-      }, []);
-
-    const handlePrevious = async () => {
-        if(noNextPage) setNoNextPage(false)
-        if (currentPageNumber <= 2) {
-            dispatch(setUserProducts(firstHistoryPageData))
-            setCurrentPageNumber(currentPageNumber - 1)
-            setNoPreviousPage(true)
-        } else {
-            await getUserProducts({limit: productsPerPage, after: historyPageState[currentPageNumber-3]}).then(response => {
-                const currentPageProducts = response.products as Product[]
-                dispatch(setUserProducts(currentPageProducts))
-                setCurrentPageNumber(currentPageNumber - 1)
-            })
-        }
-    }
-
-    const handleNext = async () => {
-        await getUserProducts({limit: productsPerPage, after: historyPageState[currentPageNumber-1]}).then(response => {
-            if(response.status === 'success') {
-                if(noPreviousPage) setNoPreviousPage(false)
-                const currentPageProducts = response.products as Product[]
-                dispatch(setUserProducts(currentPageProducts))
-                setCurrentPageNumber(currentPageNumber + 1)
-            } else if (response.status === 'error') {
-                setNoNextPage(true)
-            }
-        })
-    }
+    const numberOfTotalPages = Math.ceil(allUserProducts.length / parseInt(productsPerPage))
 
     const handleSelectPage = async (pageNumber: number) => {
-        if (pageNumber === 1) {
-            if(noPreviousPage) setNoPreviousPage(false)
-            dispatch(setUserProducts(firstHistoryPageData))
-            setCurrentPageNumber(pageNumber)
+        const firstNumber = (pageNumber-1) * parseInt(productsPerPage)
+        const lastNumber = firstNumber + parseInt(productsPerPage)
+        dispatch(setUserProducts(allUserProducts.slice(firstNumber, lastNumber)))
+        setCurrentPageNumber(pageNumber)
+        if(pageNumber === 1) {
             setNoPreviousPage(true)
+            setNoNextPage(false)
+        } else if (pageNumber === numberOfTotalPages) {
+            setNoPreviousPage(false)
+            setNoNextPage(true)
         } else {
-            await getUserProducts({limit: productsPerPage, after: historyPageState[pageNumber-2]}).then(response => {
-                if(response.status === 'success') {
-                    if(noPreviousPage) setNoPreviousPage(false)
-                    const currentPageProducts = response.products as Product[]
-                    dispatch(setUserProducts(currentPageProducts))
-                    setCurrentPageNumber(pageNumber)
-                } else if (response.status === 'error') {
-                    setNoNextPage(true)
-                }
-            })
+            setNoPreviousPage(false)
+            setNoNextPage(false)
         }
     }
 
@@ -102,8 +45,8 @@ const DataPagination = () => {
 
     const getPaginationItemsWithEllipsis = () => {
         let numberOfSlotsFreeLeft = 0
-        if(currentPageNumber >= historyPageState.length-4) {
-            numberOfSlotsFreeLeft = 4 - (historyPageState.length - currentPageNumber)
+        if(currentPageNumber >= numberOfTotalPages-4) {
+            numberOfSlotsFreeLeft = 4 - (numberOfTotalPages - currentPageNumber)
         }
 
         let numberOfSlotsFreeRight = 0
@@ -112,8 +55,8 @@ const DataPagination = () => {
         }
         const pagesAllowed = [currentPageNumber-2, currentPageNumber-1, currentPageNumber, currentPageNumber+1, currentPageNumber+2]
         const pagesAllowedToLeftOfCurrent: number[] = []
-        historyPageState.forEach((pageId, index) => {
-            if(numberOfSlotsFreeLeft !== 0 && index+1 <= historyPageState.length - 3) {
+        for(let index=0; index<numberOfTotalPages; index++) {
+            if(numberOfSlotsFreeLeft !== 0 && index+1 <= numberOfTotalPages - 3) {
                 // let another number go on right
                 pagesAllowedToLeftOfCurrent.push(currentPageNumber - index - 3)
                 numberOfSlotsFreeLeft -= 1
@@ -123,36 +66,43 @@ const DataPagination = () => {
                 pagesAllowed.push(index)
                 numberOfSlotsFreeRight -= 1
             }
-        })
+        }
+
         pagesAllowed.unshift(...pagesAllowedToLeftOfCurrent.reverse())
-        const pagesToShow = historyPageState.map((pageId, index) => {
-            const pageNumberOfIndex = index + 1
-            if (pageNumberOfIndex === 1 || pageNumberOfIndex === historyPageState.length) return null
-            if(pagesAllowed.includes(pageNumberOfIndex)) {
-                return <Pagination.Item key={`${pageNumberOfIndex}-pagination-item`} active={currentPageNumber === pageNumberOfIndex} onClick={() => handleSelectPage(pageNumberOfIndex)}>{pageNumberOfIndex}</Pagination.Item>
+        const pagesAllowedFiltered = pagesAllowed.filter(value => value > 1)
+        const pagesToShow = []
+        for(let pageIndex = 1; pageIndex < numberOfTotalPages-1; pageIndex++) {
+            const pageNumberOfIndex = pageIndex + 1
+            if(pagesAllowedFiltered.includes(pageNumberOfIndex)) {
+                pagesToShow.push( <Pagination.Item key={`${pageNumberOfIndex}-pagination-item`} active={currentPageNumber === pageNumberOfIndex} onClick={() => handleSelectPage(pageNumberOfIndex)}>{pageNumberOfIndex}</Pagination.Item>)
             }
-            return null
-        })
+        }
+
         if(pagesAllowed[0] > 2) pagesToShow.unshift(<Pagination.Ellipsis />)
-        if(pagesAllowed[pagesAllowed.length-1] < historyPageState.length-1) pagesToShow.push(<Pagination.Ellipsis />)
+        if(pagesAllowed[pagesAllowed.length-1] < numberOfTotalPages-1) pagesToShow.push(<Pagination.Ellipsis />)
         return pagesToShow
     }
-    
+
     return waitingForPagination ? waitingForPaginationSpinner() : (
         <Row>
-            <Col xs={2} style={{padding: '15px'}}><h5><b>{totalNumberOfProducts}</b> Total Products</h5></Col>
-            <Col xs={8}>
-                <Pagination data-bs-theme='dark' style={{padding: '15px'}} className="center">
-                    <Pagination.Prev onClick={() => handlePrevious()} disabled={noPreviousPage} />
-                    <Pagination.Item active={currentPageNumber === 1} onClick={() => handleSelectPage(1)}>1</Pagination.Item>
-                    {getPaginationItemsWithEllipsis()}
-                    <Pagination.Item active={currentPageNumber === historyPageState.length} onClick={() => handleSelectPage(historyPageState.length)}>{historyPageState.length}</Pagination.Item>
-                    <Pagination.Next onClick={() => handleNext()} disabled={userProducts.length < parseInt(productsPerPage) || noNextPage} />
-                </Pagination>
-            </Col>
             <Col xs={2}></Col>
+            <Col xs={7}>
+                {
+                    totalNumberOfFilteredProducts !== 0 ?
+                    <Pagination data-bs-theme='dark' style={{paddingTop: '15px'}} className="center">
+                        <Pagination.Prev onClick={() => handleSelectPage(currentPageNumber-1)} disabled={noPreviousPage} />
+                        <Pagination.Item active={currentPageNumber === 1} onClick={() => handleSelectPage(1)}>1</Pagination.Item>
+                        {getPaginationItemsWithEllipsis()}
+                        {numberOfTotalPages > 1 ? <Pagination.Item active={currentPageNumber === numberOfTotalPages} onClick={() => handleSelectPage(numberOfTotalPages)}>{numberOfTotalPages}</Pagination.Item> : null}
+                        <Pagination.Next onClick={() => handleSelectPage(currentPageNumber+1)} disabled={userProducts.length < parseInt(productsPerPage) || noNextPage} />
+                    </Pagination>
+                    : null
+                }
+            </Col>
+            <Col xs={3} style={{paddingTop: '15px'}}><h6><b>{totalNumberOfProducts}</b> Total Generated Products</h6></Col>
         </Row>
     )
 }
 
 export default DataPagination;
+