Refactor HTMX Viewsets

hawc/apps/assessment/templates/assessment/assessment_detail.html

@@ -19,7 +19,7 @@ <h2>{{object}}{% debug_badge object.id %}</h2>
           {% endif %}
           <a class="dropdown-item" href="{{ object.get_clear_cache_url }}">Clear assessment cache</a>
           <a class="dropdown-item" href="{{ object.get_assessment_logs_url }}">View change logs</a>
-          <a class="dropdown-item" hx-get="{% url 'assessment:attachment-htmx' object.pk 'create' %}" hx-trigger="click" hx-target="#attach_table" hx-swap="outerHTML" href="/">Add an attachment</a>
+          <a class="dropdown-item" hx-get="{% url 'assessment:attachment-htmx' object.pk 'create' %}" hx-trigger="click" hx-target="#attach-tbody" hx-swap="beforeend" href="/">Add an attachment</a>
           <a class="dropdown-item" href="{% url 'assessment:dataset_create' object.pk %}">Add a dataset</a>
           <a class="dropdown-item" href="{% url 'assessment:values-create' object.pk %}">Add a value</a>
           <div class="dropdown-divider"></div>
@@ -247,12 +247,8 @@ <h3>Assessment details for team members*</h3>
     </script>
   {% endif %}
   <script type="text/javascript">
