zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-08-13 21:19:42 +02:00
Code Issues Projects Releases Packages Wiki Activity

tweaks

Browse source
This commit is contained in:
Rachid Mrad 2024-06-28 17:02:42 -04:00
commit 1ac097e13c
No known key found for this signature in database
4 changed files with 23 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1128,7 +1128,7 @@ document.addEventListener('DOMContentLoaded', function() {
let currentOrder = 'asc'; let currentOrder = 'asc';
const noDomainsWrapper = document.querySelector('.domains__no-data'); const noDomainsWrapper = document.querySelector('.domains__no-data');
const noSearchResultsWrapper = document.querySelector('.domains__no-search-results'); const noSearchResultsWrapper = document.querySelector('.domains__no-search-results');
let hasLoaded = false; let scrollToTable = false;
let currentStatus = []; let currentStatus = [];
let currentSearchTerm = ''; let currentSearchTerm = '';
const domainsSearchInput = document.getElementById('domains__search-field'); const domainsSearchInput = document.getElementById('domains__search-field');
@ -1147,10 +1147,10 @@ document.addEventListener('DOMContentLoaded', function() {
* @param {*} page - the page number of the results (starts with 1) * @param {*} page - the page number of the results (starts with 1)
* @param {*} sortBy - the sort column option * @param {*} sortBy - the sort column option
* @param {*} order - the sort order {asc, desc} * @param {*} order - the sort order {asc, desc}
* @param {*} loaded - control for the scrollToElement functionality * @param {*} scroll - control for the scrollToElement functionality
* @param {*} searchTerm - the search term * @param {*} searchTerm - the search term
*/ */
function loadDomains(page, sortBy = currentSortBy, order = currentOrder, loaded = hasLoaded, status = currentStatus, searchTerm = currentSearchTerm) { function loadDomains(page, sortBy = currentSortBy, order = currentOrder, scroll = scrollToTable, status = currentStatus, searchTerm = currentSearchTerm) {
// fetch json of page of domains, given params // fetch json of page of domains, given params
fetch(`/get-domains-json/?page=${page}&sort_by=${sortBy}&order=${order}&status=${status}&search_term=${searchTerm}`) fetch(`/get-domains-json/?page=${page}&sort_by=${sortBy}&order=${order}&status=${status}&search_term=${searchTerm}`)
.then(response => response.json()) .then(response => response.json())
@ -1210,9 +1210,9 @@ document.addEventListener('DOMContentLoaded', function() {
initializeTooltips(); initializeTooltips();
// Do not scroll on first page load // Do not scroll on first page load
if (loaded) if (scroll)
ScrollToElement('class', 'domains'); ScrollToElement('class', 'domains');
hasLoaded = true; scrollToTable = true;
// update pagination // update pagination
updatePagination( updatePagination(
@ -1291,6 +1291,9 @@ document.addEventListener('DOMContentLoaded', function() {
showElement(resetFiltersButton); showElement(resetFiltersButton);
} }
// Disable the auto scroll
scrollToTable = false;
// Call loadDomains with updated status // Call loadDomains with updated status
loadDomains(1, 'id', 'asc'); loadDomains(1, 'id', 'asc');
resetHeaders(); resetHeaders();
@ -1398,13 +1401,12 @@ document.addEventListener('DOMContentLoaded', function() {
let currentOrder = 'asc'; let currentOrder = 'asc';
const noDomainRequestsWrapper = document.querySelector('.domain-requests__no-data'); const noDomainRequestsWrapper = document.querySelector('.domain-requests__no-data');
const noSearchResultsWrapper = document.querySelector('.domain-requests__no-search-results'); const noSearchResultsWrapper = document.querySelector('.domain-requests__no-search-results');
let hasLoaded = false; let scrollToTable = false;
let currentSearchTerm = ''; let currentSearchTerm = '';
const domainRequestsSearchInput = document.getElementById('domain-requests__search-field'); const domainRequestsSearchInput = document.getElementById('domain-requests__search-field');
const domainRequestsSearchSubmit = document.getElementById('domain-requests__search-field-submit'); const domainRequestsSearchSubmit = document.getElementById('domain-requests__search-field-submit');
const tableHeaders = document.querySelectorAll('.domain-requests__table th[data-sortable]'); const tableHeaders = document.querySelectorAll('.domain-requests__table th[data-sortable]');
const tableAnnouncementRegion = document.querySelector('.domain-requests__table-wrapper .usa-table__announcement-region'); const tableAnnouncementRegion = document.querySelector('.domain-requests__table-wrapper .usa-table__announcement-region');
// const searchTermHolder = document.querySelector('.domain-requests__search-term');
const resetSearchButton = document.querySelector('.domain-requests__reset-search'); const resetSearchButton = document.querySelector('.domain-requests__reset-search');
/** /**
@ -1435,7 +1437,7 @@ document.addEventListener('DOMContentLoaded', function() {
throw new Error(`HTTP error! status: ${response.status}`); throw new Error(`HTTP error! status: ${response.status}`);
} }
// Update data and UI // Update data and UI
loadDomainRequests(pageToDisplay, currentSortBy, currentOrder, hasLoaded, currentSearchTerm); loadDomainRequests(pageToDisplay, currentSortBy, currentOrder, scrollToTable, currentSearchTerm);
}) })
.catch(error => console.error('Error fetching domain requests:', error)); .catch(error => console.error('Error fetching domain requests:', error));
} }
@ -1451,10 +1453,10 @@ document.addEventListener('DOMContentLoaded', function() {
* @param {*} page - the page number of the results (starts with 1) * @param {*} page - the page number of the results (starts with 1)
* @param {*} sortBy - the sort column option * @param {*} sortBy - the sort column option
* @param {*} order - the sort order {asc, desc} * @param {*} order - the sort order {asc, desc}
* @param {*} loaded - control for the scrollToElement functionality * @param {*} scroll - control for the scrollToElement functionality
* @param {*} searchTerm - the search term * @param {*} searchTerm - the search term
*/ */
function loadDomainRequests(page, sortBy = currentSortBy, order = currentOrder, loaded = hasLoaded, searchTerm = currentSearchTerm) { function loadDomainRequests(page, sortBy = currentSortBy, order = currentOrder, scroll = scrollToTable, searchTerm = currentSearchTerm) {
// fetch json of page of domain requests, given params // fetch json of page of domain requests, given params
fetch(`/get-domain-requests-json/?page=${page}&sort_by=${sortBy}&order=${order}&search_term=${searchTerm}`) fetch(`/get-domain-requests-json/?page=${page}&sort_by=${sortBy}&order=${order}&search_term=${searchTerm}`)
.then(response => response.json()) .then(response => response.json())
@ -1652,9 +1654,9 @@ document.addEventListener('DOMContentLoaded', function() {
}); });
// Do not scroll on first page load // Do not scroll on first page load
if (loaded) if (scroll)
ScrollToElement('class', 'domain-requests'); ScrollToElement('class', 'domain-requests');
hasLoaded = true; scrollToTable = true;
// update the pagination after the domain requests list is updated // update the pagination after the domain requests list is updated
updatePagination( updatePagination(

4
src/registrar/assets/sass/_theme/_accordions.scss
View file

@ -16,6 +16,10 @@
z-index: 1; z-index: 1;
top: 33.88px; top: 33.88px;
left: 0; left: 0;
border-radius: 4px;
border: solid 1px color('base-lighter');
padding: units(2) units(2) units(3) units(2);
width: max-content;
} }
h2 { h2 {
font-size: size('body', 'sm'); font-size: size('body', 'sm');

4
src/registrar/assets/sass/_theme/_base.scss
View file

@ -212,6 +212,6 @@ abbr[title] {
color: #{$dhs-dark-gray-85}; color: #{$dhs-dark-gray-85};
} }
.width-145px { .padding--8-12-9-12 {
width: 145px; padding: 8px 12px 9px 12px !important;
} }

6
src/registrar/templates/includes/domains_table.html
View file

@ -40,7 +40,7 @@
<div class="usa-accordion__heading"> <div class="usa-accordion__heading">
<button <button
type="button" type="button"
class="usa-button usa-button--small usa-button--outline usa-button--filter usa-accordion__button" class="usa-button usa-button--small padding--8-12-9-12 usa-button--outline usa-button--filter usa-accordion__button"
aria-expanded="false" aria-expanded="false"
aria-controls="filter-status" aria-controls="filter-status"
> >
@ -53,7 +53,7 @@
<div id="filter-status" class="usa-accordion__content usa-prose shadow-1"> <div id="filter-status" class="usa-accordion__content usa-prose shadow-1">
<h2>Status</h2> <h2>Status</h2>
<fieldset class="usa-fieldset margin-top-0"> <fieldset class="usa-fieldset margin-top-0">
<legend class="usa-legend width-145px">Select to apply <span class="sr-only">status</span> filter</legend> <legend class="usa-legend">Select to apply <span class="sr-only">status</span> filter</legend>
<div class="usa-checkbox"> <div class="usa-checkbox">
<input <input
class="usa-checkbox__input" class="usa-checkbox__input"
@ -119,7 +119,7 @@
</div> </div>
<button <button
type="button" type="button"
class="usa-button usa-button--small usa-button--outline usa-button--filter domains__reset-filters display-none" class="usa-button usa-button--small padding--8-12-9-12 usa-button--outline usa-button--filter domains__reset-filters display-none"
> >
Clear filters Clear filters
<svg class="usa-icon top-1px" aria-hidden="true" focusable="false" role="img" width="24"> <svg class="usa-icon top-1px" aria-hidden="true" focusable="false" role="img" width="24">