update design and add pagination

This commit is contained in:
2024-01-21 22:26:50 +00:00
parent 77811f4017
commit bcf8956c05
2 changed files with 55 additions and 34 deletions

View File

@@ -106,6 +106,9 @@ class ResolutionListView(LoginRequiredMixin, ListView):
model = Resolution model = Resolution
template_name = "finance/resolution_list.html" template_name = "finance/resolution_list.html"
ordering = ["-id"]
paginate_by = 10
class ResolutionUpdateView(LoginRequiredMixin, UpdateView): class ResolutionUpdateView(LoginRequiredMixin, UpdateView):
form_class = ResolutionUpdateForm form_class = ResolutionUpdateForm

View File

@@ -6,43 +6,61 @@
<!-- Main Content --> <!-- Main Content -->
<main class="container mx-auto w-full px-4 my-8 flex-1"> <main class="container mx-auto w-full px-4 my-8 flex-1">
<h1 class="page-title">Beschlusssammlung</h1> <h1 class="page-title">Beschlusssammlung</h1>
<a href="{% url 'finance:resolution_create' %}" class="page-subtitle block btn-small btn-primary max-w-xs mx-auto sm:w-max sm:mr-0 sm:ml-auto">
<i class="fa-solid fa-plus mr-1"></i> Beschluss eingeben
</a>
<section> <div class="mx-auto max-w-5xl">
<div class="mx-auto max-w-prose flex flex-col gap-4"> <div class="overflow-x-scroll shadow rounded">
<table class="w-full">
{% for result in object_list %} <thead>
<article class="flex-grow-0"> <tr>
<h2 class="line-clamp-1 hover:underline decoration-1 text-gray-800 dark:text-gray-200 font-medium">{{ result.id }}: {{ result.name }}</h2> <th class="text-left">Nummer</th>
<ul class="text-gray-700 dark:text-gray-300 text-sm sm:text-base"> <th class="text-left">Bezeichnung</th>
<li><i class="fa-fw text-gray-600 dark:text-gray-400 mr-1"></i>{{ result.get_option_display }}</li> <th class="text-left">Abstimmungstext</th>
<li><i class="fa-fw text-gray-600 dark:text-gray-400 mr-1"></i>{{ result.date }}</li> <th class="text-left">Abstimmungsverhalten</th>
<li><i class="fa-fw text-gray-600 dark:text-gray-400 mr-1"></i>Abstimmungsverhalten: {{ result.voting }}</li> <th></th>
</ul> </tr>
</article> </thead>
{% endfor %} <tbody>
{% for result in object_list %}
<tr>
<td class="text-right">{{ result.id }}</td>
<td>{{ result.name }}</td>
<td class="text-left">{{ result.voting_text }}</td>
<td class="text-left">{{ result.voting }}</td>
<td>
<a href="{% url 'finance:resolution_update' result.id %}" class="btn btn-small btn-tertiary"><i class="fa-solid fa-pen-to-square" aria-label="Bearbeiten" title="Bearbeiten"></i></a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div> </div>
</section>
{% if not object_list %} {% if is_paginated %}
<section> <div class="mt-4 w-full flex flex-col-reverse sm:flex-row gap-y-4 justify-between items-center">
<div class="mx-auto max-w-prose flex flex-col gap-4"> <div class="pagination-container">
<h2 class="mb-1 text-gray-700 dark:text-gray-200">Keinen Beschluss in dieser Liste.</h2> <div class="pagination">
</div> <span class="step-links">
</section> {% if page_obj.has_previous %}
{% endif %} <a href="?page={{ page_obj.previous_page_number }}"><i class="fa-solid fa-arrow-left" aria-label="Eine Seite zurück"></i> Zurück</a>
<a href="?page=1">1</a>
{% endif %}
<div class="flex flex-col gap-y-4 max-w-prose mx-auto text-gray-700 dark:text-gray-300"> <span class="current active">
<section> <a href="#" class="active">{{ page_obj.number }}</a>
<div class="flex flex-col md:flex-row gap-y-2 md:gap-y-0 md:gap-x-2 lg:justify-end mt-4"> </span>
<a
href="{% url 'finance:resolution_create' %}" {% if page_obj.has_next %}
class="btn btn-primary block md:flex-grow lg:flex-grow-0" <a href="?page={{ page_obj.paginator.num_pages }}">{{ page_obj.paginator.num_pages }}</a>
> <a href="?page={{ page_obj.next_page_number }}">Vor <i class="fa-solid fa-arrow-right" aria-label="Eine Seite vor"></i></a>
<i class="fa-solid fa-plus-square mr-2"></i>Beschluss eingeben {% endif %}
</a> </span>
</div>
</div>
</div> </div>
</section> {% endif %}
</div> </div>
</main> </main>
{% endblock %} {% endblock %}