Add seperate show more buttons

This commit is contained in:
zandercymatics 2024-06-27 10:18:45 -06:00
parent 176a65987c
commit 906622bd55
No known key found for this signature in database
GPG key ID: FF4636ABEC9682B7
4 changed files with 103 additions and 100 deletions

View file

@ -1485,6 +1485,12 @@ class DomainRequestAdmin(ListHeaderAdmin, ImportExportModelAdmin):
custom_election_board.admin_order_field = "is_election_board" # type: ignore
custom_election_board.short_description = "Election office" # type: ignore
# This is just a placeholder. This field will be populated in the detail_table_fieldset view.
# This is not a field that exists on the model.
def status_history(self, obj):
return "No changelog to display."
status_history.short_description = "Status History"
# Filters
list_filter = (
StatusListFilter,
@ -1510,6 +1516,7 @@ class DomainRequestAdmin(ListHeaderAdmin, ImportExportModelAdmin):
{
"fields": [
"portfolio",
"status_history",
"status",
"rejection_reason",
"action_needed_reason",
@ -1592,6 +1599,7 @@ class DomainRequestAdmin(ListHeaderAdmin, ImportExportModelAdmin):
"alternative_domains",
"is_election_board",
"federal_agency",
"status_history"
)
# Read only that we'll leverage for CISA Analysts
@ -2097,6 +2105,14 @@ class DomainInformationInline(admin.StackedInline):
return modified_fieldsets
class DomainForm(forms.ModelForm):
"""This form utilizes the custom widget for its class's forms"""
class Meta:
model = models.Domain
fields = "__all__"
widgets = {
}
class DomainResource(FsmModelResource):
"""defines how each field in the referenced model should be mapped to the corresponding fields in the
@ -2110,7 +2126,7 @@ class DomainAdmin(ListHeaderAdmin, ImportExportModelAdmin):
"""Custom domain admin class to add extra buttons."""
resource_classes = [DomainResource]
#form = MyUserAdminForm
class ElectionOfficeFilter(admin.SimpleListFilter):
"""Define a custom filter for is_election_board"""

View file

@ -421,38 +421,6 @@ function initializeWidgetOnList(list, parentId) {
sessionStorage.removeItem(name);
}
}
document.addEventListener('DOMContentLoaded', function() {
let statusSelect = document.getElementById('id_status');
function moveStatusChangelog(actionNeededReasonFormGroup, statusSelect) {
let flexContainer = actionNeededReasonFormGroup.querySelector('.flex-container');
let statusChangelog = document.getElementById('dja-status-changelog');
// On action needed, show the email that will be sent out
let showReasonEmailContainer = document.querySelector("#action_needed_reason_email_readonly")
// Prepopulate values on page load.
if (statusSelect.value === "action needed") {
flexContainer.parentNode.insertBefore(statusChangelog, flexContainer.nextSibling);
showElement(showReasonEmailContainer);
} else {
// Move the changelog back to its original location
let statusFlexContainer = statusSelect.closest('.flex-container');
statusFlexContainer.parentNode.insertBefore(statusChangelog, statusFlexContainer.nextSibling);
hideElement(showReasonEmailContainer);
}
}
// Call the function on page load
moveStatusChangelog(actionNeededReasonFormGroup, statusSelect);
// Add event listener to handle changes to the selector itself
statusSelect.addEventListener('change', function() {
moveStatusChangelog(actionNeededReasonFormGroup, statusSelect);
})
});
})();
/** An IIFE for toggling the submit bar on domain request forms
@ -548,13 +516,13 @@ function initializeWidgetOnList(list, parentId) {
})();
/** An IIFE that hooks up to the "show email" button.
* which shows the auto generated email on action needed reason.
/** An IIFE that hooks to the show/hide button underneath action needed reason.
* This shows the auto generated email on action needed reason.
*/
(function () {
let actionNeededReasonDropdown = document.querySelector("#id_action_needed_reason");
let actionNeededEmail = document.querySelector("#action_needed_reason_email_view_more");
if(actionNeededReasonDropdown && actionNeededEmail && container) {
if(actionNeededReasonDropdown && actionNeededEmail) {
// Add a change listener to the action needed reason dropdown
handleChangeActionNeededEmail(actionNeededReasonDropdown, actionNeededEmail);
}

View file

@ -788,6 +788,7 @@ div.dja__model-description{
}
.dja-readonly-textarea-container {
overflow-x: scroll;
textarea {
width: 100%;
min-width: 610px;
@ -810,6 +811,12 @@ div.dja__model-description{
}
}
@media (max-width: 1230px) {
.dja-readonly-textarea-container {
overflow-x: scroll;
}
}
.max-full {
width: 100% !important;
}

View file

@ -8,7 +8,60 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
{% block field_readonly %}
{% with all_contacts=original_object.other_contacts.all %}
{% if field.field.name == "other_contacts" %}
{% if field.field.name == "status_history" %}
{% if filtered_audit_log_entries %}
<div class="readonly">
<div class="usa-table-container--scrollable collapse--dgsimple collapsed" tabindex="0">
{% if filtered_audit_log_entries %}
<table class="usa-table usa-table--borderless">
<thead>
<tr>
<th>Status</th>
<th>User</th>
<th>Changed at</th>
</tr>
</thead>
<tbody>
{% for entry in filtered_audit_log_entries %}
<tr>
<td>
{% if entry.status %}
{{ entry.status|default:"Error" }}
{% else %}
Error
{% endif %}
{% if entry.rejection_reason %}
- {{ entry.rejection_reason|default:"Error" }}
{% endif %}
{% if entry.action_needed_reason %}
- {{ entry.action_needed_reason|default:"Error" }}
{% endif %}
</td>
<td>{{ entry.actor|default:"Error" }}</td>
<td>{{ entry.timestamp|date:"Y-m-d H:i:s" }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p>No changelog to display.</p>
{% endif %}
</div>
<button type="button" class="collapse-toggle--dgsimple usa-button usa-button--unstyled">
<span>Show details</span>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
<use xlink:href="/public/img/sprite.svg#expand_more"></use>
</svg>
</button>
</div>
{% else %}
<div class="readonly">
No changelog to display.
</div>
{% endif %}
{% elif field.field.name == "other_contacts" %}
{% if all_contacts.count > 2 %}
<div class="readonly">
{% for contact in all_contacts %}
@ -68,72 +121,31 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
{% endblock field_readonly %}
{% block after_help_text %}
{% if field.field.name == "status" %}
<div class="flex-container" id="dja-status-changelog">
<label aria-label="Status changelog"></label>
{% if field.field.name == "action_needed_reason" %}
<div class="flex-container">
<label aria-label="Action needed reason email"></label>
<div>
<div class="usa-table-container--scrollable collapse--dgsimple collapsed" tabindex="0">
{% if filtered_audit_log_entries %}
<table class="usa-table usa-table--borderless">
<thead>
<tr>
<th>Status</th>
<th>User</th>
<th>Changed at</th>
</tr>
</thead>
<tbody>
{% for entry in filtered_audit_log_entries %}
<tr>
<td>
{% if entry.status %}
{{ entry.status|default:"Error" }}
{% else %}
Error
{% endif %}
{% if entry.rejection_reason %}
- {{ entry.rejection_reason|default:"Error" }}
{% endif %}
{% if entry.action_needed_reason %}
- {{ entry.action_needed_reason|default:"Error" }}
{% endif %}
</td>
<td>{{ entry.actor|default:"Error" }}</td>
<td>{{ entry.timestamp|date:"Y-m-d H:i:s" }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p>No changelog to display.</p>
{% endif %}
{% comment %}
Store the action needed reason emails in a json-based dictionary.
This allows us to change the action_needed_reason_email field dynamically, depending on value.
The alternative to this is an API endpoint.
{% comment %}
Store the action needed reason emails in a json-based dictionary.
This allows us to change the action_needed_reason_email field dynamically, depending on value.
The alternative to this is an API endpoint.
Given that we have a limited number of emails, doing it this way makes sense.
{% endcomment %}
{% if action_needed_reason_emails %}
<script id="action-needed-emails-data" type="application/json">
{{ action_needed_reason_emails|safe }}
</script>
{% endif %}
<div id="action_needed_reason_email_readonly" class="dja-readonly-textarea-container padding-1 margin-top-2 thin-border display-none">
<label class="max-full" for="action_needed_reason_email_view_more">
<strong>Auto-generated email (sent to submitter)</strong>
</label>
<textarea id="action_needed_reason_email_view_more" cols="40" rows="20" class="{% if not original_object.action_needed_reason %}display-none{% endif %}" readonly>
{{ original_object.action_needed_reason_email }}
</textarea>
<p id="no-email-message" class="{% if original_object.action_needed_reason %}display-none{% endif %}">No email will be sent.</p>
</div>
Given that we have a limited number of emails, doing it this way makes sense.
{% endcomment %}
{% if action_needed_reason_emails %}
<script id="action-needed-emails-data" type="application/json">
{{ action_needed_reason_emails|safe }}
</script>
{% endif %}
<div id="action_needed_reason_email_readonly" class="dja-readonly-textarea-container padding-1 margin-top-2 margin-bottom-1 thin-border collapse--dgsimple collapsed">
<label class="max-full" for="action_needed_reason_email_view_more">
<strong>Auto-generated email (sent to submitter)</strong>
</label>
<textarea id="action_needed_reason_email_view_more" cols="40" rows="20" class="{% if not original_object.action_needed_reason %}display-none{% endif %}" readonly>
{{ original_object.action_needed_reason_email }}
</textarea>
<p id="no-email-message" class="{% if original_object.action_needed_reason %}display-none{% endif %}">No email will be sent.</p>
</div>
<button type="button" class="collapse-toggle--dgsimple usa-button usa-button--unstyled margin-top-2 margin-bottom-1 margin-left-1">
<span>Show details</span>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">