added grid.js

frontend/templates/files.html

@@ -1,84 +1,46 @@
 {% extends "base.html" %}
-{% block title %}Files{% endblock %}
+{% block title %}File Records{% endblock %}
+
+{% block head_extra %}
+  <!-- Include Grid.js CSS -->
+  <link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
+{% endblock %}
 
 {% block content %}
 <div class="max-w-7xl mx-auto px-4 py-8">
   <h2 class="text-3xl font-bold mb-6">File Records</h2>
-
+  <!-- Grid.js will render the table in this container -->
-  <!-- Placeholder for the table -->
+  <div id="gridjs-wrapper"></div>
-  <div id="fileTableContainer" class="overflow-x-auto bg-white shadow-md rounded">
-    <!-- We’ll fill this via JS -->
-    <table id="fileTable" class="min-w-full text-left border-collapse hidden">
-      <thead>
-        <tr class="border-b bg-gray-100">
-          <th class="py-3 px-4">ID</th>
-          <th class="py-3 px-4">Original Filename</th>
-          <th class="py-3 px-4">Size</th>
-          <th class="py-3 px-4">Mime Type</th>
-          <th class="py-3 px-4">Created At</th>
-        </tr>
-      </thead>
-      <tbody id="fileTableBody">
-        <!-- Rows inserted by JS -->
-      </tbody>
-    </table>
-  </div>
-
-  <p id="noFilesMsg" class="text-gray-600 hidden">
-    No files found.
-  </p>
 </div>
 {% endblock %}
 
 {% block scripts %}
-<script>
+  <!-- Include Grid.js JS -->
-  // Once the DOM is ready, fetch from /api/files
+  <script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
-  document.addEventListener("DOMContentLoaded", async () => {
+  <script>
-    const table = document.getElementById("fileTable");
+    new gridjs.Grid({
-    const tableBody = document.getElementById("fileTableBody");
+      columns: [
-    const noFilesMsg = document.getElementById("noFilesMsg");
+        { id: 'id', name: 'ID' },
-
+        { id: 'original_filename', name: 'Original Filename' },
-    try {
+        { id: 'file_size', name: 'File Size' },
-      const resp = await fetch("/api/files");
+        { id: 'mime_type', name: 'Mime Type' },
-      if (!resp.ok) {
+        { id: 'created_at', name: 'Created At' }
-        // e.g. 401 => not logged in, or 403 => forbidden
+      ],
-        if (resp.status === 401) {
+      server: {
-          // Could redirect to /login
+        url: '/api/files',
-          window.location.href = "/login";
+        then: data => data.map(file => [
-          return;
+          file.id,
-        }
+          file.original_filename || "",
-        throw new Error(`HTTP ${resp.status} - ${resp.statusText}`);
+          file.file_size,
+          file.mime_type,
+          file.created_at || ""
+        ])
+      },
+      search: true,
+      sort: true,
+      pagination: {
+        limit: 10
       }
-      const data = await resp.json(); // array of file objects
+    }).render(document.getElementById("gridjs-wrapper"));
-
+  </script>
-      // If empty, show "No files" message
-      if (!data || data.length === 0) {
-        noFilesMsg.classList.remove("hidden");
-        return;
-      }
-
-      // Otherwise, fill the table
-      data.forEach(file => {
-        const row = document.createElement("tr");
-        row.className = "border-b hover:bg-gray-50";
-
-        row.innerHTML = `
-          <td class="py-3 px-4">${file.id}</td>
-          <td class="py-3 px-4">${file.original_filename ?? ""}</td>
-          <td class="py-3 px-4">${file.file_size}</td>
-          <td class="py-3 px-4">${file.mime_type}</td>
-          <td class="py-3 px-4">${file.created_at ? file.created_at : ""}</td>
-        `;
-
-        tableBody.appendChild(row);
-      });
-
-      // Show the table now that we have data
-      table.classList.remove("hidden");
-    } catch (err) {
-      console.error("Failed to load file records:", err);
-      alert("Could not load files from /api/files. Check console for details.");
-    }
-  });
-</script>
 {% endblock %}