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();
+        });
+    }
+
+
 });