Review fixes pt 4

Author: albozek

src/bundle/Resources/encore/ibexa.js.config.js

@@ -255,7 +255,7 @@ module.exports = (Encore) => {
         ])
         .addEntry('ibexa-admin-ui-edit-base-js', [path.resolve(__dirname, '../public/js/scripts/edit.header.js')])
         .addEntry('ibexa-admin-notifications-list-js', [
-            path.resolve(__dirname, '../public/js/scripts/core/sidebar.collapse.js'),
+            path.resolve(__dirname, '../public/js/scripts/admin.notifications.filters.sidebar.js'),
             path.resolve(__dirname, '../public/js/scripts/admin.notifications.list.js'),
             path.resolve(__dirname, '../public/js/scripts/admin.notifications.filters.js'),
         ]);

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

@@ -13,18 +13,18 @@
         }
 
         const sourceSelect = filterNode.querySelector('.ibexa-list-filters__item-content .ibexa-dropdown__source .ibexa-input--select');
-        const sourceSelectOptions = sourceSelect?.querySelectorAll('option');
         const checkboxes = filterNode.querySelectorAll(
             '.ibexa-list-filters__item-content .ibexa-input--checkbox:not([name="dropdown-checkbox"])',
         );
         const timePicker = filterNode.querySelector('.ibexa-date-time-picker__input');
 
         if (sourceSelect) {
+            const sourceSelectOptions = sourceSelect.querySelectorAll('option');
             sourceSelectOptions.forEach((option) => {
                 option.selected = false;
             });
 
-            if (isNodeTimeFilter(filterNode)) {
+            if (isTimeFilterNode(filterNode)) {
                 sourceSelectOptions[0].selected = true;
             }
         } else if (checkboxes.length) {
@@ -41,24 +41,36 @@
 
         searchForm.submit();
     };
-    const attachFilterEvents = (filterNode) => {
+    const attachStatusFilterEvents = (filterNode) => {
         if (!filterNode) {
             return;
         }
 
-        const sourceSelect = filterNode.querySelector('.ibexa-list-filters__item-content .ibexa-dropdown__source .ibexa-input--select');
         const checkboxes = filterNode.querySelectorAll(
             '.ibexa-list-filters__item-content .ibexa-input--checkbox:not([name="dropdown-checkbox"])',
         );
-        const picker = filterNode.querySelector('.ibexa-input--date');
-
-        picker?.addEventListener('change', filterChange, false);
-        sourceSelect?.addEventListener('change', filterChange, false);
         checkboxes.forEach((checkbox) => {
             checkbox.addEventListener('change', filterChange, false);
         });
     };
-    const isNodeTimeFilter = (filterNode) => {
+    const attachTypeFilterEvents = (filterNode) => {
+        if (!filterNode) {
+            return;
+        }
+
+        const sourceSelect = filterNode.querySelector('.ibexa-list-filters__item-content .ibexa-dropdown__source .ibexa-input--select');
+        sourceSelect?.addEventListener('change', filterChange, false);
+    };
+    const attachDateFilterEvents = (filterNode) => {
+        if (!filterNode) {
+            return;
+        }
+
+        const picker = filterNode.querySelector('.ibexa-input--date');
+        picker?.addEventListener('change', filterChange, false);
+    };
+
+    const isTimeFilterNode = (filterNode) => {
         return filterNode.classList.contains('ibexa-picker');
     };
     const hasFilterValue = (filterNode) => {
@@ -69,7 +81,7 @@
         const select = filterNode.querySelector('.ibexa-dropdown__source .ibexa-input--select');
         const checkedCheckboxes = filterNode.querySelectorAll('.ibexa-input--checkbox:checked');
 
-        if (isNodeTimeFilter(filterNode)) {
+        if (isTimeFilterNode(filterNode)) {
             const timePicker = filterNode.querySelector('.ibexa-date-time-picker__input');
 
             return !!timePicker.dataset.timestamp;
@@ -85,9 +97,9 @@
         return hasStatusFilterValue || hasTypeFilterValue || hasDatetimeFilterValue;
     };
     const attachInitEvents = () => {
-        attachFilterEvents(statusFilterNode);
-        attachFilterEvents(typeFilterNode);
-        datetimeFilterNodes.forEach((input) => attachFilterEvents(input));
+        attachStatusFilterEvents(statusFilterNode);
+        attachTypeFilterEvents(typeFilterNode);
+        datetimeFilterNodes.forEach((input) => attachDateFilterEvents(input));
     };
     const filterChange = () => {
         const hasFiltersSetValue = isSomeFilterSet();

src/bundle/Resources/public/js/scripts/core/sidebar.collapse.js renamed to src/bundle/Resources/public/js/scripts/admin.notifications.filters.sidebar.js

@@ -19,20 +19,9 @@
         }
     }
 
-    .ibexa-table__header-cell {
-        padding: calculateRem(16px) calculateRem(8px);
-
-        &:first-child {
-            padding-left: calculateRem(16px);
-        }
-
-        &:last-child {
-            padding-right: calculateRem(16px);
-        }
-    }
-
+    .ibexa-table__header-cell,
     .ibexa-table__cell {
-        padding: calculateRem(8px);
+        padding: calculateRem(16px) calculateRem(8px);
 
         &:first-child {
             padding-left: calculateRem(16px);
@@ -55,10 +44,11 @@
             font-size: $ibexa-text-font-size-extra-large;
         }
     }
-
-    &__mark-all-read {
-        display: flex;
-        justify-content: flex-end;
+    &__btn {
+        &--mark-all-as-read {
+            display: flex;
+            justify-content: flex-end;
+        }
     }
 
     &__data-grid-wrapper {

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

@@ -3,11 +3,14 @@
 {% trans_default_domain 'ibexa_admin_ui' %}
 
 {% set config_panel_main_class = 'ibexa-side-panel ibexa-side-panel--hidden' %}
-{% set config_panel_footer_class = 'ibexa-side-panel__footer' ~ (footer_class is defined ? footer_class ~ '')%}
+{% set attr_footer = attr_footer|default({})|merge({
+    class: ('ibexa-side-panel__footer' 
+    ~ (footer_class is defined ? footer_class ~ ''))|trim,
+}) %}
+
 
 {% set attr = attr|default({})|merge({
-        ~ attr.class|default(''))|trim ~ ' '
-        ~ config_panel_main_class,
+    class: attr.class|default('')|trim ~ ' ' ~ config_panel_main_class,
 }) %}
 
 {% if id is defined %}
@@ -30,7 +33,7 @@
             {% endblock %}
             {% block content %}{% endblock %}
 
-            <div class="{{ config_panel_footer_class }}">
+            <div {{ html.attributes(attr_footer) }}>
                 {% block footer %}
                     <button
                         type="button"