Merge pull request #5569 from nyaruka/base_list_template_2

Tweak base list template and convert invitation list page to use it too
nyaruka · Oct 23, 2024 · 671a18e · 671a18e
2 parents 5f87874 + 409b3c6
commit 671a18e
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 60 deletions.
diff --git a/templates/flows/flow_list.html b/templates/flows/flow_list.html
@@ -1,7 +1,7 @@
 {% extends "orgs/base/list.html" %}
 {% load smartmin temba i18n humanize %}
 
-{% block pre-table %}
+{% block modaxes %}
   <temba-modax header="{% trans "Export Results" %}" id="export-results">
   </temba-modax>
   <temba-modax header="{% trans "New Label" %}"
@@ -10,7 +10,7 @@
                -temba-submitted="handleCreateLabelModalSubmitted"
                id="create-label-modal">
   </temba-modax>
-{% endblock pre-table %}
+{% endblock modaxes %}
 {% block table %}
   <table class="relative list object-list lined selectable scrolled">
     {% if object_list %}

diff --git a/templates/globals/global_list.html b/templates/globals/global_list.html
@@ -1,13 +1,15 @@
 {% extends "orgs/base/list.html" %}
 {% load smartmin temba i18n humanize %}
 
-{% block pre-table %}
+{% block modaxes %}
   <temba-modax header="{{ _("Update Global") |escapejs }}" -temba-redirected="refreshGlobals" id="update-global">
   </temba-modax>
   <temba-modax header="{{ _("Delete Global") |escapejs }}" -temba-redirected="refreshGlobals" id="delete-global">
   </temba-modax>
   <temba-modax header="{{ _("Usages") |escapejs }}" id="usages-global">
   </temba-modax>
+{% endblock modaxes %}
+{% block pre-table %}
   <div class="mb-4">
     {% blocktrans trimmed %}
       Globals are variables you can use across all of your flows but

diff --git a/templates/orgs/base/list.html b/templates/orgs/base/list.html
@@ -2,16 +2,20 @@
 {% load i18n %}
 
 {% block content %}
+  {% block modaxes %}
+  {% endblock modaxes %}
   {% block pre-table %}
   {% endblock pre-table %}
   {% if view.search_fields %}
-    <form method="get" action="{{ request.path }}" id="search-form">
-      <temba-textinput placeholder="{% trans "Search" %}" name="search" value="{{ search }}" class="w-full">
-      </temba-textinput>
-      <input type="submit" class="hide">
-    </form>
+    {% block search-form %}
+      <form method="get" action="{{ request.path }}" id="search-form" class="mb-4">
+        <temba-textinput placeholder="{% trans "Search" %}" name="search" value="{{ search }}" class="w-full">
+        </temba-textinput>
+        <input type="submit" class="hide">
+      </form>
+    {% endblock search-form %}
   {% endif %}
-  <div class="mt-4 shadow rounded-lg rounded-bl-none rounded-br-none bg-white">{% include "includes/short_pagination.html" %}</div>
+  <div class="shadow rounded-lg rounded-bl-none rounded-br-none bg-white">{% include "includes/short_pagination.html" %}</div>
   <div class="flex-grow overflow-y-auto shadow">
     {% block table %}
     {% endblock table %}

diff --git a/templates/orgs/invitation_list.html b/templates/orgs/invitation_list.html
@@ -1,51 +1,50 @@
-{% extends "smartmin/list.html" %}
+{% extends "orgs/base/list.html" %}
 {% load smartmin temba i18n %}
 
-{% block content %}
+{% block modaxes %}
+  <temba-modax header="{{ _("Cancel Invitation") |escapejs }}" id="delete-invitation">
+  </temba-modax>
+{% endblock modaxes %}
+{% block pre-table %}
   <div class="mb-4">
     {% blocktrans trimmed with days=validity_days %}
       These are pending invitations to join your workspace. Invitations expire after {{ days }} days.
     {% endblocktrans %}
   </div>
-  {% block pre-table %}
-    <temba-modax header="{{ _("Cancel Invitation") |escapejs }}" id="delete-invitation">
-    </temba-modax>
-  {% endblock pre-table %}
-  <div class="mt-4 shadow rounded-lg rounded-bl-none rounded-br-none bg-white">{% include "includes/short_pagination.html" %}</div>
-  <div class="flex-grow overflow-y-auto shadow">
-    <table class="list lined scrolled">
-      <thead>
+{% endblock pre-table %}
+{% block table %}
+  <table class="list lined scrolled">
+    <thead>
+      <tr>
+        <th>{% trans "Email" %}</th>
+        <th>{% trans "Role" %}</th>
+        <th>{% trans "Sent On" %}</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for obj in object_list %}
         <tr>
