notification_list.twig

Вот содержимое файла catalog/view/template/extension/task_manager/notification_list.twig:

{% extends 'common/column_left.twig' %}

{% block content %}
  <div class="container">
    <h1>{{ heading_title }}</h1>
    
    <div class="notification-filters">
      <div class="filter-item">
        <label for="filter-date">{{ entry_filter_date }}</label>
        <input type="text" id="filter-date" class="form-control" placeholder="{{ placeholder_date }}" />
      </div>
      <div class="filter-item">
        <label for="filter-status">{{ entry_filter_status }}</label>
        <select id="filter-status" class="form-control">
          <option value="">{{ text_all }}</option>
          <option value="1">{{ text_unread }}</option>
          <option value="0">{{ text_read }}</option>
        </select>
      </div>
      <div class="filter-item">
        <button id="filter-button" class="btn btn-primary">{{ button_filter }}</button>
      </div>
    </div>

    <div class="notification-list">
      {% if notifications %}
        <table class="table table-striped">
          <thead>
            <tr>
              <th>{{ column_title }}</th>
              <th>{{ column_date }}</th>
              <th>{{ column_status }}</th>
              <th>{{ column_action }}</th>
            </tr>
          </thead>
          <tbody>
            {% for notification in notifications %}
              <tr>
                <td>{{ notification.title }}</td>
                <td>{{ notification.date_added }}</td>
                <td>
                  {% if notification.status == 1 %}
                    <span class="badge badge-success">{{ text_unread }}</span>
                  {% else %}
                    <span class="badge badge-secondary">{{ text_read }}</span>
                  {% endif %}
                </td>
                <td>
                  <a href="{{ notification.view_url }}" class="btn btn-info">{{ button_view }}</a>
                  <button type="button" class="btn btn-danger btn-delete" data-notification-id="{{ notification.id }}">{{ button_delete }}</button>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      {% else %}
        <p>{{ text_no_notifications }}</p>
      {% endif %}
    </div>
    
    <div class="pagination">
      {{ pagination }}
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      // Filter button click event
      document.getElementById('filter-button').addEventListener('click', function () {
        var filterDate = document.getElementById('filter-date').value;
        var filterStatus = document.getElementById('filter-status').value;

        var url = '{{ filter_url }}&date=' + filterDate + '&status=' + filterStatus;

        window.location.href = url;
      });

      // Delete notification event
      document.querySelectorAll('.btn-delete').forEach(function (button) {
        button.addEventListener('click', function () {
          var notificationId = this.getAttribute('data-notification-id');

          if (confirm('{{ text_confirm_delete }}')) {
            var url = '{{ delete_url }}&notification_id=' + notificationId;

            fetch(url, {
              method: 'GET'
            })
            .then(response => response.json())
            .then(data => {
              if (data.success) {
                location.reload();
              } else {
                alert(data.error);
              }
            });
          }
        });
      });
    });
  </script>
{% endblock %}

Объяснение:

1. Фильтры для уведомлений:

   • В верхней части страницы есть фильтры для даты и статуса уведомлений. Пользователь может выбрать дату или статус уведомлений (непрочитанное или прочитанное), а затем нажать кнопку для фильтрации.

2. Список уведомлений:

   • Таблица с уведомлениями содержит заголовок, дату добавления, статус уведомления (прочитано или непрочитано) и кнопку действия для просмотра или удаления уведомления.

   • Каждое уведомление может быть прочитано или удалено с помощью кнопок на странице.

3. Pagination:

   • Если уведомлений много, добавлена пагинация, чтобы разделить их на несколько страниц.

4. JavaScript:

   • Сценарий для обработки нажатий на кнопки фильтрации и удаления уведомлений.

   • Когда пользователь нажимает кнопку фильтрации, страница перезагружается с новыми параметрами фильтра.

   • Для удаления уведомлений используется кнопка "Удалить", при которой происходит запрос на сервер для удаления выбранного уведомления.

5. Текстовые переменные и URL:

   • Переменные, такие как heading_title, text_no_notifications, text_confirm_delete, и другие, динамически подставляются в шаблон.

   • URLs для фильтрации и удаления уведомлений сгенерированы на сервере, а затем используются в JavaScript.

6. Теги:

   • В шаблоне используются стандартные теги for и if для перебора уведомлений и условного отображения их статуса.

Если нужно внести изменения или добавить дополнительные функции, дайте знать!