Skip to content

Commit b3447b9

Browse files
libargutxilibargutxi
committed
delete elements
1 parent cdf97df commit b3447b9

2 files changed

Lines changed: 81 additions & 29 deletions

File tree

‎src/cs_dynamicpages/browser/static/delete-row.js‎

Lines changed: 69 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -26,39 +26,90 @@
2626

2727
console.log("Initializing row deletion...");
2828

29-
const deleteModal = document.getElementById("deleteRowModal");
29+
const deleteModal = document.getElementById("deleteElementModal");
3030
if (!deleteModal) {
31-
console.error("Delete row modal not found");
31+
console.error("Delete element modal not found");
3232
return;
3333
}
3434

3535
let rowToDelete = null;
3636

3737
deleteModal.addEventListener("show.bs.modal", function (event) {
3838
const button = event.relatedTarget;
39-
rowToDelete = button.closest("section.dynamic-row");
40-
console.log("Preparing to delete row:", rowToDelete?.dataset.rowid);
39+
// Get the closest parent element with data-delete-target="true"
40+
rowToDelete = button.closest('[data-delete-target="true"]');
41+
if (!rowToDelete) {
42+
console.error(
43+
'No deletable element found. Add data-delete-target="true" to the parent element you want to delete.'
44+
);
45+
return;
46+
}
47+
console.log("Preparing to delete element:", rowToDelete);
4148
});
4249

43-
const confirmButton = document.getElementById("confirmDeleteRow");
44-
if (confirmButton) {
45-
confirmButton.addEventListener("click", handleDeleteRow);
46-
} else {
47-
console.error("Confirm delete button not found");
48-
}
50+
// Store the deletion context for modal confirmation
51+
let deletionContext = null;
52+
const modal = document.getElementById("deleteElementModal");
4953

