Added filter functionality and combined both base.html

static/js/crud-list.js

@@ -81,30 +81,30 @@ document.addEventListener('DOMContentLoaded', function() {
         deleteModal.style.display = 'none';
     });
 
-confirmDelete.addEventListener('click', function() {
-    if (selectedId) {
-        const deleteUrl = deleteBtn.dataset.url.replace('0', selectedId);
+    confirmDelete.addEventListener('click', function() {
+        if (selectedId) {
+            const deleteUrl = deleteBtn.dataset.url.replace('0', selectedId);
 
-        fetch(deleteUrl, {
-            method: 'POST',
-            headers: {
-                'X-CSRFToken': getCookie('csrftoken')
-            },
-        })
-        .then(response => {
-            if (response.ok) {
-                window.location.reload(); // This reloads the page after success
-            } else {
+            fetch(deleteUrl, {
+                method: 'POST',
+                headers: {
+                    'X-CSRFToken': getCookie('csrftoken')
+                },
+            })
+            .then(response => {
+                if (response.ok) {
+                    window.location.reload(); // This reloads the page after success
+                } else {
+                    alert('Error deleting item');
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
                 alert('Error deleting item');
-            }
-        })
-        .catch(error => {
-            console.error('Error:', error);
-            alert('Error deleting item');
-        });
-    }
-    deleteModal.style.display = 'none';
-});
+            });
+        }
+        deleteModal.style.display = 'none';
+    });
 
     window.addEventListener('click', function(event) {
         if (event.target === deleteModal) {
@@ -126,4 +126,45 @@ confirmDelete.addEventListener('click', function() {
         }
         return cookieValue;
     }
+
+    const filterInput = document.getElementById('filterInput');
+    const activeBtn = document.getElementById('activeBtn');
+    const allBtn = document.getElementById('allBtn');
+    const filterForm = document.getElementById('filterForm');
+
+    if (activeBtn && allBtn && filterInput && filterForm) {
+        // Read filter from cookie if present
+        const filterCookie = getCookie('list_filter');
+        if (filterCookie && !filterInput.value) {
+            filterInput.value = filterCookie;
+        }
+
+        function updateButtons() {
+            if (filterInput.value === 'all') {
+                allBtn.classList.add('active');
+                activeBtn.classList.remove('active');
+            } else {
+                activeBtn.classList.add('active');
+                allBtn.classList.remove('active');
+            }
+        }
+
+        updateButtons();
+
+        activeBtn.addEventListener('click', function() {
+            filterInput.value = 'active';
+            document.cookie = 'list_filter=active;path=/';
+            updateButtons();
+            filterForm.submit();
+        });
+
+        allBtn.addEventListener('click', function() {
+            filterInput.value = 'all';
+            document.cookie = 'list_filter=all;path=/';
+            updateButtons();
+            filterForm.submit();
+        });
+    }
+
+
 });

static/styles/forms.css

@@ -101,6 +101,13 @@ button.btn-secondary:hover{
     background-color: #EDDECB;
 }
 
+.btn.active {
+    background-color: #0d6efd;
+    color: #fff;
+    border-color: #0d6efd;
+}
+
+
 /* Error messages */
 .errorlist {
     color: #dc3545;
@@ -340,4 +347,9 @@ button.btn-secondary:hover{
         box-shadow: none !important;
         border: none !important;
     }
+}
+#filterForm {
+    border: none !important;
+    margin: 0 !important;
+    padding: 0 !important;
 }