mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-08-04 17:01:56 +02:00
tweak display and reset buttons
This commit is contained in:
Rachid Mrad
parent
183da9e138
commit
dfb2168e10
2 changed files with 22 additions and 12 deletions
|
|
@ -933,7 +933,7 @@ function updatePagination(itemName, paginationSelector, counterSelector, headerA
|
|||
// Counter should only be displayed if there is more than 1 item
|
||||
paginationContainer.classList.toggle('display-none', totalItems < 1);
|
||||
|
||||
paginationCounter.innerHTML = `${totalItems} ${itemName}${totalItems > 1 ? 's' : ''}${searchTerm ? ' for ' + searchTerm : ''}`;
|
||||
paginationCounter.innerHTML = `${totalItems} ${itemName}${totalItems > 1 ? 's' : ''}${searchTerm ? ' for ' + '"' + searchTerm + '"' : ''}`;
|
||||
|
||||
if (hasPrevious) {
|
||||
const prevPageItem = document.createElement('li');
|
||||
|
|
@ -1023,11 +1023,13 @@ function updatePagination(itemName, paginationSelector, counterSelector, headerA
|
|||
* A helper that toggles content/ no content/ no search results
|
||||
*
|
||||
*/
|
||||
const updateDisplay = (data, dataWrapper, noDataWrapper, noSearchResultsWrapper) => {
|
||||
const updateDisplay = (data, dataWrapper, noDataWrapper, noSearchResultsWrapper, searchTermHolder, currentSearchTerm) => {
|
||||
const { unfiltered_total, total } = data;
|
||||
|
||||
const showElement = (element) => element.classList.remove('display-none');
|
||||
const hideElement = (element) => element.classList.add('display-none');
|
||||
if (searchTermHolder)
|
||||
searchTermHolder.innerHTML = '';
|
||||
|
||||
if (unfiltered_total) {
|
||||
if (total) {
|
||||
|
|
@ -1035,6 +1037,8 @@ const updateDisplay = (data, dataWrapper, noDataWrapper, noSearchResultsWrapper)
|
|||
hideElement(noSearchResultsWrapper);
|
||||
hideElement(noDataWrapper);
|
||||
} else {
|
||||
if (searchTermHolder)
|
||||
searchTermHolder.innerHTML = currentSearchTerm;
|
||||
hideElement(dataWrapper);
|
||||
showElement(noSearchResultsWrapper);
|
||||
hideElement(noDataWrapper);
|
||||
|
|
@ -1077,7 +1081,8 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
let domainsSearchInput = document.getElementById('domains__search-field');
|
||||
let domainsSearchSubmit = document.getElementById('domains__search-field-submit');
|
||||
let tableHeaders = document.querySelectorAll('.domains__table th[data-sortable]');
|
||||
let tableAnnouncementRegion = document.querySelector('.domains__table-wrapper .usa-table__announcement-region')
|
||||
let tableAnnouncementRegion = document.querySelector('.domains__table-wrapper .usa-table__announcement-region');
|
||||
let searchTermHolder = document.querySelector('.domains__search-term');
|
||||
|
||||
/**
|
||||
* Loads rows in the domains list, as well as updates pagination around the domains list
|
||||
|
|
@ -1099,7 +1104,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
}
|
||||
|
||||
// handle the display of proper messaging in the event that no domains exist in the list or search returns no results
|
||||
updateDisplay(data, domainsWrapper, noDomainsWrapper, noSearchResultsWrapper);
|
||||
updateDisplay(data, domainsWrapper, noDomainsWrapper, noSearchResultsWrapper, searchTermHolder, currentSearchTerm);
|
||||
|
||||
// identify the DOM element where the domain list will be inserted into the DOM
|
||||
const domainList = document.querySelector('.domains__table tbody');
|
||||
|
|
@ -1257,7 +1262,8 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
let domainRequestsSearchInput = document.getElementById('domain-requests__search-field');
|
||||
let domainRequestsSearchSubmit = document.getElementById('domain-requests__search-field-submit');
|
||||
let tableHeaders = document.querySelectorAll('.domain-requests__table th[data-sortable]');
|
||||
let tableAnnouncementRegion = document.querySelector('.domain-requests__table-wrapper .usa-table__announcement-region')
|
||||
let tableAnnouncementRegion = document.querySelector('.domain-requests__table-wrapper .usa-table__announcement-region');
|
||||
let searchTermHolder = document.querySelector('.domain-requests__search-term');
|
||||
|
||||
/**
|
||||
* Delete is actually a POST API that requires a csrf token. The token will be waiting for us in the template as a hidden input.
|
||||
|
|
@ -1313,7 +1319,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
}
|
||||
|
||||
// handle the display of proper messaging in the event that no requests exist in the list or search returns no results
|
||||
updateDisplay(data, domainRequestsWrapper, noDomainRequestsWrapper, noSearchResultsWrapper);
|
||||
updateDisplay(data, domainRequestsWrapper, noDomainRequestsWrapper, noSearchResultsWrapper, searchTermHolder, currentSearchTerm);
|
||||
|
||||
// identify the DOM element where the domain request list will be inserted into the DOM
|
||||
const tbody = document.querySelector('.domain-requests__table tbody');
|
||||
|
|
|
|||
|
|
@ -35,13 +35,16 @@
|
|||
<section aria-label="Domains search component" class="flex-6 margin-y-2">
|
||||
<form class="usa-search usa-search--small" method="POST" role="search">
|
||||
{% csrf_token %}
|
||||
<button class="usa-button usa-button--unstyled margin-right-2 domains__reset-button" type="button">
|
||||
Reset
|
||||
</button>
|
||||
<label class="usa-sr-only" for="domains__search-field">Search</label>
|
||||
<input
|
||||
class="usa-input"
|
||||
id="domains__search-field"
|
||||
type="search"
|
||||
name="search"
|
||||
placeholder="Search domains by name"
|
||||
placeholder="Search by domain name"
|
||||
/>
|
||||
<button class="usa-button" type="submit" id="domains__search-field-submit">
|
||||
<img
|
||||
|
|
@ -91,8 +94,7 @@
|
|||
</p>
|
||||
</div>
|
||||
<div class="domains__no-search-results display-none">
|
||||
<p>Nothing, nada, zilch.</p>
|
||||
<p><button class='usa-button usa-button--unstyled domains__reset-button' type='button'>Reset your search</button> or try a different search term.</p>
|
||||
<p>No results found for "<span class="domains__search-term"></span>".</p>
|
||||
</div>
|
||||
</section>
|
||||
<nav aria-label="Pagination" class="usa-pagination flex-justify" id="domains-pagination">
|
||||
|
|
@ -113,13 +115,16 @@
|
|||
<section aria-label="Domain requests search component" class="flex-6 margin-y-2">
|
||||
<form class="usa-search usa-search--small" method="POST" role="search">
|
||||
{% csrf_token %}
|
||||
<button class="usa-button usa-button--unstyled margin-right-2 domain-requests__reset-button" type="button">
|
||||
Reset
|
||||
</button>
|
||||
<label class="usa-sr-only" for="domain-requests__search-field">Search</label>
|
||||
<input
|
||||
class="usa-input"
|
||||
id="domain-requests__search-field"
|
||||
type="search"
|
||||
name="search"
|
||||
placeholder="Search requests by domain name"
|
||||
placeholder="Search by domain name"
|
||||
/>
|
||||
<button class="usa-button" type="submit" id="domain-requests__search-field-submit">
|
||||
<img
|
||||
|
|
@ -157,8 +162,7 @@
|
|||
<p>You haven't requested any domains.</p>
|
||||
</div>
|
||||
<div class="domain-requests__no-search-results display-none">
|
||||
<p>Nothing, nada, zilch.</p>
|
||||
<p><button class='usa-button usa-button--unstyled domain-requests__reset-button' type='button'>Reset your search</button> or try a different search term.</p>
|
||||
<p>No results found for "<span class="domain-requests__search-term"></span>".</p>
|
||||
</div>
|
||||
</section>
|
||||
<nav aria-label="Pagination" class="usa-pagination flex-justify" id="domain-requests-pagination">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue