변수 Snippet

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 {
                         <div style="width:calc(100% - 200px);">
                             <div class="pre-request mt-1" style="height:300px;border:1px solid grey;"></div>
                         </div>
-                        <div style="width: 200px;"></div> 
+                        <div style="width: 200px;">
+                            <div class="pre-request-variable">
+                            </div>
+                        </div> 
                     </div>
                 </div>
                 <div class="tab-pane fade post_script_tab" role="tabpanel" id="postRequestTab_${apiRequest.id}"
@@ -141,7 +146,10 @@ class APITester {
                         <div style="width:calc(100% - 200px);">
                             <div class="post-request mt-1" style="height:300px;border:1px solid grey;"></div>
                         </div>
-                        <div style="width: 200px;"></div> 
+                        <div style="width: 200px;">
+                        <div class="post-request-variable">
+                            </div>
+</div> 
                     </div>
                 </div>
             </div>
@@ -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();

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 `<button class="btn btn-link command-button" data-command="${command.name}">${command.displayName}</button>`;
+        }).join('');
+
+        element.innerHTML = `<div class="commands-list">${commandsList}</div>`;
+
+        // 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);
+
+