From c330dff8494cc4d8ee2ce6511477a71e44c09f2d Mon Sep 17 00:00:00 2001
From: Dan Gowans <dangowans@users.noreply.github.com>
Date: Fri, 25 Apr 2025 13:03:05 -0400
Subject: [PATCH] adjustable results limit

---
 public/javascripts/burialSite.search.js | 10 ++--
 public/javascripts/burialSite.search.ts | 16 ++++---
 public/javascripts/contract.search.js   | 10 ++--
 public/javascripts/contract.search.ts   | 15 +++---
 views/burialSite-search.ejs             | 60 ++++++++++++++++--------
 views/contract-search.ejs               | 62 ++++++++++++++++---------
 6 files changed, 109 insertions(+), 64 deletions(-)

diff --git a/public/javascripts/burialSite.search.js b/public/javascripts/burialSite.search.js
index 8fd0a58d..85cf7ee7 100644
--- a/public/javascripts/burialSite.search.js
+++ b/public/javascripts/burialSite.search.js
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
     const sunrise = exports.sunrise;
     const searchFilterFormElement = document.querySelector('#form--searchFilters');
     const searchResultsContainerElement = document.querySelector('#container--searchResults');
-    const limit = Number.parseInt(document.querySelector('#searchFilter--limit').value, 10);
+    const limitElement = document.querySelector('#searchFilter--limit');
     const offsetElement = document.querySelector('#searchFilter--offset');
     function renderBurialSites(rawResponseJSON) {
         const responseJSON = rawResponseJSON;
@@ -51,7 +51,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
       </tr></thead>
       <table>`;
         // eslint-disable-next-line no-unsanitized/method
-        searchResultsContainerElement.insertAdjacentHTML('beforeend', sunrise.getSearchResultsPagerHTML(limit, responseJSON.offset, responseJSON.count));
+        searchResultsContainerElement.insertAdjacentHTML('beforeend', sunrise.getSearchResultsPagerHTML(Number.parseInt(limitElement.value, 10), responseJSON.offset, responseJSON.count));
         searchResultsContainerElement
             .querySelector('table')
             ?.append(resultsTbodyElement);
@@ -72,11 +72,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
         getBurialSites();
     }
     function previousAndGetBurialSites() {
-        offsetElement.value = Math.max(Number.parseInt(offsetElement.value, 10) - limit, 0).toString();
+        offsetElement.value = Math.max(Number.parseInt(offsetElement.value, 10) -
+            Number.parseInt(limitElement.value, 10), 0).toString();
         getBurialSites();
     }
     function nextAndGetBurialSites() {
-        offsetElement.value = (Number.parseInt(offsetElement.value, 10) + limit).toString();
+        offsetElement.value = (Number.parseInt(offsetElement.value, 10) +
+            Number.parseInt(limitElement.value, 10)).toString();
         getBurialSites();
     }
     const filterElements = searchFilterFormElement.querySelectorAll('input, select');
diff --git a/public/javascripts/burialSite.search.ts b/public/javascripts/burialSite.search.ts
index 34e677a5..cddf17f9 100644
--- a/public/javascripts/burialSite.search.ts
+++ b/public/javascripts/burialSite.search.ts
@@ -18,10 +18,10 @@ declare const exports: Record<string, unknown>
     '#container--searchResults'
   ) as HTMLElement
 
-  const limit = Number.parseInt(
-    (document.querySelector('#searchFilter--limit') as HTMLInputElement).value,
-    10
-  )
+  const limitElement = document.querySelector(
+    '#searchFilter--limit'
+  ) as HTMLSelectElement
+
   const offsetElement = document.querySelector(
     '#searchFilter--offset'
   ) as HTMLInputElement
@@ -95,7 +95,7 @@ declare const exports: Record<string, unknown>
     searchResultsContainerElement.insertAdjacentHTML(
       'beforeend',
       sunrise.getSearchResultsPagerHTML(
-        limit,
+        Number.parseInt(limitElement.value, 10),
         responseJSON.offset,
         responseJSON.count
       )
@@ -134,7 +134,8 @@ declare const exports: Record<string, unknown>
 
   function previousAndGetBurialSites(): void {
     offsetElement.value = Math.max(
-      Number.parseInt(offsetElement.value, 10) - limit,
+      Number.parseInt(offsetElement.value, 10) -
+        Number.parseInt(limitElement.value, 10),
       0
     ).toString()
     getBurialSites()
@@ -142,7 +143,8 @@ declare const exports: Record<string, unknown>
 
   function nextAndGetBurialSites(): void {
     offsetElement.value = (
-      Number.parseInt(offsetElement.value, 10) + limit
+      Number.parseInt(offsetElement.value, 10) +
+      Number.parseInt(limitElement.value, 10)
     ).toString()
     getBurialSites()
   }
diff --git a/public/javascripts/contract.search.js b/public/javascripts/contract.search.js
index 2689d226..97b06ec4 100644
--- a/public/javascripts/contract.search.js
+++ b/public/javascripts/contract.search.js
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
     const sunrise = exports.sunrise;
     const searchFilterFormElement = document.querySelector('#form--searchFilters');
     const searchResultsContainerElement = document.querySelector('#container--searchResults');
-    const limit = Number.parseInt(document.querySelector('#searchFilter--limit').value, 10);
+    const limitElement = document.querySelector('#searchFilter--limit');
     const offsetElement = document.querySelector('#searchFilter--offset');
     // eslint-disable-next-line complexity
     function renderContracts(rawResponseJSON) {
@@ -129,7 +129,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
             .querySelector('table')
             ?.append(resultsTbodyElement);
         // eslint-disable-next-line no-unsanitized/method
-        searchResultsContainerElement.insertAdjacentHTML('beforeend', sunrise.getSearchResultsPagerHTML(limit, responseJSON.offset, responseJSON.count));
+        searchResultsContainerElement.insertAdjacentHTML('beforeend', sunrise.getSearchResultsPagerHTML(Number.parseInt(limitElement.value, 10), responseJSON.offset, responseJSON.count));
         searchResultsContainerElement
             .querySelector("button[data-page='previous']")
             ?.addEventListener('click', previousAndGetContracts);
@@ -147,11 +147,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
         getContracts();
     }
     function previousAndGetContracts() {
-        offsetElement.value = Math.max(Number.parseInt(offsetElement.value, 10) - limit, 0).toString();
+        offsetElement.value = Math.max(Number.parseInt(offsetElement.value, 10) -
+            Number.parseInt(limitElement.value, 10), 0).toString();
         getContracts();
     }
     function nextAndGetContracts() {
-        offsetElement.value = (Number.parseInt(offsetElement.value, 10) + limit).toString();
+        offsetElement.value = (Number.parseInt(offsetElement.value, 10) +
+            Number.parseInt(limitElement.value, 10)).toString();
         getContracts();
     }
     const filterElements = searchFilterFormElement.querySelectorAll('input, select');
diff --git a/public/javascripts/contract.search.ts b/public/javascripts/contract.search.ts
index 58e72020..a9dbcba9 100644
--- a/public/javascripts/contract.search.ts
+++ b/public/javascripts/contract.search.ts
@@ -18,10 +18,9 @@ declare const exports: Record<string, unknown>
     '#container--searchResults'
   ) as HTMLElement
 
-  const limit = Number.parseInt(
-    (document.querySelector('#searchFilter--limit') as HTMLInputElement).value,
-    10
-  )
+  const limitElement = document.querySelector(
+    '#searchFilter--limit'
+  ) as HTMLSelectElement
 
   const offsetElement = document.querySelector(
     '#searchFilter--offset'
@@ -202,7 +201,7 @@ declare const exports: Record<string, unknown>
     searchResultsContainerElement.insertAdjacentHTML(
       'beforeend',
       sunrise.getSearchResultsPagerHTML(
-        limit,
+        Number.parseInt(limitElement.value, 10),
         responseJSON.offset,
         responseJSON.count
       )
@@ -237,7 +236,8 @@ declare const exports: Record<string, unknown>
 
   function previousAndGetContracts(): void {
     offsetElement.value = Math.max(
-      Number.parseInt(offsetElement.value, 10) - limit,
+      Number.parseInt(offsetElement.value, 10) -
+        Number.parseInt(limitElement.value, 10),
       0
     ).toString()
     getContracts()
@@ -245,7 +245,8 @@ declare const exports: Record<string, unknown>
 
   function nextAndGetContracts(): void {
     offsetElement.value = (
-      Number.parseInt(offsetElement.value, 10) + limit
+      Number.parseInt(offsetElement.value, 10) +
+      Number.parseInt(limitElement.value, 10)
     ).toString()
     getContracts()
   }
diff --git a/views/burialSite-search.ejs b/views/burialSite-search.ejs
index 8ea0fc3b..be54ebe1 100644
--- a/views/burialSite-search.ejs
+++ b/views/burialSite-search.ejs
@@ -17,25 +17,45 @@
       </ul>
     </nav>
 
-    <h1 class="title is-1">
-      Find a Burial Site
-    </h1>
-
-    <% if (user.userProperties.canUpdate) { %>
-      <div class="fixed-container is-fixed-bottom-right mx-4 my-4 has-text-right is-hidden-print">
-        <a class="button is-circle is-primary has-tooltip-left"
-          data-tooltip="Create a New Burial Site"
-          href="<%= urlPrefix %>/burialSites/new"
-          accesskey="n">
-          <i class="fas fa-plus" aria-hidden="true"></i>
-          <span class="sr-only">Create a New Burial Site</span>
-        </a>
+    <form id="form--searchFilters">
+      <div class="columns is-vcentered is-mobile">
+        <div class="column">
+          <h1 class="title is-1">
+            Find a Burial Site
+          </h1>
+        </div>
+        <div class="column has-text-right is-narrow">
+          <div class="field has-addons">
+            <div class="control">
+              <label class="button is-small is-static" for="searchFilter--limit">Results</label>
+            </div>
+            <div class="control">
+              <div class="select is-small is-fullwidth">
+                <select id="searchFilter--limit" name="limit" aria-label="Results per page">
+                  <option value="50">50</option>
+                  <option value="100" selected>100</option>
+                  <option value="250">250</option>
+                  <option value="500">500</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-    <% } %>
 
-    <div class="box">
-      <form id="form--searchFilters">
-        <input id="searchFilter--limit" name="limit" type="hidden" value="100" />
+      <% if (user.userProperties.canUpdate) { %>
+        <div class="fixed-container is-fixed-bottom-right mx-4 my-4 has-text-right is-hidden-print">
+          <a class="button is-circle is-primary has-tooltip-left"
+            data-tooltip="Create a New Burial Site"
+            href="<%= urlPrefix %>/burialSites/new"
+            accesskey="n">
+            <i class="fas fa-plus" aria-hidden="true"></i>
+            <span class="sr-only">Create a New Burial Site</span>
+          </a>
+        </div>
+      <% } %>
+
+      <div class="box">
         <input id="searchFilter--offset" name="offset" type="hidden" value="0" />
         <div class="columns">
           <div class="column">
@@ -121,10 +141,10 @@
             </div>
           </div>
         </div>
-      </form>
-    </div>
+      </div>
+    </form>
 
-    <div id="container--searchResults"></div>
+    <div class="mt-5" id="container--searchResults"></div>
   </div>
 </div>
 
diff --git a/views/contract-search.ejs b/views/contract-search.ejs
index 5980b4d2..74237e52 100644
--- a/views/contract-search.ejs
+++ b/views/contract-search.ejs
@@ -20,25 +20,45 @@
       </ul>
     </nav>
 
-    <h1 class="title is-1">
-      Find a Contract
-    </h1>
-
-    <% if (user.userProperties.canUpdate) { %>
-      <div class="fixed-container is-fixed-bottom-right mx-4 my-4 has-text-right is-hidden-print">
-        <a class="button is-circle is-primary has-tooltip-left"
-          data-tooltip="Create a New Contract"
-          href="<%= urlPrefix %>/contracts/new"
-          accesskey="n">
-          <i class="fas fa-plus" aria-hidden="true"></i>
-          <span class="sr-only">Create a New Contract</span>
-        </a>
+    <form id="form--searchFilters">
+      <div class="columns is-vcentered is-mobile">
+        <div class="column">
+          <h1 class="title is-1">
+            Find a Contract
+          </h1>
+        </div>
+        <div class="column has-text-right is-narrow">
+          <div class="field has-addons">
+            <div class="control">
+              <label class="button is-small is-static" for="searchFilter--limit">Results</label>
+            </div>
+            <div class="control">
+              <div class="select is-small is-fullwidth">
+                <select id="searchFilter--limit" name="limit" aria-label="Results per page">
+                  <option value="50" selected>50</option>
+                  <option value="100">100</option>
+                  <option value="250">250</option>
+                  <option value="500">500</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-    <% } %>
 
-    <div class="box">
-      <form id="form--searchFilters">
-        <input id="searchFilter--limit" name="limit" type="hidden" value="100" />
+      <% if (user.userProperties.canUpdate) { %>
+        <div class="fixed-container is-fixed-bottom-right mx-4 my-4 has-text-right is-hidden-print">
+          <a class="button is-circle is-primary has-tooltip-left"
+            data-tooltip="Create a New Contract"
+            href="<%= urlPrefix %>/contracts/new"
+            accesskey="n">
+            <i class="fas fa-plus" aria-hidden="true"></i>
+            <span class="sr-only">Create a New Contract</span>
+          </a>
+        </div>
+      <% } %>
+
+      <div class="box">
         <input id="searchFilter--offset" name="offset" type="hidden" value="0" />
         <div class="columns">
           <div class="column">
@@ -131,7 +151,6 @@
             </div>
           </div>
         </div>
-
         <div class="columns">
           <div class="column">
             <div class="field">
@@ -170,11 +189,10 @@
             </div>
           </div>
         </div>
-      
-      </form>
-    </div>
+      </div>
+    </form>
 
-    <div id="container--searchResults"></div>
+    <div class="mt-5" id="container--searchResults"></div>
   </div>
 </div>