Skip to content

Commit

Permalink
Merge pull request #104 from soehlert/topic/soehlert/sort_lists
Browse files Browse the repository at this point in the history 
feat(sorting): Implement sorting on our tables
  • Loading branch information
@soehlert
soehlert authored Oct 15, 2023
2 parents 50562bb + 73c6e86 commit 5bd153d
Show file tree
Hide file tree
Showing 11 changed files with 278 additions and 91 deletions.
17 changes: 17 additions & 0 deletions concert_elephant/static/css/project.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,3 +141,20 @@ thead.table-custom {
background-color: #A8A196;
transition: 0.7s;
}

.sort-icon .default-icon {
display: inline-block; /* By default, show the default icon */
color: black;
}

.sort-icon i.asc-icon, .sort-icon i.desc-icon {
color: black;
}

.sort-icon i.active {
display: inline-block; /* Show the icon with the 'active' class */
}

.hidden {
display: none !important;
}
1 change: 0 additions & 1 deletion concert_elephant/static/js/project.js
View file

This file was deleted.

3 changes: 2 additions & 1 deletion concert_elephant/static/js/user_detail.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,8 +145,9 @@ document.addEventListener("DOMContentLoaded", function() {

document.querySelector('#confirmDeleteBtn').addEventListener('click', function() {
const reviewId = document.getElementById('reviewId').value;
const deleteURL = deleteReviewURLTemplate.replace(0, reviewId);

fetch(deleteReviewURLTemplate.replace('REVIEW_ID', reviewId), {
fetch(deleteURL,{
method: 'DELETE',
headers: {
'X-Requested-With': 'XMLHttpRequest',
Expand Down
1 change: 0 additions & 1 deletion concert_elephant/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@
crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<!-- place project specific Javascript in this file -->
<script defer src="{% static 'js/project.js' %}"></script>
{% endblock javascript %}
</head>
<body>
Expand Down
30 changes: 28 additions & 2 deletions concert_elephant/templates/concerts/artist_list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,34 @@ <h5 class="display-4 text-center">Artists</h5>
<table class="table table-striped table-hover">
<thead class="table-custom">
<tr>
<th class="text-center" scope="col">Artist</th>
<th class="text-center" scope="col">Concerts</th>
<th class="text-center" scope="col">
Artist
<span class="sort-icon" data-sort="name">
<a href="{% if request.GET.sort_by == "name" %}?sort_by=-name{% else %}?sort_by=name{% endif %}">
<i title="Sort" class="bi bi-arrow-down-up default-icon {% if "name" in request.GET.sort_by or "-name" in request.GET.sort_by %}hidden{% endif %}"></i>
</a>
<a href="?sort_by=-name">
<i title="Change to descending" class="bi bi-arrow-up asc-icon {% if request.GET.sort_by == "name" %}active{% endif %}"></i>
</a>
<a href="?sort_by=name">
<i title="Change to ascending" class="bi bi-arrow-down desc-icon {% if request.GET.sort_by == "-name" %}active{% endif %}"></i>
</a>
</span>
</th>
<th class="text-center" scope="col">
Concerts
<span class="sort-icon" data-sort="concert_count">
<a href="{% if request.GET.sort_by == "concert_count" %}?sort_by=-concert_count{% else %}?sort_by=concert_count{% endif %}">
<i title="Sort" class="bi bi-arrow-down-up default-icon {% if "concert_count" in request.GET.sort_by or "-concert_count" in request.GET.sort_by %}hidden{% endif %}"></i>
</a>
<a href="?sort_by=-concert_count">
<i title="Change to descending" class="bi bi-arrow-up asc-icon {% if request.GET.sort_by == "concert_count" %}active{% endif %}"></i>
</a>
<a href="?sort_by=concert_count">
<i title="Change to ascending" class="bi bi-arrow-down desc-icon {% if request.GET.sort_by == "-concert_count" %}active{% endif %}"></i>
</a>
</span>
</th>
</tr>
</thead>
{% for artist in page_obj %}
Expand Down
36 changes: 27 additions & 9 deletions concert_elephant/templates/concerts/concert_list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,25 +21,43 @@ <h5 class="display-4 text-center">Concerts</h5>
<th scope="col" class="text-center">
Artist
<span class="sort-icon" data-sort="artist">
<i title="Sort" class="bi bi-arrow-down-up default-icon"></i>
<i title="Change to descending" class="bi bi-arrow-up asc-icon"></i>
<i title="Change to ascending" class="bi bi-arrow-down desc-icon"></i>
<a href="?sort_by=artist">
<i title="Sort" class="bi bi-arrow-down-up default-icon {% if request.GET.sort_by == "artist" or request.GET.sort_by == "-artist" %}hidden{% endif %}"></i>
</a>
<a href="?sort_by=-artist">
<i title="Change to descending" class="bi bi-arrow-down asc-icon {% if request.GET.sort_by == "artist" %}active{% endif %}"></i>
</a>
<a href="?sort_by=artist">
<i title="Change to ascending" class="bi bi-arrow-up desc-icon {% if request.GET.sort_by == "-artist" %}active{% endif %}"></i>
</a>
</span>
</th>
<th scope="col" class="text-center">
Venue
<span class="sort-icon" data-sort="venue">
<i title="Sort" class="bi bi-arrow-down-up default-icon"></i>
<i title="Change to descending" class="bi bi-arrow-up asc-icon"></i>
<i title="Change to ascending" class="bi bi-arrow-down desc-icon"></i>
<a href="?sort_by=venue">
<i title="Sort" class="bi bi-arrow-down-up default-icon {% if request.GET.sort_by == "venue" or request.GET.sort_by == "-venue" %}hidden{% endif %}"></i>
</a>
<a href="?sort_by=-venue">
<i title="Change to descending" class="bi bi-arrow-down asc-icon {% if request.GET.sort_by == "venue" %}active{% endif %}"></i>
</a>
<a href="?sort_by=venue">
<i title="Change to ascending" class="bi bi-arrow-up desc-icon {% if request.GET.sort_by == "-venue" %}active{% endif %}"></i>
</a>
</span>
</th>
<th scope="col" class="text-center">
Date
<span class="sort-icon" data-sort="date">
<i title="Sort" class="bi bi-arrow-down-up default-icon"></i>
<i title="Change to descending" class="bi bi-arrow-up asc-icon"></i>
<i title="Change to ascending" class="bi bi-arrow-down desc-icon"></i>
<a href="?sort_by=date">
<i title="Sort" class="bi bi-arrow-down-up default-icon {% if request.GET.sort_by == "date" or request.GET.sort_by == "-date" %}hidden{% endif %}"></i>
</a>
<a href="?sort_by=-date">
<i title="Change to descending" class="bi bi-arrow-down asc-icon {% if request.GET.sort_by == "date" %}active{% endif %}"></i>
</a>
<a href="?sort_by=date">
<i title="Change to ascending" class="bi bi-arrow-up desc-icon {% if request.GET.sort_by == "-date" %}active{% endif %}"></i>
</a>
</span>
</th>
<th class="text-center">Openers</th>
Expand Down
62 changes: 57 additions & 5 deletions concert_elephant/templates/concerts/venue_list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,62 @@ <h5 class="display-4 text-center">Venues</h5>
<table class="table table-striped table-hover">
<thead class="table-custom">
<tr>
<th class="text-center" scope="col">Venue</th>
<th class="text-center" scope="col">City</th>
<th class="text-center" scope="col">Country</th>
<th class="text-center" scope="col">Concerts</th>
<th class="text-center" scope="col">
Venue
<span class="sort-icon" data-sort="name">
<a href="{% if request.GET.sort_by == "name" %}?sort_by=-name{% else %}?sort_by=name{% endif %}">
<i title="Sort" class="bi bi-arrow-down-up default-icon {% if "name" in request.GET.sort_by or "-name" in request.GET.sort_by %}hidden{% endif %}"></i>
</a>
<a href="?sort_by=-name">
<i title="Change to descending" class="bi bi-arrow-up asc-icon {% if request.GET.sort_by == "name" %}active{% endif %}"></i>
</a>
<a href="?sort_by=name">
<i title="Change to ascending" class="bi bi-arrow-down desc-icon {% if request.GET.sort_by == "-name" %}active{% endif %}"></i>
</a>
</span>
</th>
<th class="text-center" scope="col">
City
<span class="sort-icon" data-sort="city">
<a href="{% if request.GET.sort_by == "city" %}?sort_by=-city{% else %}?sort_by=city{% endif %}">
<i title="Sort" class="bi bi-arrow-down-up default-icon {% if "city" in request.GET.sort_by or "-city" in request.GET.sort_by %}hidden{% endif %}"></i>
</a>
<a href="?sort_by=-city">
<i title="Change to descending" class="bi bi-arrow-up asc-icon {% if request.GET.sort_by == "city" %}active{% endif %}"></i>
</a>
<a href="?sort_by=city">
<i title="Change to ascending" class="bi bi-arrow-down desc-icon {% if request.GET.sort_by == "-city" %}active{% endif %}"></i>
</a>
</span>
</th>
<th class="text-center" scope="col">
Country
<span class="sort-icon" data-sort="country">
<a href="{% if request.GET.sort_by == "country" %}?sort_by=-country{% else %}?sort_by=country{% endif %}">
<i title="Sort" class="bi bi-arrow-down-up default-icon {% if "country" in request.GET.sort_by or "-country" in request.GET.sort_by %}hidden{% endif %}"></i>
</a>
<a href="?sort_by=-country">
<i title="Change to descending" class="bi bi-arrow-up asc-icon {% if request.GET.sort_by == "country" %}active{% endif %}"></i>
</a>
<a href="?sort_by=country">
<i title="Change to ascending" class="bi bi-arrow-down desc-icon {% if request.GET.sort_by == "-country" %}active{% endif %}"></i>
</a>
</span>
</th>
<th class="text-center" scope="col">
Concerts
<span class="sort-icon" data-sort="concert_count">
<a href="{% if request.GET.sort_by == "concert_count" %}?sort_by=-concert_count{% else %}?sort_by=concert_count{% endif %}">
<i title="Sort" class="bi bi-arrow-down-up default-icon {% if "concert_count" in request.GET.sort_by or "-concert_count" in request.GET.sort_by %}hidden{% endif %}"></i>
</a>
<a href="?sort_by=-concert_count">
<i title="Change to descending" class="bi bi-arrow-up asc-icon {% if request.GET.sort_by == "concert_count" %}active{% endif %}"></i>
</a>
<a href="?sort_by=concert_count">
<i title="Change to ascending" class="bi bi-arrow-down desc-icon {% if request.GET.sort_by == "-concert_count" %}active{% endif %}"></i>
</a>
</span>
</th>
</tr>
</thead>
{% for venue in page_obj %}
Expand All @@ -29,7 +81,7 @@ <h5 class="display-4 text-center">Venues</h5>
<td class="align-middle text-center">{{ venue.name }}</td>
<td class="align-middle text-center">{{ venue.city }}</td>
<td class="align-middle text-center">{{ venue.country }}</td>
<td class="align-middle text-center">{{ venue.concerts.count }}</td>
<td class="align-middle text-center">{{ venue.concert_count }}</td>
</tr>
{% endfor %}
</table>
Expand Down
46 changes: 22 additions & 24 deletions concert_elephant/templates/pagination_partial.html
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,27 @@
{% load custom_filters %}

<div class="pagination justify-content-center mb-5">
<span class="step-links">
{% if paginator_data.has_previous %}
<a href="?page=1" class="btn btn-outline-primary text-white">&laquo; first</a>
<a href="?page={{ paginator_data.previous_page_number }}"
class="btn btn-outline-primary text-white">previous</a>
{% endif %}
{% for page_number in paginator_data.paginator.page_range %}
{% if page_number >= paginator_data.number|subtract:"2" and page_number <= paginator_data.number|add:"2" %}
{% if paginator_data.number == page_number %}
<button class="btn btn-outline-primary active text-white">
<span class="current-page">{{ paginator_data.number }}</span>
</button>
{% else %}
<a href="?page={{ page_number }}"
class="btn btn-outline-primary text-white">{{ page_number }}</a>
<span class="step-links">
{% if paginator_data.has_previous %}
<a href="?page=1{% if request.GET.sort_by %}&sort_by={{ request.GET.sort_by }}{% endif %}" class="btn btn-outline-primary text-white">&laquo; first</a>
<a href="?page={{ paginator_data.previous_page_number }}{% if request.GET.sort_by %}&sort_by={{ request.GET.sort_by }}{% endif %}" class="btn btn-outline-primary text-white">previous</a>
{% endif %}
{% endif %}
{% endfor %}
{% if paginator_data.has_next %}
<a href="?page={{ paginator_data.next_page_number }}"
class="btn btn-outline-primary text-white">next</a>
<a href="?page={{ paginator_data.paginator.num_pages }}"
class="btn btn-outline-primary text-white">last &raquo;</a>
{% endif %}
</span>

{% for page_number in paginator_data.paginator.page_range %}
{% if page_number >= paginator_data.number|subtract:"2" and page_number <= paginator_data.number|add:"2" %}
{% if paginator_data.number == page_number %}
<button class="btn btn-outline-primary active text-white">
<span class="current-page">{{ paginator_data.number }}</span>
</button>
{% else %}
<a href="?page={{ page_number }}{% if request.GET.sort_by %}&sort_by={{ request.GET.sort_by }}{% endif %}" class="btn btn-outline-primary text-white">{{ page_number }}</a>
{% endif %}
{% endif %}
{% endfor %}

{% if paginator_data.has_next %}
<a href="?page={{ paginator_data.next_page_number }}{% if request.GET.sort_by %}&sort_by={{ request.GET.sort_by }}{% endif %}" class="btn btn-outline-primary text-white">next</a>
<a href="?page={{ paginator_data.paginator.num_pages }}{% if request.GET.sort_by %}&sort_by={{ request.GET.sort_by }}{% endif %}" class="btn btn-outline-primary text-white">last &raquo;</a>
{% endif %}
</span>
</div>
57 changes: 49 additions & 8 deletions concert_elephant/templates/users/user_detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,55 @@ <h5 class="card-header card-header-custom display-4 text-center">My Concerts</h5
{% if object == request.user %}
<div class="table-responsive">
<table class="table table-striped">
<tr>
<th class="col-2">Artist</th>
<th class="col-2 text-center">Venue</th>
<th class="col-2 text-center">Date</th>
<th class="col-2 text-center">Openers</th>
<th class="col-4">Review</th>
<th class="col-1"></th>
</tr>
<thead class="table-custom">
<tr>
<th class="col-2">
Artist
<span class="sort-icon" data-sort="artist">
<a href="{% if request.GET.sort_by == "artist" %}?sort_by=-artist{% else %}?sort_by=artist{% endif %}">
<i title="Sort" class="bi bi-arrow-down-up default-icon {% if "artist" in request.GET.sort_by or "-artist" in request.GET.sort_by %}hidden{% endif %}"></i>
</a>
<a href="?sort_by=-artist">
<i title="Change to descending" class="bi bi-arrow-up asc-icon {% if request.GET.sort_by == "artist" %}active{% endif %}"></i>
</a>
<a href="?sort_by=artist">
<i title="Change to ascending" class="bi bi-arrow-down desc-icon {% if request.GET.sort_by == "-artist" %}active{% endif %}"></i>
</a>
</span>
</th>
<th class="col-2 text-center">
Venue
<span class="sort-icon" data-sort="venue">
<a href="{% if request.GET.sort_by == "venue" %}?sort_by=-venue{% else %}?sort_by=venue{% endif %}">
<i title="Sort" class="bi bi-arrow-down-up default-icon {% if "venue" in request.GET.sort_by or "-venue" in request.GET.sort_by %}hidden{% endif %}"></i>
</a>
<a href="?sort_by=-venue">
<i title="Change to descending" class="bi bi-arrow-up asc-icon {% if request.GET.sort_by == "venue" %}active{% endif %}"></i>
</a>
<a href="?sort_by=venue">
<i title="Change to ascending" class="bi bi-arrow-down desc-icon {% if request.GET.sort_by == "-venue" %}active{% endif %}"></i>
</a>
</span>
</th>
<th class="col-2 text-center">
Date
<span class="sort-icon" data-sort="date">
<a href="{% if request.GET.sort_by == "date" %}?sort_by=-date{% else %}?sort_by=date{% endif %}">
<i title="Sort" class="bi bi-arrow-down-up default-icon {% if "date" in request.GET.sort_by or "-date" in request.GET.sort_by %}hidden{% endif %}"></i>
</a>
<a href="?sort_by=-date">
<i title="Change to descending" class="bi bi-arrow-up asc-icon {% if request.GET.sort_by == "date" %}active{% endif %}"></i>
</a>
<a href="?sort_by=date">
<i title="Change to ascending" class="bi bi-arrow-down desc-icon {% if request.GET.sort_by == "-date" %}active{% endif %}"></i>
</a>
</span>
</th>
<th class="col-2 text-center">Openers</th>
<th class="col-4">Review</th>
<th class="col-1"></th>
</tr>
</thead>
{% for concert in concerts_with_reviews %}
<tr data-concert-details-url="{% url 'concerts:concert-detail' concert.id %}">
<td class="align-middle">{{ concert.artist }}</td>
Expand Down
Loading

0 comments on commit 5bd153d

Please sign in to comment.