Add filter JS logic

privaterelay/templates/includes/dashboard-filter.html

@@ -8,14 +8,18 @@
             <img src="/static/images/icon-search.svg" alt="">
         </div>
         <form action="">
-            <input class="c-filter-search-input" type="search" name="search" id="search">
+            <input class="c-filter-search-input js-filter-search-input " type="search" name="search" id="search">
+            <div class="c-filter-case-count">
+                <span class="js-filter-case-visible"></span>
+                /
+                <span class="js-filter-case-total"></span>
+            </div>
         </form>
     </div>
     <div class="c-filter-date">
         <div class="c-filter-icon">
             <img src="/static/images/icon-calendar.svg" alt="">
         </div>
-
     </div>
     <div class="c-filter-cateogry">
         <div class="c-filter-icon">

privaterelay/templates/profile.html

@@ -188,7 +188,7 @@
 
         {% for domain_address in domain_addresses %}
 
-                  <div class="c-alias js-alias relay-email {% if relay_address.enabled %} is-enabled card-enabled {% endif %}" data-relay-address="{{ relay_address.address }}@{{ RELAY_DOMAIN }}" data-relay-address-id="{{ relay_address.id }}">
+          <div class="c-alias js-alias relay-email {% if relay_address.enabled %} is-enabled card-enabled {% endif %}" data-relay-address="{{ domain_address.address }}@{{ RELAY_DOMAIN }}" data-relay-address-id="{{ relay_address.id }}">
 
             <div class="c-alias-main-info">
               <!-- enable/disable email forwarding -->

static/js/filter.js

@@ -1,7 +1,78 @@
 (function() {
 	"use strict";
-
 
-
-
-})();
+	const filterEmailAddresses = [];
+	const filterAliasLabels = [];
+	const aliasesWithLabelsCollection = [];
+    const aliasCollection = [];
+    const aliases = document.querySelectorAll(".c-alias");
+
+    const filterLabelTotalCases = document.querySelector(".js-filter-case-total");
+    const filterLabelVisibleCases = document.querySelector(".js-filter-case-visible");
+
+    const filterInput = document.querySelector(".js-filter-search-input");
+
+	function filterInputWatcher(e) {
+		const query = e.target.value.toLowerCase();
+
+		// Hide all cases
+		aliases.forEach(alias => {
+            alias.style.display = "none";
+        });
+
+		// Loop through both arrays, making that alias visible if it is a match.
+        const matchListEmailAddresses = filterEmailAddresses.filter(s => s.includes(query));
+        const matchListAliasLabels = filterAliasLabels.filter(s => s.includes(query));
+
+        // Set the current number of "found" results
+        // TODO: Reset this number back to `aliases.length` when the search field is empty
+        if ( (matchListEmailAddresses.length + matchListAliasLabels.length) <= aliases.length ) {
+            filterLabelVisibleCases.textContent = matchListEmailAddresses.length + matchListAliasLabels.length;
+        }
+
+        for (const alias of matchListEmailAddresses) {
+            let index = filterEmailAddresses.indexOf(alias);
+            if (index >= 0) {
+                aliasCollection[index].style.display = "block";
+            }
+        }
+
+        // TODO: Map the entire list of aliases better so we dont have two seperate DOM collection arrays to loop through.
+        for (const alias of matchListAliasLabels) {
+            let index = filterAliasLabels.indexOf(alias);
+            if (index >= 0) {
+                aliasesWithLabelsCollection[index].style.display = "block";
+            }
+        }
+
+	}
+
+	function filterInit() {
+
+        // Build two arrays, one for case IDs and one for case title text. 
+		aliases.forEach( alias => {
+            aliasCollection.push(alias);
+            if (alias.dataset.relayAddress) {
+                filterEmailAddresses.push( alias.dataset.relayAddress.toString().toLowerCase() );
+            }
+
+            const aliasLabel = alias.querySelector(".relay-email-address-label");
+
+            if (aliasLabel) {
+                aliasesWithLabelsCollection.push(alias);
+                filterAliasLabels.push( aliasLabel.dataset.label.toString().toLowerCase() );
+            }
+
+		});
+
+		// // Set ##/## in filter input field to show how many aliases have been filtered.
+        filterLabelVisibleCases.textContent = aliases.length;
+        filterLabelTotalCases.textContent = aliases.length;
+
+		filterInput.addEventListener("input", filterInputWatcher, false);
+	}
+
+    // TODO: Remove timeout and watch for event to detect if add-on is enabled (checking if labels exist)
+    setTimeout(filterInit, 250);
+
+})();

static/scss/components/filter-bar.scss

@@ -13,10 +13,27 @@
 
     form {
         display: none;
+        position: relative;
     }
+
     input[type="search"] {
         background-image: url(/static/images/icon-search.svg);
         margin-bottom: 0;
+        padding-right: 1.75rem;
+        &:focus + .c-filter-case-count {
+            opacity: 0.5;
+        }
+    }
+
+    .c-filter-case-count {
+        display: flex;
+        opacity: 0;
+        position: absolute;
+        right: 0.5rem;
+        top: 0;
+        align-items: center;
+        height: 100%;
+        transition: opacity 0.2s ease-out;
     }
 
     @media #{$mq-md} {
@@ -29,9 +46,6 @@
             display: none;
         }
     }
-
-
-
 }
 
 .c-filter-action {