[UPDT] TEMPLATES: Notification mark as read and clear all section updated with more HTMX attributes
This commit is contained in:
Horilla
@@ -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}}&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}}&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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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' %}"
|
||||
|
||||
Reference in New Issue
Block a user