adjustable results limit
parent
a4522ec4d0
commit
c330dff849
|
|
@ -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');
|
||||||
|
|
|
||||||
|
|
@ -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()
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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');
|
||||||
|
|
|
||||||
|
|
@ -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()
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue