Added per-page field to search bar

cul · Feb 16, 2024 · 8a00138 · 8a00138
1 parent 38d5771
commit 8a00138
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 19 deletions.
diff --git a/app/javascript/components/resources/ResourceList.jsx b/app/javascript/components/resources/ResourceList.jsx
@@ -39,7 +39,7 @@ export default function ResourceList() {
   }
 
   function handleIdentifierSearch(identifier) {
-    setURL(identifier, pageState.status, 1);
+    setURL(identifier, pageState.status, 1, pageState.per_page);
   }
 
   function handleStatusFilter(status) {
@@ -49,6 +49,10 @@ export default function ResourceList() {
     setURL(pageState.identifier, status, 1, pageState.per_page);
   }
 
+  function handlePerPageSet(perPage) {
+    setURL(pageState.identifier, pageState.status, 1, perPage);
+  }
+
   function nextPage() {
     if(!lastPage) {
       setURL(pageState.identifier, pageState.status, parseInt(pageState.pageNumber) + 1, pageState.per_page);
@@ -118,13 +122,15 @@ export default function ResourceList() {
         filterChoices={filterChoices}
         filterDefault={pageState.status}
         searchDefault={pageState.identifier}
+        perPageDefault={pageState.per_page}
         onSearch={handleIdentifierSearch}
         onFilter={handleStatusFilter}
+        onPerPageSet={handlePerPageSet}
       />
-      <label>{((pageState.pageNumber - 1) * pageState.per_page + 1) + ' - ' + (Math.min(pageState.pageNumber * pageState.per_page, filteredResources.length)) + ' of ' + filteredResources.length}</label>
+      <label className='ps-3 mt-5'>{((pageState.pageNumber - 1) * pageState.per_page + 1) + ' - ' + ((pageState.pageNumber - 1) * pageState.per_page + filteredResources.length) + ' of ' + filteredResources.length}</label>
       <button onClick={prevPage}>prev</button>
       <button onClick={nextPage}>next</button>
-      <TableContainer>
+      <TableContainer className='mt-3'>
         <table className="table table-primary table-striped">
           <thead className='thead-dark'>
             <tr>
@@ -159,7 +165,7 @@ export default function ResourceList() {
         </table>
         {/* <ol>{resources.map((resource) => <li key={resource.identifier}>{JSON.stringify(resource)}</li>)}</ol> */}
       </TableContainer>
-      <label>{((pageState.pageNumber - 1) * pageState.per_page + 1) + ' - ' + (Math.min(pageState.pageNumber * pageState.per_page, filteredResources.length)) + ' of ' + filteredResources.length}</label>
+      <label className='ps-3 mt-1'>{((pageState.pageNumber - 1) * pageState.per_page + 1) + ' - ' + ((pageState.pageNumber - 1) * pageState.per_page + filteredResources.length) + ' of ' + filteredResources.length}</label>
       <button onClick={prevPage}>prev</button>
       <button onClick={nextPage}>next</button>
     </div>

diff --git a/app/javascript/components/resources/SearchBar.jsx b/app/javascript/components/resources/SearchBar.jsx
@@ -2,25 +2,36 @@ import React, {useRef} from 'react';
 
 // const STATUSES = [1, 2, 3, 4];
 
-export default function SearchBar({filterChoices, filterDefault, searchDefault, onSearch, onFilter}) {
+export default function SearchBar({filterChoices, filterDefault, searchDefault, perPageDefault, onSearch, onFilter, onPerPageSet}) {
   const identifierInput = useRef();
+  const perPageInput = useRef();
 
   return (
     <div>
-      <p>
-        <label>Filter by status: </label>
-        <select name="status" value={filterDefault} onChange={(event) => {return onFilter(event.target.value)}}>
-          <option key={-1} value={'Any'}>Any</option> 
-          {filterChoices.map((status) => {
-            return <option key={filterChoices.indexOf(status)} value={status + ''}>{status}</option>
-          })}
-        </select>
-        <label> </label>
-        <label>Search for Identifier: </label>
-        <input ref={identifierInput} defaultValue={searchDefault}/>
-        <label> </label>
-        <button onClick={() => onSearch(identifierInput.current.value)}>search</button>
-      </p>
+      <div className='input-group input-group-sm'>
+      <div className='ps-3'>          <label>Filter by status: </label>
+          <select name="status" value={filterDefault} onChange={(event) => {return onFilter(event.target.value)}}>
+            <option key={-1} value={'Any'}>Any</option> 
+            {filterChoices.map((status) => {
+              return <option key={filterChoices.indexOf(status)} value={status + ''}>{status}</option>
+            })}
+          </select>
+          <label> </label>
+        </div>
+        <div className='ps-3'>
+          <label>Search for Identifier: </label>
+          <input ref={identifierInput} defaultValue={searchDefault}/>
+          <label> </label>
+          <button onClick={() => onSearch(identifierInput.current.value)}>search</button>
+          <label> </label>
+        </div>
+        <div className='ps-3'>
+          <label>Results per Page: </label>
+          <input ref={perPageInput} defaultValue={perPageDefault} className='w-25'/>
+          <label> </label>
+          <button onClick={() => onPerPageSet(perPageInput.current.value)}>set</button>
+        </div>
+      </div>
     </div>
   )
 }