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
PaddlePaddle · Feb 22, 2018 · 7ecb82c · 7ecb82c
1 parent 6eeaf1e
commit 7ecb82c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git a/frontend/src/images/Images.vue b/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
+        ),
     }
 };
 

diff --git a/frontend/src/scalars/Scalars.vue b/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
+        ),
     }
 };