adjustable results limit

pull/11/head
Dan Gowans 2025-04-25 13:03:05 -04:00
parent a4522ec4d0
commit c330dff849
6 changed files with 109 additions and 64 deletions

View File

@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
const sunrise = exports.sunrise; const sunrise = exports.sunrise;
const searchFilterFormElement = document.querySelector('#form--searchFilters'); const searchFilterFormElement = document.querySelector('#form--searchFilters');
const searchResultsContainerElement = document.querySelector('#container--searchResults'); 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'); const offsetElement = document.querySelector('#searchFilter--offset');
function renderBurialSites(rawResponseJSON) { function renderBurialSites(rawResponseJSON) {
const responseJSON = rawResponseJSON; const responseJSON = rawResponseJSON;
@ -51,7 +51,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
</tr></thead> </tr></thead>
<table>`; <table>`;
// eslint-disable-next-line no-unsanitized/method // 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 searchResultsContainerElement
.querySelector('table') .querySelector('table')
?.append(resultsTbodyElement); ?.append(resultsTbodyElement);
@ -72,11 +72,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
getBurialSites(); getBurialSites();
} }
function previousAndGetBurialSites() { 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(); getBurialSites();
} }
function nextAndGetBurialSites() { 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(); getBurialSites();
} }
const filterElements = searchFilterFormElement.querySelectorAll('input, select'); const filterElements = searchFilterFormElement.querySelectorAll('input, select');

View File

