IBX-10609: Enhance notification deletion by integrating modal confirmation.

Author: RopRaptor

src/bundle/Resources/public/js/scripts/admin.notifications.modal.js

@@ -1,7 +1,10 @@
+import { controlZIndex } from './helpers/modal.helper';
+
 (function (global, doc, ibexa, Translator, Routing) {
     let currentPageLink = null;
     let getNotificationsStatusErrorShowed = false;
     let lastFailedCountFetchNotificationNode = null;
+    let selectedNotificationId = null;
     const SELECTOR_MODAL_ITEM = '.ibexa-notifications-modal__item';
     const SELECTOR_MODAL_RESULTS = '.ibexa-notifications-modal__results .ibexa-scrollable-wrapper';
     const SELECTOR_MODAL_TITLE = '.ibexa-side-panel__header';
@@ -214,9 +217,8 @@
 
         currentTarget.textContent.trim() === markAsReadLabel ? markAsRead({ currentTarget }) : markAsUnread({ currentTarget });
     };
-    const deleteNotification = ({ currentTarget }) => {
-        const { notificationId } = currentTarget.dataset;
-        const deleteLink = Routing.generate('ibexa.notifications.delete', { notificationId });
+    const deleteNotification = () => {
+        const deleteLink = Routing.generate('ibexa.notifications.delete', { notificationId: selectedNotificationId });
         const message = Translator.trans(
             /* @Desc("Cannot delete notification") */ 'notifications.modal.message.error.delete',
             {},
@@ -227,11 +229,10 @@
             .then(getJsonFromResponse)
             .then((response) => {
                 if (response.status === 'success') {
-                    const notification = doc.querySelector(`.ibexa-notifications-modal__item[data-notification-id="${notificationId}"]`);
-                    const menuBranch = currentTarget.closest('.ibexa-multilevel-popup-menu__branch');
-                    const menuInstance = ibexa.helpers.objectInstances.getInstance(menuBranch.menuInstanceElement);
+                    const notification = doc.querySelector(
+                        `.ibexa-notifications-modal__item[data-notification-id="${selectedNotificationId}"]`,
+                    );
 
-                    menuInstance.closeMenu();
                     notification.remove();
                     getNotificationsStatus();
                 } else {
@@ -245,15 +246,26 @@
     const attachActionsListeners = () => {
         const attachListener = (node, callback) => node.addEventListener('click', callback, false);
         const markAsButtons = doc.querySelectorAll('.ibexa-notifications-modal--mark-as');
-        const deleteButtons = doc.querySelectorAll('.ibexa-notifications-modal--delete');
+        const deleteButtons = doc.querySelectorAll('.ibexa-notifications-open-modal-button');
+        const confirmDeleteButton = doc.querySelector('.ibexa-notifications-modal--delete--confirm');
+        const setNotificationId = ({ currentTarget }) => {
+            const deleteModal = doc.querySelector('.modal-backdrop.show.fade');
+            controlZIndex(deleteModal, '199');
+
+            selectedNotificationId = currentTarget.dataset.notificationId;
+        };
 
         markAsButtons.forEach((markAsButton) => {
             attachListener(markAsButton, handleMarkAsAction);
         });
 
         deleteButtons.forEach((deleteButton) => {
-            attachListener(deleteButton, deleteNotification);
+            attachListener(deleteButton, setNotificationId);
         });
+
+        if (confirmDeleteButton) {
+            confirmDeleteButton.addEventListener('click', deleteNotification);
+        }
     };
     const showNotificationPage = (pageHtml) => {
         const modalResults = panel.querySelector(SELECTOR_MODAL_RESULTS);

src/bundle/Resources/public/js/scripts/helpers/modal.helper.js

@@ -1,5 +1,6 @@
-const controlZIndex = (container) => {
+const controlZIndex = (container, ZIndexValue) => {
     const initialZIndex = container.style.zIndex;
+    container.style.zIndex = ZIndexValue;
 
     container.addEventListener('show.bs.modal', () => {
         container.style.zIndex = 'initial';

src/bundle/Resources/translations/ibexa_notifications.en.xliff

@@ -96,6 +96,11 @@
         <target state="new">Mark as unread</target>
         <note>key: notification.mark_as_unread</note>
       </trans-unit>
+      <trans-unit id="1b5f287ab1b01d5f0402378d633e8924aad59c98" resname="notification.modal.delete.confirm_message">
+        <source>Are you sure you want to delete this notification?</source>
+        <target state="new">Are you sure you want to delete this notification?</target>
+        <note>key: notification.modal.delete.confirm_message</note>
+      </trans-unit>
       <trans-unit id="5b03625b8de51d296ad7f4bc980e631c964185d8" resname="notification.no_longer_available">
         <source>The Content item is no longer available</source>
         <target state="new">The Content item is no longer available</target>

src/bundle/Resources/views/themes/admin/account/notifications/list_item.html.twig

@@ -47,7 +47,11 @@
 
 {% set popup_items = popup_items|merge([{
     label: 'notification.delete'|trans|desc('Delete'),
-    action_attr: { class: 'ibexa-notifications-modal--delete', 'data-notification-id': notification.id },
+    action_attr: {
+        class: 'ibexa-notifications-open-modal-button',
+        'data-notification-id': notification.id,
+        'data-bs-toggle': 'modal',
+        'data-bs-target': '#delete-notification-modal', }
 }]) %}
 
 {% embed '@ibexadesign/ui/component/table/table_body_row.html.twig' with {
@@ -103,3 +107,14 @@
         {% endembed %}
     {% endblock %}
 {% endembed %}
+
+{% embed '@ibexadesign/ui/modal/delete_confirmation.html.twig' with {
+    id: 'delete-notification-modal',
+    message: 'notification.modal.delete.confirm_message'|trans|desc('Are you sure you want to delete this notification?'),
+} %}
+    {% block confirm_button %}
+        <button class="btn ibexa-btn ibexa-btn--primary ibexa-notifications-modal--delete--confirm" data-bs-dismiss="modal">
+            {{ 'modal.delete'|trans|desc('Delete') }}
+        </button>
+    {% endblock %}
+{% endembed %}