Added search feature and small update to admin controls.

2 files changed, 24 insertions, 8 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";
diff --git a/src/components/registry-element.js b/src/components/registry-element.js
index cbca5bf..8641e44 100644
--- a/src/components/registry-element.js
+++ b/src/components/registry-element.js
@@ -59,8 +59,7 @@ class RegistryElement extends LitElement {
 
       </style>
       <paper-card
-      onmouseover   ="${() => this.toggleTabOpen()}"
-      onmouseout    ="${() => this.toggleTabClosed()}">
+      onclick = "${() => this.toggleTab()}">
         <div class="card-content">
             <h3>${props.name.replace("_", " ")}</h3>
             <div class="info-tab" id="name-list" hidden="${!props.infoTabOpen}">
@@ -112,12 +111,8 @@ class RegistryElement extends LitElement {
     this.fillNames();
   }
 
-  toggleTabOpen() {
-    this.infoTabOpen  = true;
-  }
-
-  toggleTabClosed() {
-    this.infoTabOpen  = false;
+  toggleTab() {
+    this.infoTabOpen  = !this.infoTabOpen;
   }
 
   fillNames() {