Add a filter by user and due date + minor changes

assets/css/app.css

@@ -468,6 +468,11 @@ nav .active a {
     background-color: red;
 }
 
+a.filter-on {
+    font-weight: bold;
+    color: #333;
+}
+
 .task-title {
     margin-top: 10px;
     font-size: 110%;

assets/js/board.js

@@ -208,6 +208,8 @@
         });
     }
 
+    // Drag and drop events
+
     var dragSrcItem = null;
     var dragSrcColumn = null;
 
@@ -235,4 +237,56 @@
         });
     });
 
+    // Filtering
+
+    function getSelectedUserFilter()
+    {
+        var select = document.getElementById("form-user_id");
+        return select.options[select.selectedIndex].value;
+    }
+
+    function hasDueDateFilter()
+    {
+        var dateFilter = document.getElementById("filter-due-date");
+        return dateFilter.classList.contains("filter-on");
+    }
+
+    function applyFilter(selectedUserId, filterDueDate)
+    {
+        [].forEach.call(document.querySelectorAll('[data-task-id]'), function (item) {
+
+            var ownerId = item.getAttribute("data-owner-id");
+            var dueDate = item.getAttribute("data-due-date");
+
+            if (ownerId != selectedUserId && selectedUserId != -1) {
+                item.style.opacity = "0.2";
+            }
+            else {
+                item.style.opacity = "1.0";
+            }
+
+            if (filterDueDate && dueDate == "") {
+                item.style.opacity = "0.2";
+            }
+        });
+    }
+
+    var userFilter = document.getElementById("form-user_id");
+    var dateFilter = document.getElementById("filter-due-date");
+
+    if (userFilter) {
+        userFilter.onchange = function() {
+            applyFilter(getSelectedUserFilter(), hasDueDateFilter());
+        };
+    }
+
+    if (dateFilter) {
+
+        dateFilter.onclick = function(e) {
+            dateFilter.classList.toggle("filter-on");
+            applyFilter(getSelectedUserFilter(), hasDueDateFilter());
+            e.preventDefault();
+        };
+    }
+
 }());