Mark multiple as read & notification list view expansion

Author: albozek

src/bundle/Resources/config/routing.yaml

@@ -939,9 +939,11 @@ ibexa.notifications.mark_as_read:
 
 ibexa.notifications.mark_multiple_as_read:
     path: /notifications/read
+    options:
+        expose: true
     defaults:
         _controller: 'Ibexa\Bundle\AdminUi\Controller\NotificationController::markNotificationsAsReadAction'
-    methods: [ POST ]
+    methods: [POST]
 
 ibexa.notifications.mark_all_as_read:
     path: /notifications/read-all

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

@@ -29,52 +29,41 @@
             });
     };
 
-    //TODO:
     const markSelectedAsRead = () => {
-        const checkedElements = doc.querySelectorAll('.ibexa-notification-list__mark-row-checkbox:checked');
-        const notificationIds = [...checkedElements].map((element) => element.dataset.notificationId);
-        const bulkOperations = getBulkOperations(notificationIds);
-        const request = new Request('/api/ibexa/v2/bulk', {
+        const selectedNotifications = [...checkboxes]
+            .filter((checkbox) => checkbox.checked)
+            .map((checkbox) => checkbox.dataset.notificationId);
+
+        const markAsReadLink = Routing.generate('ibexa.notifications.mark_multiple_as_read');
+        const request = new Request(markAsReadLink, {
             method: 'POST',
             headers: {
-                Accept: 'application/vnd.ibexa.api.BulkOperationResponse+json',
-                'Content-Type': 'application/vnd.ibexa.api.BulkOperation+json',
+                'Content-Type': 'application/json',
             },
+            mode: 'same-origin',
+            credentials: 'same-origin',
             body: JSON.stringify({
-                bulkOperations: {
-                    operations: bulkOperations,
-                },
+                ids: selectedNotifications,
             }),
-            mode: 'same-origin',
-            credentials: 'include',
         });
-        const errorMessage = Translator.trans(
-            /*@Desc("Cannot mark selected notifications as read")*/ 'notifications.modal.message.error.mark_selected_as_read',
-            {},
-            'ibexa_notifications',
-        );
 
         fetch(request)
             .then(getJsonFromResponse)
-            .catch(() => ibexa.helpers.notification.showErrorNotification(errorMessage));
+            .then((response) => {
+                if (response.status === 'success') {
+                    global.location.reload();
+                }
+            })
+            .catch(() => {
+                const message = Translator.trans(
+                    /* @Desc("Cannot mark notifications as read") */
+                    'notifications.modal.message.error.mark_as_read',
+                    {},
+                    'ibexa_notifications',
+                );
+                showErrorNotification(message);
+            });
     };
-    const getBulkOperations = (notificationIds) =>
-        notificationIds.reduce((total, notificationId) => {
-            const markAsReadLink = Routing.generate('ibexa.notifications.mark_as_read', { notificationId });
-
-            total[markAsReadLink] = {
-                uri: markAsReadLink,
-                method: 'GET',
-                mode: 'same-origin',
-                headers: {
-                    Accept: 'application/vnd.ibexa.api.ContentType+json',
-                    'X-Requested-With': 'XMLHttpRequest',
-                },
-                credentials: 'same-origin',
-            };
-
-            return total;
-        }, {});
 
     const handleNotificationClick = (notification, isToggle = false) => {
         const notificationRow = notification.closest('.ibexa-table__row');
@@ -169,11 +158,15 @@
             );
     };
     const handleCheckboxChange = (checkbox) => {
-        const checkboxFormId = checkbox.dataset?.formRemoveId;
-        const formRemoveCheckbox = doc.getElementById(checkboxFormId);
+        const checkboxFormId = checkbox.dataset?.formCheckboxId;
+        const formRemoveCheckbox = doc.querySelector(
+            `[data-toggle-button-id="#confirm-notification_selection_remove"] input#${checkboxFormId}`,
+        );
+
         if (formRemoveCheckbox) {
             formRemoveCheckbox.checked = checkbox.checked;
         }
+
         toggleActionButtonState();
     };
 

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

@@ -89,7 +89,7 @@
     };
     const updateModalTitleTotalInfo = (notificationsCount) => {
         const modalTitle = panel.querySelector(SELECTOR_MODAL_TITLE);
-        const modalFooter = panel.querySelector('.ibexa-notifications__view-all-btn--count');
+        const modalFooter = panel.querySelector('.ibexa-notifications-modal__view-all-btn--count');
         modalFooter.textContent = ` (${notificationsCount})`;
         modalTitle.dataset.notificationsTotal = `(${notificationsCount})`;
 

src/bundle/Resources/public/scss/_notifications-modal.scss

@@ -55,16 +55,12 @@
     &__item {
         position: relative;
         border: 1px solid $ibexa-color-light;
-        border-bottom: none;
+        border-top: none;
 
         &--wrapper {
             display: flex;
         }
 
-        &:first-of-type {
-            border-top: none;
-        }
-
         .description__text {
             font-size: $ibexa-text-font-size-medium;
 
@@ -93,6 +89,12 @@
         color: $ibexa-color-white;
     }
 
+    &__view-all-btn {
+        &--count {
+            padding-left: calculateRem(2px);
+        }
+    }
+
     &__item--read {
         .ibexa-notifications-modal__notice-dot,
         .ibexa-notification-view-all__notice-dot {

src/bundle/Resources/public/scss/_notifications.scss

@@ -8,9 +8,17 @@
 
 .ibexa-notification-list {
     display: flex;
-    align-items: strech;
+    align-items: stretch;
     margin-bottom: calculateRem(48px);
 
+    &__container {
+        .container.container {
+            @media (min-width: 1200px) {
+                max-width: calculateRem(2000px);
+            }
+        }
+    }
+
     .ibexa-table__header-cell {
         padding: calculateRem(16px) calculateRem(8px);
         &:first-child {
@@ -20,6 +28,7 @@
             padding-right: calculateRem(16px);
         }
     }
+
     .ibexa-table__cell {
         padding: calculateRem(8px);
         &:first-child {
@@ -29,6 +38,7 @@
             padding-right: calculateRem(16px);
         }
     }
+
     .ibexa-container {
         padding: 0 calculateRem(16px) calculateRem(16px);
         margin-bottom: 0;
@@ -47,6 +57,7 @@
     }
 
     &__data-grid-wrapper {
+        width: 100%;
         border-radius: $ibexa-border-radius 0 0 $ibexa-border-radius;
         border: calculateRem(1px) solid $ibexa-color-light;
         border-right: none;

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

@@ -7,6 +7,8 @@
 {% form_theme form_remove '@ibexadesign/ui/form_fields.html.twig' %}
 {% import _self as macros %}
 
+{% block main_container_class %}{{ parent() }} ibexa-notification-list__container {% endblock %}
+
 {% block title %}{{ 'ibexa_notifications'|trans|desc('Notifications') }}{% endblock %}
 
 {% block header %}
@@ -43,10 +45,10 @@
         }) }}
     {{ form_end(form_remove) }}
     {{ form_start(search_form, {
-        attr: { class: 'ibexa-al-list-search-form' }
+        attr: { class: 'ibexa-list-search-form' }
     }) }}
         <div class="ibexa-notification-list">
-            <section class="ibexa-notification-list__data-grid-wrapper container ibexa-container">
+            <section class="ibexa-notification-list__data-grid-wrapper ibexa-container">
                 {% embed '@ibexadesign/ui/component/table/table.html.twig' with {
                     headline: custom_results_headline ?? results_headline(pager.getNbResults()),
                     head_cols: [
@@ -97,15 +99,17 @@
             </div>
         </div>
     {{ form_end(search_form) }}
+    {{dump()}}
 {% endblock %}
 
 {% block javascripts %}
     {{ encore_entry_script_tags('ibexa-admin-notifications-list-js', null, 'ibexa') }}
 {% endblock %}
-{% macro table_header_tools(form) %}
+{% macro table_header_tools(form,) %}
     {% set modal_data_target = 'modal-' ~ form.remove.vars.id %}
     <div class="ibexa-notification-list__table-btns">
         <button
+            id="confirm-mark-selected-as-read"
             type="button"
             class="btn ibexa-btn ibexa-btn--ghost ibexa-notification-list__btn--mark-as-read"
             disabled
@@ -138,4 +142,4 @@
         'message': 'notifications.list.action.remove.confirmation.text'|trans|desc('Are you sure you want to permanently delete the selected notification(s)?'),
         'data_click': '#' ~ form.remove.vars.id,
     } %}
-{% endmacro %}
+{% endmacro %}

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

@@ -77,7 +77,7 @@
                 <div class="form-check">
                     <input
                         data-notification-id="{{ notification.id }}"
-                        data-form-remove-id="notification_remove_notifications_{{ notification.id}}"
+                        data-form-checkbox-id="notification_selection_notifications_{{ notification.id}}"
                         type="checkbox"
                         class="ibexa-input ibexa-input--checkbox ibexa-notification-list__mark-row-checkbox form-check-input"
                     />

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

@@ -34,9 +34,9 @@
 
     {% block footer %}
     <div class="ibexa-notifications-modal__footer">
-        <a class="btn ibexa-btn ibexa-btn--ghost ibexa-notifications__view-all-btn" href="{{ path('ibexa.notifications.render.all') }}">
+        <a class="btn ibexa-btn ibexa-btn--ghost ibexa-notifications-modal__view-all-btn" href="{{ path('ibexa.notifications.render.all') }}">
             {{ 'side_panel.view_all'|trans|desc('View all') }}
-            <span class="ibexa-notifications__view-all-btn--count"></span>
+            <span class="ibexa-notifications-modal__view-all-btn--count"></span>
         </a>
     </div>
     {% endblock %}