update design and add pagination
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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">
|
||||
|
||||
{% 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>
|
||||
{% endfor %}
|
||||
|
||||
<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 %}
|
||||
<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>
|
||||
{% endif %}
|
||||
{% 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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
</div>
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user