From ca5e1e017c8e4996462d25aa88e8af3881be7e7b Mon Sep 17 00:00:00 2001
From: Horilla <support@horilla.com>
Date: Thu, 14 Nov 2024 15:37:20 +0530
Subject: [PATCH] [UPDT] TEMPLATES: Notification mark as read and clear all
 section updated with more HTMX attributes

---
 templates/notification/all_notifications.html |  42 +--
 .../notification/notification_items.html      | 267 ++++++++----------
 templates/settings.html                       |   4 +-
 3 files changed, 147 insertions(+), 166 deletions(-)

diff --git a/templates/notification/all_notifications.html b/templates/notification/all_notifications.html
index fa247f4c9..9f994a6e4 100644
--- a/templates/notification/all_notifications.html
+++ b/templates/notification/all_notifications.html
@@ -1,23 +1,22 @@
 {% load i18n %}
 {% 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 class="oh-alert-container">
+    {% for message in messages %}
+    <div class="oh-alert oh-alert--animated {{message.tags}}">
+        {{ message }}
     </div>
-    {% endif %}
+    {% endfor %}
+</div>
+{% endif %}
 <ol class="oh-activity-sidebar__qa-list" role="list">
     {% for notification in notifications %}
-    <li class="oh-activity-sidebar__qa-item">
+    <li class="oh-activity-sidebar__qa-item" id="notificationBodyItem{{notification.id}}">
         <div class="d-flex justify-content-between">
-
             <span class="oh-activity-sidebar__q">
                 {{forloop.counter}}.
                 {% if notification.unread %}
-                <span style="width: 10px;height: 10px;border-radius: 100%; background-color: hsl(8deg,77%,56%);display: inline-block;right: 5px;"></span>
+                    <span style="width: 10px;height: 10px;border-radius: 100%; background-color: hsl(8deg,77%,56%);display: inline-block;right: 5px;"></span>
                 {% endif %}
                 {% if LANGUAGE_CODE == 'ar' %}
                     <p class="oh-navbar__notification-text" class="oh-navbar__notification-text--unread">{{ notification.data.verb_ar }}</p>
@@ -31,25 +30,28 @@
                     <p class="oh-navbar__notification-text" class="oh-navbar__notification-text--unread">{{ notification.verb }}</p>
                 {% endif %}
             </span>
-        <div hx-target="#allNotificationBody" hx-post="{% url 'delete-notifications' notification.id %}">
-            <ion-icon name="close-outline"role="img" aria-label="close outline"></ion-icon>
-        </div>
+            <div hx-on:click="setTimeout(() => {reloadMessage(this);},100);"
+                hx-target="#notificationBodyItem{{notification.id}}"
+                hx-post="{% url 'delete-notifications' notification.id %}" hx-swap="outerHTML">
+                <ion-icon name="close-outline" role="img" aria-label="close outline"></ion-icon>
 
-    </div>
+            </div>
+        </div>
         <span class="oh-activity-sidebar__a">
-        {{ notification.timesince }} {% trans "ago by" %}<img src="https://ui-avatars.com/api/?name={{notification.actor}}&amp;background=random" style="width: 1.5em; border-radius: 100%;" alt="User"> {{notification.actor}}
-    </span>
+            {{ notification.timesince }} {% trans "ago by" %}<img
+                src="https://ui-avatars.com/api/?name={{notification.actor}}&amp;background=random"
+                style="width: 1.5em; border-radius: 100%;" alt="User"> {{notification.actor}}
+        </span>
     </li>
     {% endfor %}
-
 </ol>
 
 <script>
     $(document).ready(function () {
-      $('#notificationClose').attr('class', 'oh-activity-sidebar__header-icon me-2 oh-activity-sidebar__close md hydrated');
+        $('#notificationClose').attr('class', 'oh-activity-sidebar__header-icon me-2 oh-activity-sidebar__close md hydrated');
     });
     $('#notificationClose').click(function (e) {
-      $('#allNotifications').removeClass('oh-activity-sidebar--show');
+        $('#allNotifications').removeClass('oh-activity-sidebar--show');
     });
 
-  </script>
+</script>
diff --git a/templates/notification/notification_items.html b/templates/notification/notification_items.html
index 0ca78d1f9..d34abecf0 100644
--- a/templates/notification/notification_items.html
+++ b/templates/notification/notification_items.html
@@ -1,158 +1,137 @@
-{% load i18n %}  {% load static %}
+{% 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>
+    <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 %}
+    <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="notificationItem{{notification.id}}" 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>
+    {% if notifications %}
+        <ul class="oh-navbar__nofication-list">
+            {% for notification in notifications %}
+                <a class="oh-navbar__notification-item" href="{{notification.data.redirect}}#"
+                    id="notificationItem{{notification.id}}" 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="#notificationItem{{notification.id}}"
+                                hx-post="{% url 'mark-as-read-notification' notification.id %}" hx-swap="outerHTML">
+                                <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>
-      </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 %}
+    {% 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);
-        },
-      });
+    $(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>
diff --git a/templates/settings.html b/templates/settings.html
index 5a16c2ab0..55e427f48 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -311,7 +311,7 @@
 												{% endif %}
 											</div>
 											<div class="oh-input-group">
-												{% if perms.base.view_actiontype %}
+												{% if perms.employee.view_actiontype %}
 													<a
 														id="date"
 														href="{% url 'action-type' %}"
@@ -321,7 +321,7 @@
 												{% endif %}
 											</div>
 											<div class="oh-input-group">
-												{% if perms.employee.view_emplyeetag %}
+												{% if perms.employee.view_employeetag %}
 													<a
 														id="ticket_type"
 														href="{% url 'employee-tag-view' %}"