NGSTACK-883 add missing icons and replace base64 with svg icons

.env

@@ -110,3 +110,5 @@ SENTRY_DSN=
 # postgresql+advisory://db_user:db_password@localhost/db_name
 LOCK_DSN=flock
 ###< symfony/lock ###
+
+MAIL_SENDER='[email protected]'

Makefile

@@ -1,5 +1,5 @@
 APP_ENV = dev
-PHP_VERSION = php8.1
+PHP_VERSION = php8.2
 PHP_RUN = /usr/bin/env $(PHP_VERSION)
 COMPOSER_PATH = /usr/local/bin/composer2
 ifeq ("$(wildcard $(COMPOSER_PATH))","")

assets/js/backoffice/components.js

@@ -0,0 +1,58 @@
+// This file contains only import, configuration and initialization of components
+import addDocumentEventListeners from '../utilities/components/add-document-event-listeners';
+
+import ModalConfirmControl from '../components/backoffice/ModalConfirmControl.component';
+import NgConversationsMarkThreadAsRead from '../components/backoffice/NgConversationsMarkThreadAsRead.component';
+import Sidebar from '../components/backoffice/Sidebar.component';
+import EnableFilterButtons from '../components/backoffice/EnableFilterButtons.component';
+import HideOverflowingFilters from '../components/backoffice/HideOverflowingFilters.component';
+import DateRangeInput from '../components/backoffice/DateRangeInput.component';
+
+const componentConfiguration = [
+  {
+    Component: NgConversationsMarkThreadAsRead,
+    selector: '#ngconversations-app-root',
+    options: {
+      menuItemSelector: '#menu_item_conversations',
+      menuItemCountClass: 'menu-ntf-count',
+      menuItemIconSelector: '.icon-conversations',
+      markAsReadEvent: 'ngconversations-change-thread-read-state',
+    },
+  },
+  {
+    Component: Sidebar,
+    selector: '.app-container',
+    options: {
+      hasSubmenu: '.has-submenu',
+      submenu: '.menu_level_1',
+      child: 'div:first-child',
+      currentItems:
+        '.app-sidebar .sidebar-wrapper .current, .app-sidebar .sidebar-wrapper .current_ancestor',
+    },
+  },
+  {
+    Component: ModalConfirmControl,
+    selector: '.js-modal-confirm',
+  },
+  {
+    Component: EnableFilterButtons,
+    selector: '.js-filter-form',
+    options: {
+      hasActiveFilterClass: 'has-active-filter',
+      hasNewInputClass: 'has-new-input',
+    },
+  },
+  {
+    Component: HideOverflowingFilters,
+    selector: '.js-filter-wrapper',
+    options: {
+      filterWrapSelector: '.js-filters',
+    },
+  },
+  {
+    Component: DateRangeInput,
+    selector: '.js-date-range-input',
+  },
+];
+
+addDocumentEventListeners(componentConfiguration);

assets/js/backoffice/date.js

@@ -0,0 +1,34 @@
+import flatpickr from 'flatpickr';
+
+const date = document.querySelector('.js-date-filter');
+
+if (date) {
+  flatpickr(date, {
+    mode: 'range',
+    minDate: '2022-01-01',
+    dateFormat: 'Y-m-d',
+    wrap: true,
+
+    onChange(selectedDates) {
+      // eslint-disable-next-line no-empty
+      if (!selectedDates || selectedDates.length < 1) return;
+
+      const dateFrom = new Date(selectedDates[0]);
+      dateFrom.setHours(0, 0, 0, 0);
+
+      let dateTo = selectedDates[0];
+      if (selectedDates.length > 1) {
+        // eslint-disable-next-line prefer-destructuring
+        dateTo = selectedDates[1];
+      }
+      dateTo = new Date(dateTo);
+      dateTo.setHours(23, 59, 59, 0);
+
+      const formattedDateFrom = dateFrom.toISOString().split('.')[0];
+      const formattedDateTo = dateTo.toISOString().split('.')[0];
+
+      document.getElementById('dateFromHidden').value = formattedDateFrom;
+      document.getElementById('dateToHidden').value = formattedDateTo;
+    },
+  });
+}

assets/js/backoffice/index.js

@@ -0,0 +1,4 @@
+import '../../sass/backoffice/style.scss';
+import './components';
+import 'bootstrap';
+import './date';

assets/js/components-noncritical.js

@@ -13,9 +13,11 @@ import PageHeader from './components/PageHeader.component';
 import LoginFormFragment from './components/LoginFormFragment.component';
 import ResponsiveVideo from './components/ResponsiveVideo.component';
 import SwiperBase from './components/SwiperBase.component';
