testing-scheduler/ui/src/components/editor/editor.vue

   1 <template>\r
   2 <div class="col-md-offset-1 col-md-10" style="margin-top: 20px;">\r
   3     <ul class="nav nav-tabs">\r
   4         <li class="active"><a data-toggle="tab" data-target="#step-pane">Step</a></li>\r
   5         <li><a data-toggle="tab" data-target="#flow-pane">Flow</a></li>\r
   6     </ul>\r
   7     <div class="tab-content">\r
   8         <div id="step-pane" class="tab-pane active fade in">\r
   9             <br>\r
  10             <div class="row">\r
  11                 <div class='col-md-12'>\r
  12                     <step v-bind:stepList="stepList" v-on:stepList="getStepList"></step>\r
  13                 </div>\r
  14             </div>\r
  15         </div>\r
  16         <div id="flow-pane" class="tab-pane fade">\r
  17             <br>\r
  18             <div class="row">\r
  19                 <div class='col-md-12'>\r
  20                     <div class="row">\r
  21                         <button style='margin-left:20px; margin-bottom: 30px;' class="btn btn-success" type="button" id="new-flow" v-on:click='addSubflow'>&nbsp;&nbsp;<span class="bold">ADD FLOW</span></button>\r
  22                     </div>\r
  23                     <div class='row'>\r
  24                         <div class='col-md-2'>\r
  25                             <ul id="flow-tabs">\r
  26                                 <li class="active"><a data-toggle="tab" data-target="#flow-main">main</a></li>\r
  27                                 <li v-for="subflow in subflowList"><a data-toggle="tab" v-bind:data-target="'#' + subflow.tabId">{{ subflow.name }}</a></li>\r
  28                             </ul>\r
  29                         </div>\r
  30                         <div class="col-md-10">\r
  31                             <div class="tab-content">\r
  32                                 <div id="flow-main" class="tab-pane active fade in">\r
  33                                     <flow v-model='mainflowName' v-bind:orderList='mainOrdersList' v-bind:stepsRefs='stepNameList' v-bind:flowsRefs='flowNameList' v-on:orderList='updateOrderList($event, mainflowName)'>\r
  34                                     </flow>\r
  35                                 </div>\r
  36                                 <div v-for="subflow in subflowList" v-bind:id="subflow.tabId" class="tab-pane fade">\r
  37                                     <flow v-model='subflow.name' v-bind:orderList='subflow.orderList' v-bind:stepsRefs='stepNameList' v-bind:flowsRefs='flowNameList' v-on:orderList='updateOrderList($event, subflow.name)'></flow>\r
  38                                 </div>\r
  39                             </div>\r
  40                         </div>\r
  41                     </div>\r
  42                 </div>\r
  43             </div>\r
  44         </div>\r
  45     </div>\r
  46 </div>\r
  47 </template>\r
  48 <script>\r
  49 import '../../assets/css/editor.css'\r
  50 import step from './step.vue'\r
  51 import flow from './flow.vue'\r
  52 import showMessage from '../message/showMessage.js'\r
  53 export default {\r
  54     name: 'editor',\r
  55     props: ['saveSignal', 'stepList', 'mainOrdersList', 'subflowList'],\r
  56     model: {\r
  57         prop: 'saveSignal',\r
  58         event: 'saveResponse'\r
  59     },\r
  60     data: function(){\r
  61         return {\r
  62             mainflowName: 'main'\r
  63         }\r
  64     },\r
  65     components: {\r
  66         step,\r
  67         flow\r
  68     },\r
  69     methods: {\r
  70         getStepList: function(stepList) {\r
  71             this.stepList = stepList;\r
  72         },\r
  73         addSubflow: function() {\r
  74             var tabid = "flow-" + Math.floor(Math.random()*(1000000));\r
  75             this.subflowList.push({'tabId': tabid, 'name': 'fake', 'orderList': []});\r
  76         },\r
  77         updateOrderList: function(orderList, flowName) {\r
  78             if(flowName == 'main') {\r
  79                 this.mainOrdersList = orderList;\r
  80             } else {\r
  81                 for(var i = 0; i < this.subflowList.length; ++i) {\r
  82                     if(this.subflowList[i].name == flowName) {\r
  83                         this.subflowList[i].orderList = orderList;\r
  84                     }\r
  85                 }\r
  86             }\r
  87         }\r
  88     },\r
  89     computed: {\r
  90         flowNameList: function() {\r
  91             var stepNameArr = [];\r
  92             for(var i = 0; i < this.subflowList.length; i++) {\r
  93                 stepNameArr.push(this.subflowList[i].name);\r
  94             }\r
  95             console.log(stepNameArr);\r
  96             return stepNameArr;\r
  97         },\r
  98         stepNameList: function() {\r
  99             var stepNameArr = [];\r
 100             for(var i = 0; i < this.stepList.length; i++) {\r
 101                 stepNameArr.push(this.stepList[i].name);\r
 102             }\r
 103             return stepNameArr;\r
 104         }\r
 105     },\r
 106     watch: {\r
 107         saveSignal: function(newVal) {\r
 108             if(newVal == true) {\r
 109                 console.log("editor newVal true");\r
 110                 var self = this;\r
 111                 var msgTitle = "SAVE -- TESTCASE";\r
 112                 $.ajax({\r
 113                     url: this.global.SERVER_ADDR + "testcase/save",\r
 114                     method: "POST",\r
 115                     data: {\r
 116                         suiteName:  this.$route.query.suiteName,\r
 117                         caseName: this.$route.query.caseName,\r
 118                         stepList: JSON.stringify(this.stepList),\r
 119                         subflowList: JSON.stringify(this.subflowList),\r
 120                         mainOrdersList: JSON.stringify(this.mainOrdersList)\r
 121                     },\r
 122                     success: function(data) {\r
 123                         console.log("ajax save content!");\r
 124                         if(data['code'] == 200) {\r
 125                             showMessage("success", msgTitle, "Save content successfully!");\r
 126                             self.$emit('saveResponse', true);\r
 127                         } else {\r
 128                             showMessage(data['code'], msgTitle, "Failed to save content!", data['error']);\r
 129                             self.$emit('saveResponse', false);\r
 130                         }\r
 131                     },\r
 132                     error: function(obj, status, msg) {\r
 133                         showMessage(status, msgTitle, "Failed to save content!", msg);\r
 134                         self.$emit('saveResponse', false);\r
 135                     }\r
 136                 });\r
 137             }\r
 138         }\r
 139     }\r
 140 }\r
 141 </script>