Project page header (#1098)

* Fleshing out project show and contents page headers * Moved to partial * Restructuring HTML * Updated tests * Rubocop fixes * WIP show hide working but needs to be refactored * Moving Javascript to entrypoints * Execute the function defined in application.js * Addressed eslint errors Co-authored-by: Hector Correa <hectorcorrea@users.noreply.github.com> Co-authored-by: Jaymee Hyppolite <jaymeeh@users.noreply.github.com> * Updating status styles * Added netid badge styling * Updated tests, adjusted javascript more and less link --------- Co-authored-by: Hector Correa <hectorcorrea@users.noreply.github.com> Co-authored-by: Jaymee Hyppolite <jaymeeh@users.noreply.github.com>
pulibrary · Dec 10, 2024 · dec6115 · dec6115
1 parent 5297d89
commit dec6115
Show file tree

Hide file tree

Showing 18 changed files with 264 additions and 37 deletions.
diff --git a/app/assets/images/status_pending.svg b/app/assets/images/status_pending.svg
diff --git a/app/assets/stylesheets/_dashboard.scss b/app/assets/stylesheets/_dashboard.scss
@@ -127,7 +127,7 @@
     }
 
     .pending { 
-        background: url("status_active.svg") no-repeat;
+        background: url("status_pending.svg") no-repeat;
     }
 
     .approved {

diff --git a/app/assets/stylesheets/_forms.scss b/app/assets/stylesheets/_forms.scss
@@ -3,12 +3,6 @@
 @import "bootstrap";
 
 #project-form {
-  .heading-decoration {
-    background-color: $princeton-orange;
-    width: 100px;
-    height: 8px;
-    margin-bottom: 12px;
-  }
 
   .row {
     padding-bottom: 40px;

diff --git a/app/assets/stylesheets/_projects.scss b/app/assets/stylesheets/_projects.scss
@@ -0,0 +1,94 @@
+@import "variables";
+@import "typography";
+@import "bootstrap";
+
+#project-details-heading {
+    margin-bottom: 1.5em;
+
+    .status {
+        float: right;
+        border-radius: 0.5em;
+        padding: 0.5em 0.75em 0.5em 0.5em;
+        text-transform: capitalize;
+        font-weight: bold;
+    }
+
+    .status::before {
+        content: "";
+        width: 20px;
+        height: 20px;
+    }
+
+    .active { 
+        background: url("status_active.svg") no-repeat;
+        background-color: $status-info;
+        background-position: left;
+        padding-left: 20px;
+        color: $blue-dark;
+    }
+
+    .pending { 
+        background: url("status_pending.svg") no-repeat;
+        background-color: $status-warning;
+        background-position: left;
+        padding-left: 20px;
+        color: $yellow-dark;
+
+    }
+
+    .approved {
+        background: url("status_approved.svg") no-repeat;
+        background-color: $status-success;
+        background-position: left;
+        padding-left: 20px;
+        color: $green-dark;
+    }
+
+    .rejected {
+        background: url("status_rejected.svg") no-repeat;
+        background-color: $status-error;
+        background-position: left;
+        padding-left: 20px;
+        color: $red-darker;
+    }
+
+    #project-description {
+        color: $black;
+        font-family: "Libre Franklin";
+        font-size: 1em;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 1.5em;
+    }
+
+    .truncate {
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2; 
+    }
+
+    a#show-more-less-link {
+        color: $gray-60;
+    }
+
+    .label {
+      font-weight: bold;
+    } 
+
+    .date-and-data-info ul {
+        padding: 0;
+    }
+
+    .date-and-data-info li {
+        float: left;
+        list-style-type: none;
+        line-height: 1em;
+    }
+
+    .date-and-data-info li:first-child:after { 
+        content: "|"; 
+        padding: 0 .5em; 
+    }
+
+}
diff --git a/app/assets/stylesheets/_styles_preview.scss b/app/assets/stylesheets/_styles_preview.scss
@@ -95,7 +95,7 @@
 }
 
 .status-error {
-    background-color: $status-warning;
+    background-color: $status-error;
     color: #000000;
 }
 

