suborg table display tweaks

This commit is contained in:
Rachid Mrad 2024-08-29 13:11:37 -04:00
parent 4a9cf02918
commit 9ff733819f
No known key found for this signature in database

View file

@ -1220,7 +1220,7 @@ document.addEventListener('DOMContentLoaded', function() {
const expirationDateFormatted = expirationDate ? expirationDate.toLocaleDateString('en-US', options) : ''; const expirationDateFormatted = expirationDate ? expirationDate.toLocaleDateString('en-US', options) : '';
const expirationDateSortValue = expirationDate ? expirationDate.getTime() : ''; const expirationDateSortValue = expirationDate ? expirationDate.getTime() : '';
const actionUrl = domain.action_url; const actionUrl = domain.action_url;
const suborganization = domain.suborganization ? domain.suborganization : ''; const suborganization = domain.suborganization ? domain.suborganization : '';
const row = document.createElement('tr'); const row = document.createElement('tr');
@ -1229,7 +1229,7 @@ document.addEventListener('DOMContentLoaded', function() {
if (!noPortfolioFlag) { if (!noPortfolioFlag) {
markupForSuborganizationRow = ` markupForSuborganizationRow = `
<td> <td>
<span class="text-wrap" aria-label="${suborganization ? '' : 'None'}">${suborganization}</span> <span class="text-wrap" aria-label="${domain.suborganization ? suborganization : 'No suborganization'}">${suborganization}</span>
</td> </td>
` `
} }
@ -2043,11 +2043,19 @@ document.addEventListener('DOMContentLoaded', function() {
// Due to the nature of how uswds works, this is slightly hacky. // Due to the nature of how uswds works, this is slightly hacky.
// Use a MutationObserver to watch for changes in the dropdown list // Use a MutationObserver to watch for changes in the dropdown list
const dropdownList = document.querySelector(`#${input.id}--list`); const dropdownList = comboBox.querySelector(`#${input.id}--list`);
// TODO: customize blank value
// const isSuborgComboBox = comboBox.querySelector('#id_sub_organization--list');
const observer = new MutationObserver(function(mutations) { const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) { mutations.forEach(function(mutation) {
if (mutation.type === "childList") { if (mutation.type === "childList") {
addBlankOption(clearInputButton, dropdownList, initialValue); // TODO: customize blank value
// if (isSuborgComboBox) {
// addBlankOption(clearInputButton, dropdownList, initialValue, 'No suborganization');
// } else {
// addBlankOption(clearInputButton, dropdownList, initialValue);
// }
addBlankOption(clearInputButton, dropdownList, initialValue);
} }
}); });
}); });
@ -2102,6 +2110,8 @@ document.addEventListener('DOMContentLoaded', function() {
} }
} }
// TODO: customize blank value
// function addBlankOption(clearInputButton, dropdownList, initialValue, customBlank) {
function addBlankOption(clearInputButton, dropdownList, initialValue) { function addBlankOption(clearInputButton, dropdownList, initialValue) {
if (dropdownList && !dropdownList.querySelector('[data-value=""]') && !isTyping) { if (dropdownList && !dropdownList.querySelector('[data-value=""]') && !isTyping) {
const blankOption = document.createElement("li"); const blankOption = document.createElement("li");
@ -2111,7 +2121,9 @@ document.addEventListener('DOMContentLoaded', function() {
if (!initialValue){ if (!initialValue){
blankOption.classList.add("usa-combo-box__list-option--selected") blankOption.classList.add("usa-combo-box__list-option--selected")
} }
blankOption.textContent = "---------"; // TODO: customize blank value
// customBlank ? blankOption.textContent = customBlank : blankOption.textContent = "---------";
blankOption.textContent = "⎯";
dropdownList.insertBefore(blankOption, dropdownList.firstChild); dropdownList.insertBefore(blankOption, dropdownList.firstChild);
blankOption.addEventListener("click", (e) => { blankOption.addEventListener("click", (e) => {