-    htmx.onLoad(function (target) {
-    // attachment-form events
-      const form = $(target).find('.attachment-form');
-      if (form) {
-        form.find("#id_title").focus();
-      }
+    $(window).ready(function() {
+      window.app.HAWCUtils.addScrollHtmx("attachment-edit-row", "attachment-detail-row");
     });
   </script>
   {% include "common/helptext_popup_js.html" %}

hawc/apps/assessment/templates/assessment/fragments/attachment_edit_row.html

@@ -1,8 +1,8 @@
 
-<tr hx-target="this" hx-swap="outerHTML">
+<tr hx-target="this" hx-swap="outerHTML" class="attachment-edit-row">
   {% if form %}
-    <td colspan="3">
-      <form class="attachment-form" method="post" enctype="multipart/form-data">
+    <td colspan="3" class="bg-lightblue">
+      <form class="attachment-form pad-form p-3" method="post" enctype="multipart/form-data">
         {% crispy form %}
         <div class="form-row d-flex flex-row-reverse px-3 pb-3">
           {% if form.instance.id %}
@@ -24,7 +24,7 @@
             </button>
             <button class="btn btn-light"
                     type='button'
-                    onclick="$(this).closest('tr').remove()">
+                    onclick="window.app.HAWCUtils.hideElement($(this).closest('.attachment-edit-row'), true)">
               Cancel
             </button>
           {% endif %}

hawc/apps/assessment/templates/assessment/fragments/attachment_list.html

@@ -1,32 +1,17 @@
-<div id="attach_table">
-  {% if object_list or action == 'create' %}
-    <h2>Attachments</h2>
-    <table class="table table-sm table-striped">
-      <colgroup>
-        {% if canEdit or permissions.edit %}
-          <col style="width: 25%;">
-          <col style="width: 50%;">
-          <col style="width: 25%;">
-        {% else %}
-          <col style="width: 30%;">
-          <col style="width: 70%;">
-        {% endif %}
-      </colgroup>
-      <thead>
-        <tr>
-          <th>Attachment</th>
-          <th>Description</th>
-          {% if canEdit or permissions.edit %}
-            <th>Editing</th>
-          {% endif %}
-        </tr>
-      </thead>
-      <tbody>
-        {% for object in object_list %}
-          {% include "assessment/fragments/attachment_row.html" %}
-        {% endfor %}
-        {% include "assessment/fragments/attachment_edit_row.html" %}
-      </tbody>
-    </table>
-  {% endif %}
+<div class="hide-empty-tbody">
+  <h2>Attachments</h2>
+  <table class="table table-sm table-striped">
+    {% if canEdit %}
+      {% bs4_colgroup '25,50,25' %}
+      {% bs4_thead 'Attachment,Description,Editing' %}
+    {% else %}
+      {% bs4_colgroup '30,70' %}
+      {% bs4_thead 'Attachment,Description' %}
+    {% endif %}
+    <tbody id="attach-tbody">
+      {% for object in object_list %}
+        {% include "assessment/fragments/attachment_row.html" %}
+      {% endfor %}
+    </tbody>
+  </table>
 </div>

hawc/apps/assessment/templates/assessment/fragments/attachment_row.html

@@ -1,4 +1,4 @@
-<tr hx-target="this" hx-swap="outerHTML">
+<tr hx-target="this" hx-swap="outerHTML" class="attachment-detail-row">
   <td>
     <a href="{{ object.get_absolute_url }}">{{object.title}}</a>
     {% if canEdit or permissions.edit %}

hawc/apps/assessment/views.py

@@ -437,7 +437,6 @@ class AttachmentViewSet(HtmxViewSet):
     model = models.Attachment
     form_fragment = "assessment/fragments/attachment_edit_row.html"
     detail_fragment = "assessment/fragments/attachment_row.html"
-    list_fragment = "assessment/fragments/attachment_list.html"
 
     @action(permission=can_view, htmx_only=False)
     def read(self, request: HttpRequest, *args, **kwargs):
@@ -458,11 +457,7 @@ def create(self, request: HttpRequest, *args, **kwargs):
                 template = self.detail_fragment
         else:
             form = forms.AttachmentForm()
-            template = self.list_fragment
         context = self.get_context_data(form=form)
-        context["object_list"] = models.Attachment.objects.get_attachments(
-            request.item.assessment, False
-        )
         return render(request, template, context)
 
     @action(methods=("get", "post"), permission=can_edit)

hawc/apps/eco/templates/eco/fragments/_create_card.html → hawc/apps/common/templates/common/fragments/_create_card.html

@@ -1,3 +1,3 @@
 <h3 class="card-title">{{title}}
-  <button id="{{model}}-create" class="btn btn-sm btn-primary float-right" hx-get="{{hx_get}}" hx-target="{{hx_target}}" hx-swap="outerHTML"><i class="fa fa-plus fa-fw"></i>&nbsp;Create</button>
+  <button id="{{model}}-create" class="btn btn-sm btn-primary float-right" hx-get="{{hx_get}}" hx-target="{{hx_target}}" hx-swap="beforeend"><i class="fa fa-plus fa-fw"></i>&nbsp;{{btn_text}}</button>
 </h3>

hawc/apps/common/templates/common/fragments/_create_one.html

@@ -0,0 +1,5 @@
+<tr class="show-only-child">
+  <td colspan="100%">
+    <p class="text-center mb-0">{{text}}</p>
+  </td>
+</tr>

hawc/apps/epiv2/templates/epiv2/fragments/_delete_rows.html → hawc/apps/common/templates/common/fragments/_delete_rows.html

@@ -1,6 +1,7 @@
-<script>
+<script id="delete-script-{{attribute}}-{{id}}">
   elements = document.getElementsByClassName("{{attribute}}-{{id}}")
   while (elements.length > 0){
     elements[0].parentNode.removeChild(elements[0]);
   }
+  document.getElementById("delete-script-{{attribute}}-{{id}}").remove()
 </script>

hawc/apps/epiv2/templates/epiv2/fragments/_object_edit_row.html → hawc/apps/common/templates/common/fragments/_object_edit_row.html

@@ -1,24 +1,24 @@
-<tr hx-target="this" hx-swap="outerHTML swap:0s" class="epiv2-edit-row {{model}}-edit-row">
+<tr hx-target="this" hx-swap="outerHTML swap:0s" class="{{app}}-edit-row {{model}}-edit-row">
   {% if form %}
-    <td colspan="100%">
-      <form method="post" class="border my-2 p-2 pb-5 edit-form-background form-{{model}}">
+    <td colspan="100%" class="p-3">
+      <form method="post" class="border p-2 pb-4 edit-form-background rounded pad-form form-{{model}}">
         <div class="d-flex justify-content-end">
           {% include "common/scientific_pulldown.html" %}
         </div>
         {% crispy form %}
-        <div class="form-row float-right">
+        <div class="form-row justify-content-center my-2">
           {% if form.instance.id %}
-            <button id="{{model}}-save" class="btn btn-sm btn-primary" hx-post="{% crud_url 'epiv2' model 'update' object.pk %}">
+            <button id="{{model}}-save" class="btn btn-sm btn-primary mx-2 py-2" style="width: 15rem; padding: 0.7rem;" hx-post="{% crud_url app model 'update' object.pk %}">
               Save</button>
-            <button id="{{model}}-cancel" class="btn btn-sm btn-light" hx-get="{% crud_url 'epiv2' model 'read' object.pk %}">
+            <button id="{{model}}-cancel" class="btn btn-sm btn-light mx-2 py-2" style="width: 8rem; padding: 0.7rem;" hx-get="{% crud_url app model 'read' object.pk %}">
               <i class="fa fa-fw fa-times mr-1"></i>
               Cancel</button>
           {% else %}
-            <button id="{{model}}-save" class="btn btn-sm btn-primary" hx-post="{% crud_url 'epiv2' model 'create' parent.pk %}">
+            <button id="{{model}}-save" class="btn btn-sm btn-primary mx-2 py-2" style="width: 15rem; padding: 0.7rem;"  hx-post="{% crud_url app model 'create' parent.pk %}">
               Save
             </button>
-            <button id="{{model}}-cancel" class="btn btn-sm btn-light" type='button'
-                    onclick="window.app.HAWCUtils.hideElement($(this).closest('.epiv2-edit-row'))"><i
+            <button id="{{model}}-cancel" class="btn btn-sm btn-light mx-2 py-2" type='button' style="width: 8rem; padding: 0.7rem;"
+                    onclick="window.app.HAWCUtils.hideElement($(this).closest('.{{app}}-edit-row'), true)"><i
               class="fa fa-fw fa-times mr-1"></i>
               Cancel</button>
           {% endif %}

hawc/apps/eco/templates/eco/fragments/_object_row.html → hawc/apps/common/templates/common/fragments/_object_row.html

@@ -4,21 +4,21 @@
       {% csrf_token %}
       <i class="fa fa-fw fa-exclamation-triangle mx-1"></i>Are you sure you want to delete?
       <div class="d-flex flex-row-reverse">
-        <button id="{{model}}-confirm-del" class="btn btn-sm btn-danger mx-1" hx-post="{% crud_url 'eco' model 'delete' object.pk %}"
+        <button id="{{model}}-confirm-del" class="btn btn-sm btn-danger mx-1" hx-post="{% crud_url app model 'delete' object.pk %}"
                 hx-swap="outerHTML swap:1s">Confirm</button>
         <button id="{{model}}-cancel-del" class="btn btn-sm btn-secondary mx-1"
-                hx-get="{% crud_url 'eco' model 'read' object.pk %}">Cancel</button>
+                hx-get="{% crud_url app model 'read' object.pk %}">Cancel</button>
       </div>
     </form>
   </td>
 {% elif permissions.edit or obj_perms.edit and crud == "Update" %}
   <td>
-    <button id="{{model}}-update" class="btn btn-sm btn-primary" hx-get="{% crud_url 'eco' model 'update' object.pk %}">
+    <button id="{{model}}-update" class="btn btn-sm btn-primary" hx-get="{% crud_url app model 'update' object.pk %}">
       <i class="fa fa-pencil-square-o" aria-hidden="true"></i></button>
-    <button id="{{model}}-delete" class="btn btn-sm btn-danger" hx-get="{% crud_url 'eco' model 'delete' object.pk %}">
+    <button id="{{model}}-delete" class="btn btn-sm btn-danger" hx-get="{% crud_url app model 'delete' object.pk %}">
       <i class="fa fa-trash" aria-hidden="true"></i></button>
-    <button id="{{model}}-clone" class="btn btn-sm btn-secondary" hx-post="{% crud_url 'eco' model 'clone' object.pk %}"
-            hx-target=".{{model}}-edit-row" hx-swap="outerHTML">
+    <button id="{{model}}-clone" class="btn btn-sm btn-secondary" hx-post="{% crud_url app model 'clone' object.pk %}"
+            hx-target="#{{model}}-tbody" hx-swap="beforeend">
       <i class="fa fa-clone" aria-hidden="true"></i></button>
   </td>
 {% endif %}

hawc/apps/eco/templates/eco/design_update.html

@@ -13,19 +13,15 @@ <h2 class="d-inline-block">{{object.name}}</h2>
   <div class="card my-4 mx-2">
     <div class="card-body">
       {% url 'eco:cause-htmx' object.pk 'create' as cause_create %}
-      {% include "eco/fragments/_create_card.html" with title="Causes" hx_get=cause_create hx_target=".cause-edit-row" model="cause" %}
-      <table class="table table-sm table-striped">
+      {% include "common/fragments/_create_card.html" with title="Causes" hx_get=cause_create hx_target="#cause-tbody" model="cause" btn_text="Create" %}
+      <table class="table table-sm table-striped-invert">
         {% bs4_colgroup '10,15,15,15,15,15,15' %}
         {% bs4_thead 'Name,Term,Species,Level,Level Units,Comment,Edit' %}
-        <tbody>
-          {% if causes %}
-            {% for object in causes %}
-              {% include "eco/fragments/cause_row.html" %}
-            {% endfor %}
-            {% include "eco/fragments/_create_one.html" with class="cause-edit-row" text="" %}
-          {% else %}
-            {% include "eco/fragments/_create_one.html" with class="cause-edit-row" text="causes" %}
-          {% endif %}
+        <tbody id="cause-tbody">
+          {% include "common/fragments/_create_one.html" with text="No effects. Create one?" %}
+          {% for object in causes %}
+            {% include "eco/fragments/cause_row.html" %}
+          {% endfor %}
         </tbody>
       </table>
     </div>
@@ -34,19 +30,15 @@ <h2 class="d-inline-block">{{object.name}}</h2>
   <div class="card my-4 mx-2">
     <div class="card-body">
       {% url 'eco:effect-htmx' object.pk 'create' as effect_create %}
-      {% include "eco/fragments/_create_card.html" with title="Effects" hx_get=effect_create hx_target=".effect-edit-row" model="effect" %}
-      <table class="table table-sm table-striped">
+      {% include "common/fragments/_create_card.html" with title="Effects" hx_get=effect_create hx_target="#effect-tbody" model="effect" btn_text="Create" %}
+      <table class="table table-sm table-striped-invert">
         {% bs4_colgroup '10,15,15,15,15,15,15' %}
         {% bs4_thead 'Name,Term,Species,Units,As Reported,Comment,Edit' %}
-        <tbody>
-          {% if effects %}
-            {% for object in effects %}
-              {% include "eco/fragments/effect_row.html" %}
-            {% endfor %}
-            {% include "eco/fragments/_create_one.html" with class="effect-edit-row" text="" %}
-          {% else %}
-            {% include "eco/fragments/_create_one.html" with class="effect-edit-row" text="effects" %}
-          {% endif %}
+        <tbody id="effect-tbody">
+          {% include "common/fragments/_create_one.html" with text="No effects. Create one?" %}
+          {% for object in effects %}
+            {% include "eco/fragments/effect_row.html" %}
+          {% endfor %}
         </tbody>
       </table>
     </div>
@@ -55,19 +47,15 @@ <h2 class="d-inline-block">{{object.name}}</h2>
   <div class="card my-4 mx-2">
     <div class="card-body">
       {% url 'eco:result-htmx' object.pk 'create' as result_create %}
-      {% include "eco/fragments/_create_card.html" with title="Results" hx_get=result_create hx_target=".result-edit-row" model="result" %}
-      <table class="table table-sm table-striped">
+      {% include "common/fragments/_create_card.html" with title="Results" hx_get=result_create hx_target="#result-tbody" model="result" btn_text="Create" %}
+      <table class="table table-sm table-striped-invert">
         {% bs4_colgroup '15,15,15,10,15,15,15' %}
         {% bs4_thead 'Name,Cause,Effect,Relationship Direction,Modifying Factors,Value,Edit' %}
-        <tbody>
-          {% if results %}
-            {% for object in results %}
-              {% include "eco/fragments/result_row.html" %}
-            {% endfor %}
-            {% include "eco/fragments/_create_one.html" with class="result-edit-row" text="" %}
-          {% else %}
-            {% include "eco/fragments/_create_one.html" with class="result-edit-row" text="results" %}
-          {% endif %}
+        <tbody id="result-tbody">
+          {% include "common/fragments/_create_one.html" with text="No effects. Create one?" %}
+          {% for object in results %}
+            {% include "eco/fragments/result_row.html" %}
+          {% endfor %}
         </tbody>
       </table>
     </div>

hawc/apps/eco/templates/eco/fragments/cause_row.html

@@ -1,12 +1,9 @@
-<tr hx-target="this" hx-swap="outerHTML" class="eco-obj-row {{action}}" id="cause-{{object.id}}">
+<tr hx-target="this" hx-swap="outerHTML" class="eco-obj-row {{action}} cause-{{object.id}}">
   <td>{{object.name}}</td>
   <td>{{object.term.name}}</td>
   <td>{{object.species }}</td>
   <td>{{object.level }}</td>
   <td>{{object.level_units }}</td>
   <td>{{object.comments }}</td>
-  {% include "eco/fragments/_object_row.html" with model="cause" %}
+  {% include "common/fragments/_object_row.html" with app="eco" model="cause" %}
 </tr>
-{% if action == 'create' or action == 'clone' %}
-  <tr class="hidden eco-edit-row cause-edit-row" hx-target="this"></tr>
-{% endif %}

hawc/apps/eco/templates/eco/fragments/effect_row.html

@@ -1,12 +1,9 @@
-<tr hx-target="this" hx-swap="outerHTML" class="eco-obj-row {{action}}" id="effect-{{object.id}}">
+<tr hx-target="this" hx-swap="outerHTML" class="eco-obj-row {{action}} effect-{{object.id}}">
   <td>{{object.name}}</td>
   <td>{{object.term.name}}</td>
   <td>{{object.species }}</td>
   <td>{{object.units }}</td>
   <td>{{object.as_reported }}</td>
   <td>{{object.comments }}</td>
-  {% include "eco/fragments/_object_row.html" with model="effect" %}
+  {% include "common/fragments/_object_row.html" with app="eco" model="effect" %}
 </tr>
-{% if action == 'create' or action == 'clone' %}
-  <tr class="hidden eco-edit-row effect-edit-row" hx-target="this"></tr>
-{% endif %}

hawc/apps/eco/templates/eco/fragments/result_row.html

@@ -1,4 +1,4 @@
-<tr hx-target="this" hx-swap="outerHTML" class="eco-obj-row {{action}}" id="result-{{object.id}}">
+<tr hx-target="this" hx-swap="outerHTML" class="eco-obj-row {{action}} result-{{object.id}} cause-{{object.cause.id}} effect-{{object.effect.id}}">
   <td>{{object.name}}</td>
   <td>{{object.cause.name}}</td>
   <td>{{object.effect.name }}</td>
@@ -10,8 +10,5 @@
     {% endfor %}
   </td>
   <td>{{object.derived_value }}</td>
-  {% include "eco/fragments/_object_row.html" with model="result" %}
+  {% include "common/fragments/_object_row.html" with app="eco" model="result" %}
 </tr>
-{% if action == 'create' or action == 'clone' %}
-  <tr class="hidden eco-edit-row result-edit-row" hx-target="this"></tr>
-{% endif %}