Enable HTMX for widget configuration

netbox/extras/views.py

@@ -2,7 +2,7 @@ from django.contrib import messages
 from django.contrib.auth.mixins import LoginRequiredMixin
 from django.contrib.contenttypes.models import ContentType
 from django.db.models import Count, Q
-from django.http import Http404, HttpResponseForbidden
+from django.http import Http404, HttpResponseForbidden, HttpResponse
 from django.shortcuts import get_object_or_404, redirect, render
 from django.urls import reverse
 from django.views.generic import View
@@ -673,16 +673,20 @@ class JournalEntryBulkDeleteView(generic.BulkDeleteView):
 #
 
 class DashboardWidgetConfigView(LoginRequiredMixin, View):
-    template_name = 'extras/dashboardwidget_edit.html'
+    template_name = 'extras/dashboard/widget_config.html'
 
     def get(self, request, id):
         widget_class, config = get_widget_class_and_config(request.user, id)
         widget_form = DashboardWidgetForm(initial=config)
         config_form = widget_class.ConfigForm(initial=config.get('config'), prefix='config')
 
+        if not is_htmx(request):
+            return redirect('home')
+
         return render(request, self.template_name, {
             'widget_form': widget_form,
             'config_form': config_form,
+            'form_url': reverse('extras:dashboardwidget_config', kwargs={'id': id})
         })
 
     def post(self, request, id):
@@ -695,11 +699,14 @@ class DashboardWidgetConfigView(LoginRequiredMixin, View):
             data['config'] = config_form.cleaned_data
             request.user.config.set(f'dashboard.widgets.{id}', data, commit=True)
 
-            return redirect('home')
+            response = HttpResponse()
+            response['HX-Redirect'] = reverse('home')
+            return response
 
         return render(request, self.template_name, {
             'widget_form': widget_form,
             'config_form': config_form,
+            'form_url': reverse('extras:dashboardwidget_config', kwargs={'id': id})
         })
 
 

netbox/templates/extras/dashboard/widget.html

@@ -11,7 +11,12 @@
   <div class="card grid-stack-item-content">
     <div class="card-header text-center text-light bg-secondary p-1">
       <div class="float-start ps-1">
-        <a href="{% url 'extras:dashboardwidget_config' id=widget.id %}"><i class="mdi mdi-cog text-gray"></i></a>
+        <a href="#"
+          hx-get="{% url 'extras:dashboardwidget_config' id=widget.id %}"
+          hx-target="#htmx-modal-content"
+          data-bs-toggle="modal"
+          data-bs-target="#htmx-modal"
+        ><i class="mdi mdi-cog text-gray"></i></a>
       </div>
       <div class="float-end pe-1">
         <a href="#"

netbox/templates/extras/dashboard/widget_config.html

@@ -0,0 +1,19 @@
+{% load form_helpers %}
+
+<form hx-post="{{ form_url }}">
+  {% csrf_token %}
+  <div class="modal-header">
+    <h5 class="modal-title">Widget Configuration</h5>
+  </div>
+  <div class="modal-body">
+    {% block form %}
+      {% render_form widget_form %}
+      {% render_form config_form %}
+    {% endblock form %}
+  </div>
+  <div class="modal-footer">
+    {% block buttons %}
+      <button class="btn btn-primary">Save</button>
+    {% endblock buttons %}
+  </div>
+</form>

netbox/templates/extras/dashboardwidget_edit.html

@@ -1,33 +0,0 @@
-{% extends 'base/layout.html' %}
-{% load form_helpers %}
-
-
-{% block title %}
-  Editing {{ widget }}
-{% endblock title %}
-
-{% block content-wrapper %}
-  <div class="tab-content">
-    <div class="tab-pane show active" id="edit-form" role="tabpanel" aria-labelledby="object-list-tab">
-
-      <form action="" method="post" enctype="multipart/form-data" class="form-object-edit mt-5">
-        {% csrf_token %}
-
-        <div id="form_fields">
-          {% block form %}
-            {% render_form widget_form %}
-            {% render_form config_form %}
-          {% endblock form %}
-        </div>
-
-        <div class="text-end my-3">
-          {% block buttons %}
-            <button type="submit" name="_update" class="btn btn-primary">Save</button>
-            <a class="btn btn-outline-danger" href="{% url 'home' %}">Cancel</a>
-          {% endblock buttons %}
-        </div>
-      </form>
-    </div>
-  </div>
-
-{% endblock content-wrapper %}

netbox/templates/inc/htmx_modal.html

@@ -1,5 +1,5 @@
 <div class="modal fade" id="htmx-modal" tabindex="-1" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered">
+  <div class="modal-dialog">
     <div class="modal-content" id="htmx-modal-content">
       {# Dynamic content goes here #}
     </div>