the detail page of testcase in frontend of testing-scheduler

[bottlenecks.git] / testing-scheduler / ui / src / components / editor / editor.vue

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