From 7516334e07c950f85f1b28259850629397df09d4 Mon Sep 17 00:00:00 2001
From: Adrienne Stilp <amstilp@uw.edu>
Date: Tue, 9 Jul 2024 15:28:24 -0700
Subject: [PATCH] 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.
---
 .../gregor_anvil/partnergroup_detail.html     | 25 ++++++++++++++++---
 .../gregor_anvil/researchcenter_detail.html   | 25 ++++++++++++++++---
 2 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/gregor_django/templates/gregor_anvil/partnergroup_detail.html b/gregor_django/templates/gregor_anvil/partnergroup_detail.html
index b1c3ebea..a58de35e 100644
--- 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
index b53fed26..4b8bb1ef 100644
--- 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 %}