feat(search-bar): add search bar to tag-list, this will filter tag names

src/components/docker-registry-ui.riot

@@ -33,7 +33,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       <route path="{baseRoute}taglist/(.*)">
         <tag-list registry-url="{ state.registryUrl }" registry-name="{ state.name }" pull-url="{ state.pullUrl }"
           image="{ router.getTagListImage() }" show-content-digest="{props.showContentDigest}"
-          is-image-remove-activated="{props.isImageRemoveActivated}" on-notify="{ notifySnackbar }"></tag-list>
+          is-image-remove-activated="{props.isImageRemoveActivated}" on-notify="{ notifySnackbar }"
+          filter-results="{ state.filter }"></tag-list>
       </route>
       <route path="{baseRoute}taghistory/(.*)">
         <tag-history registry-url="{ state.registryUrl }" registry-name="{ state.name }" pull-url="{ state.pullUrl }"
@@ -126,7 +127,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         }
       },
       onSearch(value) {
-        this.update({ filter: value })
+        this.update({
+          filter: value
+        })
       },
       baseRoute: '([^#]*?)/(\\?[^#]*?)?(#!)?(/?)',
       router,

src/components/tag-list/tag-list.riot

@@ -39,7 +39,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   <tag-table if="{ state.loadend }" tags="{state.tags}" asc="{state.asc}" page="{ state.page }"
     show-content-digest="{props.showContentDigest}" is-image-remove-activated="{props.isImageRemoveActivated}"
     onReverseOrder="{ onReverseOrder }" registry-url="{ props.registryUrl }" pull-url="{ props.pullUrl }"
-    on-notify="{ props.onNotify }"></tag-table>
+    on-notify="{ props.onNotify }" filter-results="{ props.filterResults }"></tag-table>
 
   <pagination pages="{ getPageLabels(state.page, getNumPages(state.tags)) }" onPageUpdate="{onPageUpdate}"></pagination>
 
@@ -84,15 +84,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         const self = this;
         const oReq = new Http();
         oReq.addEventListener('load', function () {
-          state.tags = [];
           if (this.status == 200) {
-            const tags = JSON.parse(this.responseText).tags || [];
+            const tags = (JSON.parse(this.responseText).tags || [])
-            state.tags = tags.map(function (tag) {
+              .map(tag => new DockerImage(props.image, tag, null, props.registryUrl, props.onNotify))
-              return new DockerImage(props.image, tag, null, props.registryUrl, props.onNotify);
+              .sort(compare);
-            }).sort(compare);
             window.requestAnimationFrame(self.onResize);
             self.update({
-              page: Math.min(state.page, getNumPages(state.tags))
+              page: Math.min(state.page, getNumPages(tags)),
+              tags
             })
           } else if (this.status == 404) {
             self.props.onNotify('Server not found', true);

src/components/tag-list/tag-table.riot

@@ -40,7 +40,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         </tr>
       </thead>
       <tbody>
-        <tr each="{ image in getPage(props.tags, props.page) }">
+        <tr each="{ image in getPage(props.tags, props.page) }" if="{ matchSearch(props.filterResults, image.tag) }">
           <td class="creation-date">
             <image-date image="{ image }" />
           </td>
@@ -85,6 +85,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     import RemoveImage, {
       deleteImage
     } from './remove-image.riot';
+    import {
+      matchSearch
+    } from '../search-bar.riot';
     export default {
       components: {
         ImageDate,
@@ -135,7 +138,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
           toDelete: this.state.toDelete
         })
       },
-      getPage
+      getPage,
+      matchSearch
     }
   </script>
 </tag-table>