HTMX + Modal

Implementado HTMX no projeto, o mesmo permite manipulação dinâmica de HTML por meio de requisições. O mesmo foi utilizado para implementar modais no sistema.

multigranja/apps/core/templates/base.html

@@ -25,5 +25,8 @@
         {% block content %}{% endblock %}
     </div>
 </body>
+    <!-- Importing custom JS -->
     <script src="{% static 'js/main.js' %}"></script>
+    <!-- Importing HTMX -->
+    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js" integrity="sha384-/TgkGk7p307TH7EXJDuUlgG3Ce1UVolAOFopFekQkkXihi5u/6OCvVKyz1W+idaz" crossorigin="anonymous"></script>
 </html>

multigranja/apps/core/templates/base_modal.html

@@ -0,0 +1,9 @@
+<div class="modal-base" hx-get="{% url 'core:null' %}" hx-swap="delete" hx-target=".modal-base">
+  <div class="modal-content"
+       onclick="event.stopPropagation()">
+       {% block content %}{% endblock %}
+       {% if error %}
+          <div class="modal-error">{{error}}</div>
+       {% endif %}
+      </div>
+</div>

multigranja/apps/core/templates/confirmation_popup.html

@@ -0,0 +1,16 @@
+{% extends "base_modal.html" %}
+{% load static %}
+
+{% block content %}
+<div class="confirmation-container">
+    <h1>Deseja mesmo realizar essa ação?</h1>
+    {% if description %}
+        <p class="confirmation-description">{{ description }}</p>
+    {% endif %}
+    <form method="POST" action="{{ positive_url }}">
+        {% csrf_token %}
+        <button class="btn-primary" type="submit">Sim</button>
+        <a href="{{ negative_url }}" class="btn-primary">Não</a>
+    </form>
+</div>
+{% endblock content %}

multigranja/apps/core/urls.py

@@ -0,0 +1,8 @@
+from django.urls import include, path
+from . import views
+
+app_name = "core"
+
+urlpatterns = [
+    path("null/", views.null_response, name="null"),
+]

multigranja/apps/core/views.py

@@ -1,3 +1,4 @@
-from django.shortcuts import render
+from django.http import HttpResponse
 
-# Create your views here.
+def null_response(request):
+    return HttpResponse('<div class="null"></div>')

multigranja/multigranja/urls.py

@@ -10,4 +10,5 @@ urlpatterns = [
     path('', home),
     path('', include('entities.urls')),
     path('report/', include('report.urls')),
+    path("core/", include("core.urls")),
 ]

multigranja/static/css/layout/global.css

@@ -18,7 +18,7 @@ body {
     padding: 0 var(--space-md);
     overflow-y: auto;
     overflow-x: hidden;
-    z-index: 1000;
+    z-index: 150;
     box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
 }
 
@@ -98,7 +98,7 @@ body.sidebar-collapsed .main-content {
     justify-content: space-between;
     align-items: center;
     padding: 0 var(--space-md);
-    z-index: 900;
+    z-index: 149;
 }
 
 #sidebar-toggle {
@@ -148,4 +148,22 @@ body.sidebar-collapsed .main-content {
     padding: var(--space-lg);
     width: calc(100% - 250px);
     overflow-y: auto;
+}
+
+/* BASE MODAL */
+.modal-base {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.modal-content {
+  background-color: var(--color-bg-light);
+  padding: var(--space-lg);
+  border-radius: var(--space-sm);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }