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

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