From dde45740072d87835f4f846e49ce5ea794c65a6c Mon Sep 17 00:00:00 2001
From: Jaymee Hyppolite <54775395+JaymeeH@users.noreply.github.com>
Date: Thu, 11 Apr 2024 12:31:51 -0400
Subject: [PATCH] refining sysadmin dashboard (#632)

* refining sysadmin dashboard
only displaying the sysadmin dashboard, and combining the two separate divs into one

* separating javascript into the application js, and the styling into the settings scss
fixing the collapsing mechanism in the show more button
additional styling

* javascript cleanup

* updating sysadmin tests

* allowing superusers to continue to see the project dashboard

* updating superuser specs

* js lint
---
 app/assets/stylesheets/_settings.scss     | 32 +++++++++++---
 app/javascript/entrypoints/application.js | 17 ++++++++
 app/views/welcome/index.html.erb          | 53 +++++++++++++----------
 3 files changed, 72 insertions(+), 30 deletions(-)

diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss
index 77f4d726..ed2203cc 100644
--- a/app/assets/stylesheets/_settings.scss
+++ b/app/assets/stylesheets/_settings.scss
@@ -27,12 +27,37 @@
     text-decoration-thickness: 3px;
   }
 
+  h4 {
+    margin-left: 0.2em;
+    text-decoration: underline;
+    text-decoration-thickness: 3px;
+  }
+
   .project-list {
     list-style-type: none;
     a {
       color: black;
     }
   }
+  .sysadmin-list {
+    list-style-type: none;
+    margin-left: 1.5em;
+    a {
+      color: black;
+    }
+  }
+
+  .visible-row {
+    visibility: unset;
+  }
+
+  .invisible-row {
+    visibility: collapse;
+  }
+
+  #show-more-sysadmin{
+    margin-top: 0.5em;
+  }
 }
 
 #dashboard-projects {
@@ -56,13 +81,6 @@
   min-width: 30em;
 }
 
-#dashboard-approved{
-  @include dashboard-component;
-  margin-top: 1em;
-  min-width: 30em;
-}
-
-
 #show{
   .pending-project {
     margin-left: 5em;
diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js
index ca18c2b2..4d46df90 100644
--- a/app/javascript/entrypoints/application.js
+++ b/app/javascript/entrypoints/application.js
@@ -162,6 +162,22 @@ function showMoreLessContent() {
   });
 }
 
+function showMoreLessSysAdmin() {
+  $('#show-more-sysadmin').on('click', (el) => {
+    const element = el;
+    if (el.target.textContent === 'Show More') {
+      $('.bottom-section').removeClass('invisible-row');
+      element.target.textContent = 'Show Less';
+    } else {
+      // Show less
+      $('.bottom-section').addClass('invisible-row');
+      element.target.textContent = 'Show More';
+      // Source: https://stackoverflow.com/a/10681265/446681
+    }
+    el.preventDefault();
+  });
+}
+
 function initPage() {
   $('#test-jquery').click((event) => {
     setTargetHtml(event, 'jQuery works!');
@@ -171,6 +187,7 @@ function initPage() {
   initDataUsers();
   initListContentsModal();
   showMoreLessContent();
+  showMoreLessSysAdmin();
 }
 
 window.addEventListener('load', () => initPage());
diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb
index 03f59aca..19cafcc7 100644
--- a/app/views/welcome/index.html.erb
+++ b/app/views/welcome/index.html.erb
@@ -4,6 +4,7 @@
 <% else %>
   <h1>Welcome, <%= current_user.given_name %>!</h1>
   <div style="display: inline-flex">
+    <% if !current_user.eligible_sysadmin? or current_user.superuser? %>
     <div id="dashboard-projects">
       <h1>My Projects</h1>
       <% if @sponsored_projects.size > 0 %>
@@ -58,33 +59,39 @@
         </ul>
       <% end %>
     </div>
+    <% end %>
   </div>
   <div style="display: inline-flex">
     <% if current_user.eligible_sysadmin?%>
       <div id="dashboard-pending">
-        <h2>Pending Projects</h2>
-        <% if !@pending_projects.empty? %>
-          <ul class="project-list">
-            <% @pending_projects.each do |project| %>
-              <li>
-                <%= link_to(project.title, project_approve_path(project)) %>
-              </li>
-            <% end %>
-          </ul>
-        <% end %>
-      </div>
-      <div id="dashboard-approved">
-        <h2>Approved Projects</h2>
-        <% if !@approved_projects.empty? %>
-          <ul class="project-list">
-            <% @approved_projects.each do |project| %>
-              <li>
-                <%= link_to(project.title, project) %> 
-              </li>
-            <% end %>
-          </ul>
-        <% end %>
+        <h1>Project Administration</h1>
+          <h4>Pending Projects</h4>
+          <% if !@pending_projects.empty? %>
+            <ul class="project-list">
+              <% @pending_projects.each do |project| %>
+                <li>
+                  <%= link_to(project.title, project_approve_path(project)) %>
+                </li>
+              <% end %>
+            </ul>
+          <% else %>
+            <p> (none) </p>
+          <% end %>
+          <h4>Recently Approved Projects</h4>
+          <% if !@approved_projects.empty? %>
+            <table class="sysadmin-list">
+              <% @approved_projects.each_with_index do |project, index| %>
+                <% @row_css = index < 5 ? "visible-row top-section" : "invisible-row bottom-section" %>
+                <tr class ="<%=@row_css%>">
+                  <td><%= link_to(project.title, project) %> </td>
+                </tr>
+              <% end %>
+            </table>
+            <button id="show-more-sysadmin" type="button" class="btn btn-dark">Show More</button>
+          <% else %>
+            <p> (none) </p>
+          <% end %>
       </div>
     <%end%>
   </div>
-  <% end %>
+  <% end %>
\ No newline at end of file