요청 삭제 - 팝업 알림

src/main/resources/templates/page/apiCollection.html

@@ -57,6 +57,23 @@
             </div>
         </div>
     </div>
+    <div class="modal fade" id="confirm_delete_api_modal" tabindex="-1" aria-labelledby="confirm_delete_api_modal" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">API 삭제</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div>삭제 하시겠습니까?</div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
+                    <button type="button" class="btn btn-primary confirm_delete_api">삭제</button>
+                </div>
+            </div>
+        </div>
+    </div>
 </aside>
 
 <!-- menu script -->

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

@@ -249,7 +249,11 @@
     <ul id="collectionApiTemplate" style="display: none;">
         <li class="d-flex justify-content-between">
             <a href="#" class="d-inline-flex align-items-center rounded"></a>
-            <button class="p-1 reset-button delete_api_request"><i class="fa fa-trash-can"></i></button>
+            <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>
+            </div>
+
         </li>
     </ul>
 </section>
@@ -295,6 +299,10 @@
                         controller.removeCollection($(this).data('id'));
                     });
 
+                    $('#confirm_delete_api_modal').find('button.confirm_delete_api').on('click', function () {
+                        controller.deleteApiRequest($(this).data('collection'), $(this).data('id'));
+                    });
+
                     controller.loadCollections();
                 },
                 renderParam: function (tabIdx) {
@@ -368,7 +376,7 @@
 
                         $span.on('click', function (event) {
                             event.stopPropagation();
-                            controller.removeAPIRequest(idx);
+                            controller.closeTab(idx);
                         });
 
                         let tabButton = $('<button>').attr('class', 'nav-link')
@@ -567,7 +575,10 @@
                             btn.attr('data-collection', collections[i].id);
                             btn.attr('data-id', collections[i].apis[j].id);
                             btn.on('click', function () {
-                                controller.deleteApiRequest($(this).attr('data-collection'), $(this).attr('data-id'));
+                                //controller.deleteApiRequest($(this).attr('data-collection'), $(this).attr('data-id'));
+                                $('#confirm_delete_api_modal').find('.confirm_delete_api').attr('data-id', $(this).attr('data-id'));
+                                $('#confirm_delete_api_modal').find('.confirm_delete_api').attr('data-collection', $(this).attr('data-collection'));
+                                $('#confirm_delete_api_modal').modal('show');
                             })
                             template.find('.collapse ul').append(collectionApiTemplate);
                         }
@@ -640,61 +651,6 @@
                 hideLoadingOverlay: function () {
                     $("#loading-overlay").hide();
                 },
-                openApiRequest: function (collectionId, apiId) {
-                    let selectedApi = collections.filter(function (collection) {
-                        return collection.id === collectionId;
-                    })[0].apis.filter(function (api) {
-                        return api.id === apiId;
-                    })[0];
-                    if (selectedApi !== undefined) {
-                        let tab = apiRequests.filter(function (api) {
-                            return api.id === selectedApi.id;
-                        })[0];
-
-                        if (selectedApi.responseModel === undefined) {
-                            selectedApi.responseModel = {
-                                status: 0,
-                                time: 0,
-                                size: 0,
-                                headers: [],
-                                body: ''
-                            };
-                        }
-
-                        if (tab === undefined) {
-                            apiRequests.push(selectedApi);
-                            view.currentIdx = apiRequests.length - 1;
-                            view.renderTabHeader();
-                            view.renderTabContent(view.currentIdx);
-                        }
-                    }
-                },
-                deleteApiRequest: function (collectionId, apiId) {
-                    this.currentAjaxRequest = $.ajax({
-                        url: '/mgmt/collections/{id}/apis/delete.do'.replace('{id}', collectionId),
-                        type: 'POST',
-                        contentType: 'application/json',
-                        data: JSON.stringify({id: apiId}),
-                        success: function (data) {
-                        },
-                        error: function (response, textStatus, errorThrown) {
-                            controller.hideLoadingOverlay();
-                        },
-                        complete: function () {
-                            controller.hideLoadingOverlay();
-
-                            //get the api with apiIdx index from apiRequests
-                            let apiIdx = apiRequests.findIndex(function (api) {
-                                return api.id === apiId;
-                            });
-
-                            apiRequests.splice(apiIdx, 1);
-                            view.render();
-                            $('#apiRequestTabTitle li:eq(0) button').tab('show');
-                            controller.loadCollections();
-                        }
-                    });
-                },
                 send: function (tabIdx) {
                     let model = apiRequests[tabIdx];
                     let target = $('#api_request_' + tabIdx);
@@ -831,7 +787,60 @@
                         }
                     });
                 },
-                removeAPIRequest: function (idx) {
+                openApiRequest: function (collectionId, apiId) {
+                    let selectedApi = collections.filter(function (collection) {
+                        return collection.id === collectionId;
+                    })[0].apis.filter(function (api) {
+                        return api.id === apiId;
+                    })[0];
+                    if (selectedApi !== undefined) {
+                        let tab = apiRequests.filter(function (api) {
+                            return api.id === selectedApi.id;
+                        })[0];
+
+                        if (selectedApi.responseModel === undefined) {
+                            selectedApi.responseModel = {
+                                status: 0,
+                                time: 0,
+                                size: 0,
+                                headers: [],
+                                body: ''
+                            };
+                        }
+
+                        if (tab === undefined) {
+                            apiRequests.push(selectedApi);
+                            view.currentIdx = apiRequests.length - 1;
+                            view.renderTabHeader();
+                            view.renderTabContent(view.currentIdx);
+                        }
+                    }
+                },
+                deleteApiRequest: function (collectionId, apiId) {
+                    this.currentAjaxRequest = $.ajax({
+                        url: '/mgmt/collections/{id}/apis/delete.do'.replace('{id}', collectionId),
+                        type: 'POST',
+                        contentType: 'application/json',
+                        data: JSON.stringify({id: apiId}),
+                        success: function (data) {
+                        },
+                        error: function (response, textStatus, errorThrown) {
+                            controller.hideLoadingOverlay();
+                        },
+                        complete: function () {
+                            controller.hideLoadingOverlay();
+
+                            //get the api with apiIdx index from apiRequests
+                            let apiIdx = apiRequests.findIndex(function (api) {
+                                return api.id === apiId;
+                            });
+                            controller.closeTab(apiIdx);
+                            controller.loadCollections();
+                            $('#confirm_delete_api_modal').modal('hide');
+                        }
+                    });
+                },
+                closeTab: function (idx) {
                     apiRequests.splice(idx, 1);
                     view.render();
                     $('#apiRequestTabTitle li:eq(0) button').tab('show');