diff options
Diffstat (limited to 'test-scheduler/ui/src/components/editor/editor.vue')
| -rw-r--r-- | test-scheduler/ui/src/components/editor/editor.vue | 141 |
1 files changed, 141 insertions, 0 deletions
diff --git a/test-scheduler/ui/src/components/editor/editor.vue b/test-scheduler/ui/src/components/editor/editor.vue new file mode 100644 index 00000000..e23b6d82 --- /dev/null +++ b/test-scheduler/ui/src/components/editor/editor.vue @@ -0,0 +1,141 @@ +<template> +<div class="col-md-offset-1 col-md-10" style="margin-top: 20px;"> + <ul class="nav nav-tabs"> + <li class="active"><a data-toggle="tab" data-target="#step-pane">Step</a></li> + <li><a data-toggle="tab" data-target="#flow-pane">Flow</a></li> + </ul> + <div class="tab-content"> + <div id="step-pane" class="tab-pane active fade in"> + <br> + <div class="row"> + <div class='col-md-12'> + <step v-bind:stepList="stepList" v-on:stepList="getStepList"></step> + </div> + </div> + </div> + <div id="flow-pane" class="tab-pane fade"> + <br> + <div class="row"> + <div class='col-md-12'> + <div class="row"> + <button style='margin-left:20px; margin-bottom: 30px;' class="btn btn-success" type="button" id="new-flow" v-on:click='addSubflow'> <span class="bold">ADD FLOW</span></button> + </div> + <div class='row'> + <div class='col-md-2'> + <ul id="flow-tabs"> + <li class="active"><a data-toggle="tab" data-target="#flow-main">main</a></li> + <li v-for="subflow in subflowList"><a data-toggle="tab" v-bind:data-target="'#' + subflow.tabId">{{ subflow.name }}</a></li> + </ul> + </div> + <div class="col-md-10"> + <div class="tab-content"> + <div id="flow-main" class="tab-pane active fade in"> + <flow v-model='mainflowName' v-bind:orderList='mainOrdersList' v-bind:stepsRefs='stepNameList' v-bind:flowsRefs='flowNameList' v-on:orderList='updateOrderList($event, mainflowName)'> + </flow> + </div> + <div v-for="subflow in subflowList" v-bind:id="subflow.tabId" class="tab-pane fade"> + <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> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> +</div> +</template> +<script> +import '../../assets/css/editor.css' +import step from './step.vue' +import flow from './flow.vue' +import showMessage from '../message/showMessage.js' +export default { + name: 'editor', + props: ['saveSignal', 'stepList', 'mainOrdersList', 'subflowList'], + model: { + prop: 'saveSignal', + event: 'saveResponse' + }, + data: function(){ + return { + mainflowName: 'main' + } + }, + components: { + step, + flow + }, + methods: { + getStepList: function(stepList) { + this.stepList = stepList; + }, + addSubflow: function() { + var tabid = "flow-" + Math.floor(Math.random()*(1000000)); + this.subflowList.push({'tabId': tabid, 'name': 'fake', 'orderList': []}); + }, + updateOrderList: function(orderList, flowName) { + if(flowName == 'main') { + this.mainOrdersList = orderList; + } else { + for(var i = 0; i < this.subflowList.length; ++i) { + if(this.subflowList[i].name == flowName) { + this.subflowList[i].orderList = orderList; + } + } + } + } + }, + computed: { + flowNameList: function() { + var stepNameArr = []; + for(var i = 0; i < this.subflowList.length; i++) { + stepNameArr.push(this.subflowList[i].name); + } + console.log(stepNameArr); + return stepNameArr; + }, + stepNameList: function() { + var stepNameArr = []; + for(var i = 0; i < this.stepList.length; i++) { + stepNameArr.push(this.stepList[i].name); + } + return stepNameArr; + } + }, + watch: { + saveSignal: function(newVal) { + if(newVal == true) { + console.log("editor newVal true"); + var self = this; + var msgTitle = "SAVE -- TESTCASE"; + $.ajax({ + url: this.global.SERVER_ADDR + "testcase/save", + method: "POST", + data: { + suiteName: this.$route.query.suiteName, + caseName: this.$route.query.caseName, + stepList: JSON.stringify(this.stepList), + subflowList: JSON.stringify(this.subflowList), + mainOrdersList: JSON.stringify(this.mainOrdersList) + }, + success: function(data) { + console.log("ajax save content!"); + if(data['code'] == 200) { + showMessage("success", msgTitle, "Save content successfully!"); + self.$emit('saveResponse', true); + } else { + showMessage(data['code'], msgTitle, "Failed to save content!", data['error']); + self.$emit('saveResponse', false); + } + }, + error: function(obj, status, msg) { + showMessage(status, msgTitle, "Failed to save content!", msg); + self.$emit('saveResponse', false); + } + }); + } + } + } +} +</script> |