Merge pull request #268 from yosyad/feature/search-flag-in-home

Add search bar for filtering flags in home page
openflagr · Jun 20, 2019 · 6dd6c33 · 6dd6c33
2 parents 8c6db2f + 58e4867
commit 6dd6c33
Showing 1 changed file with 26 additions and 1 deletion.
diff --git a/browser/flagr-ui/src/components/Flags.vue b/browser/flagr-ui/src/components/Flags.vue
@@ -29,8 +29,16 @@
             </el-col>
           </el-row>
 
+          <el-row>
+            <el-input
+              placeholder="Search a flag"
+              prefix-icon="el-icon-search"
+              v-model="searchTerm">
+            </el-input>
+          </el-row>
+
           <el-table
-            :data="flags"
+            :data="filteredFlags"
             :stripe="true"
             :highlight-current-row="false"
             :default-sort="{prop: 'id', order: 'descending'}"
@@ -106,6 +114,8 @@ export default {
     return {
       loaded: false,
       flags: [],
+      filteredFlags: [],
+      searchTerm: '',
       newFlag: {
         description: ''
       }
@@ -118,8 +128,23 @@ export default {
         this.loaded = true
         flags.reverse()
         this.flags = flags
+        this.filteredFlags = [...flags];
       }, handleErr.bind(this))
   },
+  watch: {
+    searchTerm: function() {
+      if (this.searchTerm) {
+        this.filteredFlags = this.flags.filter(
+          ({ id, description}) =>
+            id.toString().includes(this.searchTerm) ||
+            description.includes(this.searchTerm)
+        )
+      }
+      else {
+        this.filteredFlags = [...this.flags]
+      }
+    }
+  },
   methods: {
     flagEnabledFormatter (row, col, val) {
       return val ? 'on' : 'off'