From a0f015cb78e6f823881f77b179731ee56463d729 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=98=84=EC=84=B1=ED=95=84?= Date: Sat, 20 Jan 2024 22:51:49 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B3=80=EC=88=98=20Snippet?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ApiTestManager/src/APITester.js | 23 +++++-- .../src/components/VariableSnippet.js | 60 +++++++++++++++++++ .../templates/layout/api_tester_layout.html | 34 +++++++++++ .../templates/page/tester/apiCollection.html | 3 +- .../templates/page/tester/apiTester.html | 5 +- 5 files changed, 116 insertions(+), 9 deletions(-) create mode 100644 ApiTestManager/src/components/VariableSnippet.js diff --git a/ApiTestManager/src/APITester.js b/ApiTestManager/src/APITester.js index b16ad7e..e4ebbee 100644 --- a/ApiTestManager/src/APITester.js +++ b/ApiTestManager/src/APITester.js @@ -3,6 +3,8 @@ import APIClient from './APIClient'; import EditableInput from './components/EditableInput'; import {createPopper} from "@popperjs/core/lib/popper-lite"; import PropertyTable from "./components/PropertyTable"; +import VariableSnippet from "./components/VariableSnippet"; + class APITester { @@ -132,7 +134,10 @@ class APITester {
-
+
+
+
+
-
+
+
+
+
@@ -565,7 +573,6 @@ class APITester { }); apiRequestTabContent.find(`#api_request_${model.id}`).find('.api_request_info').find('.path').each(function () { - editableInput.init(this, (value) => { model.path = value; model.queryParams = me.parseParam(model.path); @@ -583,8 +590,6 @@ class APITester { $('span.variable').off('mouseover'); $('span.variable').off('mouseout'); - - }); document.querySelectorAll('.variable').forEach(element => { @@ -656,6 +661,10 @@ class APITester { automaticLayout: true, quickSuggestions: false }); + + const snippet1 = new VariableSnippet(); + snippet1.init(target.find(".pre-request-variable")[0], preRequestEditor); + me.preRequestEditors.push(preRequestEditor); target.find(".pre-request")[0].addEventListener('shown.bs.tab', () => { me.preRequestEditors[index].layout(); @@ -671,6 +680,10 @@ class APITester { automaticLayout: true, quickSuggestions: false }); + + const snippet2 = new VariableSnippet(); + snippet2.init(target.find(".post-request-variable")[0], postRequestEditor); + me.postRequestEditors.push(postRequestEditor); target.find(".post-request")[0].addEventListener('shown.bs.tab', () => { me.postRequestEditors[index].layout(); diff --git a/ApiTestManager/src/components/VariableSnippet.js b/ApiTestManager/src/components/VariableSnippet.js new file mode 100644 index 0000000..25a9fc9 --- /dev/null +++ b/ApiTestManager/src/components/VariableSnippet.js @@ -0,0 +1,60 @@ +import * as monaco from 'monaco-editor'; + +const commands = [ + { name: 'set_global', displayName: 'Set Global Variable', text: 'globals["key"] = "value";\n' }, + { name: 'get_global', displayName: 'Get Global Variable', text: 'const value = globals["key"];\n' }, + { name: 'set_variable', displayName: 'Set Variable', text: 'variables["key"] = "value";\n' }, + { name: 'get_variable', displayName: 'Get Variable', text: 'const value = variables["key"];\n' }, + { name: 'get_response_body', displayName: 'Get Response Body', text: 'const body = response.body;\n' }, + { name: 'parse_response_body', displayName: 'Parse Response Body', text: 'JSON.parse(response.body);\n' }, + { name: 'get_response_headers', displayName: 'Get Response Header', text: 'const header_value = response.headers["header-key"];\n' } +]; + +class VariableSnippet { + constructor(options = {}) { + this.commands = commands || []; // Array of command objects + } + + init(element, editor) { + this.editor = editor; // Store the editor reference + this.render(element); + } + + render(element) { + const commandsList = this.commands.map(command => { + return ``; + }).join(''); + + element.innerHTML = `
${commandsList}
`; + + // Attach event listeners + element.querySelectorAll('.command-button').forEach(button => { + button.addEventListener('click', (event) => { + const commandName = event.target.getAttribute('data-command'); + const command = this.commands.find(cmd => cmd.name === commandName); + + if (command && this.editor) { + this.appendTextToEditor(command.text); + } + }); + }); + } + + appendTextToEditor(text) { + const model = this.editor.getModel(); + const position = this.editor.getPosition(); + this.editor.executeEdits('', [{ + range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column), + text: text, + forceMoveMarkers: true + }]); + this.editor.focus(); + } +} +export default VariableSnippet; + +// Usage: +//const snippet = new VariableSnippet(); +//snippet.init(document.getElementById('snippet-container'), editor); + + diff --git a/src/main/resources/templates/layout/api_tester_layout.html b/src/main/resources/templates/layout/api_tester_layout.html index f7c6e60..0c2e0ae 100644 --- a/src/main/resources/templates/layout/api_tester_layout.html +++ b/src/main/resources/templates/layout/api_tester_layout.html @@ -112,6 +112,40 @@ $('#variable_modal').modal('show'); }); + $('.btn_add_variables').on('click', function() { + var tbody = $('.variables'); + + // Create a new row with empty key and value inputs + var newRow = $(''); + var keyInput = $('').attr('type', 'text').addClass('form-control key-input'); + var valueInput = $('').attr('type', 'text').addClass('form-control value-input'); + var deleteButton = $(' + diff --git a/src/main/resources/templates/page/tester/apiTester.html b/src/main/resources/templates/page/tester/apiTester.html index 948cc3b..39cce68 100644 --- a/src/main/resources/templates/page/tester/apiTester.html +++ b/src/main/resources/templates/page/tester/apiTester.html @@ -20,8 +20,9 @@ -