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

   1 <template>\r
   2 <div class="row" style="border: 1px solid #cec8c8">\r
   3     <div class="col-md-12" style="padding: 10px 0 5px;">\r
   4         <div class="form-group">\r
   5             <label class="col-md-2 control-label" style="font-size: 22px;">flowName</label>\r
   6             <div class="col-md-6">\r
   7                 <input v-if="flowName != 'main'" type="text" class="form-control" v-model="flowName" v-on:input='$emit("editFlowName", $event.target.value)' placeholder="please input flow name." />\r
   8                 <p style="font-size: 22px;" v-else>{{flowName}}</p>\r
   9             </div>\r
  10         </div>\r
  11     </div>\r
  12     <div class="col-md-12">\r
  13         <div class="ibox">\r
  14             <div class="ibox-title">\r
  15                 <h5 class="text-success">Order</h5>\r
  16                 <div class="ibox-tools">\r
  17                     <a class="collapse-link">\r
  18                         <i class="fa fa-chevron-up" v-on:click.stop='collapseBox'></i>\r
  19                     </a>\r
  20                 </div>\r
  21             </div>\r
  22             <div class="ibox-content">\r
  23                 <div class="row">\r
  24                     <button class="btn btn-success" type="button" id="new-order" v-on:click='addOrder'>&nbsp;&nbsp;<span class="bold">ADD ORDER</span></button>\r
  25                     <div class="col-md-3">\r
  26                        <span class="select-box" >\r
  27                         <select id="orderSelect" class="select form-control" v-model='orderSelected' >\r
  28                             <option value="1">Normal</option>\r
  29                             <option value="2">Switch</option>\r
  30                             <option value="3">Parallel</option>\r
  31                         </select>\r
  32                         </span>\r
  33                     </div>\r
  34                     <br>\r
  35                     <!-- Normal -->\r
  36                     <div id="normal-panel" v-show='orderSelected == 1'>\r
  37                         <div class="col-lg-11" id="normalform">\r
  38                             <br>\r
  39                             <div>\r
  40                                 <div class="ibox border-ibox">\r
  41                                     <div class="ibox-title">\r
  42                                         <h5>Normal</h5>\r
  43                                         <div class="ibox-tools">\r
  44                                             <a class="collapse-link" >\r
  45                                                 <i class="fa fa-chevron-up" v-on:click.stop='collapseBox'></i>\r
  46                                             </a>\r
  47                                         </div>\r
  48                                     </div>\r
  49                                     <div class="ibox-content">\r
  50                                        <!-- <div class="form-group">\r
  51                                           <div class="col-lg-6 row"><label>name</label><input id="NName" type="name" placeholder="name" class="form-control"></div>\r
  52                                        </div> -->\r
  53                                        <div class="form-group">\r
  54                                             <label class='headmsg control-label'>Step</label>\r
  55                                             <div class='col-md-4'>\r
  56                                                 <select class="chooseStep form-control" id="NStep" v-model='normalStep'>\r
  57                                                         <option></option>\r
  58                                                         <option v-for='stepRef in stepsRefs' v-bind:value='stepRef'>{{ stepRef }}</option>\r
  59                                                 </select>\r
  60                                             </div>\r
  61                                        </div>\r
  62                                     </div>\r
  63                                 </div>\r
  64                             </div>\r
  65                         </div>\r
  66                     </div>\r
  67                     <!-- Switch -->\r
  68                     <div id="switch-panel" v-show='orderSelected == 2'>\r
  69                         <br>\r
  70                         <div class="row">\r
  71                             <div class="col-lg-11">\r
  72                                 <div class="ibox border-ibox float-e-margins">\r
  73                                     <div class="ibox-title">\r
  74                                         <h5>Switch</h5>\r
  75                                         <div class="ibox-tools">\r
  76                                             <button class="btn btn-success " type="button" id="new-case" v-on:click='addNewCase'>&nbsp;&nbsp;<span class="bold">New Case</span></button>\r
  77                                             <a class="collapse-link" >\r
  78                                                 <i class="fa fa-chevron-up" v-on:click.stop='collapseBox'></i>\r
  79                                             </a>\r
  80                                         </div>\r
  81                                     </div>\r
  82                                     <div class="ibox-content">\r
  83                                         <div class="row">\r
  84                                             <div class="row">\r
  85                                                 <div class="form-group">\r
  86                                                     <label class="headmsg control-label">Value:</label>\r
  87                                                     <div class="col-md-5"><input type="text" class="case form-control" v-model='switchValue'></div>\r
  88                                                 </div>\r
  89                                             </div>\r
  90                                             <div class="row">\r
  91                                                 <label class="headmsg control-label">Cases:</label>\r
  92                                                 <div class='col-md-12 row'>\r
  93                                                     <div class='col-md-offset-1' v-for='switchCase in switchCases' style='border-left-style: solid; border-left-color: gray; margin-bottom: 30px;'>\r
  94                                                         <div class="row">\r
  95                                                             <div class="form-group">\r
  96                                                                 <label class="headmsg control-label">CaseValue:</label>\r
  97                                                                 <div class="col-md-5"><input type="text" class="case form-control" v-model='switchCase.value'></div>\r
  98                                                             </div>\r
  99                                                         </div>\r
 100                                                         <div class="row">\r
 101                                                             <label class="headmsg control-label">Case:</label>\r
 102                                                             <div class="col-md-3">\r
 103                                                                 <select class="myselect chooseStep form-control" v-model='switchCase.orderType'>\r
 104                                                                     <option></option>\r
 105                                                                     <option v-for='orderType in ["step", "flow"]' v-bind:value='orderType'>{{ orderType }}</option>\r
 106                                                                 </select>\r
 107                                                             </div>\r
 108                                                             <div class="col-md-4">\r
 109                                                                 <select class="myselect chooseStep form-control" v-model='switchCase.orderValue'>\r
 110                                                                     <option></option>\r
 111                                                                     <option v-if='switchCase.orderType == "step"' v-for='stepRef in stepsRefs' v-bind:value='stepRef'>{{ stepRef }}</option>\r
 112                                                                     <option v-if='switchCase.orderType == "flow"' v-for='flowRef in filtedFlowsRefs' v-bind:value='flowRef'>{{ flowRef }}</option>\r
 113                                                                 </select>\r
 114                                                             </div>\r
 115                                                         </div>\r
 116                                                     </div>\r
 117                                                 </div>\r
 118                                             </div>\r
 119                                         </div>\r
 120                                     </div>\r
 121                                 </div>\r
 122                             </div>\r
 123                         </div>\r
 124                     </div>\r
 125                     <!-- Parallel -->\r
 126                     <div id="parallel-panel" v-show='orderSelected == 3'>\r
 127                         <br>\r
 128                         <div class="row">\r
 129                             <div class="col-lg-11">\r
 130                                 <div class="ibox border-ibox float-e-margins">\r
 131                                     <div class="ibox-title">\r
 132                                         <h5>Parallel</h5>\r
 133                                         <div class="ibox-tools">\r
 134                                             <button class="btn btn-success " type="button" id="para-step" v-on:click='addNewBranch'>&nbsp;&nbsp;<span class="bold"><i class='fa fa-plus-square-o'></i> Branch</span></button>\r
 135                                             <a class="collapse-link" >\r
 136                                                 <i class="fa fa-chevron-up" v-on:click.stop='collapseBox'></i>\r
 137                                             </a>\r
 138                                         </div>\r
 139                                     </div>\r
 140                                     <div id="parallel">\r
 141                                         <div class="ibox-content">\r
 142                                             <div class='row'>\r
 143                                                 <div class='row'><label class="headmsg control-label">Branches:</label></div>\r
 144                                                 <div class='row'>\r
 145                                                     <div class='col-md-offset-1'>\r
 146                                                         <div v-for='branch in parallelBranches' class="row" style='border-left-style: solid; border-left-color: gray; margin-bottom: 20px; padding-top: 7px; padding-bottom: 7px;'>\r
 147                                                             <label class="headmsg control-label">Branch:</label>\r
 148                                                             <div class="col-md-3">\r
 149                                                                 <select class="myselect chooseStep form-control" v-model='branch.orderType'>\r
 150                                                                     <option></option>\r
 151                                                                     <option v-for='orderType in ["step", "flow"]' v-bind:value='orderType'>{{ orderType }}</option>\r
 152                                                                 </select>\r
 153                                                             </div>\r
 154                                                             <div class="col-md-4">\r
 155                                                                 <select class="myselect chooseStep form-control" v-model='branch.orderValue'>\r
 156                                                                     <option></option>\r
 157                                                                     <option v-if='branch.orderType == "step"' v-for='stepRef in stepsRefs' v-bind:value='stepRef'>{{ stepRef }}</option>\r
 158                                                                     <option v-if='branch.orderType == "flow"' v-for='flowRef in filtedFlowsRefs' v-bind:value='flowRef'>{{ flowRef }}</option>\r
 159                                                                 </select>\r
 160                                                             </div>\r
 161                                                         </div>\r
 162                                                     </div>\r
 163                                                 </div>\r
 164                                             </div>\r
 165                                         </div>\r
 166                                     </div>\r
 167                                 </div>\r
 168                             </div>\r
 169                         </div>\r
 170                     </div>\r
 171                 </div>\r
 172             </div>\r
 173         </div>\r
 174         <div class="ibox">\r
 175             <div class="ibox-title">\r
 176                 <h5 class="text-success">OrderList</h5>\r
 177                 <div class="ibox-tools">\r
 178                         <a class="collapse-link" >\r
 179                             <i class="fa fa-chevron-up" v-on:click.stop='collapseBox'></i>\r
 180                         </a>\r
 181                 </div>\r
 182             </div>\r
 183             <div class="ibox-content" id="order-list">\r
 184                 <div v-for='(order, index) in orderList' class='ibox float-e-margins' style='margin-bottom: 0;'>\r
 185                     <div class="ibox-title step">\r
 186                         <h5>Order #{{index+1}}   <strong style='margin-left: 20px;'>{{['normal', 'switch', 'parallel'][order.type - 1]}}</strong> </h5>\r
 187                         <div class="ibox-tools">\r
 188                             <a class="collapse-link" >\r
 189                                 <i class="fa fa-chevron-up" v-on:click.stop='collapseBox'></i>\r
 190                             </a>\r
 191                             <a class="close-link" v-on:click='removeOrder'>\r
 192                                 <i class="fa fa-times"></i>\r
 193                             </a>\r
 194                         </div>\r
 195                     </div>\r
 196                     <div class="ibox-content">\r
 197                         <div v-if='order.type == 1' class="row">\r
 198                             <label class="control-label" style='padding-right: 20px;'> step: </label>\r
 199                             <label class="control-label"> {{ order.step }}</label>\r
 200                         </div>\r
 201                         <div v-if='order.type == 2' class="row">\r
 202                             <div>\r
 203                                 <label class="control-label" style='padding-right: 20px;'> value: </label>\r
 204                                 <label class="control-label"> {{order.value}} </label>\r
 205                             </div>\r
 206                             <div><label class="control-label"> cases: </label></div>\r
 207                             <div v-for='sCase in order.cases' class="row">\r
 208                                 <label class="control-label col-md-offset-1"> -- <b>{{ sCase.value }}</b> : </label>\r
 209                                 <label class='coltrol-label' style='margin-left: 20px;'>{{ sCase.orderValue }} [{{ sCase.orderType }}]</label>\r
 210                             </div>\r
 211                         </div>\r
 212                         <div v-if='order.type == 3' class="row">\r
 213                             <div><label class="control-label"> </label></div>\r
 214                             <div v-for='branch in order.branches' class="row">\r
 215                                 <label class="control-label col-md-offset-1" style='padding-right: 20px;'> -- branch: </label>\r
 216                                 <label class="control-label"> {{ branch.orderValue }} [{{ branch.orderType }}]</label>\r
 217                             </div>\r
 218                         </div>\r
 219                     </div>\r
 220                 </div>\r
 221             </div>\r
 222         </div>\r
 223     </div>\r
 224 </div>\r
 225 </template>\r
 226 <script>\r
 227 export default {\r
 228     name: 'flow',\r
 229     props: ['stepsRefs', 'flowsRefs', 'flowName', 'orderList'],\r
 230     model: {\r
 231         prop: 'flowName',\r
 232         event: 'editFlowName'\r
 233     },\r
 234     data: function() {\r
 235         return {\r
 236             normalStep: '',\r
 237             switchValue: '',\r
 238             switchCases: [{'value': '', 'orderType': '', 'orderValue': ''}],\r
 239             parallelBranches: [{'orderType': '', 'orderValue': ''}],\r
 240             orderSelected: 1\r
 241         }\r
 242     },\r
 243     mounted: function(){\r
 244         // this.selectPluginUpdate();\r
 245     },\r
 246     updated: function(){\r
 247         // this.selectPluginUpdate();\r
 248     },\r
 249     methods: {\r
 250         addOrder: function(){\r
 251             var select = this.orderSelected;\r
 252             if(select == 1){\r
 253                 if(this.normalStep == ""){\r
 254                     alert("Not completed!!!");\r
 255                     return;\r
 256                 }\r
 257                 var temp = {type:1,step:this.normalStep};\r
 258                 this.orderList.push(temp);\r
 259                 this.normalStep = '';\r
 260             }\r
 261             if(select == 2){\r
 262                 var caseList = [];\r
 263                 for(var i=0; i<this.switchCases.length; ++i){\r
 264                     var caseValue = this.switchCases[i].value;\r
 265                     if(caseValue == ""){\r
 266                         alert("Not completed!!!");\r
 267                         return;\r
 268                     }\r
 269                     var caseOrderType = this.switchCases[i].orderType;\r
 270                     if(caseOrderType == ""){\r
 271                         alert("Not completed!!!");\r
 272                         return;\r
 273                     }\r
 274                     var caseOrderValue = this.switchCases[i].orderValue;\r
 275                     if(caseOrderValue == ""){\r
 276                         alert("Not completed!!!");\r
 277                         return;\r
 278                     }\r
 279                     caseList.push({value: caseValue, orderType: caseOrderType, orderValue: caseOrderValue});\r
 280                 }\r
 281                 temp = {type:2, value: this.switchValue, cases:caseList};\r
 282                 this.orderList.push(temp);\r
 283                 this.switchValue = '';\r
 284                    this.switchCases = [{value: '', orderType: '', orderValue: ''}];\r
 285             }\r
 286             if(select == 3){\r
 287                 var branchList = [];\r
 288                 var allStep = $('#parallel .chooseStep');\r
 289                 for(var i=0; i<this.parallelBranches.length; ++i){\r
 290                     var branchOrderType = this.parallelBranches[i].orderType;\r
 291                     if(branchOrderType == ""){\r
 292                         alert("Not completed!!!");\r
 293                         return;\r
 294                     }\r
 295                     var branchOrderValue = this.parallelBranches[i].orderValue;\r
 296                     if(branchOrderValue == ""){\r
 297                         alert("Not completed!!!");\r
 298                         return;\r
 299                     }\r
 300                     branchList.push({orderType: branchOrderType, orderValue: branchOrderValue});\r
 301                 }\r
 302                 temp = {type:3,branches:branchList};\r
 303                 this.orderList.push(temp);\r
 304                 this.parallelBranches = [{orderType: '', orderValue: ''}];\r
 305             }\r
 306             this.$emit("orderList", this.orderList);\r
 307         },\r
 308         removeOrder: function(index){\r
 309             this.orderList.splice(index, 1);\r
 310         },\r
 311         addNewCase: function() {\r
 312             this.switchCases.push({value: '', orderType: '', orderValue: ''});\r
 313         },\r
 314         addNewBranch: function() {\r
 315             this.parallelBranches.push({step: ''});\r
 316         },\r
 317         collapseBox: function(event) {\r
 318             console.log("collapse");\r
 319             var ele = event.target;\r
 320             console.log(event);\r
 321             console.log(ele);\r
 322             var ibox = $(ele).closest('div.ibox');\r
 323             var content = ibox.children('.ibox-content');\r
 324             content.slideToggle(200);\r
 325             $(ele).toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');\r
 326         }\r
 327     },\r
 328     computed: {\r
 329         filtedFlowsRefs: function() {\r
 330             var subflowNameArr = [];\r
 331             for(var i = 0; i < this.flowsRefs.length; i++) {\r
 332                 if(this.flowsRefs[i] != this.flowName) {\r
 333                     subflowNameArr.push(this.flowsRefs[i]);\r
 334                 }\r
 335             }\r
 336             return subflowNameArr;\r
 337         }\r
 338     }\r
 339 }\r
 340 </script>