-          <th>{% trans "Email" %}</th>
-          <th>{% trans "Role" %}</th>
-          <th>{% trans "Sent On" %}</th>
-          <th></th>
+          <td>{{ obj.email }}</td>
+          <td>{{ obj.role.display }}</td>
+          <td>{{ obj.created_on|day }}</td>
+          <td class="w-10">
+            <div style="visibility:hidden"
+                 onclick="event.stopPropagation(); showDeleteInvitationModal({{ obj.id }});"
+                 class="pl-2 pt-1 delete-link linked text-gray-400">
+              <temba-icon name="delete_small">
+              </temba-icon>
+            </div>
+          </td>
         </tr>
-      </thead>
-      <tbody>
-        {% for obj in object_list %}
-          <tr>
-            <td>{{ obj.email }}</td>
-            <td>{{ obj.role.display }}</td>
-            <td>{{ obj.created_on|day }}</td>
-            <td class="w-10">
-              <div style="visibility:hidden"
-                   onclick="event.stopPropagation(); showDeleteInvitationModal({{ obj.id }});"
-                   class="pl-2 pt-1 delete-link linked text-gray-400">
-                <temba-icon name="delete_small">
-                </temba-icon>
-              </div>
-            </td>
-          </tr>
-        {% empty %}
-          <tr class="empty_list">
-            <td colspan="99" class="text-center">{% trans "No invitations" %}</td>
-          </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-  </div>
-{% endblock content %}
+      {% empty %}
+        <tr class="empty_list">
+          <td colspan="99" class="text-center">{% trans "No invitations" %}</td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+{% endblock table %}
 {% block extra-script %}
   {{ block.super }}
   <script>
@@ -56,11 +55,3 @@
     }
   </script>
 {% endblock extra-script %}
-{% block extra-style %}
-  {{ block.super }}
-  <style type="text/css">
-    tr:hover .delete-link {
-      visibility: visible !important;
-    }
-  </style>
-{% endblock extra-style %}
diff --git a/templates/orgs/org_list.html b/templates/orgs/org_list.html
@@ -1,12 +1,12 @@
 {% extends "orgs/base/list.html" %}
 {% load i18n temba smartmin humanize %}
 
-{% block pre-table %}
+{% block modaxes %}
   <temba-modax header="{{ _("Update Workspace") |escapejs }}" id="update-child">
   </temba-modax>
   <temba-modax header="{{ _("Delete Workspace") |escapejs }}" id="delete-child">
   </temba-modax>
-{% endblock pre-table %}
+{% endblock modaxes %}
 {% block table %}
   <table class="list lined scrolled">
     <thead>

diff --git a/templates/orgs/user_list.html b/templates/orgs/user_list.html
@@ -1,11 +1,13 @@
 {% extends "orgs/base/list.html" %}
 {% load smartmin temba i18n %}
 
-{% block pre-table %}
+{% block modaxes %}
   <temba-modax header="{{ _("Update User") |escapejs }}" -temba-redirected="refreshUsers" id="update-user">
   </temba-modax>
   <temba-modax header="{{ _("Remove User") |escapejs }}" -temba-redirected="refreshUsers" id="delete-user">
   </temba-modax>
+{% endblock modaxes %}
+{% block pre-table %}
   {% if has_viewers %}
     <temba-alert level="warning" class="mb-4">
       {% blocktrans trimmed with cutoff="2024-12-31"|day %}

diff --git a/templates/tickets/shortcut_list.html b/templates/tickets/shortcut_list.html
@@ -1,11 +1,13 @@
 {% extends "orgs/base/list.html" %}
 {% load smartmin temba i18n %}
 
-{% block pre-table %}
+{% block modaxes %}
   <temba-modax header="{{ _("Update Shortcut") |escapejs }}" id="update-shortcut">
   </temba-modax>
   <temba-modax header="{{ _("Delete Shortcut") |escapejs }}" id="delete-shortcut">
   </temba-modax>
+{% endblock modaxes %}
+{% block pre-table %}
   <div class="mb-4">
     {% blocktrans trimmed %}
       These are canned responses that agents can use to quickly reply to tickets.