50-
function handleDeleteRow() {
51-
if (!rowToDelete) {
52-
console.error("No row selected for deletion");
53-
return;
54+
// Handle delete button click
55+
document.addEventListener("click", function (event) {
56+
const deleteButton = event.target.closest(".btn-delete-element");
57+
if (deleteButton) {
58+
event.preventDefault();
59+
const elementToDelete = deleteButton.closest(
60+
'[data-delete-target="true"]'
61+
);
62+
if (elementToDelete) {
63+
// Store the deletion context for when modal is confirmed
64+
deletionContext = {
65+
elementId: elementToDelete.dataset.elementid,
66+
element: elementToDelete,
67+
};
68+
// The modal will be shown by Bootstrap's data-bs-toggle="modal"
69+
} else {
70+
console.error(
71+
'No deletable element found. Add data-delete-target="true" to the parent element you want to delete.'
72+
);
73+
}
5474
}
75+
});
76+
77+
// Handle modal confirm button click
78+
if (modal) {
79+
modal.addEventListener("show.bs.modal", function (event) {
80+
const button = event.relatedTarget;
81+
// Update the modal content if needed
82+
const modalTitle = modal.querySelector(".modal-title");
83+
if (modalTitle) {
84+
modalTitle.textContent = "Confirm Deletion";
85+
}
86+
});
87+
88+
const confirmButton = document.getElementById("confirmDeleteElement");
89+
if (confirmButton) {
90+
confirmButton.addEventListener("click", function () {
91+
if (deletionContext) {
92+
deleteRow(deletionContext.elementId, deletionContext.element);
93+
// Close the modal
94+
const modalInstance = bootstrap.Modal.getInstance(modal);
95+
if (modalInstance) {
96+
modalInstance.hide();
97+
}
98+
}
99+
});
100+
} else {
101+
console.error(
102+
'Could not find confirm button with ID "confirmDeleteRow"'
103+
);
104+
}
105+
}
55106

56-
const rowId = rowToDelete.dataset.rowid;
57-
const rowUrl = rowToDelete.dataset.rowurl;
107+
function deleteRow(elementId, elementToDelete) {
108+
const elementUrl = elementToDelete.dataset.elementurl;
58109

59-
console.log(`Deleting row ${rowId} via ${rowUrl}`);
110+
console.log(`Deleting element ${elementId} via ${elementUrl}`);
60111

61-
fetch(rowUrl, {
112+
fetch(elementUrl, {
62113
method: "DELETE",
63114
headers: {
64115
Accept: "application/json",

‎src/cs_dynamicpages/views/dynamic_view.pt‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,18 @@
1111
">
1212
<tal:featured repeat="brain rows">
1313
<div tal:define="row brain/getObject;">
14-
<section class="dynamic-row state-${row/review_state}" data-rowid="${row/id}"
15-
data-rowurl="${row/absolute_url}" data-rowsurl="${row/aq_parent/absolute_url}">
14+
<section class="dynamic-row state-${row/review_state}" data-elementid="${row/id}"
15+
data-elementurl="${row/absolute_url}" data-rowsurl="${row/aq_parent/absolute_url}"
16+
data-delete-target="true">
1617
<div class="edit-buttons d-flex gap-2" tal:condition="row/can_edit">
1718
<small
1819
class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-2 position-relative">
1920
Template: ${row/row_template}
2021
</small>
2122
<!-- <a class="btn btn-outline-primary btn-sm align-self-start" href="${row/absolute_url}">View</a> -->
2223
<a class="btn btn-outline-primary btn-sm align-self-start" href="${row/absolute_url}/edit">Edit</a>
23-
<a class="btn btn-sm btn-danger align-self-start" href="#" data-bs-toggle="modal"
24-
data-bs-target="#deleteRowModal" data-rowid="${row/id}">Delete row</a>
24+
<a class="btn btn-sm btn-danger align-self-start btn-delete-element" href="#" data-bs-toggle="modal"
25+
data-bs-target="#deleteElementModal" data-rowid="${row/id}">Delete row</a>
2526

2627
<div class="ms-auto d-flex gap-2 align-items-start">
2728

@@ -54,7 +55,8 @@
5455
tal:define="features_list row/featured_list" tal:condition="features_list">
5556
<tal:featured repeat="featured_brain features_list">
5657
<div tal:define="featured_obj featured_brain/getObject;">
57-
<div class="btn-group">
58+
<div class="btn-group" data-elementid="${featured_obj/id}"
59+
data-elementurl="${featured_obj/absolute_url}" data-delete-target="true">
5860
<a tal:attributes="class python:featured_obj.review_state() == 'published' and
5961
'position-relative btn btn-outline-success btn-sm bg-success-subtle dropdown-toggle' or
6062
'position-relative btn btn-outline-danger btn-sm bg-danger-subtle dropdown-toggle'"
@@ -76,9 +78,8 @@
7678
<li>
7779
<hr class="dropdown-divider">
7880
</li>
79-
<li><a class="ms-3 btn btn-sm btn-danger align-self-start" href="#" data-bs-toggle="modal"
80-
data-bs-target="#deleteRowModal" data-rowid="${featured_obj/id}"
81-
data-rowurl="${featured_obj/absolute_url}">Delete</a></li>
81+
<li><a class="ms-3 btn btn-sm btn-danger align-self-start btn-delete-element" href="#"
82+
data-bs-toggle="modal" data-bs-target="#deleteElementModal">Delete</a></li>
8283
</ul>
8384
</div>
8485
</div>
@@ -102,20 +103,20 @@
102103
new row</a>
103104
</div>
104105
<!-- Delete Confirmation Modal -->
105-
<div class="modal fade" id="deleteRowModal" tabindex="-1" aria-labelledby="deleteRowModalLabel"
106+
<div class="modal fade" id="deleteElementModal" tabindex="-1" aria-labelledby="deleteElementModalLabel"
106107
aria-hidden="true">
107108
<div class="modal-dialog">
108109
<div class="modal-content">
109110
<div class="modal-header">
110-
<h5 class="modal-title" id="deleteRowModalLabel" i18n:translate="">Confirm Deletion</h5>
111+
<h5 class="modal-title" id="deleteElementModalLabel" i18n:translate="">Confirm Deletion</h5>
111112
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
112113
</div>
113114
<div class="modal-body">
114115
<p i18n:translate="">Are you sure you want to delete this item? This action cannot be undone.</p>
115116
</div>
116117
<div class="modal-footer">
117118
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" i18n:translate="">Cancel</button>
118-
<button type="button" class="btn btn-danger" id="confirmDeleteRow" i18n:translate="">Delete</button>
119+
<button type="button" class="btn btn-danger" id="confirmDeleteElement" i18n:translate="">Delete</button>
119120
</div>
120121
</div>
121122
</div>

0 commit comments

Comments
 (0)