implement filtering

grottohub · Mar 13, 2021 · 66a4d83 · 66a4d83
1 parent 44e1ef0
commit 66a4d83
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 5 deletions.
diff --git a/public/index.html b/public/index.html
@@ -17,7 +17,7 @@
         <div class="col-4"></div>
         <div class="col-4">
           <div class="input-group">
-            <input type="text" class="form-control" placeholder="Search Contacts">
+            <input id="searchBar" type="text" class="form-control" placeholder="Search Contacts">
           </div>
         </div>
         <div class="col-4"></div>

diff --git a/public/javascripts/app.js b/public/javascripts/app.js
@@ -14,4 +14,6 @@ _ui.loaded(() => {
   _ui.click({class: "closeModal"}, eventHandlers.close);
   _ui.click({class: "onsubmit"}, eventHandlers.onSubmit);
   _ui.get({id: 'filterTags'}).addEventListener("tagsUpdated", eventHandlers.updateTagsDOM);
+  _ui.click({class: 'badge'}, eventHandlers.toggleTag);
+  _ui.get({id: 'searchBar'}).oninput = eventHandlers.filterContacts;
 });
diff --git a/public/javascripts/lib/domCache.js b/public/javascripts/lib/domCache.js
@@ -1,6 +1,6 @@
 import { ContactData } from './contactData.js';
 import { partition } from './helpers.js';
-import { tagBp, contactBp, contactRowBp } from '../blueprints/bundle.js';
+import { tagBp, contactBp, contactRowBp, alert } from '../blueprints/bundle.js';
 import { tagsUpdated } from './events.js';
 
 export let domCache;
@@ -139,6 +139,10 @@ export let domCache;
 
         if (taggedContacts) {
           return buildRows(taggedContacts);
+        } else {
+          let noContactAlert = _ui.make(alert, ['No contacts found!']);
+          _ui.state(noContactAlert.firstElementChild, 'danger');
+          return noContactAlert;
         }
       },
 
@@ -194,6 +198,7 @@ export let domCache;
 
       pushTag(tag) {
         if (!includes("tags", tag)) {
+          tag.blueprint = 'tag';
           allTags.push(tag);
           _ui.get({id: 'filterTags'}).dispatchEvent(tagsUpdated);
         }
@@ -210,13 +215,24 @@ export let domCache;
         }
       },
 
-      toggleTag(tagValue) {
-        let tagIdx = activeTags.indexOf(tagValue);
+      toggleTag(tag) {
+        let tagValue = tag.innerText,
+            tagIdx = activeTags.indexOf(tagValue);
 
         if (tagIdx === -1) {
           activeTags.push(tagValue);
+          _ui.get({class: 'badge'}).forEach(uniqTag => {
+            if (activeTags.includes(uniqTag.innerText)) {
+              _ui.state(uniqTag, 'active');
+            }
+          });
         } else {
           activeTags.splice(tagIdx, 1);
+          _ui.get({class: 'badge'}).forEach(uniqTag => {
+            if (!activeTags.includes(uniqTag.innerText)) {
+              _ui.state(uniqTag, 'default');
+            }
+          });
         }
       },
 

diff --git a/public/javascripts/lib/eventHandlers.js b/public/javascripts/lib/eventHandlers.js
@@ -10,11 +10,19 @@ export const logger = function logger(event) {
 
 // TAGS
 export const updateTagsDOM = function updateTagsDOMCallback(event) {
-  console.log(event);
   event.target.replaceChildren(event.detail.tags());
 };
 
+export const toggleTag = function toggleTagCallback(event) {
+  domCache.toggleTag(event.target);
+  _ui.get({id: 'cardContainer'}).replaceChildren(domCache.activeContacts());
+}
+
 // CONTACT HANDLING
+export const filterContacts = function filterContactsCallback(event) {
+  _ui.get({id: 'cardContainer'}).replaceChildren(domCache.filterRows(event.target.value));
+};
+
 export const loadContacts = function loadAllContacts(event) {
   if (api.method() === "get") {
     let allContacts = event.target.response;