요청 관리 검색 수정

ApiTestManager/src/APITester.js

@@ -90,36 +90,48 @@ class APITester {
 
   collectionTemplate(collection, index) {
     return `
-        <li id="collection_${index}" class="collection api_scenario_item" data-index="${index}">
+        <li id="collection_${index}" class="collection api_scenario_item" data-index="${index}" style="display: ${collection.show || collection.apis.some(api => api.show) ? 'block' : 'none'}">
           <div class="d-flex justify-content-between">
                 <button class="btn d-inline-flex align-items-center rounded normal"
                         data-bs-toggle="collapse"
-                        data-bs-target="#btn_collection_${index}" aria-expanded="false" aria-current="false">${collection.name}
+                        data-bs-target="#btn_collection_${index}" 
+                        aria-expanded="${collection.show || collection.apis.some(api => api.show)}"
+                        aria-current="false">
+                    ${collection.name}
                 </button>
                 <div class="d-flex justify-content-between">
-                    <button class="p-1 reset-button edit_collection" data-collection="${collection.id}"><i class="fa fa-sharp fa-file-edit"></i></button>
-                    <button class="p-1 reset-button delete_collection" data-collection="${collection.id}"><i class="fa fa-sharp fa-trash-can"></i></button>
+                    <button class="p-1 reset-button edit_collection" data-collection="${collection.id}">
+                        <i class="fa fa-sharp fa-file-edit"></i>
+                    </button>
+                    <button class="p-1 reset-button delete_collection" data-collection="${collection.id}">
+                        <i class="fa fa-sharp fa-trash-can"></i>
+                    </button>
                 </div>
             </div>
-            <div class="collapse" id="btn_collection_${index}">
+            <div class="collapse ${collection.apis.some(api => api.show) ? 'show' : ''}" 
+                 id="btn_collection_${index}">
                 <ul class="list-unstyled fw-normal pb-1 small">
-                    ${collection.apis.map((api, apiIndex) => this.collectionApiTemplate(api, apiIndex, collection.id)).join('')}
+                    ${collection.apis.map((api, apiIndex) =>
+                    this.collectionApiTemplate(api, apiIndex, collection.id)
+                ).join('')}
                 </ul>
             </div>
-        </li>
-        `;
+        </li>`;
   }
 
   collectionApiTemplate(api, apiIndex, collectionId) {
     return `
-        <li class="d-flex justify-content-between api_request_sortable " draggable="true" data-collection="${collectionId}" data-id="${api.id}" data-index="${apiIndex}" data-node-type="api" data-name="${api.name}">
+        <li class="d-flex justify-content-between api_request_sortable ${api.show ? '' : 'hidden'}" draggable="true"  data-collection="${collectionId}" data-id="${api.id}" data-index="${apiIndex}" data-node-type="api" data-name="${api.name}">
             <a href="#" class="d-inline-flex align-items-center rounded open_api_request" data-node-type="api">${api.name}</a>
             <div class="d-flex justify-content-between">
-                    <button class="p-1 reset-button edit_api_request"><i class="fa fa-sharp fa-file-edit"></i></button>
-                    <button class="p-1 reset-button delete_api_request"><i class="fa fa-trash-can"></i></button>
+                <button class="p-1 reset-button edit_api_request">
+                    <i class="fa fa-sharp fa-file-edit"></i>
+                </button>
+                <button class="p-1 reset-button delete_api_request">
+                    <i class="fa fa-trash-can"></i>
+                </button>
             </div>
-            </li>
-        `;
+        </li>`;
   }
 
   init(servers) {
@@ -133,6 +145,7 @@ class APITester {
     this.serverManager = new ServerManager(this.servers);
     this.bindEvents();
     this.loadCollections();
+
   }
 
   bindEvents() {
@@ -163,11 +176,59 @@ class APITester {
     $(document).on('change', '.request_headers input', this.handleUIUpdate.bind(this));
     $(document).on('change', '.api_request_info select, .api_request_info input', this.handleUIUpdate.bind(this));
     $(document).on('change', '.api_request_info select', this.handleUpdateServer.bind(this));
+    $('#api_search').on('input', this.handleSearch.bind(this));
 
     window.addEventListener('resize', this.resizeEditor.bind(this));
 
   }
 
+  handleSearch(event) {
+
+    const searchTerm = (event !== undefined)? event.target.value.toLowerCase() : '';
+    console.log("검색어:", searchTerm);
+
+    this.collections.forEach(collection => {
+      const collectionMatches = collection.name.toLowerCase().includes(searchTerm);
+      console.log(`컬렉션 "${collection.name}" 검색어 매칭 여부: ${collectionMatches}`);
+
+      if (searchTerm === '') {
+        // 검색어가 없으면 모든 컬렉션과 API를 표시
+        collection.show = true;
+        collection.apis.forEach(api => {
+          api.show = true;
+        });
+        console.log(`검색어가 없으므로 컬렉션 "${collection.name}"과 모든 API를 표시합니다.`);
+      } else if (collectionMatches) {
+        // 컬렉션명이 검색어와 매칭되면 모두 표시
+        collection.show = true;
+        collection.apis.forEach(api => {
+          api.show = true;
+        });
+        console.log(`컬렉션 "${collection.name}"이(가) 검색어와 매칭되어 모든 API를 표시합니다.`);
+      } else {
+        // 컬렉션명이 매칭되지 않을 경우, 하위 API만 체크
+        let anyApiMatches = false;
+        collection.apis.forEach(api => {
+          if (api.name.toLowerCase().includes(searchTerm)) {
+            api.show = true;
+            anyApiMatches = true;
+            console.log(`컬렉션 "${collection.name}"의 API "${api.name}"가 검색어와 매칭됩니다.`);
+          } else {
+            api.show = false;
+            console.log(`컬렉션 "${collection.name}"의 API "${api.name}"는 검색어와 매칭되지 않습니다.`);
+          }
+        });
+        // 하위 API 중 하나라도 매칭되면 컬렉션도 보여야 함
+        collection.show = anyApiMatches;
+        console.log(`컬렉션 "${collection.name}" 자체는 매칭되지 않지만, 하위 API 매칭 여부: ${anyApiMatches}`);
+      }
+    });
+
+    // 무한 루프 방지를 위해 AJAX 호출 없이 바로 렌더링
+    this.renderCollections();
+  }
+
+
   resizeEditor() {
     //FIXME: 창 크기 변경시 자동으로 editor 크기가 조정되지 않아서, 0으로 강제 변경후 다시 layout() 호출
 
@@ -531,11 +592,13 @@ class APITester {
   }
 
   renderCollections() {
-    let select = $('#modal_collection');
-    let sidemenu = $(this.collectionTarget);
-    select.empty();
-    sidemenu.empty();
+    const sidemenu = $(this.collectionTarget);
+    const select = $('#modal_collection');
 
+    sidemenu.empty();
+    select.empty();
+
+    // 컬렉션과 API 렌더링 (이미 handleSearch에서 show 플래그가 설정되어 있다고 가정)
     for (let i = 0; i < this.collections.length; i++) {
       sidemenu.append(this.renderCollection(this.collections[i], i));
       let option = $('<option>');
@@ -544,12 +607,13 @@ class APITester {
       select.append(option);
     }
 
+    // 드래그 가능한 요소 설정
     $('li .api_request_sortable').draggable({
-      helper: this.customHelper, start: function(event, ui) {
-        // You can add any additional data or styles you want when dragging starts
+      helper: this.customHelper,
+      start: function(event, ui) {
         $(this).addClass('dragging');
-      }, stop: function(event, ui) {
-        // Clean up, e.g., remove styles or data
+      },
+      stop: function(event, ui) {
         $(this).removeClass('dragging');
       }
     });
@@ -683,6 +747,7 @@ class APITester {
           }
           return collection;
         });
+        me.handleSearch();
       }, error: function(response, textStatus, errorThrown) {
         me.hideLoadingOverlay();
         $('.toast-body').text(response.responseJSON.error);