Skip to content

Commit

Permalink
refactor adminalerts template (#1249)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikkonie
mikkonie committed Aug 25, 2023
1 parent d088d50 commit 9629429
Show file tree
Hide file tree
Showing 2 changed files with 106 additions and 114 deletions.
212 changes: 101 additions & 111 deletions adminalerts/templates/adminalerts/alert_list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,31 +13,26 @@
table#sodar-aa-list-table tbody tr td:nth-child(4) {
white-space: nowrap;
}

table#sodar-aa-list-table thead tr th:nth-child(5),
table#sodar-aa-list-table tbody tr td:nth-child(5) {
width: 150px;
}

table#sodar-aa-list-table tr td:nth-child(6) {
width: 75px;
}

/* Responsive modifications */
@media screen and (max-width: 1100px) {
table#sodar-aa-list-table thead tr th:nth-child(3),
table#sodar-aa-list-table tbody tr td:nth-child(3) {
display: none;
}
}

@media screen and (max-width: 900px) {
table#sodar-aa-list-table thead tr th:nth-child(2),
table#sodar-aa-list-table tbody tr td:nth-child(2) {
display: none;
}
}

@media screen and (max-width: 750px) {
table#sodar-aa-list-table thead tr th:nth-child(4),
table#sodar-aa-list-table tbody tr td:nth-child(4) {
Expand All @@ -47,20 +42,110 @@
</style>
{% endblock css %}

{% block projectroles %}

<div class="row sodar-subtitle-container bg-white sticky-top">
<h2><i class="iconify" data-icon="mdi:alert"></i> Admin Alerts</h2>
<a role="button" class="btn btn-primary ml-auto"
href="{% url 'adminalerts:create' %}">
<i class="iconify" data-icon="mdi:plus-bold"></i> Create Alert
</a>
</div>

<div class="container-fluid sodar-page-container">
<div class="card" id="sodar-aa-alert-list">
<div class="card-body p-0">
<table class="table table-striped sodar-card-table"
id="sodar-aa-list-table">
<thead>
<tr>
<th>Message</th>
<th>User</th>
<th>Created</th>
<th>Expiry</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
{% for a in object_list %}
<tr {% if not a.is_active %}class="text-muted"{% endif %}
id="sodar-aa-alert-item-{{ a.pk }}">
<td>
<a href="{% url 'adminalerts:detail' adminalert=a.sodar_uuid %}">
{{ a.message }}
</a>
</td>
<td>{% get_user_html a.user as user_html %}{{ user_html|safe }}</td>
<td>{{ a.date_created | date:'Y-m-d H:i:s' }}</td>
<td>{{ a.date_expire | date:'Y-m-d' }}</td>
<td>
<button class="btn sodar-list-btn
{% if not a.is_expired and a.active %}btn-success
{% elif not a.is_expired and not a.active %} btn-warning
{% else %} btn-danger{% endif %} js-change-alert-state-button"
type="button" data-url="{% url 'adminalerts:ajax_active_toggle' adminalert=a.sodar_uuid %}"
{% if a.is_expired %}disabled{% endif %}>
{% if a.is_expired %}
EXPIRED
{% elif a.active %}
ACTIVE
{% else %}
INACTIVE
{% endif %}
</button>
</td>
<td>
<button class="btn btn-secondary dropdown-toggle sodar-list-dropdown"
type="button" data-toggle="dropdown" aria-expanded="false">
<i class="iconify" data-icon="mdi:cog"></i>
</button>
<div class="dropdown-menu dropdown-menu-right sodar-aa-alert-dropdown">
<a class="dropdown-item"
href="{% url 'adminalerts:update' adminalert=a.sodar_uuid %}">
<i class="iconify" data-icon="mdi:lead-pencil"></i>
Update Alert
</a>
<a class="dropdown-item text-danger"
href="{% url 'adminalerts:delete' adminalert=a.sodar_uuid %}">
<i class="iconify" data-icon="mdi:close-thick"></i>
Delete Alert
</a>
</div>
</td>
</tr>
{% endfor %}
{% if not object_list %}
<tr>
<td class="bg-faded font-italic text-center" colspan="6">
No alerts found.
</td>
</tr>
{% endif %}
</tbody>
</table>
</div>
</div>
{% if is_paginated %}
{% include 'projectroles/_pagination.html' with pg_small=False %}
{% endif %}
</div>

{% endblock projectroles %}

{% block javascript %}
{{ block.super }}
<script>
function toogleBtnState(button, is_active)
{
function toogleBtnState(button, is_active) {
if (is_active) {
button.classList.add("btn-success");
button.classList.remove("btn-warning");
button.innerText = 'ACTIVE';
} else {
button.innerText = 'INACTIVE';
button.classList.remove("btn-success");
button.classList.add("btn-warning");
}
button.classList.add("btn-success");
button.classList.remove("btn-warning");
button.innerText = 'ACTIVE';
} else {
button.innerText = 'INACTIVE';
button.classList.remove("btn-success");
button.classList.add("btn-warning");
}
}

$('.js-change-alert-state-button').each(function () {
Expand All @@ -69,11 +154,9 @@
// to improve responsiveness
const is_active_guess = event.target.innerText = 'ACTIVE';
toogleBtnState(event.target, is_active_guess);

$.ajax({
type: 'POST',
url: event.target.dataset.url,

success: function (data) {
// Check if we guessed correctly
if (data.is_active === is_active_guess)
Expand All @@ -84,97 +167,4 @@
});
});
</script>
{% endblock javascript %}

{% block projectroles %}

<div class="row sodar-subtitle-container bg-white sticky-top">
<h2><i class="iconify" data-icon="mdi:alert"></i> Admin Alerts</h2>

<a role="button" class="btn btn-primary ml-auto"
href="{% url 'adminalerts:create' %}">
<i class="iconify" data-icon="mdi:plus-bold"></i> Create Alert
</a>
</div>

<div class="container-fluid sodar-page-container">

{% if object_list.count > 0 %}
<div class="card" id="sodar-aa-alert-list">
<div class="card-body p-0">
<table class="table table-striped sodar-card-table" id="sodar-aa-list-table">
<thead>
<tr>
<th>Message</th>
<th>User</th>
<th>Created</th>
<th>Expiry</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
{% for a in object_list %}
<tr {% if not a.is_active %}class="text-muted"{% endif %}
id="sodar-aa-alert-item-{{ a.pk }}">
<td><a href="{% url 'adminalerts:detail' adminalert=a.sodar_uuid %}">{{ a.message }}</a></td>
<td>{% get_user_html a.user as user_html %}{{ user_html|safe }}</td>
<td>{{ a.date_created | date:'Y-m-d H:i:s' }}</td>
<td>{{ a.date_expire | date:'Y-m-d' }}</td>
<td>
<button class="btn sodar-list-btn
{% if not a.is_expired and a.active %}btn-success
{% elif not a.is_expired and not a.active %} btn-warning
{% else %} btn-danger{% endif %} js-change-alert-state-button"
type="button" data-url="{% url 'adminalerts:ajax_active_toggle' adminalert=a.sodar_uuid %}"
{% if a.is_expired %}disabled{% endif %}
>
{% if a.is_expired %}
EXPIRED
{% elif a.active %}
ACTIVE
{% else %}
INACTIVE
{% endif %}
</button>
</td>
<td>
<div class="btn-group sodar-list-btn-group" id="sodar-aa-alert-buttons-{{ a.pk }}">
<button class="btn btn-secondary dropdown-toggle sodar-list-dropdown"
type="button" data-toggle="dropdown" aria-expanded="false">
<i class="iconify" data-icon="mdi:cog"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item"
href="{% url 'adminalerts:update' adminalert=a.sodar_uuid %}">
<i class="iconify" data-icon="mdi:lead-pencil"></i> Update Alert
</a>
<a class="dropdown-item text-danger"
href="{% url 'adminalerts:delete' adminalert=a.sodar_uuid %}">
<i class="iconify" data-icon="mdi:close-thick"></i> Delete Alert
</a>
</div>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>

{% if is_paginated %}
{% include 'projectroles/_pagination.html' with pg_small=False %}
{% endif %}

{% else %} {# if object_list.count == 0 #}
<div class="container-fluid">
<div class="alert alert-info" role="alert">
No alerts found.
</div>
</div>
{% endif %}

</div>

{% endblock projectroles %}
{% endblock javascript %}
8 changes: 5 additions & 3 deletions adminalerts/tests/test_ui.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,8 +87,10 @@ def test_list_items(self):
url = reverse('adminalerts:list')
self.assert_element_count(expected, url, 'sodar-aa-alert-item', 'id')

def test_list_buttons(self):
"""Test existence of buttons in list"""
def test_list_dropdown(self):
"""Test existence of alert dropdown in list"""
expected = [(self.superuser, 1)]
url = reverse('adminalerts:list')
self.assert_element_count(expected, url, 'sodar-aa-alert-buttons', 'id')
self.assert_element_count(
expected, url, 'sodar-aa-alert-dropdown', 'class'
)

0 comments on commit 9629429

Please sign in to comment.