테스터 화면 body 표시 수정

src/main/resources/templates/page/routes/mockRouteList.html

@@ -41,12 +41,12 @@
                     <input id="csrf" type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
                     <table class="table table-hover pt-table">
                         <colgroup>
+                            <col style="width: 5%;">
                             <col style="width: 5%;">
                             <col style="width: 5%;">
                             <col>
                             <col>
-                            <col style="width: 7%;">
+                            <col style="width: 5%;">
-                            <col>
                         </colgroup>
                         <thead>
                         <tr>

src/main/resources/templates/page/tester/apiTester.html

@@ -44,6 +44,7 @@
     </div>
     <div id="apiRequestTemplate" style="display: none;">
         <div class="tab-pane fade mt-1">
+            <div><span class="collection_name"></span> &gt; <span class="api_name"></span></div>
             <div class="d-flex align-items-center">
                 <div class="form-floating col-md-1 me-1">
                     <select name="method" class="form-select method">
@@ -84,7 +85,13 @@
             </div>
             <ul class="nav nav-tabs mt-1" role="tablist">
                 <li class="nav-item" role="presentation">
-                    <button class="nav-link active btn_request_param_tab" data-bs-toggle="tab"
+                    <button class="nav-link btn_request_body_tab" data-bs-toggle="tab"
+                            type="button" role="tab" aria-controls="requestBody"
+                            aria-selected="false">Body
+                    </button>
+                </li>
+                <li class="nav-item" role="presentation">
+                    <button class="nav-link btn_request_param_tab" data-bs-toggle="tab"
                             type="button" role="tab" aria-controls="paramTab"
                             aria-selected="true">Param
                     </button>
@@ -95,15 +102,9 @@
                             aria-selected="false">Header
                     </button>
                 </li>
-                <li class="nav-item" role="presentation">
-                    <button class="nav-link btn_request_body_tab" data-bs-toggle="tab"
-                            type="button" role="tab" aria-controls="requestBody"
-                            aria-selected="false">Body
-                    </button>
-                </li>
             </ul>
             <div class="tab-content border-bottom" style="min-height: 300px;">
-                <div class="tab-pane fade show active request_param_tab" role="tabpanel"
+                <div class="tab-pane fade show request_param_tab" role="tabpanel"
                      aria-labelledby="requestParams-tab">
                     <table class="table">
                         <thead>
@@ -400,6 +401,7 @@
                 },
                 openTab: function(idx){
                     $('#apiRequestTabTitle li:eq(' + idx + ') button').tab('show');
+                    $('#api_request_'+ idx+' li:eq(0) button').tab('show')
                 },
                 renderTabContent: function (idx) {
                     let apiRequestTabContent = $('#apiRequestTabContent');
@@ -415,9 +417,11 @@
                     template.find('.btn_request_header_tab').attr('data-bs-target', "#requestHeaderTab_" + idx);
                     template.find('.btn_request_body_tab').attr('data-bs-target', "#requestBodyTab_" + idx);
 
-                    template.find('.request_param_tab').attr('id', "requestParamTab_" + idx);
                     template.find('.request_header_tab').attr('id', "requestHeaderTab_" + idx);
+                    template.find('.request_param_tab').attr('id', "requestParamTab_" + idx);
                     template.find('.request_body_tab').attr('id', "requestBodyTab_" + idx);
+                    template.find('.api_name').text(model.name);
+                    template.find('.collection_name').text(model.collectionName);
 
                     apiRequestTabContent.append(template);
                     let target = $('#api_request_' + idx);
@@ -485,7 +489,6 @@
                             automaticLayout: true
                         });
                         me.requests.push(requestBodyEditor);
-
                         target.find(".request_body")[0].addEventListener('shown.bs.tab', function () {
                             me.requests[idx].layout();
                         });
@@ -499,7 +502,6 @@
                             monaco.editor.setModelLanguage(model, $(this).val());
                         });
 
-
                         let responseBodyEditor = monaco.editor.create(target.find(".response_body")[0], {
                             value: '',
                             language: 'json',
@@ -561,9 +563,6 @@
                     let filter = $('#filter_text').val();
 
                     for (let i = 0; i < collections.length; i++) {
-                        // if (filter !== '' && collections[i].name.indexOf(filter) === -1) {
-                        //     continue;
-                        // }
 
                         let template = $('#collectionTemplate').children().clone();
                         template.attr('id', 'collection_' + i);
@@ -592,10 +591,6 @@
 
                         for (let j = 0; j < collections[i].apis.length; j++) {
 
-                            // if(collections[i].apis[j].name.indexOf(filter) === -1) {
-                            //     continue;
-                            // }
-
                             let collectionApiTemplate = $('#collectionApiTemplate').children().clone();
                             let link = collectionApiTemplate.find('a');
                             let btn = collectionApiTemplate.find('button.delete_api_request');
@@ -879,12 +874,17 @@
                     });
                 },
                 openApiRequest: function (collectionId, apiId) {
+                    let collectionName = collections.filter(function (collection) {
+                        return collection.id === collectionId;
+                    })[0].name;
                     let selectedApi = collections.filter(function (collection) {
                         return collection.id === collectionId;
                     })[0].apis.filter(function (api) {
                         return api.id === apiId;
                     })[0];
+
                     if (selectedApi !== undefined) {
+                        selectedApi.collectionName = collectionName;
                         let tab = apiRequests.filter(function (api) {
                             return api.id === selectedApi.id;
                         })[0];