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

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