Shell_Casing

pagination

Oct 5th, 2020 (edited)
1,180
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useEffect, useState } from 'react';
  2. import { useNavigate } from 'react-router-dom';
  3. import { useDispatch, useSelector } from "react-redux";
  4. import { ThemeProvider } from '@material-ui/core'
  5. import Table from '@material-ui/core/Table';
  6. import TableContainer from '@material-ui/core/TableContainer';
  7. import TableHead from '@material-ui/core/TableHead';
  8. import TableBody from '@material-ui/core/TableBody';
  9. import TableRow from '@material-ui/core/TableRow';
  10. import TableCell from '@material-ui/core/TableCell';
  11. import Paper from '@material-ui/core/Paper';
  12. import TableFooter from "@material-ui/core/TableFooter";
  13. import TablePagination from "@material-ui/core/TablePagination";
  14. import { TablePaginationActions } from "./TablePaginationActions";
  15. import Loading from "../../../loading/loading";
  16. import classes from './maker-screen.module.css';
  17. import { makerSubmitJobsListAction } from "../../../../store/actions/ocms-jobActions";
  18. import { theme } from "../../../../utils/material-ui-table";
  19.  
  20. export const MakerScreen = props => {
  21.  
  22.     // store data
  23.     const loading = useSelector(state => state.ocmsJobs.loading);
  24.     const makerSearchResults = useSelector(state => state.ocmsJobs.makerSearchResults) || [];
  25.     const errorFetchingData = useSelector(state => state.ocmsJobs.errorFetchingData);
  26.     const errorSubmittingData = useSelector(state => state.ocmsJobs.errorSubmittingData);
  27.     const { id } = useSelector(state => state.auth.userData);
  28.     const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
  29.  
  30.     const navigate = useNavigate();
  31.     const dispatch = useDispatch();
  32.  
  33.     const goBack = () => navigate(-1);
  34.  
  35.     // pagination stuff
  36.     let emptyRows;
  37.     const [page, setPage] = useState(0);
  38.     const [rowsPerPage, setRowsPerPage] = useState(5);
  39.     const handleChangePage = (event, newPage) => setPage(newPage);
  40.     const handleChangeRowsPerPage = event => {
  41.         setRowsPerPage(parseInt(event.target.value, 10));
  42.         setPage(0);
  43.     };
  44.     if(makerSearchResults.length) {
  45.         emptyRows = rowsPerPage - Math.min(rowsPerPage, makerSearchResults.length - page * rowsPerPage);
  46.         makerSearchResults.forEach((result, index) => result.id = (index + 1));  // add random IDs with UUID
  47.     }
  48.  
  49.     // handle checkboxes
  50.     const [selectedJobs, setSelectedJobs] = useState([]);
  51.  
  52.     const handlePriority = async (e, JOB) => {
  53.         const { value } = e.target;
  54.         if(value) {
  55.             await JOB.priority = value;
  56.         } else {
  57.             JOB.priority = null;
  58.         }
  59.     };
  60.  
  61.     const toggleSelectedJob = JOB => {
  62.         if(selectedJobs.map(j => j.id).includes(JOB.id)) {
  63.             setSelectedJobs(selectedJobs.filter(job => job.id !== JOB.id));
  64.         } else {
  65.             setSelectedJobs([JOB, ...selectedJobs]);
  66.         }
  67.     };
  68.  
  69.     const submitJobsForReRun = async () => {
  70.         if(!selectedJobs.length) return;
  71.         await dispatch(makerSubmitJobsListAction({ id, jobs: [...Set(selectedJobs)] }));
  72.         setSelectedJobs([]);
  73.     };
  74.  
  75.     useEffect(() => {
  76.         if(!isAuthenticated) {
  77.             navigate(`/login`);
  78.         }
  79.     }, [isAuthenticated]);
  80.  
  81.     useEffect(() => {
  82.         if(errorFetchingData) navigate('/error-fetching-data');
  83.         if(errorSubmittingData) navigate('/error-submitting-data');
  84.     }, [errorFetchingData, errorSubmittingData]);
  85.  
  86.     if(loading) return (<Loading />);
  87.  
  88.     if(makerSearchResults.length === 0) return (
  89.         <div className="mx-auto my-4 py-4">
  90.             <h1 className="font-weight-bold text-lg">No results</h1>
  91.             <button onClick={ goBack } className="DBS_button_standard hover:bg-gray-400 mt-5">
  92.                 <span className={`text-gray-700`}>Go back</span>
  93.             </button>
  94.         </div>
  95.     );
  96.  
  97.     const showJobs = (
  98.         <TableContainer component={Paper} className={`shadow-md mt-5`}>
  99.             <ThemeProvider theme={ theme }>
  100.                 <Table>
  101.                     <TableHead className={`bg-gray-200`}>
  102.                         <TableRow>
  103.                             <TableCell><span className={`font-bold`}>ID</span></TableCell>
  104.                             <TableCell>
  105.                                 <p className={`font-bold`}>Jobs To ReRun</p>
  106.                                 <input type="checkbox" onClick={ () => toggleSelectedJob(result) } />
  107.                             </TableCell>
  108.                             <TableCell><span className={`font-bold`}>Priority</span></TableCell>                            
  109.                             <TableCell><span className={`font-bold`}>Re-run Status</span></TableCell>
  110.                         </TableRow>
  111.                     </TableHead>
  112.                     <TableBody>
  113.  
  114.                         {
  115.                             (rowsPerPage > 0
  116.                                 ? makerSearchResults.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
  117.                                 : makerSearchResults).map(result => (
  118.                                 <TableRow key={result.id} className={`hover:bg-gray-200 ${classes.row}`}>
  119.                                     <TableCell>{ result.id }</TableCell>
  120.                                     <TableCell>
  121.                                         <input type="checkbox" onClick={ () => toggleSelectedJob(result) } />
  122.                                     </TableCell>
  123.                                     <TableCell>
  124.                                         <input type="number"
  125.                                                inputMode={`numeric`}
  126.                                                pattern="[0-9]*"
  127.                                                onChange={ (event) => handlePriority(event, result) }
  128.                                                className={`bg-gray-300 focus:bg-white focus:border-purple-500`} />
  129.                                     </TableCell>
  130.                                     <TableCell> </TableCell>
  131.                                 </TableRow>
  132.                             ))
  133.                         }
  134.  
  135.                         {emptyRows > 0 && (
  136.                             <TableRow style={{ height: 53 * emptyRows }}>
  137.                                 <TableCell colSpan={6} />
  138.                             </TableRow>
  139.                         )}
  140.                     </TableBody>
  141.  
  142.                     <TableFooter>
  143.                         <TableRow>
  144.                             <TablePagination
  145.                                 rowsPerPageOptions={[5, 10, 20, { label: 'All', value: -1 }]}
  146.                                 colSpan={8}
  147.                                 count={makerSearchResults.length}
  148.                                 rowsPerPage={rowsPerPage}
  149.                                 page={page}
  150.                                 SelectProps={{
  151.                                     inputProps: { 'aria-label': 'rows per page' },
  152.                                     native: true,
  153.                                 }}
  154.                                 onChangePage={handleChangePage}
  155.                                 onChangeRowsPerPage={handleChangeRowsPerPage}
  156.                                 ActionsComponent={TablePaginationActions}
  157.                             />
  158.                         </TableRow>
  159.                     </TableFooter>
  160.                 </Table>
  161.  
  162.             </ThemeProvider>
  163.         </TableContainer>
  164.     );
  165.  
  166.  
  167.     return (
  168.         <div className="">
  169.             <button onClick={ goBack } className="hover:bg-gray-400 my-1">
  170.                 <span className={`text-gray-700`}>Go back</span>
  171.             </button>
  172.             { showJobs }
  173.             <button onClick={ submitJobsForReRun }
  174.                     style={{ background: '#ff3e3e', color: '#ffffff' }}
  175.                     className="px-6 hover:bg-red-700 mt-4">
  176.                 Submit (To Checker for Approval)
  177.             </button>
  178.         </div>
  179.     );
  180.  
  181. };
  182.  
RAW Paste Data