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
template_name = "finance/resolution_list.html"
ordering = ["-id"]
paginate_by = 10
class ResolutionUpdateView(LoginRequiredMixin, UpdateView):
form_class = ResolutionUpdateForm

View File

@@ -6,43 +6,61 @@
<!-- Main Content -->
<main class="container mx-auto w-full px-4 my-8 flex-1">
<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-prose flex flex-col gap-4">
<div class="mx-auto max-w-5xl">
<div class="overflow-x-scroll shadow rounded">
<table class="w-full">
<thead>
<tr>
<th class="text-left">Nummer</th>
<th class="text-left">Bezeichnung</th>
<th class="text-left">Abstimmungstext</th>
<th class="text-left">Abstimmungsverhalten</th>
<th></th>
</tr>
</thead>
<tbody>
{% for result in object_list %}
<article class="flex-grow-0">
<h2 class="line-clamp-1 hover:underline decoration-1 text-gray-800 dark:text-gray-200 font-medium">{{ result.id }}: {{ result.name }}</h2>
<ul class="text-gray-700 dark:text-gray-300 text-sm sm:text-base">
<li><i class="fa-fw text-gray-600 dark:text-gray-400 mr-1"></i>{{ result.get_option_display }}</li>
<li><i class="fa-fw text-gray-600 dark:text-gray-400 mr-1"></i>{{ result.date }}</li>
<li><i class="fa-fw text-gray-600 dark:text-gray-400 mr-1"></i>Abstimmungsverhalten: {{ result.voting }}</li>
</ul>
</article>
<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>
</section>
{% if not object_list %}
<section>
<div class="mx-auto max-w-prose flex flex-col gap-4">
<h2 class="mb-1 text-gray-700 dark:text-gray-200">Keinen Beschluss in dieser Liste.</h2>
</div>
</section>
{% if is_paginated %}
<div class="mt-4 w-full flex flex-col-reverse sm:flex-row gap-y-4 justify-between items-center">
<div class="pagination-container">
<div class="pagination">
<span class="step-links">
{% if page_obj.has_previous %}
<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">
<section>
<div class="flex flex-col md:flex-row gap-y-2 md:gap-y-0 md:gap-x-2 lg:justify-end mt-4">
<a
href="{% url 'finance:resolution_create' %}"
class="btn btn-primary block md:flex-grow lg:flex-grow-0"
>
<i class="fa-solid fa-plus-square mr-2"></i>Beschluss eingeben
</a>
<span class="current active">
<a href="#" class="active">{{ page_obj.number }}</a>
</span>
{% if page_obj.has_next %}
<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>
{% endif %}
</span>
</div>
</section>
</div>
</div>
{% endif %}
</div>
</main>
{% endblock %}