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

Cleanup and base filter state revision

Browse source
This commit is contained in:
Rachid Mrad 2024-06-27 18:36:06 -04:00
parent 65d9431ec5
commit 4ffecdd1c7
No known key found for this signature in database
7 changed files with 106 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -46,7 +46,7 @@ function ScrollToElement(attributeName, attributeValue) {
} else if (attributeName === 'id') {
targetEl = document.getElementById(attributeValue);
} else {
console.log('Error: unknown attribute name provided.');
console.error('Error: unknown attribute name provided.');
return; // Exit the function if an invalid attributeName is provided
}
@ -108,7 +108,7 @@ function ScrollToElement(attributeName, attributeValue) {
} else if (attributeName === 'id') {
targetEl = document.getElementById(attributeValue);
} else {
console.log('Error: unknown attribute name provided.');
console.error('Error: unknown attribute name provided.');
return; // Exit the function if an invalid attributeName is provided
}
@ -1141,26 +1141,6 @@ document.addEventListener('DOMContentLoaded', function() {
const statusIndicator = document.querySelector('.domain__filter-indicator');
const statusToggle = document.querySelector('.usa-button--filter');
// Initialize the filters, but only if we're on the org domains page
const portfolioSidenav = document.querySelector('.usa-sidenav--portfolio');
if (portfolioSidenav) {
statusCheckboxes.forEach(checkbox => {
const checkboxValue = checkbox.value;
// Update currentStatus array based on checkbox state
if (checkbox.checked) {
currentStatus.push(checkboxValue);
} else {
const index = currentStatus.indexOf(checkboxValue);
if (index > -1) {
currentStatus.splice(index, 1);
}
}
});
} else {
// For non-portfolio users, disable filtering
currentStatus = ['unknown', 'ready', 'on hold', 'expired', 'deleted'];
}
/**
* Loads rows in the domains list, as well as updates pagination around the domains list
* based on the supplied attributes.
@ -1176,7 +1156,7 @@ document.addEventListener('DOMContentLoaded', function() {
.then(response => response.json())
.then(data => {
if (data.error) {
console.log('Error in AJAX call: ' + data.error);
console.error('Error in AJAX call: ' + data.error);
return;
}
@ -1305,7 +1285,7 @@ document.addEventListener('DOMContentLoaded', function() {
}
// Manage visibility of reset filters button
if (currentStatus.length == statusCheckboxes.length) {
if (currentStatus.length == 0) {
hideElement(resetFiltersButton);
} else {
showElement(resetFiltersButton);
@ -1345,9 +1325,7 @@ document.addEventListener('DOMContentLoaded', function() {
function resetFilters() {
currentStatus = [];
statusCheckboxes.forEach(checkbox => {
checkbox.checked = true;
const checkboxValue = checkbox.value;
currentStatus.push(checkboxValue);
checkbox.checked = false;
});
hideElement(resetFiltersButton);
loadDomains(1, 'id', 'asc');
@ -1364,7 +1342,8 @@ document.addEventListener('DOMContentLoaded', function() {
function updateStatusIndicator() {
statusIndicator.innerHTML = '';
statusIndicator.innerHTML = '(' + currentStatus.length + ')';
if (currentStatus.length)
statusIndicator.innerHTML = '(' + currentStatus.length + ')';
}
function closeFilters() {
@ -1375,7 +1354,7 @@ document.addEventListener('DOMContentLoaded', function() {
// Instead of managing the toggle/close on the filter buttons in all edge cases (user clicks on search, user clicks on ANOTHER filter,
// user clicks on main nav...) we add a listener and close the filters whenever the focus shifts out of the dropdown menu/filter button.
// NOTE: We may need to evovle this as we add more filters.
// NOTE: We may need to evolve this as we add more filters.
document.addEventListener('focusin', function(event) {
const accordion = document.querySelector('.usa-accordion--select');
const accordionIsOpen = document.querySelector('.usa-button--filter[aria-expanded="true"]');
@ -1481,7 +1460,7 @@ document.addEventListener('DOMContentLoaded', function() {
.then(response => response.json())
.then(data => {
if (data.error) {
console.log('Error in AJAX call: ' + data.error);
console.error('Error in AJAX call: ' + data.error);
return;
}

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

@ -26,4 +26,4 @@
.margin-top-0 {
margin-top: 0 !important;
}
}
}

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

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

2
src/registrar/templates/includes/domain_requests_table.html
View file

@ -33,7 +33,7 @@
</section>
</div>
</div>
<div class="domain-requests__table-wrapper display-none usa-table-container--scrollable" tabindex="0">
<div class="domain-requests__table-wrapper display-none usa-table-container--scrollable margin-top-0" tabindex="0">
<table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked domain-requests__table">
<caption class="sr-only">Your domain requests</caption>
<thead>

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

@ -34,104 +34,101 @@
</div>
</div>
{% if portfolio %}
<span class="margin-right-2 text-base">Filter by</span>
<div class="usa-accordion usa-accordion--select margin-right-2">
<div class="usa-accordion__heading">
<button
type="button"
class="usa-button usa-button--small usa-button--outline usa-button--filter usa-accordion__button"
aria-expanded="false"
aria-controls="filter-status"
>
<span class="domain__filter-indicator text-bold">(5)</span> Status
<svg class="usa-icon top-2px" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="/public/img/sprite.svg#expand_more"></use>
</svg>
</button>
</div>
<div id="filter-status" class="usa-accordion__content usa-prose shadow-1">
<h2>Status</h2>
<fieldset class="usa-fieldset margin-top-0">
<legend class="usa-legend width-145">Select to apply <span class="sr-only">status</span> filter</legend>
<div class="usa-checkbox">
<input
class="usa-checkbox__input"
id="filter-status-dns-needed"
type="checkbox"
name="filter-status"
value="unknown"
checked="checked"
/>
<label class="usa-checkbox__label" for="filter-status-dns-needed"
>DNS Needed</label
>
</div>
<div class="usa-checkbox">
<input
class="usa-checkbox__input"
id="filter-status-ready"
type="checkbox"
name="filter-status"
value="ready"
checked="checked"
/>
<label class="usa-checkbox__label" for="filter-status-ready"
>Ready</label
>
</div>
<div class="usa-checkbox">
<input
class="usa-checkbox__input"
id="filter-status-on-hold"
type="checkbox"
name="filter-status"
value="on hold"
checked="checked"
/>
<label class="usa-checkbox__label" for="filter-status-on-hold"
>On hold</label
>
</div>
<div class="usa-checkbox">
<input
class="usa-checkbox__input"
id="filter-status-expired"
type="checkbox"
name="filter-status"
value="expired"
checked="checked"
/>
<label class="usa-checkbox__label" for="filter-status-expired"
>Expired</label
>
</div>
<div class="usa-checkbox">
<input
class="usa-checkbox__input"
id="filter-status-deleted"
type="checkbox"
name="filter-status"
value="deleted"
checked="checked"
/>
<label class="usa-checkbox__label" for="filter-status-deleted"
>Deleted</label
>
</div>
</fieldset>
<div class="display-flex flex-align-center margin-top-1">
<span class="margin-right-2 margin-top-neg-1 text-base">Filter by</span>
<div class="usa-accordion usa-accordion--select margin-right-2">
<div class="usa-accordion__heading">
<button
type="button"
class="usa-button usa-button--small usa-button--outline usa-button--filter usa-accordion__button"
aria-expanded="false"
aria-controls="filter-status"
>
<span class="domain__filter-indicator text-bold"></span> Status
<svg class="usa-icon top-2px" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="/public/img/sprite.svg#expand_more"></use>
</svg>
</button>
</div>
<div id="filter-status" class="usa-accordion__content usa-prose shadow-1">
<h2>Status</h2>
<fieldset class="usa-fieldset margin-top-0">
<legend class="usa-legend width-145px">Select to apply <span class="sr-only">status</span> filter</legend>
<div class="usa-checkbox">
<input
class="usa-checkbox__input"
id="filter-status-dns-needed"
type="checkbox"
name="filter-status"
value="unknown"
/>
<label class="usa-checkbox__label" for="filter-status-dns-needed"
>DNS Needed</label
>
</div>
<div class="usa-checkbox">
<input
class="usa-checkbox__input"
id="filter-status-ready"
type="checkbox"
name="filter-status"
value="ready"
/>
<label class="usa-checkbox__label" for="filter-status-ready"
>Ready</label
>
</div>
<div class="usa-checkbox">
<input
class="usa-checkbox__input"
id="filter-status-on-hold"
type="checkbox"
name="filter-status"
value="on hold"
/>
<label class="usa-checkbox__label" for="filter-status-on-hold"
>On hold</label
>
</div>
<div class="usa-checkbox">
<input
class="usa-checkbox__input"
id="filter-status-expired"
type="checkbox"
name="filter-status"
value="expired"
/>
<label class="usa-checkbox__label" for="filter-status-expired"
>Expired</label
>
</div>
<div class="usa-checkbox">
<input
class="usa-checkbox__input"
id="filter-status-deleted"
type="checkbox"
name="filter-status"
value="deleted"
/>
<label class="usa-checkbox__label" for="filter-status-deleted"
>Deleted</label
>
</div>
</fieldset>
</div>
</div>
<button
type="button"
class="usa-button usa-button--small usa-button--outline usa-button--filter domains__reset-filters display-none"
>
Clear filters
<svg class="usa-icon top-1px" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="/public/img/sprite.svg#close"></use>
</svg>
</button>
</div>
<button
type="button"
class="usa-button usa-button--small usa-button--outline usa-button--filter domains__reset-filters display-none"
>
Clear filters
<svg class="usa-icon top-1px" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="/public/img/sprite.svg#close"></use>
</svg>
</button>
{% endif %}
<div class="domains__table-wrapper display-none usa-table-container--scrollable" tabindex="0">
<div class="domains__table-wrapper display-none usa-table-container--scrollable margin-top-0" tabindex="0">
<table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked domains__table">
<caption class="sr-only">Your registered domains</caption>
<thead>

2
src/registrar/templates/portfolio_domains.html
View file

@ -3,6 +3,6 @@
{% load static %}
{% block portfolio_content %}
<h1>Domains</h1>
<h1 class="margin-bottom-neg-2" id="domains-header">Domains</h1>
{% include "includes/domains_table.html" with portfolio=portfolio %}
{% endblock %}

2
src/registrar/templates/portfolio_requests.html
View file

@ -3,7 +3,7 @@
{% load static %}
{% block portfolio_content %}
<h1>Domain requests</h1>
<h1 id="domain-requests-header">Domain requests</h1>
{% comment %}
IMPORTANT: