Switch user list table to be in accordion dropdowns

Once we start pulling in all user accounts and associating them with a ResearchCenter or PartnerGroup, the tables will get long. Move them into accordion dropdowns like the uploaders and data access lists.
UW-GAC · Jul 9, 2024 · 7516334 · 7516334
1 parent 328d005
commit 7516334
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 6 deletions.
diff --git a/gregor_django/templates/gregor_anvil/partnergroup_detail.html b/gregor_django/templates/gregor_anvil/partnergroup_detail.html
@@ -70,7 +70,26 @@ <h2 class="accordion-header" id="headingWorkspacesOne">
 </div>
 
 
-<h3>Partner Group Users</h3>
-  {% render_table tables.0 %}
-  <p class='alert alert-warning'>Partner Group user list only contains those group users who have created an account on this website.</p>
+<div class="my-3">
+  <div class="accordion" id="accordionPartnerGroupUsers">
+    <div class="accordion-item">
+      <h2 class="accordion-header" id="headingPartnerGroupUsersOne">
+        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePartnerGroupUsersOne" aria-expanded="false" aria-controls="collapsePartnerGroupUsersOne">
+          <span class="fa-solid fa-cloud-arrow-up mx-2"></span>
+          Partner Group members
+          <span class="badge mx-2 bg-secondary pill"> {{ tables.0.rows|length }}</span>
+        </button>
+      </h2>
+      <div id="collapsePartnerGroupUsersOne" class="accordion-collapse collapse" aria-labelledby="headingPartnerGroupUsersOne" data-bs-parent="#accordionPartnerGroupUsers">
+        <div class="accordion-body">
+          <p>
+            This table shows users who are associated with this Partner Group.
+          </p>
+        {% render_table tables.0 %}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
 {% endblock after_panel %}
diff --git a/gregor_django/templates/gregor_anvil/researchcenter_detail.html b/gregor_django/templates/gregor_anvil/researchcenter_detail.html
@@ -69,7 +69,26 @@ <h2 class="accordion-header" id="headingWorkspacesOne">
   </div>
 </div>
 
-<h3>Research Center Users</h3>
-  {% render_table tables.0 %}
-  <p class='alert alert-warning'>Research center user list only contains those site users who have created an account on this website.</p>
+<div class="my-3">
+  <div class="accordion" id="accordionResearchCenterUsers">
+    <div class="accordion-item">
+      <h2 class="accordion-header" id="headingResearchCenterUsersOne">
+        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseResearchCenterUsersOne" aria-expanded="false" aria-controls="collapseResearchCenterUsersOne">
+          <span class="fa-solid fa-cloud-arrow-up mx-2"></span>
+          Partner Group members
+          <span class="badge mx-2 bg-secondary pill"> {{ tables.0.rows|length }}</span>
+        </button>
+      </h2>
+      <div id="collapseResearchCenterUsersOne" class="accordion-collapse collapse" aria-labelledby="headingResearchCenterUsersOne" data-bs-parent="#accordionResearchCenterUsers">
+        <div class="accordion-body">
+          <p>
+            This table shows users who are associated with this Partner Group.
+          </p>
+        {% render_table tables.0 %}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
 {% endblock after_panel %}