Trash notification fixes & display filter validation

Author: albozek

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

@@ -167,7 +167,7 @@
         deleteBtn.disabled = !isAnythingSelected;
         markAsReadBtn.disabled =
             !isAnythingSelected ||
-            !checkedNotifications.every(
+            !checkedNotifications.some(
                 (checkbox) =>
                     checkbox.closest('.ibexa-table__row').querySelector('.ibexa-notification-view-all__notice-dot').dataset.isRead ===
                     'false',

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

@@ -5,21 +5,15 @@
     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';
-    const SELECTOR_DESC_TEXT = '.description__text';
     const SELECTOR_LIST = '.ibexa-list--notifications';
-    const CLASS_ELLIPSIS = 'description__text--ellipsis';
-    const CLASS_PAGINATION_LINK = 'page-link';
     const CLASS_MODAL_LOADING = 'ibexa-notifications-modal--loading';
     const INTERVAL = 30000;
     const panel = doc.querySelector('.ibexa-notifications-modal');
     const { showErrorNotification, showWarningNotification } = ibexa.helpers.notification;
     const { getJsonFromResponse, getTextFromResponse } = ibexa.helpers.request;
     const handleNotificationClickRequest = (notification, response) => {
-        if (response.status === 'success') {
+        if (response.status === 'success' && response.redirect) {
             notification.classList.add('ibexa-notifications-modal__item--read');
-        }
-
-        if (response.redirect) {
             global.location = response.redirect;
         }
     };
@@ -32,21 +26,6 @@
 
         fetch(request).then(getJsonFromResponse).then(handleNotificationClickRequest.bind(null, notification)).catch(showErrorNotification);
     };
-    const handleTableClick = (event) => {
-        if (event.target.classList.contains('description__read-more')) {
-            event.target.closest(SELECTOR_MODAL_ITEM).querySelector(SELECTOR_DESC_TEXT).classList.remove(CLASS_ELLIPSIS);
-
-            return;
-        }
-
-        const notification = event.target.closest(SELECTOR_MODAL_ITEM);
-
-        if (!notification) {
-            return;
-        }
-
-        handleNotificationClick(notification);
-    };
 
     const getNotificationsStatus = () => {
         const notificationsTable = panel.querySelector(SELECTOR_LIST);
@@ -249,6 +228,7 @@
 
                     menuInstance.closeMenu();
                     notification.remove();
+                    getNotificationsStatus();
                 } else {
                     showErrorNotification(message);
                 }
@@ -305,27 +285,14 @@
         fetch(request).then(getTextFromResponse).then(showNotificationPage).catch(showErrorNotification);
     };
     const handleModalResultsClick = (event) => {
-        const isPaginationBtn = event.target.classList.contains(CLASS_PAGINATION_LINK);
         const isActionBtn = event.target.closest('.ibexa-notifications-modal__actions');
+        const notification = event.target.closest(SELECTOR_MODAL_ITEM);
 
-        if (isActionBtn) {
-            return;
-        }
-
-        if (isPaginationBtn) {
-            handleNotificationsPageChange(event);
-
+        if (isActionBtn || !notification) {
             return;
         }
 
-        handleTableClick(event);
-    };
-    const handleNotificationsPageChange = (event) => {
-        event.preventDefault();
-
-        const notificationsPageLink = event.target.href;
-
-        fetchNotificationPage(notificationsPageLink);
+        handleNotificationClick(notification);
     };
 
     if (!panel) {

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

@@ -58,6 +58,7 @@
     &__type-content {
         width: 100%;
         font-size: $ibexa-text-font-size-medium;
+        cursor: default;
 
         p {
             margin-bottom: 0;
@@ -130,7 +131,7 @@
         .description__text {
             width: 100%;
             margin-bottom: 0;
-            max-width: 50ch;
+            max-width: calculateRem(350px);
             float: left;
 
             + .description__read-more {
@@ -247,21 +248,21 @@
         max-width: 100%;
         overflow: hidden;
 
-        .type__text {
-            white-space: nowrap;
+        .type__text,
+        .description__title {
+            flex-shrink: 0;
         }
-
         .ibexa-notifications-modal__description {
             display: flex;
             max-width: 100%;
         }
-
         .description__text {
             flex: 1;
             min-width: 0;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
+            max-width: 25vw;
         }
     }
 

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

@@ -57,7 +57,7 @@
     }
 
     &__filters-wrapper {
-        width: calculateRem(360px);
+        width: calculateRem(400px);
         border-radius: 0 $ibexa-border-radius $ibexa-border-radius 0;
         border: calculateRem(1px) solid $ibexa-color-light;
         background-color: $ibexa-color-white;

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

@@ -136,6 +136,11 @@
         <target state="new">Sent to Trash</target>
         <note>key: notification.trashed</note>
       </trans-unit>
+      <trans-unit id="d643e1117bad8f0bac7d8b158f54e2109ea1f482" resname="notification.trashed.info">
+        <source>moved to Trash</source>
+        <target state="new">moved to Trash</target>
+        <note>key: notification.trashed.info</note>
+      </trans-unit>
       <trans-unit id="f5bf4310647081193250ff28773cf5f4880a0fe2" resname="notification.unread">
         <source>Unread</source>
         <target state="new">Unread</target>

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

@@ -42,6 +42,9 @@
                         'data-seconds': 0,
                     }
                 }) }}
+                <div class="ibexa-form-error">
+                    {{ form_errors(form.children.min) }}
+                </div>
             </div>
 
             <div class="form-group">
@@ -53,6 +56,9 @@
                         'data-seconds': 0,
                     }
                 }) }}
