zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-08-05 17:28:31 +02:00
Code Issues Projects Releases Packages Wiki Activity

UI tweaks

Browse source
This commit is contained in:
Rachid Mrad 2024-06-07 11:46:01 -04:00
parent dfb2168e10
commit 4847570a28
No known key found for this signature in database
2 changed files with 45 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

62
src/registrar/assets/js/get-gov.js
View file

@ -1019,6 +1019,22 @@ function updatePagination(itemName, paginationSelector, counterSelector, headerA
}
}
/**
* Hide element
*
*/
const hideElement = (element) => {
element.classList.add('display-none');
};
/**
* Show element
*
*/
const showElement = (element) => {
element.classList.remove('display-none');
};
/**
* A helper that toggles content/ no content/ no search results
*
@ -1026,8 +1042,6 @@ function updatePagination(itemName, paginationSelector, counterSelector, headerA
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 = '';
@ -1069,20 +1083,21 @@ const unsetHeader = (header) => {
*
*/
document.addEventListener('DOMContentLoaded', function() {
let domainsWrapper = document.querySelector('.domains__table-wrapper');
const domainsWrapper = document.querySelector('.domains__table-wrapper');
if (domainsWrapper) {
let currentSortBy = 'id';
let currentOrder = 'asc';
let noDomainsWrapper = document.querySelector('.domains__no-data');
let noSearchResultsWrapper = document.querySelector('.domains__no-search-results');
const noDomainsWrapper = document.querySelector('.domains__no-data');
const noSearchResultsWrapper = document.querySelector('.domains__no-search-results');
let hasLoaded = false;
let currentSearchTerm = ''
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 searchTermHolder = document.querySelector('.domains__search-term');
const domainsSearchInput = document.getElementById('domains__search-field');
const domainsSearchSubmit = document.getElementById('domains__search-field-submit');
const tableHeaders = document.querySelectorAll('.domains__table th[data-sortable]');
const tableAnnouncementRegion = document.querySelector('.domains__table-wrapper .usa-table__announcement-region');
const searchTermHolder = document.querySelector('.domains__search-term');
const resetButton = document.querySelector('.domains__reset-button');
/**
* Loads rows in the domains list, as well as updates pagination around the domains list
@ -1197,6 +1212,7 @@ document.addEventListener('DOMContentLoaded', function() {
domainsSearchSubmit.addEventListener('click', function(e) {
e.preventDefault();
currentSearchTerm = domainsSearchInput.value;
showElement(resetButton);
loadDomains(1, 'id', 'asc');
resetheaders();
})
@ -1213,11 +1229,12 @@ document.addEventListener('DOMContentLoaded', function() {
function resetSearch() {
domainsSearchInput.value = '';
currentSearchTerm = '';
hideElement(resetButton);
loadDomains(1, 'id', 'asc', hasLoaded, '');
resetheaders();
}
resetButton = document.querySelector('.domains__reset-button');
if (resetButton) {
resetButton.addEventListener('click', function() {
resetSearch();
@ -1249,21 +1266,22 @@ const utcDateString = (dateString) => {
*
*/
document.addEventListener('DOMContentLoaded', function() {
let domainRequestsSectionWrapper = document.querySelector('.domain-requests');
let domainRequestsWrapper = document.querySelector('.domain-requests__table-wrapper');
const domainRequestsSectionWrapper = document.querySelector('.domain-requests');
const domainRequestsWrapper = document.querySelector('.domain-requests__table-wrapper');
if (domainRequestsWrapper) {
let currentSortBy = 'id';
let currentOrder = 'asc';
let noDomainRequestsWrapper = document.querySelector('.domain-requests__no-data');
let noSearchResultsWrapper = document.querySelector('.domain-requests__no-search-results');
const noDomainRequestsWrapper = document.querySelector('.domain-requests__no-data');
const noSearchResultsWrapper = document.querySelector('.domain-requests__no-search-results');
let hasLoaded = false;
let currentSearchTerm = ''
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 searchTermHolder = document.querySelector('.domain-requests__search-term');
const domainRequestsSearchInput = document.getElementById('domain-requests__search-field');
const domainRequestsSearchSubmit = document.getElementById('domain-requests__search-field-submit');
const tableHeaders = document.querySelectorAll('.domain-requests__table th[data-sortable]');
const tableAnnouncementRegion = document.querySelector('.domain-requests__table-wrapper .usa-table__announcement-region');
const searchTermHolder = document.querySelector('.domain-requests__search-term');
const resetButton = document.querySelector('.domain-requests__reset-button');
/**
* 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.
@ -1543,6 +1561,7 @@ document.addEventListener('DOMContentLoaded', function() {
domainRequestsSearchSubmit.addEventListener('click', function(e) {
e.preventDefault();
currentSearchTerm = domainRequestsSearchInput.value;
showElement(resetButton);
loadDomainRequests(1, 'id', 'asc');
resetheaders();
})
@ -1559,11 +1578,12 @@ document.addEventListener('DOMContentLoaded', function() {
function resetSearch() {
domainRequestsSearchInput.value = '';
currentSearchTerm = '';
hideElement(resetButton);
loadDomainRequests(1, 'id', 'asc', hasLoaded, '');
resetheaders();
}
resetButton = document.querySelector('.domain-requests__reset-button');
if (resetButton) {
resetButton.addEventListener('click', function() {
resetSearch();

8
src/registrar/templates/home.html
View file

@ -35,7 +35,7 @@
<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">
<button class="usa-button usa-button--unstyled margin-right-2 domains__reset-button display-none" type="button">
Reset
</button>
<label class="usa-sr-only" for="domains__search-field">Search</label>
@ -94,7 +94,7 @@
</p>
</div>
<div class="domains__no-search-results display-none">
<p>No results found for "<span class="domains__search-term"></span>".</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">
@ -115,7 +115,7 @@
<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">
<button class="usa-button usa-button--unstyled margin-right-2 domain-requests__reset-button display-none" type="button">
Reset
</button>
<label class="usa-sr-only" for="domain-requests__search-field">Search</label>
@ -162,7 +162,7 @@
<p>You haven't requested any domains.</p>
</div>
<div class="domain-requests__no-search-results display-none">
<p>No results found for "<span class="domain-requests__search-term"></span>".</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">