coi/app/legacy/templates/legacy/datacrud_lis...

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

{% block content %}
<div class="container mx-auto px-4 py-6">
    <h1 class="text-3xl font-bold text-gray-800 mb-4">{{ page_title }}</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>
        <a href="?" class="bg-gray-300 text-gray-800 px-4 py-2 rounded hover:bg-gray-400">Reset</a>
    </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 create_url %}" 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="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 update_url obj.pk %}" class="text-blue-500 hover:underline">
                            {{ obj|attr:field.name }}
                        </a>
                    {% elif field.name == 'file' and obj.file %}
                    <a href="{{ obj.file.url }}" target="_blank">View</a>
                    {% else %}
                        {{ obj|attr:field.name }}
                    {% endif %}
                </td>
                {% endfor %}
                <td class="py-2 px-4 border-b">
                    <a href="{% url update_url obj.pk %}" 
                       class="bg-blue-500 text-white px-3 py-2 rounded hover:bg-blue-600">Edit</a>
                    <a href="{% url delete_url 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 %}
            {% 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>
<style>
/* Remove fixed layout and allow columns to grow dynamically */
table {
    table-layout: auto; /* Default is auto, can be explicitly set */
    width: 100%; /* Ensures table spans available space */
}

th, td {
    white-space: nowrap; /* Prevents text wrapping */
    text-overflow: ellipsis; /* Adds ellipsis for overflowed content if combined with max-width */
    vertical-align: top; /* Aligns content to the top */
}
</style>
{% endblock %}