Added search feature and small update to admin controls.

1 files changed, 21 insertions, 0 deletions

diff --git a/src/components/mao-admin.js b/src/components/mao-admin.js
index 70b84be..05357fc 100644
--- a/src/components/mao-admin.js
+++ b/src/components/mao-admin.js
@@ -101,6 +101,11 @@ class MaoAdmin extends connect(store)(PageViewElement) {
       </div>
 
       <section hidden="${!props.isAdmin || props.usersHidden}">
+        <label>Search feature</label>
+        <paper-input id="search" oninput="${() => this.search()}" label="Search for keyword (ex. theta, mfoiani, 2019, ...ect)"></paper-input>
+
+        <br/>
+
         <table style="width: 100%;">
           <thead>
             <tr>
@@ -184,6 +189,21 @@ class MaoAdmin extends connect(store)(PageViewElement) {
     }
   }
 
+  search() {
+    var key   = this.shadowRoot.getElementById('search').value.trim().toLowerCase();
+    var query = this.shadowRoot.querySelectorAll('.search');
+    query.forEach((child) => {
+      if(key === '' || child.childNodes[0].innerHTML.toLowerCase().includes(key) 
+                    || child.childNodes[1].innerHTML.toLowerCase().includes(key) 
+                    || child.childNodes[2].innerHTML.toLowerCase().includes(key)) {
+        child.hidden = false;
+      }
+      else {
+        child.hidden = true;
+      }
+    });
+  }
+
   updateInformation() {
     if(this.shadowRoot) {
       //update requests
@@ -229,6 +249,7 @@ class MaoAdmin extends connect(store)(PageViewElement) {
         user = user.data();
 
         var tableRow = document.createElement('tr');
+        tableRow.classList.add('search');
 
         var userEle = document.createElement('td');
         userEle.innerHTML = user['username'] ? user['username'] : "Unknown";