+import SubscriptionWidget from './components/SubscriptionWidget.component';
 import SwiperThumb from './components/SwiperThumb.component';
 import VideoPoster from './components/VideoPoster.component';
 import SkipToMainContent from './components/SkipToMainContent.component';
+import BookmarkWidget from './components/BookmarkWidget.component';
 
 // Configuration
 const componentConfiguration = [
@@ -214,6 +216,27 @@ const componentConfiguration = [
     Component: SkipToMainContent,
     selector: '#skip-to-main-content',
   },
+  {
+    Component: BookmarkWidget,
+    selector: '.js-bookmark-widget',
+    options: {
+      bookmarkIcon: '.fa-bookmark',
+      bookmarkTooltip: '.bookmark-tooltip',
+    },
+  },
+  {
+    Component: SubscriptionWidget,
+    selector: '#subscription-modal-body',
+    options: {
+      modalBody: '.modal-body',
+      subscriptionForm: '.ntf-subscribe-widget',
+      subscriptionTypeWrapper: '#subscription_widget_type',
+      subscriptionTypeRadios: 'input[type=radio]',
+      digestType: '#subscription_widget_type_1',
+      digestOptions: '.digest-options',
+      buttonSubscribe: 'button[type=submit]',
+    },
+  },
 ];
 
 addDocumentEventListeners(componentConfiguration);

assets/js/components/BookmarkWidget.component.js

@@ -0,0 +1,40 @@
+export default class BookmarkWidget {
+  constructor(element, options) {
+    this.element = element;
+    this.bookmarkIcon = this.element.querySelector(options.bookmarkIcon);
+    this.bookmarkTooltip = this.element.querySelector(options.bookmarkTooltip);
+    this.createBookmarkEndpoint = element.dataset.createBookmarkEndpoint;
+    this.deleteBookmarkEndpoint = element.dataset.deleteBookmarkEndpoint;
+    this.isBookmarked = element.dataset.isBookmarked === 'true';
+
+    this.onInit();
+  }
+
+  onInit() {
+    console.log('bookmark component');
+
+    this.element.addEventListener('click', this.updateBookmarkData.bind(this));
+  }
+
+  updateBookmarkData() {
+    this.bookmarkTooltip.classList.remove('tooltip-animated');
+
+    if (this.isBookmarked) {
+      this.bookmarkTooltip.innerHTML = 'Bookmark removed';
+    } else {
+      this.bookmarkTooltip.innerHTML = 'Bookmarked';
+    }
+
+    return fetch(this.isBookmarked ? this.deleteBookmarkEndpoint : this.createBookmarkEndpoint, {
+      method: 'POST',
+    }).then((response) => {
+      ['far', 'fas'].forEach((faTypeClass) => this.bookmarkIcon.classList.toggle(faTypeClass));
+
+      this.bookmarkTooltip.classList.add('tooltip-animated');
+
+      this.isBookmarked = !this.isBookmarked;
+
+      return response;
+    });
+  }
+}

assets/js/components/PageHeader.component.js

