Skip to content
Snippets Groups Projects
Commit fd1c5c30 authored by Richard Willie Ekong's avatar Richard Willie Ekong
Browse files

add markup for delete confirmation dialog, create function to inflate dialog...

add markup for delete confirmation dialog, create function to inflate dialog upon the click of any delete button to prompt the user for delete operation. If the user clicks yes the contact is deleted and the dialog disappears, but if the user clicks no the dialog is hidden
parent a2b072ab
Branches
No related tags found
No related merge requests found
...@@ -8,6 +8,16 @@ ...@@ -8,6 +8,16 @@
<body> <body>
<div> <div>
<div th:insert="contact_form :: contactFormContainer"></div> <div th:insert="contact_form :: contactFormContainer"></div>
<!-- Create a modal dialog to confirm delete operation when any delete button is clicked upon-->
<dialog id="del-confirmation-dialog" open>
<p id="del-confirmation-text">Are you sure want to delete this contact?</p>
<div id="del-confirmation-actions-container">
<span id="empty-space"></span>
<button id="positive-confirmation-btn">Yes</button>
<button id="negative-confirmation-btn">No</button>
</div>
</dialog>
<!-- Table to display a list of contacts from the server -->
<table id="contact-table" th:each="contact : ${contacts}"> <table id="contact-table" th:each="contact : ${contacts}">
<thead th:if="${contactStat.index == 0}"> <thead th:if="${contactStat.index == 0}">
<tr> <tr>
...@@ -36,6 +46,27 @@ ...@@ -36,6 +46,27 @@
<script> <script>
const deleteButtons = document.querySelectorAll(".delete-btn"); const deleteButtons = document.querySelectorAll(".delete-btn");
const httpRequest = new XMLHttpRequest(); const httpRequest = new XMLHttpRequest();
const inflateDeleteConfirmationDialog = (email, row) =>{
const dialog = document.querySelector("#del-confirmation-dialog");
const positiveButton = document.querySelector("#positive-confirmation-btn");
const negativeButton = document.querySelector("#negative-confirmation-btn");
dialog.style.display = "block";
if (typeof dialog.showModal !== 'function'){//if the browser doesn't support html5 dialog
//hide the dialog and ...
dialog.hidden = true;
//just fallback to ensure the delete request is made
makeDeleteRequest()
}else {
positiveButton.addEventListener("click", e =>{
makeDeleteRequest(email, row);
dialog.style.display = "none";
});
negativeButton.addEventListener("click", e =>{
dialog.style.display = "none";
});
}
};
const makeDeleteRequest = (resourceId, selectedTableRow) => { const makeDeleteRequest = (resourceId, selectedTableRow) => {
if (!httpRequest) { if (!httpRequest) {
console.log("Request failure"); console.log("Request failure");
...@@ -60,8 +91,9 @@ ...@@ -60,8 +91,9 @@
btn.addEventListener("click", _e => { btn.addEventListener("click", _e => {
let currentRow = btn.parentNode.parentNode; let currentRow = btn.parentNode.parentNode;
let currentEmailData = currentRow.querySelector("#emailCol").textContent; let currentEmailData = currentRow.querySelector("#emailCol").textContent;
makeDeleteRequest(currentEmailData, currentRow); inflateDeleteConfirmationDialog(currentEmailData, currentRow);
}); });
}); });
</script> </script>
</html> </html>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment