coi/app/legacy/templates/legacy/data_list.html

{% extends "base.html" %}
{% load legacy_filters %}
{% load tailwind_filters %}
{% block title %}Data List{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-6">
    <h1 class="text-3xl font-bold text-gray-800 mb-4">Data List</h1>
  

     <!-- Filter Form -->
    <form method="get" class="flex items-center space-x-4 mb-4">
        {{ filter.form | crispy }}
        <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Filter</button>
    </form>

    <!-- Create Button -->
    <div class="my-4 flex">
       <p class="text-gray-600 mb-4 mr-auto">
        Total Records: {{ page_obj.paginator.count }}
    </p>
        <a href="{% url 'legacy:data-create' %}" class="ml-auto bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
            Create New Data
        </a>
    </div>


    
    <!-- Data Table -->
    <div class="clear-both bg-white shadow rounded-lg overflow-x-auto">

        <table class="min-w-[2500px] table-auto w-full border-collapse border border-gray-200">
            <thead>
                <tr class="bg-gray-100 text-left text-sm uppercase">
                    {% for field in fields %}
                      <th class="border border-gray-200 px-4 py-2 text-left">{{ field.verbose_name }}</th>
                    {% endfor %}
                    <th class="py-2 px-4 border-b">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for obj in page_obj %}
                    <tr class="hover:bg-gray-50">
                        {% for field in fields %}
                        <td class="border border-gray-200 px-4 py-2">
                           {% if field.name == 'id' %}
                              <a href="{% url 'legacy:data-update' obj.id %}" class="text-blue-500 hover:underline">
                                  {{ obj|attr:field.name }}
                              </a>
                          {% else %}
                             {{ obj|attr:field.name }}
                          {% endif %}
                        </td>
                        {% endfor %}
                        <td class="py-2 px-4 border-b">
                            <a href="{% url 'legacy:data-update' obj.pk %}" 
                              class="bg-blue-500 text-white px-3 py-2 rounded hover:bg-blue-600">Edit</a>
                            <a href="{% url 'legacy:data-delete' obj.pk %}" 
                              class="bg-red-500 text-white px-3 py-2 rounded hover:bg-red-600"
                              >Delete</a>
                        </td>
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="5" class="py-4 px-4 text-center text-gray-600">No data available.</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="mt-6 flex justify-between items-center">
        <div>
            <span class="text-sm text-gray-600">
                Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
            </span>
        </div>
        <div class="space-x-2">
            {% if page_obj.has_previous %}
                <a href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value|urlencode }}&{% endif %}{% endfor %}page=1" 
                   class="text-blue-500 hover:underline">First</a>
                <a href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value|urlencode }}&{% endif %}{% endfor %}page={{ page_obj.previous_page_number }}" 
                   class="text-blue-500 hover:underline">Previous</a>
            {% endif %}
            {% for page_num in page_obj.paginator.page_range %}
                {% if page_num == page_obj.number %}
                    <span class="font-bold text-gray-700">{{ page_num }}</span>
                {% elif page_num == 1 or page_num == page_obj.paginator.num_pages or page_num >= page_obj.number|add:"-2" and page_num <= page_obj.number|add:"2" %}
                    <a href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value|urlencode }}&{% endif %}{% endfor %}page={{ page_num }}" 
                       class="text-blue-500 hover:underline">{{ page_num }}</a>
                {% elif page_num == page_obj.number|add:-3 or page_num == page_obj.number|add:3 %}
                    <span class="mx-1">...</span>
                {% endif %}
            {% endfor %}
            {% if page_obj.has_next %}
                <a href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value|urlencode }}&{% endif %}{% endfor %}page={{ page_obj.next_page_number }}" 
                   class="text-blue-500 hover:underline">Next</a>
                <a href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value|urlencode }}&{% endif %}{% endfor %}page={{ page_obj.paginator.num_pages }}" 
                   class="text-blue-500 hover:underline">Last</a>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}