wip requests

This commit is contained in:
Rachid Mrad 2024-05-21 13:00:22 -04:00
parent f44d8896cb
commit 699ac294ec
No known key found for this signature in database
5 changed files with 186 additions and 112 deletions

View file

@ -894,11 +894,12 @@ document.addEventListener('DOMContentLoaded', function() {
currentPage = page;
currentSortBy = sortBy;
currentOrder = order;
});
})
.catch(error => console.error('Error fetching domains:', error));
}
function updatePagination(currentPage, numPages, hasPrevious, hasNext) {
const paginationContainer = document.querySelector('.usa-pagination__list');
const paginationContainer = document.querySelector('#domains-pagination .usa-pagination__list');
paginationContainer.innerHTML = '';
if (hasPrevious) {
@ -958,3 +959,136 @@ document.addEventListener('DOMContentLoaded', function() {
// Load the first page initially
loadPage(1);
});
document.addEventListener('DOMContentLoaded', function() {
let currentPage = 1;
let currentSortBy = 'id';
let currentOrder = 'asc';
function loadDomainRequestsPage(page, sortBy = currentSortBy, order = currentOrder) {
fetch(`/get-domain-requests-json/?page=${page}&sort_by=${sortBy}&order=${order}`)
.then(response => response.json())
.then(data => {
if (data.error) {
alert(data.error);
return;
}
const tbody = document.querySelector('.dotgov-table__domain-requests tbody');
tbody.innerHTML = '';
data.domain_requests.forEach(request => {
const domainName = request.requested_domain ? request.requested_domain.name : `New domain request (${new Date(request.created_at).toLocaleString()} UTC)`;
const submissionDate = request.submission_date ? new Date(request.submission_date).toLocaleDateString() : 'Not submitted';
const actionUrl = (request.status === 'Started' || request.status === 'Withdrawn') ? `/edit-domain-request/${request.id}` : `/domain-request-status/${request.id}`;
const actionLabel = (request.status === 'Started' || request.status === 'Withdrawn') ? 'Edit' : 'Manage';
const deleteButton = request.is_deletable ? `
<a role="button" href="/domain-request-delete/${request.id}" class="usa-button--unstyled text-no-underline">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="/static/img/sprite.svg#delete"></use>
</svg> Delete
</a>` : '';
const row = document.createElement('tr');
row.innerHTML = `
<th scope="row" role="rowheader" data-label="Domain name">
${domainName}
</th>
<td data-sort-value="${new Date(request.submission_date).getTime()}" data-label="Date submitted">
${submissionDate}
</td>
<td data-label="Status">
${request.state_display}
<svg
class="usa-icon usa-tooltip usa-tooltip--registrar text-middle margin-bottom-05 text-accent-cool no-click-outline-and-cursor-help"
data-position="top"
title="${request.get_state_help_text}"
focusable="true"
aria-label="Status Information"
role="tooltip"
>
<use aria-hidden="true" xlink:href="/static/img/sprite.svg#info_outline"></use>
</svg>
</td>
<td>
<a href="${actionUrl}">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="/static/img/sprite.svg#${request.state === 'deleted' || request.state === 'on hold' ? 'visibility' : 'settings'}"></use>
</svg>
${actionLabel} <span class="usa-sr-only">${request.requested_domain ? request.requested_domain.name : 'New domain request'}</span>
</a>
</td>
<td>${deleteButton}</td>
`;
tbody.appendChild(row);
});
updateDomainRequestsPagination(data.page, data.num_pages, data.has_previous, data.has_next);
currentPage = page;
currentSortBy = sortBy;
currentOrder = order;
})
.catch(error => console.error('Error fetching domain requests:', error));
}
function updateDomainRequestsPagination(currentPage, numPages, hasPrevious, hasNext) {
const paginationContainer = document.querySelector('#domain-requests-pagination .usa-pagination__list');
paginationContainer.innerHTML = '';
if (hasPrevious) {
const prevPageItem = document.createElement('li');
prevPageItem.className = 'usa-pagination__item usa-pagination__arrow';
prevPageItem.innerHTML = `
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__previous-page" aria-label="Previous page">
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="/static/img/sprite.svg#navigate_before"></use>
</svg>
<span class="usa-pagination__link-text">Previous</span>
</a>
`;
prevPageItem.querySelector('a').addEventListener('click', () => loadDomainRequestsPage(currentPage - 1));
paginationContainer.appendChild(prevPageItem);
}
for (let i = 1; i <= numPages; i++) {
const pageItem = document.createElement('li');
pageItem.className = 'usa-pagination__item usa-pagination__page-no';
pageItem.innerHTML = `
<a href="javascript:void(0);" class="usa-pagination__button" aria-label="Page ${i}">${i}</a>
`;
if (i === currentPage) {
pageItem.querySelector('a').classList.add('usa-current');
pageItem.querySelector('a').setAttribute('aria-current', 'page');
}
pageItem.querySelector('a').addEventListener('click', () => loadDomainRequestsPage(i));
paginationContainer.appendChild(pageItem);
}
if (hasNext) {
const nextPageItem = document.createElement('li');
nextPageItem.className = 'usa-pagination__item usa-pagination__arrow';
nextPageItem.innerHTML = `
<a href="javascript:void(0);" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
<span class="usa-pagination__link-text">Next</span>
<svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="/static/img/sprite.svg#navigate_next"></use>
</svg>
</a>
`;
nextPageItem.querySelector('a').addEventListener('click', () => loadDomainRequestsPage(currentPage + 1));
paginationContainer.appendChild(nextPageItem);
}
}
// Add event listeners to table headers for sorting
document.querySelectorAll('.dotgov-table__domain-requests th[data-sortable]').forEach(header => {
header.addEventListener('click', function() {
const sortBy = this.getAttribute('data-sortable');
const order = currentOrder === 'asc' ? 'desc' : 'asc';
loadDomainRequestsPage(1, sortBy, order);
});
});
// Load the first page initially
loadDomainRequestsPage(1);
});

View file

@ -21,6 +21,7 @@ from registrar.views.admin_views import (
)
from registrar.views.domain_request import Step
from registrar.views.domain_requests_json import get_domain_requests_json
from registrar.views.domains_json import get_domains_json
from registrar.views.utility import always_404
from api.views import available, get_current_federal, get_current_full
@ -195,6 +196,7 @@ urlpatterns = [
name="domain-user-delete",
),
path('get-domains-json/', get_domains_json, name='get_domains_json'),
path('get-domain-requests-json/', get_domain_requests_json, name='get_domain_requests_json'),
]
# Djangooidc strips out context data from that context, so we define a custom error

View file

@ -62,7 +62,7 @@
{% endif %}
</section>
<nav aria-label="Pagination" class="usa-pagination">
<nav aria-label="Pagination" class="usa-pagination" id="domains-pagination">
<ul class="usa-pagination__list">
<!-- Pagination links will be dynamically populated by JS -->
</ul>
@ -84,118 +84,19 @@
{% endif %}
</tr>
</thead>
<tbody>
{% for domain_request in domain_requests %}
<tr>
<th th scope="row" role="rowheader" data-label="Domain name">
{% if domain_request.requested_domain is None %}
New domain request
{# Add a breakpoint #}
<div aria-hidden="true"></div>
<span class="text-base font-body-xs">({{ domain_request.created_at }} UTC)</span>
{% else %}
{{ domain_request.requested_domain.name }}
{% endif %}
</th>
<td data-sort-value="{{ domain_request.submission_date|date:"U" }}" data-label="Date submitted">
{% if domain_request.submission_date %}
{{ domain_request.submission_date|date }}
{% else %}
<span class="text-base">Not submitted</span>
{% endif %}
</td>
<td data-label="Status">{{ domain_request.get_status_display }}</td>
<td>
{% with prefix="New domain request ("%}
{% with date=domain_request.created_at|date:"DATETIME_FORMAT"%}
{% with name_default=prefix|add:date|add:" UTC)"%}
{% if domain_request.status == domain_request.DomainRequestStatus.STARTED or domain_request.status == domain_request.DomainRequestStatus.ACTION_NEEDED or domain_request.status == domain_request.DomainRequestStatus.WITHDRAWN %}
<a href="{% url 'edit-domain-request' domain_request.pk %}">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="{%static 'img/sprite.svg'%}#edit"></use>
</svg>
{% if domain_request.requested_domain is not None%}
Edit <span class="usa-sr-only">{{ domain_request.requested_domain.name }}</span>
{% else %}
Edit <span class="usa-sr-only">{{ name_default }}</span>
{% endif %}
{% else %}
<a href="{% url 'domain-request-status' domain_request.pk %}">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="{%static 'img/sprite.svg'%}#settings"></use>
</svg>
Manage <span class="usa-sr-only">{{ domain_request.requested_domain.name|default:name_default }}</span>
{% endif %}
{% endwith %}
{% endwith %}
{% endwith %}
</a>
</td>
{% if has_deletable_domain_requests %}
<td>
{% if domain_request.status == "started" or domain_request.status == "withdrawn" %}
<a
role="button"
id="button-toggle-delete-domain-alert-{{ forloop.counter }}"
href="#toggle-delete-domain-alert-{{ forloop.counter }}"
class="usa-button--unstyled text-no-underline"
aria-controls="toggle-delete-domain-alert-{{ forloop.counter }}"
data-open-modal
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="{%static 'img/sprite.svg'%}#delete"></use>
</svg>
{% with prefix="New domain request ("%}
{% with date=domain_request.created_at|date:"DATETIME_FORMAT"%}
{% with name_default=prefix|add:date|add:" UTC)"%}
{% if domain_request.requested_domain is not None %}
Delete <span class="usa-sr-only">{{ domain_request.requested_domain.name }}</span>
{% else %}
Delete <span class="usa-sr-only">{{ name_default }}</span>
{% endif %}
{% endwith %}
{% endwith %}
{% endwith %}
</a>
<div
class="usa-modal"
id="toggle-delete-domain-alert-{{ forloop.counter }}"
aria-labelledby="Are you sure you want to continue?"
aria-describedby="Domain will be removed"
data-force-action
>
<form method="POST" action="{% url "domain-request-delete" pk=domain_request.id %}">
{% if domain_request.requested_domain is None %}
{% if domain_request.created_at %}
{% with prefix="(created " %}
{% with formatted_date=domain_request.created_at|date:"DATETIME_FORMAT" %}
{% with modal_content=prefix|add:formatted_date|add:" UTC)" %}
{% include 'includes/modal.html' with modal_heading="Are you sure you want to delete this domain request?" modal_description="This will remove the domain request "|add:modal_content|add:" from the .gov registrar. This action cannot be undone." modal_button=modal_button|safe %}
{% endwith %}
{% endwith %}
{% endwith %}
{% else %}
{% include 'includes/modal.html' with modal_heading="Are you sure you want to delete New domain request?" modal_description="This will remove the domain request from the .gov registrar. This action cannot be undone." modal_button=modal_button|safe %}
{% endif %}
{% else %}
{% with modal_heading_value=domain_request.requested_domain.name|add:"?" %}
{% include 'includes/modal.html' with modal_heading="Are you sure you want to delete" heading_value=modal_heading_value modal_description="This will remove the domain request from the .gov registrar. This action cannot be undone." modal_button=modal_button|safe %}
{% endwith %}
{% endif %}
</form>
</div>
{% endif %}
</td>
{% endif %}
</tr>
{% endfor %}
<tbody id="domain-requests-tbody">
<!-- AJAX will populate this tbody -->
</tbody>
</table>
<div
class="usa-sr-only usa-table__announcement-region"
aria-live="polite"
></div>
<nav aria-label="Pagination" class="usa-pagination" id="domain-requests-pagination">
<ul class="usa-pagination__list">
<!-- Pagination links will be dynamically populated by JS -->
</ul>
</nav>
{% else %}
<p>You haven't requested any domains.</p>
<!-- <p><a href="{% url 'domain-request:' %}" class="usa-button">Start a new domain request</a></p> -->

View file

@ -0,0 +1,37 @@
from django.http import JsonResponse
from django.core.paginator import Paginator
from registrar.models import DomainRequest
def get_domain_requests_json(request):
"""Given the current request,
get all domain requests that are associated with the request user and exclude the APPROVED ones"""
if not request.user.is_authenticated:
return JsonResponse({'error': 'User not authenticated'}, status=401)
domain_requests = DomainRequest.objects.filter(creator=request.user).exclude(
status=DomainRequest.DomainRequestStatus.APPROVED
)
page_number = request.GET.get('page', 1)
paginator = Paginator(domain_requests, 2) # Adjust the number of items per page as needed
page_obj = paginator.get_page(page_number)
domain_requests_data = [
{
'requested_domain': domain_request.requested_domain.name if domain_request.requested_domain else None,
'submission_date': domain_request.submission_date,
'status': domain_request.get_status_display(),
'created_at': domain_request.created_at,
'id': domain_request.id,
'is_deletable': domain_request.status in [DomainRequest.DomainRequestStatus.STARTED, DomainRequest.DomainRequestStatus.WITHDRAWN],
}
for domain_request in page_obj
]
return JsonResponse({
'domain_requests': domain_requests_data,
'has_next': page_obj.has_next(),
'has_previous': page_obj.has_previous(),
'page': page_obj.number,
'num_pages': paginator.num_pages,
})

View file

@ -16,7 +16,7 @@ def get_domains_json(request):
# Handle sorting
sort_by = request.GET.get('sort_by', 'id') # Default to 'id'
order = request.GET.get('order', 'asc') # Default to 'asc'
order = request.GET.get('order', 'desc') # Default to 'asc'
if sort_by == 'state_display':
# Fetch the objects and sort them in Python
@ -27,7 +27,7 @@ def get_domains_json(request):
sort_by = f'-{sort_by}'
objects = objects.order_by(sort_by)
paginator = Paginator(objects, 2)
paginator = Paginator(objects, 1)
page_number = request.GET.get('page')
page_obj = paginator.get_page(page_number)