ihrm/templates/notification/notification_items.html

{% load i18n %}  {% load static %}
{% get_current_language as LANGUAGE_CODE %}

{% if messages %}
<div class="oh-alert-container">
  {% for message in messages %}
  <div class="oh-alert oh-alert--animated {{message.tags}}">{{ message }}</div>
  {% endfor %}
</div>
{% endif %}

<div class="oh-navbar__notification-head">
  <span class="oh-navbar__notification-head-title">{% trans "Notifications" %}</span>
  {% if notifications %}
    <div class="oh-navbar__notification-links" x-show="visible">
      <a class="oh-navbar__notification-tray-link mr-2"
        hx-get="{% url 'read-notifications' %}"
        hx-target="#notificationContainer"
        x-show="!markRead" @click="markRead = true">
        <ion-icon name="checkmark-done-outline" class="mr-1"></ion-icon> {% trans "Mark as read" %}
      </a>
      <a class="oh-navbar__notification-tray-link oh-navbar__notification-tray-link--danger"
        hx-get="{% url 'clear-notifications' %}"
        hx-target="#notificationContainer"
        >
        <ion-icon name="close-outline" class="mr-1"></ion-icon> {% trans "Clear" %}
      </a>
    </div>
  {% endif %}
</div>

<div class="oh-navbar__notification-body" x-show="visible">
{% if notifications %}
<ul class="oh-navbar__nofication-list">
  {% for notification in notifications %}
    <a class="oh-navbar__notification-item" href="{{notification.data.redirect}}#"
      id="notification" data-id="{{notification.id}}"
      >
      <div>
        {% if notification.unread %}
        <span
          class="oh-navbar__notification-dot oh-navbar__notification-dot--green"
          :class="markRead ? '': 'oh-navbar__notification-dot--unread'"
        >
        </span>
        {% endif %}
      </div>
      <div>
        {% if LANGUAGE_CODE == 'ar' %}
          <p
            class="oh-navbar__notification-text"
            :class="markRead ? '' : 'oh-navbar__notification-text--unread' "
          >
            {{ notification.data.verb_ar }}
          </p>
        {% elif LANGUAGE_CODE == 'de' %}
          <p
            class="oh-navbar__notification-text"
            :class="markRead ? '' : 'oh-navbar__notification-text--unread' "
          >
            {{ notification.data.verb_de }}
          </p>
        {% elif LANGUAGE_CODE == 'fr' %}
          <p
            class="oh-navbar__notification-text"
            :class="markRead ? '' : 'oh-navbar__notification-text--unread' "
          >
            {{ notification.data.verb_fr }}
          </p>
        {% elif LANGUAGE_CODE == 'es' %}
          <p
            class="oh-navbar__notification-text"
            :class="markRead ? '' : 'oh-navbar__notification-text--unread' "
          >
            {{ notification.data.verb_es }}
          </p>
        {% else %}
          <p
            class="oh-navbar__notification-text"
            :class="markRead ? '' : 'oh-navbar__notification-text--unread' "
          >
            {{ notification.verb }}
          </p>
        {% endif %}
        <span class="oh-navbar__notification-date">
          {{ notification.timesince }} {% trans "ago by" %}
          {% if notification.actor.employee_first_name %}
            {{ notification.actor.employee_first_name }}
          {% else %}
            {% if notification.data.label %}
              {{notification.data.label}}
            {% else %}
              {% trans "Anonymous"%}
            {% endif %}
          {% endif %}
        </span>
      </div>
      <div>
        <div style="display: flex">
          {% comment %} <div class="oh-navbar__notification-image" style="margin-left: 5px">
            <ion-icon name="{{notification.data.icon}}"></ion-icon>
          </div> {% endcomment %}
          <div
            class="oh-navbar__notification-image"
            style="margin-left: 5px"
            onclick="event.stopPropagation();event.preventDefault();"
            hx-target="#notificationContainer"
            hx-post="{% url 'mark-as-read-notification' notification.id %}"


          >
            <ion-icon name="checkmark-outline"></ion-icon>
          </div>
        </div>
      </div>
    </a>
  {% endfor %}
</ul>
{% else %}
<div class="oh-navbar__notification-empty">
  <img src="{% static 'images/ui/happy.svg' %}" alt="All caught up" width="50" height="50" loading="lazy" />
  <span class="oh-navbar__notification-empty-title">{% trans "All caught up!" %}</span>
  <span class="oh-navbar__notification-empty-desc">{% trans "You have no new notifications at the moment." %}</span>
</div>
{% endif %}
</div>
<script>
  $(document).ready(function () {
    $(".oh-navbar__notification-item").on("click", function (event) {
      event.preventDefault();
      var notificationLink = $(this);
      var notificationId = notificationLink.data("id");
      $.ajax({
        type: "post",
        url: "/mark-as-read-notification-json/",
        data: {
          csrfmiddlewaretoken: getCookie("csrftoken"),
          notification_id: notificationId,
        },
        success: function (response) {
          if (response.success) {
            window.location.href = notificationLink.attr("href");
          } else {
            window.location.href = notificationLink.attr("href");
            console.error("Failed to mark notification as read");
            if (response.error) {
              console.error("Error:", response.error);
            }
          }
        },
        error: function (xhr, status, error) {
          window.location.href = notificationLink.attr("href");
          console.error("Error:", status, error);
        },
      });
    });
  });
</script>