@@ -100,7 +100,6 @@ export default class PageHeader {
     if (this.mainNav === null) {
       return;
     }
-
     this.level1Menus = this.mainNav.querySelectorAll(this.options.menuLevel1);
     if (this.level1Menus.length === 0) {
       return;
@@ -116,9 +115,19 @@ export default class PageHeader {
       this.submenuTriggerElements.push(submenuTriggerContent);
     });
 
-    this.submenuTriggerElements.forEach((submenuTrigger) => {
-      submenuTrigger.addEventListener('click', () => {
-        this.toggleMobileSubmenu(submenuTrigger);
+    window.addEventListener('click', (e) => {
+      this.submenuTriggerElements.forEach((submenuTrigger) => {
+        const submenuTriggered = submenuTrigger.contains(e.target);
+
+        if (e.target.closest('.prevent-user-menu-cta')) {
+          e.preventDefault();
+        }
+
+        if (!submenuTriggered || submenuTrigger.classList.contains('submenu-active')) {
+          submenuTrigger.classList.remove('submenu-active');
+        } else {
+          submenuTrigger.classList.add('submenu-active');
+        }
       });
     });
   }

assets/js/components/SubscriptionWidget.component.js

@@ -0,0 +1,74 @@
+export default class SubscriptionWidget {
+  constructor(element, options) {
+    this.el = element;
+    this.options = options;
+    this.modalBody = this.el.querySelector(options.modalBody);
+    this.subscriptionForm = this.el.querySelector(options.subscriptionForm);
+    this.digestType = this.el.querySelector(options.digestType);
+    this.digestOptions = this.el.querySelector(options.digestOptions);
+    this.buttonSubscribe = this.el.querySelector(options.buttonSubscribe);
+
+    this.onInit();
+  }
+
+  onInit() {
+    if (this.digestType && this.digestType.checked) {
+      this.digestOptions.classList.remove('d-none');
+      SubscriptionWidget.activateSubscribeButton(this.buttonSubscribe);
+    }
+
+    this.el.addEventListener('click', (e) => {
+      const buttonSubscribe = e.currentTarget.querySelector(this.options.buttonSubscribe);
+
+      if (e.target.matches(this.options.subscriptionTypeRadios)) {
+        this.changeType(e);
+        SubscriptionWidget.activateSubscribeButton(buttonSubscribe);
+      }
+    });
+
+    this.el.addEventListener('submit', (e) => {
+      if (e.target.matches(this.options.subscriptionForm)) {
+        const modalBody = e.currentTarget.querySelector(this.options.modalBody);
+
+        e.preventDefault();
+        this.formSubmit(modalBody, e.target);
+      }
+    });
+  }
+
+  changeType(e) {
+    const digestOptions = e.currentTarget.querySelector(this.options.digestOptions);
+    const digestType = e.currentTarget.querySelector(this.options.digestType);
+
+    if (e.target === digestType || digestType.checked) {
+      digestOptions.classList.remove('d-none');
+    } else {
+      digestOptions.classList.add('d-none');
+    }
+  }
+
+  static activateSubscribeButton(button) {
+    if (button) {
+      button.removeAttribute('disabled');
+      button.classList.replace('btn-tertiary', 'btn-primary');
+    }
+  }
+
+  formSubmit(modalBody, subscriptionForm) {
+    const xhr = new XMLHttpRequest();
+    xhr.open('POST', this.subscriptionForm.action);
+    xhr.onload = function (event) {
+      modalBody.innerHTML = event.target.response;
+      const errorMessage = modalBody.querySelector('.errors');
+      const subscribeButton = modalBody.querySelector('button[type=submit]');
+
+      if (errorMessage && errorMessage.closest('.digest-options')) {
+        errorMessage.closest('.digest-options').classList.remove('d-none');
+      }
+
+      SubscriptionWidget.activateSubscribeButton(subscribeButton);
+    };
+    const formData = new FormData(subscriptionForm);
+    xhr.send(formData);
+  }
+}

assets/js/components/backoffice/DateRangeInput.component.js

@@ -0,0 +1,41 @@
+import flatpickr from 'flatpickr';
+
+export default class Date {
+  constructor(element) {
+    this.element = element;
+
+    this.init();
+  }
+
+  init() {
+    flatpickr(this.element, {
+      mode: 'range',
+      minDate: '2022-01-01',
+      dateFormat: 'Y-m-d',
+      wrap: true,
+
+      onChange(selectedDates) {
+        if (!selectedDates || selectedDates.length < 1) {
+          return;
+        }
+
+        const dateFrom = selectedDates[0];
+        dateFrom.setHours(0, 0, 0, 0);
+
+        let dateTo = selectedDates[0];
+        if (selectedDates.length > 1) {
+          // eslint-disable-next-line prefer-destructuring
+          dateTo = selectedDates[1];
+        }
+
+        dateTo.setHours(23, 59, 59, 0);
+
+        const formattedDateFrom = dateFrom.toISOString().split('.')[0];
+        const formattedDateTo = dateTo.toISOString().split('.')[0];
+
+        document.getElementById('dateFromHidden').value = formattedDateFrom;
+        document.getElementById('dateToHidden').value = formattedDateTo;
+      },
+    });
+  }
+}

assets/js/components/backoffice/EnableFilterButtons.component.js

@@ -0,0 +1,30 @@
+export default class EnableFilterButtons {
+  constructor(element, options) {
+    this.form = element;
+    this.options = options;
+    this.onInit();
+  }
+
+  onInit() {
+    this.searchParams = new URLSearchParams(window.location.search);
+    this.inputs = this.form.querySelectorAll('input, select');
+
+    if ([...this.searchParams.keys()].some((query) => query !== 'page')) {
+      this.form.classList.add(this.options.hasActiveFilterClass);
+    }
+
+    this.form.addEventListener('input', this.checkInputs.bind(this));
+
+    this.checkInputs();
+  }
+
+  checkInputs() {
+    const action = [...this.inputs].some(
+      ({ value, name }) => value && value !== this.searchParams.get(name)
+    )
+      ? 'add'
+      : 'remove';
+
+    this.form.classList[action](this.options.hasNewInputClass);
+  }
+}