[UPDT] BASE: Updated horilla mail server html page by replace mail server CRUD operations hx-target
This commit is contained in:
Horilla
@@ -1,3 +1,19 @@
|
||||
<form hx-post="{% url "mail-server-create-update" %}?instance_id={{instance.id}}">
|
||||
{{form.as_p}}
|
||||
</form>
|
||||
{% load i18n %}
|
||||
<div class="oh-modal__dialog-header pb-0">
|
||||
<span class="oh-modal__dialog-title" id="addEmployeeObjectiveModalLabel">
|
||||
<h2 class="oh-modal__dialog-title" id="objectCreateModalLabel">
|
||||
{% trans "Mail Server" %}
|
||||
</h2>
|
||||
</span>
|
||||
<button type="button" class="oh-modal__close" data-dismiss="oh-modal" aria-label="Close"
|
||||
data-toggle="oh-modal-toggle">
|
||||
<ion-icon name="close-outline"></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="oh-modal__dialog-body">
|
||||
<form hx-post="{{ request.get_full_path }}"
|
||||
hx-target="{% if instance.id %} #objectUpdateModalTarget{% else %} #objectCreateModalTarget {% endif %}"
|
||||
>
|
||||
{{form.as_p}}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -1,64 +1,51 @@
|
||||
{% load i18n %} {% load widget_tweaks %}
|
||||
<h2 class="oh-inner-sidebar-content__title">{% trans "Send Test Email" %}</h2>
|
||||
<form hx-post="{% url "mail-server-test-email" %}?instance_id={{instance_id}}" hx-on="htmx:afterSwap: checkValidationErrors" hx-target="#mailServerModalBody">
|
||||
<form hx-post="{{ request.get_full_path }}"
|
||||
hx-on="htmx:afterSwap: checkValidationErrors" hx-target="#mailServerModalBody">
|
||||
{% csrf_token %}
|
||||
{% for field in form %}
|
||||
{% if field.field.widget.is_hidden %}
|
||||
{{ field }}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if field.field.widget.is_hidden %}
|
||||
{{ field }}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="oh-general__tab-target oh-profile-section" id="test_email">
|
||||
<div class="oh-profile-section__card">
|
||||
<div class="row">
|
||||
<div class="col-12">{{form.non_field_errors}}</div>
|
||||
{% for field in form.visible_fields %}
|
||||
<div class="col-12 col-md-6" id="id_{{ field.name }}_parent_div">
|
||||
<label
|
||||
class="oh-label {% if field.field.required %} required-star{% endif %}"
|
||||
for="id_{{ field.name }}"
|
||||
title="{{ field.help_text|safe }}">
|
||||
{% trans field.label %}
|
||||
</label>
|
||||
{{ field|add_class:"oh-input w-100 form-control" }}
|
||||
|
||||
{{field.errors}}
|
||||
<div class="row">
|
||||
<div class="col-12">{{form.non_field_errors}}</div>
|
||||
{% for field in form.visible_fields %}
|
||||
<div class="col-12" id="id_{{ field.name }}_parent_div">
|
||||
<label class="oh-label {% if field.field.required %} required-star{% endif %}"
|
||||
for="id_{{ field.name }}" title="{{ field.help_text|safe }}">
|
||||
{% trans field.label %}
|
||||
</label>
|
||||
{{ field|add_class:"oh-input w-100 form-control" }}
|
||||
{{field.errors}}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="oh-modal__dialog-footer p-0 mt-3">
|
||||
<button
|
||||
type="submit"
|
||||
class="oh-btn oh-btn--secondary oh-btn--shadow"
|
||||
>
|
||||
{% trans "Send Email" %}
|
||||
</button>
|
||||
</div>
|
||||
<div class="oh-modal__dialog-footer p-0 mt-3">
|
||||
<button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow">
|
||||
{% trans "Send Email" %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
<p>
|
||||
{{send_test_mail_result}}
|
||||
</p>
|
||||
|
||||
<div id="loading-overlay" class="loading-overlay d-none">
|
||||
<dotlottie-player
|
||||
src="https://lottie.host/8d113289-1471-4cbc-8bab-33e90da32727/1hzz3KiKas.lottie"
|
||||
background="transparent"
|
||||
speed="1"
|
||||
style="width: 300px; height: 400px;"
|
||||
loop
|
||||
autoplay>
|
||||
<dotlottie-player src="https://lottie.host/8d113289-1471-4cbc-8bab-33e90da32727/1hzz3KiKas.lottie"
|
||||
background="transparent" speed="1" style="width: 300px; height: 400px;" loop autoplay>
|
||||
</dotlottie-player>
|
||||
<p class="loading-text">{% trans "Sending email..." %}</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
d-none{
|
||||
display:none: !important
|
||||
d-none {
|
||||
display: none: !important
|
||||
}
|
||||
|
||||
/* Loading Overlay */
|
||||
@@ -87,21 +74,26 @@
|
||||
}
|
||||
|
||||
@keyframes blinkText {
|
||||
0% { opacity: 2; }
|
||||
100% { opacity: 0.5; }
|
||||
0% {
|
||||
opacity: 2;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Show the loading overlay immediately when the request starts
|
||||
document.body.addEventListener("htmx:beforeRequest", function(event) {
|
||||
document.body.addEventListener("htmx:beforeRequest", function (event) {
|
||||
// Show the loading overlay before the request is sent
|
||||
const overlay = $("#loading-overlay");
|
||||
overlay.removeClass('d-none')
|
||||
});
|
||||
|
||||
// Function to check if there are any validation errors in the form after HTMX updates it
|
||||
document.body.addEventListener("htmx:afterSwap", function(event) {
|
||||
document.body.addEventListener("htmx:afterSwap", function (event) {
|
||||
// Only check for errors if the updated content is a form
|
||||
if (event.target.closest("form")) {
|
||||
checkValidationErrors(event.target);
|
||||
|
||||
@@ -1,46 +1,33 @@
|
||||
{% extends 'settings.html' %} {% load i18n %} {% block settings %}{% load static %}
|
||||
<div class="oh-inner-sidebar-content">
|
||||
{% if perms.base.view_dynamicemailconfiguration %}
|
||||
<div
|
||||
class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<h2 class="oh-inner-sidebar-content__title">{% trans "Mail Servers" %}</h2>
|
||||
{% if perms.base.add_dynamicemailconfiguration %}
|
||||
<button
|
||||
class="oh-btn oh-btn--secondary oh-btn--shadow"
|
||||
data-toggle="oh-modal-toggle"
|
||||
data-target="#mailServerModal"
|
||||
hx-get="{% url 'mail-server-create-update' %}"
|
||||
hx-target="#mailServerModalBody"
|
||||
>
|
||||
<ion-icon name="add-outline" class="me-1"></ion-icon>
|
||||
{% trans "Create" %}
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if mail_servers %}
|
||||
{% include 'base/mail_server/mail_server_view.html' %}
|
||||
{% else %}
|
||||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
|
||||
<img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);" src="{% static 'images/ui/email.png' %}" class="" alt="Page not found. 404." />
|
||||
<h5 class="oh-404__subtitle">{% trans "There is no mail server at this moment." %}</h5>
|
||||
<div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
|
||||
<h2 class="oh-inner-sidebar-content__title">{% trans "Mail Servers" %}</h2>
|
||||
{% if perms.base.add_dynamicemailconfiguration %}
|
||||
<button class="oh-btn oh-btn--secondary oh-btn--shadow" data-toggle="oh-modal-toggle"
|
||||
data-target="#objectCreateModal" hx-get="{% url 'mail-server-create-update' %}"
|
||||
hx-target="#objectCreateModalTarget">
|
||||
<ion-icon name="add-outline" class="me-1"></ion-icon>
|
||||
{% trans "Create" %}
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if mail_servers %}
|
||||
{% include 'base/mail_server/mail_server_view.html' %}
|
||||
{% else %}
|
||||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
|
||||
<img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);"
|
||||
src="{% static 'images/ui/email.png' %}" class="" alt="Page not found. 404." />
|
||||
<h5 class="oh-404__subtitle">{% trans "There is no mail server at this moment." %}</h5>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="oh-modal"
|
||||
id="mailServerModal"
|
||||
role="dialog"
|
||||
aria-labelledby="mailServerModal"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="oh-modal" id="mailServerModal" role="dialog" aria-labelledby="mailServerModal" aria-hidden="true">
|
||||
<div class="oh-modal__dialog">
|
||||
<div class="oh-modal__dialog-header">
|
||||
<h2 class="oh-modal__dialog-title" id="editModal1ModalLabel">
|
||||
{% trans "Mail Server" %}
|
||||
</h2>
|
||||
|
||||
<button class="oh-modal__close" aria-label="Close">
|
||||
<ion-icon name="close-outline"></ion-icon>
|
||||
</button>
|
||||
|
||||
@@ -1,66 +1,83 @@
|
||||
{% load i18n %}
|
||||
{% load static %}
|
||||
<style>
|
||||
.alert {
|
||||
position: relative;
|
||||
padding: 0.75rem 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.alert {
|
||||
position: relative;
|
||||
padding: 0.75rem 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
color: #856404;
|
||||
background-color: #fff3cd;
|
||||
border-color: #ffeeba;
|
||||
}
|
||||
.alert-warning {
|
||||
color: #856404;
|
||||
background-color: #fff3cd;
|
||||
border-color: #ffeeba;
|
||||
}
|
||||
</style>
|
||||
|
||||
{% if primary_mail_not_exist %}
|
||||
<div class="alert alert-warning" role="alert">
|
||||
{% trans "Primary mail is not configured! " %}<img id="blink" src="{% static 'images/ui/email.png' %}" width="24" height="24">
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var blink =
|
||||
document.getElementById('blink');
|
||||
<div class="alert alert-warning" role="alert">
|
||||
{% trans "Primary mail is not configured! " %}<img id="blink" src="{% static 'images/ui/email.png' %}" width="24"
|
||||
height="24">
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var blink =
|
||||
document.getElementById('blink');
|
||||
|
||||
setInterval(function () {
|
||||
blink.style.opacity =
|
||||
(blink.style.opacity == 0 ? 1 : 0);
|
||||
}, 800);
|
||||
</script>
|
||||
setInterval(function () {
|
||||
blink.style.opacity =
|
||||
(blink.style.opacity == 0 ? 1 : 0);
|
||||
}, 800);
|
||||
</script>
|
||||
{% endif %}
|
||||
<div class="oh-sticky-table">
|
||||
<div class="oh-sticky-table__table oh-table--sortable">
|
||||
<div class="oh-sticky-table__thead">
|
||||
<div class="oh-sticky-table__tr">
|
||||
<div class="oh-sticky-table__th" style="width: 350px;">
|
||||
{% trans 'Host User' %}
|
||||
</div>
|
||||
<div class="oh-sticky-table__th">
|
||||
{% trans 'Host' %}
|
||||
</div>
|
||||
<div class="oh-sticky-table__th">
|
||||
{% trans 'Company' %}
|
||||
</div>
|
||||
<div class="oh-sticky-table__th"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="oh-sticky-table__tbody">
|
||||
{% for server in mail_servers %}
|
||||
<div class="oh-sticky-table__tr {% if server.is_primary %} highlight-selected {% endif %}" draggable="true">
|
||||
<div class="oh-sticky-table__td">{{ server.username }}</div>
|
||||
<div class="oh-sticky-table__td">{{ server.host }}</div>
|
||||
<div class="oh-sticky-table__td">{{ server.company_id }}</div>
|
||||
<div class="oh-sticky-table__td">
|
||||
<div class="oh-btn-group">
|
||||
<a hx-get="{% url 'mail-server-create-update' %}?instance_id={{ server.id }}" onclick="event.stopPropagation()" hx-target="#mailServerModalBody" data-toggle="oh-modal-toggle" data-target="#mailServerModal" class="oh-btn oh-btn--light-bkg w-100" title="Edit"><ion-icon name="create-outline" role="img" class="md hydrated" aria-label="create outline"></ion-icon></a>
|
||||
<a hx-get="{% url 'mail-server-test-email' %}?instance_id={{ server.id }}" onclick="event.stopPropagation()" hx-target="#mailServerModalBody" data-toggle="oh-modal-toggle" data-target="#mailServerModal" class="oh-btn oh-btn--light-bkg w-100" title="Test email"><ion-icon name="mail-unread-outline" role="img" class="md hydrated" aria-label="at-circle-outline"></ion-icon></a>
|
||||
<a onclick="event.stopPropagation()" hx-confirm="{% trans 'Do you want to delete this mail server configuration?' %}" hx-post="{% url 'mail-server-delete' %}?ids={{ server.id }}" data-toggle="oh-modal-toggle" data-target="#objectDetailsModal" hx-target="#objectDetailsModalTarget" type="submit" class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="Remove"><ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon></a>
|
||||
<div class="oh-sticky-table__table oh-table--sortable">
|
||||
<div class="oh-sticky-table__thead">
|
||||
<div class="oh-sticky-table__tr">
|
||||
<div class="oh-sticky-table__th" style="width: 350px;">
|
||||
{% trans 'Host User' %}
|
||||
</div>
|
||||
<div class="oh-sticky-table__th">
|
||||
{% trans 'Host' %}
|
||||
</div>
|
||||
<div class="oh-sticky-table__th">
|
||||
{% trans 'Company' %}
|
||||
</div>
|
||||
<div class="oh-sticky-table__th"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="oh-sticky-table__tbody">
|
||||
{% for server in mail_servers %}
|
||||
<div class="oh-sticky-table__tr {% if server.is_primary %} highlight-selected {% endif %}" draggable="true">
|
||||
<div class="oh-sticky-table__td">{{ server.username }}</div>
|
||||
<div class="oh-sticky-table__td">{{ server.host }}</div>
|
||||
<div class="oh-sticky-table__td">{{ server.company_id }}</div>
|
||||
<div class="oh-sticky-table__td">
|
||||
<div class="oh-btn-group">
|
||||
<a hx-get="{% url 'mail-server-create-update' %}?instance_id={{ server.id }}"
|
||||
onclick="event.stopPropagation()" hx-target="#objectUpdateModalTarget"
|
||||
data-toggle="oh-modal-toggle" data-target="#objectUpdateModal"
|
||||
class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Edit' %}">
|
||||
<ion-icon name="create-outline" role="img" class="md hydrated" aria-label="create outline"></ion-icon>
|
||||
</a>
|
||||
<a hx-get="{% url 'mail-server-test-email' %}?instance_id={{ server.id }}"
|
||||
onclick="event.stopPropagation()" hx-target="#mailServerModalBody"
|
||||
data-toggle="oh-modal-toggle" data-target="#mailServerModal"
|
||||
class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Test email' %}">
|
||||
<ion-icon name="mail-unread-outline" role="img" class="md hydrated" aria-label="at-circle-outline"></ion-icon>
|
||||
</a>
|
||||
<a onclick="event.stopPropagation()"
|
||||
hx-confirm="{% trans 'Do you want to delete this mail server configuration?' %}"
|
||||
hx-post="{% url 'mail-server-delete' %}?ids={{ server.id }}" data-toggle="oh-modal-toggle"
|
||||
data-target="#objectDetailsModal" hx-target="#objectDetailsModalTarget" type="submit"
|
||||
class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="{% trans 'Remove' %}">
|
||||
<ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user