+                <div class="ibexa-form-error">
+                    {{ form_errors(form.children.max) }}
+                </div>
             </div>
         {% endblock %}
     {% endembed %}

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

@@ -68,7 +68,7 @@
         {% embed '@ibexadesign/ui/component/table/table_body_cell.html.twig' with { class: 'ibexa-notifications-modal__type-content' } %}
             {% block content %}
                 <strong>{{ notification_type }}</strong>
-                {{ message }}
+                <div class="ibexa-notifications-modal__description">{{ message }}</div>
                 <div class="ibexa-notifications-modal__item--date">
                     {{ notification.created|ibexa_short_datetime }} 
                 </div>

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

@@ -24,11 +24,11 @@
 {% endblock %}
 
 {% block message %}
-        {% block content %}
-            <p class="description__title">
-                {{ 'notification.title'|trans|desc('Title:') }}
-                <span class="description__title-item"><strong>{{ title }}</strong></span>
-            </p>
-            <p class="description__text description__text--permanently-deleted">{{ 'notification.no_longer_available'|trans({}, 'ibexa_notifications')|desc('The Content item is no longer available')}}</p>
-        {% endblock %}
+    {% block content %}
+        <p class="description__title">
+            {{ 'notification.title'|trans|desc('Title:') }}
+            <span class="description__title-item"><strong>{{ title }}</strong></span>
+        </p>
+        <p class="description__text description__text--permanently-deleted">{{ 'notification.no_longer_available'|trans({}, 'ibexa_notifications')|desc('The Content item is no longer available')}}</p>
+    {% endblock %}
 {% endblock %}

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

@@ -15,3 +15,13 @@
         {{ 'notification.trashed'|trans|desc('Sent to Trash')}}
     </span>
 {% endblock %}
+
+{% block message %}
+    {% block content %}
+        <p class="description__title">
+            {{ 'notification.title'|trans|desc('Title:') }}
+            <span class="description__title-item"><strong>{{ title }}</strong></span>
+        </p>
+        <p class="description__text">{{ 'notification.trashed.info'|trans({}, 'ibexa_notifications')|desc('moved to Trash')}}</p>
+    {% endblock %}
+{% endblock %}