Optimized interactio of filter group. (#6)

* Optimized interactio of filter group.

* add unnamed group status

lyrebird_tracking/context.py

@@ -12,6 +12,8 @@ def __init__(self):
         self.content = []
         # error messages list
         self.error_list = []
+        # selected group list
+        self.select_groups = []
 
 
 # 单例模式

lyrebird_tracking/server/base_handler.py

@@ -52,19 +52,27 @@ def init_data():
         # 加入分组信息，用于前端筛选
         if item.get('groupid'):
             result_dict.update({'groupid': item.get('groupid')})
+
         if item.get('groupname'):
             result_dict.update({'groupname': item.get('groupname')})
+            if not item.get('groupname') in app_context.select_groups:
+                app_context.select_groups.append(item.get('groupname'))
+        else:
+            item.update({'groupname': 'unnamed'})
+            result_dict.update({'groupname': 'unnamed'})
+            if not 'unnamed' in app_context.select_groups:
+                app_context.select_groups.append('unnamed')
 
         target_dict = {
             'asserts': item.get('asserts'),
             'content': None, 'selector': item.get('selector'),
             'source': None, 'url': None}
         target_dict.update(result_dict)
-
         app_context.result_list.append(result_dict)
         app_context.content.append(target_dict)
 
 
+
 def copy_file(target_path):
     """
     复制文件内容，复制默认基准文件到 ~/.lyrbeird/plugin/lyrebird_tracking/base.json

lyrebird_tracking/static/component/banner.vue

@@ -8,9 +8,6 @@
 <script>
 module.exports = {
     mounted: function() {
-        this.$Notice.config({
-            top: 75
-        });
     },
     data: function() {
         return {

lyrebird_tracking/static/component/filter-tag.vue

@@ -1,13 +1,19 @@
 <template>
     <div v-if="allGroup.length!=0">
-        <Tag v-for="item in grouplist" :key="item" :name="item" closable @on-close="handleClose">{{item}}</Tag>
-        <i-button icon="ios-create-outline" type="dashed" size="small" @click="showModal=true"> Edit Tag </i-button>
-        <modal v-model="showModal" title="Edit Tag" @on-ok="changeOk">
-          <i-select multiple filterable style="width:260px,margin:auto" @on-change="activatedDataChange">
+        <!-- <Tag v-for="item in grouplist" :key="item" :name="item" closable @on-close="handleClose">{{item}}</Tag> -->
+        <Tag >Case filters : {{grouplist.length}} conditions </Tag>
+        <i-button icon="ios-create-outline" type="dashed" size="small" @click="editTag"> Edit </i-button>
+        <modal v-model="showModal" title="Edit Tag" @on-ok="changeOk" height="auto" :mask="false" width="70vh">
+          <i-select filterable class="custom-select" v-model="changeGroupCache" multiple style="width:260px,margin:auto;" @on-change="activatedDataChange">
             <option-group label="Group">
               <i-option v-for="item in allGroup" :key="item" :value="item">{{item}}</i-option>
             </option-group>
           </i-select>
+          <div slot="footer">
+            <i-button @click="clearFilter" style="margin:auto" class="pull-left">Clear All</i-button>
+            <i-button type="text" @click="cancelmodel"> Cancel </i-button>
+            <i-button type="primary"  @click="changeOk"> OK </i-button>
+        </div>
         </modal>
     </div>
 </template>
@@ -32,22 +38,34 @@ module.exports = {
       this.$http.get("/ui/plugin/tracking/base").then(
         response => {
           filterdata = response.data;
+          let group = [];
           for (let i = 0; i < filterdata.cases.length; i++) {
             let name = filterdata.cases[i].groupname;
             if (typeof name != "undefined") {
               // 如果grouplist里面不包含当前groupname返回-1，包含返回index值
-              if (this.grouplist == 0 || this.grouplist.indexOf(name) == -1) {
-                this.grouplist.push(name);
+              if (group == 0 || group.indexOf(name) == -1) {
+                group.push(name);
               }
             }
           }
           // 初始化，展示list赋值展示全部，赋值给AllGroup
-          this.allGroup = [].concat(this.grouplist);
+          this.allGroup = group;
         },
         error => {
           console.log("load base failed!", error);
         }
       );
+      this.$http.get("/ui/plugin/tracking/group").then(
+        response => {
+          filterdata = response.data;
+          this.grouplist = filterdata;
+          this.changeGroupCache = filterdata;
+          this.$emit("filterchange", this.grouplist);
+        },
+        error => {
+          console.log("load filter group failed!", error);
+        }
+      );
     },
     handleClose: function(event, name) {
       let index = this.grouplist.indexOf(name);
@@ -59,15 +77,41 @@ module.exports = {
     changeOk: function() {
       this.grouplist = this.changeGroupCache;
       this.$emit("filterchange", this.grouplist);
-      this.$Notice.success({
-        title: "Change Filter Success"
-      });
+      this.$http.post('/ui/plugin/tracking/select',
+        {
+          group: this.grouplist
+        }
+      ).then(resp=>{
+          if(resp.data.code===1000){
+            console.log('change selected group ok');
+          }else{
+            console.log('change selected group failed');
+          }
+        }
+      )
+      this.showModal = false;
     },
     activatedDataChange: function(val) {
       console.log("Selected Groups Change", val);
       this.changeGroupCache = val;
+    },
+    clearFilter: function(){
+      this.changeGroupCache = []
+    },
+    cancelmodel: function(){
+      this.showModal = false;
+    },
+    editTag: function(){
+      this.showModal = true;
+      this.changeGroupCache = this.grouplist;
     }
   },
   watch: {}
 };
-</script>
+</script>
+<style>
+  .custom-select > .ivu-select-selection {
+      max-height: 180px;
+      overflow-y: scroll;
+  }
+</style>

lyrebird_tracking/static/component/main.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div style="margin-top:10px">
         <Row class="button-bar">
           <banner></banner>
         </Row>

lyrebird_tracking/static/component/tracking-list.vue

@@ -119,17 +119,15 @@ module.exports = {
     displayedData: function() {
       // filter出name
       let showdata = [];
-      if (this.filter_rules.length == 0) {
-        showdata = this.trackingdata;
-      } else {
-        for (let i = 0; i < this.filter_rules.length; i++) {
-          let filter_rule = this.filter_rules[i];
-          let filtercells = this.trackingdata.filter(function(elem) {
-            return elem.groupname == filter_rule;
-          });
-          showdata = showdata.concat(filtercells);
-        }
+      
+      for (let i = 0; i < this.filter_rules.length; i++) {
+        let filter_rule = this.filter_rules[i];
+        let filtercells = this.trackingdata.filter(function(elem) {
+          return elem.groupname == filter_rule;
+        });
+        showdata = showdata.concat(filtercells);
       }
+      
       return showdata;
     }
   }

lyrebird_tracking/webui.py

@@ -77,6 +77,21 @@ def get_base_info(self):
         """
         return jsonify(app_context.config)
 
+    def groups(self):
+        """
+        获取选中的case分组；初始返回所有分组
+        """
+        return jsonify(app_context.select_groups)
+
+    def select(self):
+        """
+        更新选中的case分组
+        """
+        grouplist = request.json.get('group')
+        app_context.select_groups = grouplist
+        return context.make_ok_response()
+
+
     def on_create(self):
         """
         插件初始化函数
@@ -91,6 +106,9 @@ def on_create(self):
         self.add_url_rule('/report', view_func=self.save_report)
         self.add_url_rule('/clear', view_func=self.clear_result)
         self.add_url_rule('/base', view_func=self.get_base_info)
+        self.add_url_rule('/group', view_func=self.groups)
+        self.add_url_rule('/select', view_func=self.select, methods=['POST'])
+
 
     def get_icon(self):
         """

setup.py

@@ -8,7 +8,7 @@
 
 setup(
     name='lyrebird-tracking',
-    version='0.10.2',
+    version='0.11.0',
     packages=['lyrebird_tracking'],
     url='https://github.com/meituan/lyrebird-tracking',
     author='HBQA',