zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-08-15 05:54:11 +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 * 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 updateDisplay = (data, dataWrapper, noDataWrapper, noSearchResultsWrapper, searchTermHolder, currentSearchTerm) => {
const { unfiltered_total, total } = data; const { unfiltered_total, total } = data;
const showElement = (element) => element.classList.remove('display-none');
const hideElement = (element) => element.classList.add('display-none');
if (searchTermHolder) if (searchTermHolder)
searchTermHolder.innerHTML = ''; searchTermHolder.innerHTML = '';
@ -1069,20 +1083,21 @@ const unsetHeader = (header) => {
* *
*/ */
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
let domainsWrapper = document.querySelector('.domains__table-wrapper'); const domainsWrapper = document.querySelector('.domains__table-wrapper');
if (domainsWrapper) { if (domainsWrapper) {
let currentSortBy = 'id'; let currentSortBy = 'id';
let currentOrder = 'asc'; let currentOrder = 'asc';
let noDomainsWrapper = document.querySelector('.domains__no-data'); const noDomainsWrapper = document.querySelector('.domains__no-data');
let noSearchResultsWrapper = document.querySelector('.domains__no-search-results'); const noSearchResultsWrapper = document.querySelector('.domains__no-search-results');
let hasLoaded = false; let hasLoaded = false;
let currentSearchTerm = '' let currentSearchTerm = ''
let domainsSearchInput = document.getElementById('domains__search-field'); const domainsSearchInput = document.getElementById('domains__search-field');
let domainsSearchSubmit = document.getElementById('domains__search-field-submit'); const domainsSearchSubmit = document.getElementById('domains__search-field-submit');
let tableHeaders = document.querySelectorAll('.domains__table th[data-sortable]'); const tableHeaders = document.querySelectorAll('.domains__table th[data-sortable]');
let tableAnnouncementRegion = document.querySelector('.domains__table-wrapper .usa-table__announcement-region'); const tableAnnouncementRegion = document.querySelector('.domains__table-wrapper .usa-table__announcement-region');
let searchTermHolder = document.querySelector('.domains__search-term'); 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 * 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) { domainsSearchSubmit.addEventListener('click', function(e) {
e.preventDefault(); e.preventDefault();
currentSearchTerm = domainsSearchInput.value; currentSearchTerm = domainsSearchInput.value;
showElement(resetButton);
loadDomains(1, 'id', 'asc'); loadDomains(1, 'id', 'asc');
resetheaders(); resetheaders();
}) })
@ -1213,11 +1229,12 @@ document.addEventListener('DOMContentLoaded', function() {
function resetSearch() { function resetSearch() {
domainsSearchInput.value = ''; domainsSearchInput.value = '';
currentSearchTerm = '';
hideElement(resetButton);
loadDomains(1, 'id', 'asc', hasLoaded, ''); loadDomains(1, 'id', 'asc', hasLoaded, '');
resetheaders(); resetheaders();
} }
resetButton = document.querySelector('.domains__reset-button');
if (resetButton) { if (resetButton) {
resetButton.addEventListener('click', function() { resetButton.addEventListener('click', function() {
resetSearch(); resetSearch();
@ -1249,21 +1266,22 @@ const utcDateString = (dateString) => {
* *
*/ */
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
let domainRequestsSectionWrapper = document.querySelector('.domain-requests'); const domainRequestsSectionWrapper = document.querySelector('.domain-requests');
let domainRequestsWrapper = document.querySelector('.domain-requests__table-wrapper'); const domainRequestsWrapper = document.querySelector('.domain-requests__table-wrapper');
if (domainRequestsWrapper) { if (domainRequestsWrapper) {
let currentSortBy = 'id'; let currentSortBy = 'id';
let currentOrder = 'asc'; let currentOrder = 'asc';
let noDomainRequestsWrapper = document.querySelector('.domain-requests__no-data'); const noDomainRequestsWrapper = document.querySelector('.domain-requests__no-data');
let noSearchResultsWrapper = document.querySelector('.domain-requests__no-search-results'); const noSearchResultsWrapper = document.querySelector('.domain-requests__no-search-results');
let hasLoaded = false; let hasLoaded = false;
let currentSearchTerm = '' let currentSearchTerm = ''
let domainRequestsSearchInput = document.getElementById('domain-requests__search-field'); const domainRequestsSearchInput = document.getElementById('domain-requests__search-field');
let domainRequestsSearchSubmit = document.getElementById('domain-requests__search-field-submit'); const domainRequestsSearchSubmit = document.getElementById('domain-requests__search-field-submit');
let tableHeaders = document.querySelectorAll('.domain-requests__table th[data-sortable]'); const tableHeaders = document.querySelectorAll('.domain-requests__table th[data-sortable]');
let tableAnnouncementRegion = document.querySelector('.domain-requests__table-wrapper .usa-table__announcement-region'); const tableAnnouncementRegion = document.querySelector('.domain-requests__table-wrapper .usa-table__announcement-region');
let searchTermHolder = document.querySelector('.domain-requests__search-term'); 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. * 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) { domainRequestsSearchSubmit.addEventListener('click', function(e) {
e.preventDefault(); e.preventDefault();
currentSearchTerm = domainRequestsSearchInput.value; currentSearchTerm = domainRequestsSearchInput.value;
showElement(resetButton);
loadDomainRequests(1, 'id', 'asc'); loadDomainRequests(1, 'id', 'asc');
resetheaders(); resetheaders();
}) })
@ -1559,11 +1578,12 @@ document.addEventListener('DOMContentLoaded', function() {
function resetSearch() { function resetSearch() {
domainRequestsSearchInput.value = ''; domainRequestsSearchInput.value = '';
currentSearchTerm = '';
hideElement(resetButton);
loadDomainRequests(1, 'id', 'asc', hasLoaded, ''); loadDomainRequests(1, 'id', 'asc', hasLoaded, '');
resetheaders(); resetheaders();
} }
resetButton = document.querySelector('.domain-requests__reset-button');
if (resetButton) { if (resetButton) {
resetButton.addEventListener('click', function() { resetButton.addEventListener('click', function() {
resetSearch(); 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"> <section aria-label="Domains search component" class="flex-6 margin-y-2">
<form class="usa-search usa-search--small" method="POST" role="search"> <form class="usa-search usa-search--small" method="POST" role="search">
{% csrf_token %} {% 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 Reset
</button> </button>
<label class="usa-sr-only" for="domains__search-field">Search</label> <label class="usa-sr-only" for="domains__search-field">Search</label>
@ -94,7 +94,7 @@
</p> </p>
</div> </div>
<div class="domains__no-search-results display-none"> <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> </div>
</section> </section>
<nav aria-label="Pagination" class="usa-pagination flex-justify" id="domains-pagination"> <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"> <section aria-label="Domain requests search component" class="flex-6 margin-y-2">
<form class="usa-search usa-search--small" method="POST" role="search"> <form class="usa-search usa-search--small" method="POST" role="search">
{% csrf_token %} {% 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 Reset
</button> </button>
<label class="usa-sr-only" for="domain-requests__search-field">Search</label> <label class="usa-sr-only" for="domain-requests__search-field">Search</label>
@ -162,7 +162,7 @@
<p>You haven't requested any domains.</p> <p>You haven't requested any domains.</p>
</div> </div>
<div class="domain-requests__no-search-results display-none"> <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> </div>
</section> </section>
<nav aria-label="Pagination" class="usa-pagination flex-justify" id="domain-requests-pagination"> <nav aria-label="Pagination" class="usa-pagination flex-justify" id="domain-requests-pagination">