IBX-10609: Add support for modal confirmation when deleting notifications

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

@@ -2,6 +2,7 @@
     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 +215,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 +227,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 +244,23 @@
     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 }) => {
+            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/scss/_modals.scss

@@ -97,3 +97,11 @@
         }
     }
 }
+
+.modal-backdrop {
+    &.fade {
+        &.show {
+            z-index: 199;
+        }
+    }
+}

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

@@ -12,16 +12,30 @@
 } %}
     {% block tbody %}
         {% if pager.count is same as(0) %}
-        <div class="ibexa-notifications-modal__empty">
-            <img
-                src="{{ empty_image|default(asset('/bundles/ibexaadminui/img/ibexa-empty-table.svg')) }}"
-            />
-            <h2 class="ibexa-notifications-modal__empty-text">{{ 'notifications.list.empty'|trans|desc('You don\'t have any notifications.') }}</h2>
-        </div>
+            <div class="ibexa-notifications-modal__empty">
+                <img
+                    src="{{ empty_image|default(asset('/bundles/ibexaadminui/img/ibexa-empty-table.svg')) }}"
+                />
+                <h2 class="ibexa-notifications-modal__empty-text">{{ 'notifications.list.empty'|trans|desc('You don\'t have any notifications.') }}</h2>
+            </div>
         {% else %}
             {% for notification in sidebarNotifications %}
                 {{ notification|raw }}
             {% endfor %}
         {% endif %}
+
+        {% 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?'),
+        } %}
+
+            {% trans_default_domain 'ibexa_product_catalog' %}
+
+            {% 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 %}
     {% endblock %}
 {% endembed %}

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

@@ -40,14 +40,18 @@
 
 {% set popup_items = popup_items|merge([{
     label: notification.isPending == 0 ? 'notification.mark_as_unread'|trans|desc('Mark as unread') : 'notification.mark_as_read'|trans|desc('Mark as read'),
-    action_attr: { 
-        class: 'ibexa-notifications-modal--mark-as ibexa-notifications-modal--mark-as-' ~ (notification.isPending == 0 ? 'unread' : 'read'), 
+    action_attr: {
+        class: 'ibexa-notifications-modal--mark-as ibexa-notifications-modal--mark-as-' ~ (notification.isPending == 0 ? 'unread' : 'read'),
         'data-notification-id': notification.id },
 }]) %}
 
 {% 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 {
@@ -71,7 +75,7 @@
                 <strong>{{ notification_type }}</strong>
                 <div class="ibexa-notifications-modal__description">{{ message }}</div>
                 <div class="ibexa-notifications-modal__item--date">
-                    {{ notification.created|ibexa_short_datetime }} 
+                    {{ notification.created|ibexa_short_datetime }}
                 </div>
             {% endblock %}
         {% endembed %}