- Catalog functionality integrated into document and document_version views

- small bugfixes and improvements

eveai_app/templates/document/documents.html

@@ -1,5 +1,5 @@
 {% extends 'base.html' %}
-{%  from 'macros.html' import render_selectable_table, render_pagination %}
+{% from 'macros.html' import render_selectable_table, render_pagination, render_filter_field, render_date_filter_field, render_collapsible_section, render_selectable_sortable_table_with_dict_headers %}
 
 {% block title %}Documents{% endblock %}
 
@@ -8,18 +8,88 @@
 {% block content_class %}<div class="col-xl-12 col-lg-5 col-md-7 mx-auto"></div>{% endblock %}
 
 {% block content %}
-<div class="container">
-    <form method="POST" action="{{ url_for('document_bp.handle_document_selection') }}">
-        {{ render_selectable_table(headers=["Document ID", "Name", "Valid From", "Valid To"], rows=rows, selectable=True, id="documentsTable") }}
-        <div class="form-group mt-3">
-            <button type="submit" name="action" value="edit_document" class="btn btn-primary">Edit Document</button>
-            <button type="submit" name="action" value="document_versions" class="btn btn-secondary">Show Document Versions</button>
-            <button type="submit" name="action" value="refresh_document" class="btn btn-secondary">Refresh Document (new version)</button>
-        </div>
-    </form>
-</div>
+    <!-- Filter Form -->
+    {% set filter_form %}
+        <form method="GET" action="{{ url_for('document_bp.documents') }}">
+            {{ render_filter_field('catalog_id', 'Catalog', filter_options['catalog_id'], filters.get('catalog_id', [])) }}
+            {{ render_filter_field('validity', 'Validity', filter_options['validity'], filters.get('validity', [])) }}
+
+            <button type="submit" class="btn btn-primary">Apply Filters</button>
+        </form>
+    {% endset %}
+
+    {{ render_collapsible_section('Filter', 'Filter Options', filter_form) }}
+
+    <div class="form-group mt-3">
+        <form method="POST" action="{{ url_for('document_bp.handle_document_selection') }}">
+            <!-- Documents Table -->
+            {{ render_selectable_sortable_table_with_dict_headers(
+                headers=[
+                    {"text": "ID", "sort": "id"},
+                    {"text": "Name", "sort": "name"},
+                    {"text": "Catalog", "sort": "catalog_name"},
+                    {"text": "Valid From", "sort": "valid_from"},
+                    {"text": "Valid To", "sort": "valid_to"}
+                ],
+                rows=rows,
+                selectable=True,
+                id="documentsTable",
+                sort_by=sort_by,
+                sort_order=sort_order
+            ) }}
+            <div class="form-group mt-4">
+                <button type="submit" name="action" value="edit_document" class="btn btn-primary">Edit Document</button>
+                <button type="submit" name="action" value="document_versions" class="btn btn-secondary">Show Document Versions</button>
+                <button type="submit" name="action" value="refresh_document" class="btn btn-secondary">Refresh Document (new version)</button>
+            </div>
+        </form>
+    </div>
 {% endblock %}
 
 {% block content_footer %}
     {{ render_pagination(pagination, 'document_bp.documents') }}
+{% endblock %}
+
+{% block scripts %}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const table = document.getElementById('documentsTable');
+    const headers = table.querySelectorAll('th.sortable');
+
+    headers.forEach(header => {
+        header.addEventListener('click', function() {
+            const sortBy = this.dataset.sort;
+            let sortOrder = 'asc';
+
+            if (this.querySelector('.fa-sort-up')) {
+                sortOrder = 'desc';
+            } else if (this.querySelector('.fa-sort-down')) {
+                sortOrder = 'none';
+            }
+
+            window.location.href = updateQueryStringParameter(window.location.href, 'sort_by', sortBy);
+            window.location.href = updateQueryStringParameter(window.location.href, 'sort_order', sortOrder);
+        });
+    });
+
+    function updateQueryStringParameter(uri, key, value) {
+        var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
+        var separator = uri.indexOf('?') !== -1 ? "&" : "?";
+        if (uri.match(re)) {
+            return uri.replace(re, '$1' + key + "=" + value + '$2');
+        }
+        else {
+            return uri + separator + key + "=" + value;
+        }
+    }
+
+    table.addEventListener('change', function(event) {
+        if (event.target.type === 'radio') {
+            var selectedRow = event.target.closest('tr');
+            var documentId = selectedRow.cells[1].textContent;
+            console.log('Selected Document ID:', documentId);
+        }
+    });
+});
+</script>
 {% endblock %}