Add watch group name reg (#273)

* Add vuetify framework
Update AppMenu.vue to include the basic menu item.

* use name as key.

* Add Watch on the groupNameReg

Author: jetfuel

frontend/src/images/Images.vue

@@ -134,14 +134,15 @@ export default {
             this.runsArray = data;
             this.config.runs = data;
         });
-
-        // TODO: Migrate this line from San to Vue
-        // need debounce， can't use computed
-        //this.watch('config.groupNameReg', debounce(this.filterTagsList, 300));
     },
     mounted() {
 	    autoAdjustHeight();
     },
+    watch: {
+        'config.groupNameReg': function(val) {
+            this.throttledFilterTagsList()
+        }
+    },
     methods:{
         filterTagsList(groupNameReg) {
             if (!groupNameReg) {
@@ -151,7 +152,12 @@ export default {
             let tagsList = this.tagsList || [];
             let regExp = new RegExp(groupNameReg);
             this.filteredTagsList = tagsList.filter(item => regExp.test(item.tag));
-        }
+        },
+        throttledFilterTagsList: _.debounce(
+            function() {
+                this.filterTagsList(this.config.groupNameReg)
+            }, 300
+        ),
     }
 };
 

frontend/src/scalars/Scalars.vue

@@ -142,13 +142,15 @@ export default {
             this.runsArray = data;
             this.config.runs = data;
         });
-
-        // TODO: Migrate this line from San to Vue
-        //this.watch('config.groupNameReg', debounce(this.filterTagsList, 300));
 	},
 	mounted() {
 	    autoAdjustHeight();
 	},
+	watch: {
+        'config.groupNameReg': function(val) {
+            this.throttledFilterTagsList()
+        }
+    },
     methods: {
         filterTagsList(groupNameReg) {
             if (!groupNameReg) {
@@ -158,7 +160,12 @@ export default {
             let tagsList = this.tagsList || [];
             let regExp = new RegExp(groupNameReg);
             this.filteredTagsList = tagsList.filter(item => regExp.test(item.tag));
-        }
+        },
+        throttledFilterTagsList: _.debounce(
+            function() {
+                this.filterTagsList(this.config.groupNameReg)
+            }, 300
+        ),
     }
 };