From 9a530963b7e59e12abd378179c88c2e5b0439f42 Mon Sep 17 00:00:00 2001
From: Horilla <support@horilla.com>
Date: Wed, 26 Feb 2025 16:59:51 +0530
Subject: [PATCH] [UPDT] BASE: Updated horilla mail server html page by replace
 mail server CRUD operations hx-target

---
 base/templates/base/mail_server/form.html     |  22 +++-
 .../base/mail_server/form_email_test.html     |  82 ++++++------
 .../base/mail_server/mail_server.html         |  55 +++-----
 .../base/mail_server/mail_server_view.html    | 121 ++++++++++--------
 4 files changed, 146 insertions(+), 134 deletions(-)

diff --git a/base/templates/base/mail_server/form.html b/base/templates/base/mail_server/form.html
index 0eae9ba14..d772e0e81 100644
--- a/base/templates/base/mail_server/form.html
+++ b/base/templates/base/mail_server/form.html
@@ -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>
diff --git a/base/templates/base/mail_server/form_email_test.html b/base/templates/base/mail_server/form_email_test.html
index 592572998..57bbff6eb 100644
--- a/base/templates/base/mail_server/form_email_test.html
+++ b/base/templates/base/mail_server/form_email_test.html
@@ -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);
diff --git a/base/templates/base/mail_server/mail_server.html b/base/templates/base/mail_server/mail_server.html
index 8c748177b..b0d99782f 100644
--- a/base/templates/base/mail_server/mail_server.html
+++ b/base/templates/base/mail_server/mail_server.html
@@ -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>
diff --git a/base/templates/base/mail_server/mail_server_view.html b/base/templates/base/mail_server/mail_server_view.html
index 1ee4d48ef..02cd054b2 100644
--- a/base/templates/base/mail_server/mail_server_view.html
+++ b/base/templates/base/mail_server/mail_server_view.html
@@ -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>