diff --git a/app/assets/stylesheets/_typography.scss b/app/assets/stylesheets/_typography.scss
@@ -24,4 +24,4 @@ h5 {
 
 h6 {
     font-size: 1rem;
-}
+}
diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss
@@ -17,8 +17,11 @@ $black: #000000;
 
 $green-dark: #006450;
 $red-dark: #B00002;
+$red-darker: #580405;
 $yellow: #FBC129;
+$yellow-dark: #56410B;
 $blue: #0B7097;
+$blue-dark: #013A50;
 $light-blue: #BED8E2;
 
 $status-success: #DDEDE6;

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -22,6 +22,7 @@
 @import "footer";
 @import "forms";
 @import "header";
+@import "projects";
 @import "settings";
 @import "styles_preview";
 @import "typography";
@@ -41,10 +42,26 @@ body {
     }
 }
 
+.heading-decoration {
+  background-color: $princeton-orange;
+  width: 100px;
+  height: 8px;
+  margin-bottom: 12px;
+}
+
 .hidden-element {
   display: none;
 }
 
+.netid-large {
+  border-radius: 0.625em;
+  background-color: $gray-10;
+  padding: 0rem 0.375em;
+  justify-content: center;
+  align-items: center; 
+}
+
+
 /* These are the styles used by the jQuery autocomplete plug-in */
 .autocomplete-suggestions {
   border: 1px solid #999;

diff --git a/app/controllers/projects_controller.rb b/app/controllers/projects_controller.rb
@@ -184,6 +184,8 @@ def contents
     @file_list = project.file_list(session_id: current_user.mediaflux_session, size: 100)
     @files = @file_list[:files]
     @files.sort_by!(&:path)
+    @project = ProjectShowPresenter.new(project)
+
   end
 
   def project_job_service

diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js
@@ -20,13 +20,15 @@ import { displayMediafluxVersion } from './mediafluxVersion';
 import { showCreateScript } from './atermScripts';
 import { dashStyle, dashTab } from './dashboardTabs';
 import { setupTable } from './pulDataTables';
+import { showMoreLess } from './showMoreLess';
 
 window.bootstrap = bootstrap;
 window.displayMediafluxVersion = displayMediafluxVersion;
 window.showCreateScript = showCreateScript;
 window.dashStyle = dashStyle;
 window.dashTab = dashTab;
 window.setupTable = setupTable;
+window.showMoreLess = showMoreLess;
 
 function initDataUsers() {
   function counterIncrement(counterId) {

diff --git a/app/javascript/entrypoints/showMoreLess.js b/app/javascript/entrypoints/showMoreLess.js
@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/prefer-default-export
+export const showMoreLess = {
+// eslint-disable-next-line object-shorthand, func-names
+  showMore: function (element, excerpt) {
+    const textElement = element;
+
+    textElement.addEventListener('click', (event) => {
+      const linkText = event.target.textContent.toLowerCase();
+      event.preventDefault();
+
+      if (linkText === 'more...') {
+        textElement.textContent = 'less...';
+        excerpt.classList.remove('truncate');
+      } else {
+        textElement.textContent = 'more...';
+        excerpt.classList.add('truncate');
+      }
+    });
+  },
+};
+/*
+Based on https://dev.to/justalever/how-to-code-a-show-more--show-less-toggle-with-javascript-3c7m
+*/
diff --git a/app/presenters/project_show_presenter.rb b/app/presenters/project_show_presenter.rb
@@ -10,6 +10,22 @@ def initialize(project)
     @project_metadata = @project.metadata_model
   end
 
+  def created
+    @project.created_at.strftime("%b %e, %Y %l:%M %p")
+  end
+
+  def updated
+    @project.updated_at.strftime("%b %e, %Y %l:%M %p")
+  end
+
+  def data_sponsor
+    User.find_by(uid: @project.metadata["data_sponsor"]).uid
+  end
+
+  def data_manager
+    User.find_by(uid: @project.metadata["data_manager"]).uid
+  end
+
   # used to hide the project root that is not visible to the end user
   def project_directory
     project.project_directory.gsub(Mediaflux::Connection.hidden_root, "")

diff --git a/app/views/projects/_project_details_heading.html.erb b/app/views/projects/_project_details_heading.html.erb
@@ -0,0 +1,71 @@
+<div id="project-details-heading">
+
+  <div class="row">
+  <div class="col-12 col-md-8"> 
+  <h1><%= @project.title %></h1>
+  </div>
+  <div class="col-6 col-md-4">  
+    <div class="status <%= @project.status.downcase %>">
+      <%= @project.status %>
+    </div>
+  </div>
+</div>
+
+
+<div class="heading-decoration"></div>
+
+  <div id="project-description">
+    <div id="description-text" class="truncate">
+      <%= @project.description %>
+    </div>
+    <a id="show-more-less-link" class="show-more" href="#"><span>more...</span></a>
+</div>
+
+<div class="row">
+  <div class="col-12">
+    <div class="date-and-data-info">
+      <ul> 
+        <li><span class="label">Date Created:</span> <%= @project.created %></li>
+        <li><span class="label">Last updated:</span> <%= @project.updated %></li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+
+<div class="row">
+  <div class="col-12">
+    <div class="date-and-data-info">
+      <ul> 
+        <li><span class="label">Data Sponsor:</span> <span class="netid-large"><%= @project.data_sponsor %></span></li>
+        <li><span class="label">Data Manager:</span> <span class="netid-large"><%= @project.data_manager %></span></li>
+      </ul>
+    </div>
+  </div>
+</div>
+</div>
+
+<script type="module">
+
+var $element = $('#description-text');
+var $c = $element
+           .clone()
+           .css({display: 'inline', width: 'auto', visibility: 'hidden'})
+           .appendTo('body');
+if( $c.width() > $element.width() ) { 
+const ExcerptWidget = {
+ showMore: function(showMoreLinksTarget, excerptTarget) {
+  const showMoreLinks = document.querySelectorAll(showMoreLinksTarget);
+
+   showMoreLinks.forEach(function(link) {
+      const excerpt = document.querySelector(excerptTarget);
+      showMoreLess.showMore(link, excerpt);
+    });
+   }
+  };
+  ExcerptWidget.showMore('.show-more', '#description-text');
+} else {
+  document.getElementById('show-more-less-link').style.display = 'none';
+}
+$c.remove();
+</script>
diff --git a/app/views/projects/contents.html.erb b/app/views/projects/contents.html.erb
@@ -1,5 +1,7 @@
+<%= render partial: "project_details_heading" %>
+
 <content id= "content">
-  <h1>Project Contents</h1>
+
   <h2>Contents Summary</h2>
   <section class="container-fluid px-1 m-1 project-contents__summary">
     <dl>

diff --git a/app/views/projects/show.html.erb b/app/views/projects/show.html.erb
@@ -1,27 +1,12 @@
-<show id="show">
-<h1>
-Project Details:
-<%= @project.title %>
-</h1>
+<%= render partial: "project_details_heading" %>
 
+<show id="show">
 <% unless @project.in_mediaflux? %>
   <div class="pending-project">
     Your new project request is in the queue. Please allow 5 business days for our team to review your needs and set everything up. For assistance, please contact tigerdata@princeton.edu.
   </div>
 <% end %>
 
-<% alert_class = if @project.pending?
-                   "alert-warning"
-                 else
-                   "alert-success"
-                 end %>
-
-<div class="alert <%= alert_class %>" role="alert">
-  <dl>
-  <dt>Status</dt> <dd><%= @project.status %></dd>
-  </dl>
-</div>
-
 <div class="details">
   <h2>Roles
     <% if @project_eligible_to_edit && current_user.eligible_sponsor? %>

diff --git a/app/views/welcome/styles_preview.html.erb b/app/views/welcome/styles_preview.html.erb
@@ -21,8 +21,11 @@
    <div class="white">White</div>
    <div class="green-dark">Green Dark</div>
    <div class="red-dark">Red Dark</div>
-   <div class="yellow">Yello</div>
+   <div class="red-darker">Red Darker</div>
+   <div class="yellow">Yellow</div>
+   <div class="yellow-dark">Yellow Dark</div>
    <div class="blue">Blue</div>
+   <div class="blue-dark">Blue Dark</div>
    <div class="light-blue">Light Blue</div>
    <div class="status-success">Status Success</div>
    <div class="status-error">Status Error</div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,4 +24,4 @@ h5 { @@
     h6 {
         font-size: 1rem;
-    }
+    }