@ -18,10 +18,10 @@ declare const exports: Record<string, unknown>
'#container--searchResults' '#container--searchResults'
) as HTMLElement ) as HTMLElement
const limit = Number.parseInt( const limitElement = document.querySelector(
(document.querySelector('#searchFilter--limit') as HTMLInputElement).value, '#searchFilter--limit'
10 ) as HTMLSelectElement
)
const offsetElement = document.querySelector( const offsetElement = document.querySelector(
'#searchFilter--offset' '#searchFilter--offset'
) as HTMLInputElement ) as HTMLInputElement
@ -95,7 +95,7 @@ declare const exports: Record<string, unknown>
searchResultsContainerElement.insertAdjacentHTML( searchResultsContainerElement.insertAdjacentHTML(
'beforeend', 'beforeend',
sunrise.getSearchResultsPagerHTML( sunrise.getSearchResultsPagerHTML(
limit, Number.parseInt(limitElement.value, 10),
responseJSON.offset, responseJSON.offset,
responseJSON.count responseJSON.count
) )
@ -134,7 +134,8 @@ declare const exports: Record<string, unknown>
function previousAndGetBurialSites(): void { function previousAndGetBurialSites(): void {
offsetElement.value = Math.max( offsetElement.value = Math.max(
Number.parseInt(offsetElement.value, 10) - limit, Number.parseInt(offsetElement.value, 10) -
Number.parseInt(limitElement.value, 10),
0 0
).toString() ).toString()
getBurialSites() getBurialSites()
@ -142,7 +143,8 @@ declare const exports: Record<string, unknown>
function nextAndGetBurialSites(): void { function nextAndGetBurialSites(): void {
offsetElement.value = ( offsetElement.value = (
Number.parseInt(offsetElement.value, 10) + limit Number.parseInt(offsetElement.value, 10) +
Number.parseInt(limitElement.value, 10)
).toString() ).toString()
getBurialSites() getBurialSites()
} }

View File

@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
const sunrise = exports.sunrise; const sunrise = exports.sunrise;
const searchFilterFormElement = document.querySelector('#form--searchFilters'); const searchFilterFormElement = document.querySelector('#form--searchFilters');
const searchResultsContainerElement = document.querySelector('#container--searchResults'); 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'); const offsetElement = document.querySelector('#searchFilter--offset');
// eslint-disable-next-line complexity // eslint-disable-next-line complexity
function renderContracts(rawResponseJSON) { function renderContracts(rawResponseJSON) {
@ -129,7 +129,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
.querySelector('table') .querySelector('table')
?.append(resultsTbodyElement); ?.append(resultsTbodyElement);
// eslint-disable-next-line no-unsanitized/method // 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 searchResultsContainerElement
.querySelector("button[data-page='previous']") .querySelector("button[data-page='previous']")
?.addEventListener('click', previousAndGetContracts); ?.addEventListener('click', previousAndGetContracts);
@ -147,11 +147,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
getContracts(); getContracts();
} }
function previousAndGetContracts() { 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(); getContracts();
} }
function nextAndGetContracts() { 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(); getContracts();
} }
const filterElements = searchFilterFormElement.querySelectorAll('input, select'); const filterElements = searchFilterFormElement.querySelectorAll('input, select');

View File

@ -18,10 +18,9 @@ declare const exports: Record<string, unknown>
'#container--searchResults' '#container--searchResults'
) as HTMLElement ) as HTMLElement
const limit = Number.parseInt( const limitElement = document.querySelector(
(document.querySelector('#searchFilter--limit') as HTMLInputElement).value, '#searchFilter--limit'
10 ) as HTMLSelectElement
)
const offsetElement = document.querySelector( const offsetElement = document.querySelector(
'#searchFilter--offset' '#searchFilter--offset'
@ -202,7 +201,7 @@ declare const exports: Record<string, unknown>
searchResultsContainerElement.insertAdjacentHTML( searchResultsContainerElement.insertAdjacentHTML(
'beforeend', 'beforeend',
sunrise.getSearchResultsPagerHTML( sunrise.getSearchResultsPagerHTML(
limit, Number.parseInt(limitElement.value, 10),
responseJSON.offset, responseJSON.offset,
responseJSON.count responseJSON.count
) )
@ -237,7 +236,8 @@ declare const exports: Record<string, unknown>
function previousAndGetContracts(): void { function previousAndGetContracts(): void {
offsetElement.value = Math.max( offsetElement.value = Math.max(
Number.parseInt(offsetElement.value, 10) - limit, Number.parseInt(offsetElement.value, 10) -
Number.parseInt(limitElement.value, 10),
0 0
).toString() ).toString()
getContracts() getContracts()
@ -245,7 +245,8 @@ declare const exports: Record<string, unknown>
function nextAndGetContracts(): void { function nextAndGetContracts(): void {
offsetElement.value = ( offsetElement.value = (
Number.parseInt(offsetElement.value, 10) + limit Number.parseInt(offsetElement.value, 10) +
Number.parseInt(limitElement.value, 10)
).toString() ).toString()
getContracts() getContracts()
} }

View File

@ -17,25 +17,45 @@
</ul> </ul>
</nav> </nav>
<h1 class="title is-1"> <form id="form--searchFilters">
Find a Burial Site <div class="columns is-vcentered is-mobile">
</h1> <div class="column">
<h1 class="title is-1">
<% if (user.userProperties.canUpdate) { %> Find a Burial Site
<div class="fixed-container is-fixed-bottom-right mx-4 my-4 has-text-right is-hidden-print"> </h1>
<a class="button is-circle is-primary has-tooltip-left" </div>
data-tooltip="Create a New Burial Site" <div class="column has-text-right is-narrow">
href="<%= urlPrefix %>/burialSites/new" <div class="field has-addons">
accesskey="n"> <div class="control">
<i class="fas fa-plus" aria-hidden="true"></i> <label class="button is-small is-static" for="searchFilter--limit">Results</label>
<span class="sr-only">Create a New Burial Site</span> </div>
</a> <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>
<% } %>
<div class="box"> <% if (user.userProperties.canUpdate) { %>
<form id="form--searchFilters"> <div class="fixed-container is-fixed-bottom-right mx-4 my-4 has-text-right is-hidden-print">
<input id="searchFilter--limit" name="limit" type="hidden" value="100" /> <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" /> <input id="searchFilter--offset" name="offset" type="hidden" value="0" />
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
@ -121,10 +141,10 @@
</div> </div>
</div> </div>
</div> </div>
</form> </div>
</div> </form>
<div id="container--searchResults"></div> <div class="mt-5" id="container--searchResults"></div>
</div> </div>
</div> </div>

View File

@ -20,25 +20,45 @@
</ul> </ul>
</nav> </nav>
<h1 class="title is-1"> <form id="form--searchFilters">
Find a Contract <div class="columns is-vcentered is-mobile">
</h1> <div class="column">
<h1 class="title is-1">
<% if (user.userProperties.canUpdate) { %> Find a Contract
<div class="fixed-container is-fixed-bottom-right mx-4 my-4 has-text-right is-hidden-print"> </h1>
<a class="button is-circle is-primary has-tooltip-left" </div>
data-tooltip="Create a New Contract" <div class="column has-text-right is-narrow">
href="<%= urlPrefix %>/contracts/new" <div class="field has-addons">
accesskey="n"> <div class="control">
<i class="fas fa-plus" aria-hidden="true"></i> <label class="button is-small is-static" for="searchFilter--limit">Results</label>
<span class="sr-only">Create a New Contract</span> </div>
</a> <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>
<% } %>
<div class="box"> <% if (user.userProperties.canUpdate) { %>
<form id="form--searchFilters"> <div class="fixed-container is-fixed-bottom-right mx-4 my-4 has-text-right is-hidden-print">
<input id="searchFilter--limit" name="limit" type="hidden" value="100" /> <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" /> <input id="searchFilter--offset" name="offset" type="hidden" value="0" />
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
@ -131,7 +151,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<div class="field"> <div class="field">
@ -170,11 +189,10 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</form> </form>
</div>
<div id="container--searchResults"></div> <div class="mt-5" id="container--searchResults"></div>
</div> </div>
</div> </div>