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

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.fade.show');
+				controlZIndex(deleteModal)
+
+            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 initialZIndex = container.style.zIndex;
+	 container.style.zIndex = 'initial';
 
     container.addEventListener('show.bs.modal', () => {
         container.style.zIndex = 'initial';

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

@@ -1,27 +1,41 @@
-{% trans_default_domain 'ibexa_notifications' %}
-
-{% embed '@ibexadesign/ui/component/table/table.html.twig' with {
-    head_cols: [],
-    class: 'ibexa-table--not-striped ibexa-list--notifications',
-    attr: {
-        'data-notifications': path('ibexa.notifications.render.page'),
-        'data-notifications-count': path('ibexa.notifications.count'),
-        'data-notifications-count-interval': notifications_count_interval,
-        'data-notifications-total': pager.nbResults,
-    }
-} %}
-    {% 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>
-        {% else %}
-            {% for notification in sidebarNotifications %}
-                {{ notification|raw }}
-            {% endfor %}
-        {% endif %}
-    {% endblock %}
-{% endembed %}
+{% trans_default_domain 'ibexa_notifications' %}
+
+{% embed '@ibexadesign/ui/component/table/table.html.twig' with {
+    head_cols: [],
+    class: 'ibexa-table--not-striped ibexa-list--notifications',
+    attr: {
+        'data-notifications': path('ibexa.notifications.render.page'),
+        'data-notifications-count': path('ibexa.notifications.count'),
+        'data-notifications-count-interval': notifications_count_interval,
+        'data-notifications-total': pager.nbResults,
+    }
+} %}
+    {% 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>
+        {% 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 %}