mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-07-24 03:30:50 +02:00
add total items, layout tweaks
This commit is contained in:
parent
9586ebffcb
commit
c04b9e2350
4 changed files with 76 additions and 21 deletions
|
@ -879,6 +879,33 @@ function unloadModals() {
|
||||||
window.modal.off();
|
window.modal.off();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Helper function that scrolls to an element
|
||||||
|
* @param {string} attributeName - The string "class" or "id"
|
||||||
|
* @param {string} attributeValue - The class or id name
|
||||||
|
*/
|
||||||
|
function ScrollToElement(attributeName, attributeValue) {
|
||||||
|
let targetEl = null;
|
||||||
|
|
||||||
|
if (attributeName === 'class') {
|
||||||
|
targetEl = document.getElementsByClassName(attributeValue)[0];
|
||||||
|
} else if (attributeName === 'id') {
|
||||||
|
targetEl = document.getElementById(attributeValue);
|
||||||
|
} else {
|
||||||
|
console.log('Error: unknown attribute name provided.');
|
||||||
|
return; // Exit the function if an invalid attributeName is provided
|
||||||
|
}
|
||||||
|
|
||||||
|
if (targetEl) {
|
||||||
|
const rect = targetEl.getBoundingClientRect();
|
||||||
|
const scrollTop = window.scrollY || document.documentElement.scrollTop;
|
||||||
|
window.scrollTo({
|
||||||
|
top: rect.top + scrollTop,
|
||||||
|
behavior: 'smooth' // Optional: for smooth scrolling
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* An IIFE that listens for DOM Content to be loaded, then executes. This function
|
* An IIFE that listens for DOM Content to be loaded, then executes. This function
|
||||||
* initializes the domains list and associated functionality on the home page of the app.
|
* initializes the domains list and associated functionality on the home page of the app.
|
||||||
|
@ -890,6 +917,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
let currentOrder = 'asc';
|
let currentOrder = 'asc';
|
||||||
let domainsWrapper = document.querySelector('.domains-wrapper');
|
let domainsWrapper = document.querySelector('.domains-wrapper');
|
||||||
let noDomainsWrapper = document.querySelector('.no-domains-wrapper');
|
let noDomainsWrapper = document.querySelector('.no-domains-wrapper');
|
||||||
|
let hasLoaded = false;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 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
|
||||||
|
@ -897,8 +925,9 @@ 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
|
||||||
*/
|
*/
|
||||||
function loadPage(page, sortBy = currentSortBy, order = currentOrder) {
|
function loadPage(page, sortBy = currentSortBy, order = currentOrder, loaded = hasLoaded) {
|
||||||
//fetch json of page of domains, given page # and sort
|
//fetch json of page of domains, given page # and sort
|
||||||
fetch(`/get-domains-json/?page=${page}&sort_by=${sortBy}&order=${order}`)
|
fetch(`/get-domains-json/?page=${page}&sort_by=${sortBy}&order=${order}`)
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
|
@ -959,9 +988,13 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
});
|
});
|
||||||
// initialize tool tips immediately after the associated DOM elements are added
|
// initialize tool tips immediately after the associated DOM elements are added
|
||||||
initializeTooltips();
|
initializeTooltips();
|
||||||
|
if (loaded)
|
||||||
|
ScrollToElement('id', 'domains-header');
|
||||||
|
|
||||||
|
hasLoaded = true;
|
||||||
|
|
||||||
// update pagination
|
// update pagination
|
||||||
updatePagination(data.page, data.num_pages, data.has_previous, data.has_next);
|
updateDomainsPagination(data.page, data.num_pages, data.has_previous, data.has_next, data.total);
|
||||||
currentPage = page;
|
currentPage = page;
|
||||||
currentSortBy = sortBy;
|
currentSortBy = sortBy;
|
||||||
currentOrder = order;
|
currentOrder = order;
|
||||||
|
@ -976,19 +1009,23 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
* @param {*} hasPrevious - if there is a page of results prior to the current page
|
* @param {*} hasPrevious - if there is a page of results prior to the current page
|
||||||
* @param {*} hasNext - if there is a page of results after the current page
|
* @param {*} hasNext - if there is a page of results after the current page
|
||||||
*/
|
*/
|
||||||
function updatePagination(currentPage, numPages, hasPrevious, hasNext) {
|
function updateDomainsPagination(currentPage, numPages, hasPrevious, hasNext, totalItems) {
|
||||||
// identify the DOM element where the pagination will be inserted
|
// identify the DOM element where the pagination will be inserted
|
||||||
|
const counterContainer = document.querySelector('#domains-pagination .usa-pagination__counter');
|
||||||
const paginationContainer = document.querySelector('#domains-pagination .usa-pagination__list');
|
const paginationContainer = document.querySelector('#domains-pagination .usa-pagination__list');
|
||||||
|
counterContainer.innerHTML = '';
|
||||||
paginationContainer.innerHTML = '';
|
paginationContainer.innerHTML = '';
|
||||||
|
|
||||||
// pagination should only be displayed if there are more than one pages of results
|
// pagination should only be displayed if there are more than one pages of results
|
||||||
paginationContainer.classList.toggle('display-none', numPages <= 1);
|
paginationContainer.classList.toggle('display-none', numPages <= 1);
|
||||||
|
|
||||||
|
counterContainer.innerHTML = `${totalItems} Domains`;
|
||||||
|
|
||||||
if (hasPrevious) {
|
if (hasPrevious) {
|
||||||
const prevPageItem = document.createElement('li');
|
const prevPageItem = document.createElement('li');
|
||||||
prevPageItem.className = 'usa-pagination__item usa-pagination__arrow';
|
prevPageItem.className = 'usa-pagination__item usa-pagination__arrow';
|
||||||
prevPageItem.innerHTML = `
|
prevPageItem.innerHTML = `
|
||||||
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__previous-page" aria-label="Previous page">
|
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__previous-page" aria-label="Domains previous page">
|
||||||
<svg class="usa-icon" aria-hidden="true" role="img">
|
<svg class="usa-icon" aria-hidden="true" role="img">
|
||||||
<use xlink:href="/public/img/sprite.svg#navigate_before"></use>
|
<use xlink:href="/public/img/sprite.svg#navigate_before"></use>
|
||||||
</svg>
|
</svg>
|
||||||
|
@ -1003,7 +1040,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
const pageItem = document.createElement('li');
|
const pageItem = document.createElement('li');
|
||||||
pageItem.className = 'usa-pagination__item usa-pagination__page-no';
|
pageItem.className = 'usa-pagination__item usa-pagination__page-no';
|
||||||
pageItem.innerHTML = `
|
pageItem.innerHTML = `
|
||||||
<a href="javascript:void(0);" class="usa-pagination__button" aria-label="Page ${i}">${i}</a>
|
<a href="javascript:void(0);" class="usa-pagination__button" aria-label="Domains page ${i}">${i}</a>
|
||||||
`;
|
`;
|
||||||
if (i === currentPage) {
|
if (i === currentPage) {
|
||||||
pageItem.querySelector('a').classList.add('usa-current');
|
pageItem.querySelector('a').classList.add('usa-current');
|
||||||
|
@ -1017,7 +1054,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
const nextPageItem = document.createElement('li');
|
const nextPageItem = document.createElement('li');
|
||||||
nextPageItem.className = 'usa-pagination__item usa-pagination__arrow';
|
nextPageItem.className = 'usa-pagination__item usa-pagination__arrow';
|
||||||
nextPageItem.innerHTML = `
|
nextPageItem.innerHTML = `
|
||||||
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
|
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__next-page" aria-label="Domains next page">
|
||||||
<span class="usa-pagination__link-text">Next</span>
|
<span class="usa-pagination__link-text">Next</span>
|
||||||
<svg class="usa-icon" aria-hidden="true" role="img">
|
<svg class="usa-icon" aria-hidden="true" role="img">
|
||||||
<use xlink:href="/public/img/sprite.svg#navigate_next"></use>
|
<use xlink:href="/public/img/sprite.svg#navigate_next"></use>
|
||||||
|
@ -1059,6 +1096,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
let currentOrder = 'asc';
|
let currentOrder = 'asc';
|
||||||
let domainRequestsWrapper = document.querySelector('.domain-requests-wrapper');
|
let domainRequestsWrapper = document.querySelector('.domain-requests-wrapper');
|
||||||
let noDomainRequestsWrapper = document.querySelector('.no-domain-requests-wrapper');
|
let noDomainRequestsWrapper = document.querySelector('.no-domain-requests-wrapper');
|
||||||
|
let hasLoaded = false;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loads rows in the domain requests list, as well as updates pagination around the domain requests list
|
* Loads rows in the domain requests list, as well as updates pagination around the domain requests list
|
||||||
|
@ -1066,8 +1104,9 @@ 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
|
||||||
*/
|
*/
|
||||||
function loadDomainRequestsPage(page, sortBy = currentSortBy, order = currentOrder) {
|
function loadDomainRequestsPage(page, sortBy = currentSortBy, order = currentOrder, loaded = hasLoaded) {
|
||||||
//fetch json of page of domain requests, given page # and sort
|
//fetch json of page of domain requests, given page # and sort
|
||||||
fetch(`/get-domain-requests-json/?page=${page}&sort_by=${sortBy}&order=${order}`)
|
fetch(`/get-domain-requests-json/?page=${page}&sort_by=${sortBy}&order=${order}`)
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
|
@ -1137,9 +1176,13 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
});
|
});
|
||||||
// initialize modals immediately after the DOM content is updated
|
// initialize modals immediately after the DOM content is updated
|
||||||
initializeModals();
|
initializeModals();
|
||||||
|
if (loaded)
|
||||||
|
ScrollToElement('id', 'domain-requests-header');
|
||||||
|
|
||||||
|
hasLoaded = true;
|
||||||
|
|
||||||
// update the pagination after the domain requests list is updated
|
// update the pagination after the domain requests list is updated
|
||||||
updateDomainRequestsPagination(data.page, data.num_pages, data.has_previous, data.has_next);
|
updateDomainRequestsPagination(data.page, data.num_pages, data.has_previous, data.has_next, data.total);
|
||||||
currentPage = page;
|
currentPage = page;
|
||||||
currentSortBy = sortBy;
|
currentSortBy = sortBy;
|
||||||
currentOrder = order;
|
currentOrder = order;
|
||||||
|
@ -1154,18 +1197,23 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
* @param {*} hasPrevious - if there is a page of results prior to the current page
|
* @param {*} hasPrevious - if there is a page of results prior to the current page
|
||||||
* @param {*} hasNext - if there is a page of results after the current page
|
* @param {*} hasNext - if there is a page of results after the current page
|
||||||
*/
|
*/
|
||||||
function updateDomainRequestsPagination(currentPage, numPages, hasPrevious, hasNext) {
|
function updateDomainRequestsPagination(currentPage, numPages, hasPrevious, hasNext, totalItems) {
|
||||||
// identify the DOM element where pagination is contained
|
// identify the DOM element where pagination is contained
|
||||||
|
const counterContainer = document.querySelector('#domain-requests-pagination .usa-pagination__counter');
|
||||||
const paginationContainer = document.querySelector('#domain-requests-pagination .usa-pagination__list');
|
const paginationContainer = document.querySelector('#domain-requests-pagination .usa-pagination__list');
|
||||||
|
counterContainer.innerHTML = '';
|
||||||
paginationContainer.innerHTML = '';
|
paginationContainer.innerHTML = '';
|
||||||
|
|
||||||
|
// pagination should only be displayed if there are more than one pages of results
|
||||||
paginationContainer.classList.toggle('display-none', numPages <= 1);
|
paginationContainer.classList.toggle('display-none', numPages <= 1);
|
||||||
|
|
||||||
|
counterContainer.innerHTML = `${totalItems} Domain requests`;
|
||||||
|
|
||||||
if (hasPrevious) {
|
if (hasPrevious) {
|
||||||
const prevPageItem = document.createElement('li');
|
const prevPageItem = document.createElement('li');
|
||||||
prevPageItem.className = 'usa-pagination__item usa-pagination__arrow';
|
prevPageItem.className = 'usa-pagination__item usa-pagination__arrow';
|
||||||
prevPageItem.innerHTML = `
|
prevPageItem.innerHTML = `
|
||||||
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__previous-page" aria-label="Previous page">
|
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__previous-page" aria-label="Domain requests previous page">
|
||||||
<svg class="usa-icon" aria-hidden="true" role="img">
|
<svg class="usa-icon" aria-hidden="true" role="img">
|
||||||
<use xlink:href="/public/img/sprite.svg#navigate_before"></use>
|
<use xlink:href="/public/img/sprite.svg#navigate_before"></use>
|
||||||
</svg>
|
</svg>
|
||||||
|
@ -1180,7 +1228,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
const pageItem = document.createElement('li');
|
const pageItem = document.createElement('li');
|
||||||
pageItem.className = 'usa-pagination__item usa-pagination__page-no';
|
pageItem.className = 'usa-pagination__item usa-pagination__page-no';
|
||||||
pageItem.innerHTML = `
|
pageItem.innerHTML = `
|
||||||
<a href="javascript:void(0);" class="usa-pagination__button" aria-label="Page ${i}">${i}</a>
|
<a href="javascript:void(0);" class="usa-pagination__button" aria-label="Domain requests page ${i}">${i}</a>
|
||||||
`;
|
`;
|
||||||
if (i === currentPage) {
|
if (i === currentPage) {
|
||||||
pageItem.querySelector('a').classList.add('usa-current');
|
pageItem.querySelector('a').classList.add('usa-current');
|
||||||
|
@ -1194,7 +1242,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
const nextPageItem = document.createElement('li');
|
const nextPageItem = document.createElement('li');
|
||||||
nextPageItem.className = 'usa-pagination__item usa-pagination__arrow';
|
nextPageItem.className = 'usa-pagination__item usa-pagination__arrow';
|
||||||
nextPageItem.innerHTML = `
|
nextPageItem.innerHTML = `
|
||||||
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
|
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__next-page" aria-label="Domain requests next page">
|
||||||
<span class="usa-pagination__link-text">Next</span>
|
<span class="usa-pagination__link-text">Next</span>
|
||||||
<svg class="usa-icon" aria-hidden="true" role="img">
|
<svg class="usa-icon" aria-hidden="true" role="img">
|
||||||
<use xlink:href="/public/img/sprite.svg#navigate_next"></use>
|
<use xlink:href="/public/img/sprite.svg#navigate_next"></use>
|
||||||
|
|
|
@ -24,7 +24,7 @@
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<section class="section--outlined">
|
<section class="section--outlined">
|
||||||
<h2>Domains</h2>
|
<h2 id="domains-header">Domains</h2>
|
||||||
<div class="domains-wrapper display-none">
|
<div class="domains-wrapper display-none">
|
||||||
<table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked dotgov-table__registered-domains">
|
<table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked dotgov-table__registered-domains">
|
||||||
<caption class="sr-only">Your registered domains</caption>
|
<caption class="sr-only">Your registered domains</caption>
|
||||||
|
@ -62,15 +62,17 @@
|
||||||
</p>
|
</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-end" id="domains-pagination">
|
<span class="usa-pagination__counter padding-top-1 padding-left-2">
|
||||||
|
<!-- Count will be dynamically populated by JS -->
|
||||||
|
</span>
|
||||||
<ul class="usa-pagination__list">
|
<ul class="usa-pagination__list">
|
||||||
<!-- Pagination links will be dynamically populated by JS -->
|
<!-- Pagination links will be dynamically populated by JS -->
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<section class="section--outlined">
|
<section class="section--outlined">
|
||||||
<h2>Domain requests</h2>
|
<h2 id="domain-requests-header">Domain requests</h2>
|
||||||
<div class="domain-requests-wrapper display-none">
|
<div class="domain-requests-wrapper display-none">
|
||||||
<table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked dotgov-table__domain-requests">
|
<table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked dotgov-table__domain-requests">
|
||||||
<caption class="sr-only">Your domain requests</caption>
|
<caption class="sr-only">Your domain requests</caption>
|
||||||
|
@ -126,16 +128,19 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
<nav aria-label="Pagination" class="usa-pagination flex-justify-end" id="domain-requests-pagination">
|
|
||||||
<ul class="usa-pagination__list">
|
|
||||||
<!-- Pagination links will be dynamically populated by JS -->
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="no-domain-requests-wrapper display-none">
|
<div class="no-domain-requests-wrapper display-none">
|
||||||
<p>You haven't requested any domains.</p>
|
<p>You haven't requested any domains.</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<nav aria-label="Pagination" class="usa-pagination flex-justify" id="domain-requests-pagination">
|
||||||
|
<span class="usa-pagination__counter padding-top-1 padding-left-2">
|
||||||
|
<!-- Count will be dynamically populated by JS -->
|
||||||
|
</span>
|
||||||
|
<ul class="usa-pagination__list">
|
||||||
|
<!-- Pagination links will be dynamically populated by JS -->
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
{# Note: Reimplement this after MVP #}
|
{# Note: Reimplement this after MVP #}
|
||||||
<!--
|
<!--
|
||||||
|
|
|
@ -43,5 +43,6 @@ def get_domain_requests_json(request):
|
||||||
"has_previous": page_obj.has_previous(),
|
"has_previous": page_obj.has_previous(),
|
||||||
"page": page_obj.number,
|
"page": page_obj.number,
|
||||||
"num_pages": paginator.num_pages,
|
"num_pages": paginator.num_pages,
|
||||||
|
"total": domain_requests.count(),
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
|
@ -52,5 +52,6 @@ def get_domains_json(request):
|
||||||
"num_pages": paginator.num_pages,
|
"num_pages": paginator.num_pages,
|
||||||
"has_previous": page_obj.has_previous(),
|
"has_previous": page_obj.has_previous(),
|
||||||
"has_next": page_obj.has_next(),
|
"has_next": page_obj.has_next(),
|
||||||
|
"total": objects.count(),
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue