변수 보기 수정

ApiTestManager/src/APITester.js

@@ -115,21 +115,8 @@ class APITester {
                 </div>
                 <div class="tab-pane fade request_header_tab" role="tabpanel" id="requestHeaderTab_${apiRequest.id}"
                      aria-labelledby="requestHeader-tab">
-                    <table class="table">
-                        <thead>
-                        <tr>
-                            <th scope="col">#</th>
-                            <th scope="col">이름</th>
-                            <th scope="col">값</th>
-                            <th scope="col">
-                                <button type="button" class="btn btn-secondary btn-sm btn_add_header">추가</button>
-                            </th>
-                        </tr>
-                        </thead>
-                        <tbody class="request_headers">
-                            ${this.renderHeaders(apiRequest.headers)}
-                        </tbody>
-                    </table>
+                     <div class="request_headers">
+                     </div>
                 </div>
                 <div class="tab-pane fade request_body_tab" role="tabpanel" id="requestBodyTab_${apiRequest.id}"
                      aria-labelledby="requestBody-tab">
@@ -301,8 +288,7 @@ class APITester {
             {selector: '.delete_api_request', action: this.showDeleteApiRequestModal.bind(this)},
             {selector: '.open_api_request', action: this.openApiRequest.bind(this)},
             {selector: '.confirm_delete_api', action: this.deleteApiRequest.bind(this)},
-            {selector: '.close_tab', action: this.closeTab.bind(this)}
-
+            {selector: '.close_tab', action: this.closeTab.bind(this)},
         ];
 
         for (let event of events) {
@@ -502,9 +488,14 @@ class APITester {
         }
     }
 
-    showPopper(element) {
+    showPopper(element, text) {
+        const variable = text.replace(/{{|}}/g, '');
         this.popperContent.style.display = 'block';
-        this.popperInstance = createPopper(element, popperContent, {
+
+        const innerDiv = this.popperContent.querySelector('.variable_popper');
+        innerDiv.textContent =  '{{' + variable + '}} = ' + (window.globals[variable] === undefined ? '' : window.globals[variable]);
+
+        this.popperInstance = createPopper(element, this.popperContent, {
             placement: 'bottom', // Popper below the element
             modifiers: [
                 {
@@ -526,6 +517,7 @@ class APITester {
     }
 
     renderTabContent(index) {
+        console.log('renderTabContent');
         var me = this;
         let apiRequestTabContent = $(this.apiTabContentTarget);
         let model = this.apiRequests[index];
@@ -537,11 +529,17 @@ class APITester {
             value: model.path,
         });
 
-        let propertyTable = new PropertyTable({
+        let queryParamTable = new PropertyTable({
             propertyName: 'queryParams',
             properties: model.queryParams
         });
-        propertyTable.init(apiRequestTabContent.find('.query_params')[0], (properties) => {
+
+        let headerTable = new PropertyTable({
+            propertyName: 'headers',
+            properties: model.headers
+        });
+
+        queryParamTable.init(apiRequestTabContent.find(`#api_request_${model.id}`).find('.query_params')[0], (properties) => {
             model.queryParams = properties;
             console.log(model.queryParams);
             this.buildPath(model);
@@ -549,7 +547,19 @@ class APITester {
             $('span.variable').off('mouseover');
             $('span.variable').off('mouseout');
             document.querySelectorAll('span.variable').forEach(element => {
-                element.addEventListener('mouseover', () => me.showPopper(element));
+                let text = element.innerText;
+                element.addEventListener('mouseover', () => me.showPopper(element, text));
+                element.addEventListener('mouseout', () => me.hidePopper(element));
+            });
+        });
+
+        headerTable.init(apiRequestTabContent.find(`#api_request_${model.id}`).find('.request_headers')[0], (properties) => {
+            model.headers = properties;
+            $('span.variable').off('mouseover');
+            $('span.variable').off('mouseout');
+            document.querySelectorAll('span.variable').forEach(element => {
+                let text = element.innerText;
+                element.addEventListener('mouseover', () => me.showPopper(element, text));
                 element.addEventListener('mouseout', () => me.hidePopper(element));
             });
         });
@@ -559,11 +569,12 @@ class APITester {
             editableInput.init(this, (value) => {
                 model.path = value;
                 model.queryParams = me.parseParam(model.path);
-                propertyTable.setProperties(model.queryParams);
+                queryParamTable.setProperties(model.queryParams);
                 $('span.variable').off('mouseover');
                 $('span.variable').off('mouseout');
                 document.querySelectorAll('span.variable').forEach(element => {
-                    element.addEventListener('mouseover', () => me.showPopper(element));
+                    let text = element.innerText;
+                    element.addEventListener('mouseover', () => me.showPopper(element, text));
                     element.addEventListener('mouseout', () => me.hidePopper(element));
                 });
             });
@@ -577,7 +588,9 @@ class APITester {
         });
 
         document.querySelectorAll('.variable').forEach(element => {
-            element.addEventListener('mouseover', () => me.showPopper(element));
+
+            let text = element.innerText;
+            element.addEventListener('mouseover', () => me.showPopper(element, text));
             element.addEventListener('mouseout', () => me.hidePopper(element));
         });
 
@@ -598,7 +611,7 @@ class APITester {
                 let lineContent = model.getLineContent(position.lineNumber);
                 if (word) {
                     if (lineContent.indexOf('{{' + word.word + '}}') > -1) {
-                        me.showPopper(e.target.element);
+                        me.showPopper(e.target.element, word.word);
                     }
                 } else {
                     me.hidePopper(e.target.element);

src/main/resources/static/css/custom.css

@@ -1971,21 +1971,45 @@ footer div.foot_info span {
 
 /* Property Table*/
 .prop-table {
-    display: flex;
-    flex-direction: column;
+    /*display: flex;*/
+    /*flex-direction: column;*/
+    /*width: 100%;*/
+    display: table;
     width: 100%;
+    table-layout: fixed;
 }
 
 .prop-table-row {
-    display: flex;
+    display: table-row;
 }
 
 .prop-table-cell {
+    /*padding: 10px;*/
+    /*border: 1px solid #ddd;*/
+    display: table-cell;
     padding: 10px;
     border: 1px solid #ddd;
+    overflow: hidden; /* Hide overflow */
+    text-overflow: ellipsis; /* Show ellipsis for overflow */
+    white-space: nowrap;
 }
 
 .prop-table-header {
     background-color: #f4f4f4;
     font-weight: bold;
 }
+
+.variable_popper {
+    min-width: 100px;
+    max-width: 300px;
+    background: white;
+    border: 1px solid #ddd;
+    border-radius: 2px;
+    margin: 5px;
+    padding: 5px;
+    overflow: hidden;
+}
+
+.query_params .prop-table {
+    width: calc(100vw - 240px);
+}