From dec6115faaa9ecbf0021e1b3827e356d04c43474 Mon Sep 17 00:00:00 2001 From: Kate Lynch Date: Tue, 10 Dec 2024 10:23:17 -0500 Subject: [PATCH] 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 Co-authored-by: Jaymee Hyppolite * Updating status styles * Added netid badge styling * Updated tests, adjusted javascript more and less link --------- Co-authored-by: Hector Correa Co-authored-by: Jaymee Hyppolite --- app/assets/images/status_pending.svg | 15 +++ app/assets/stylesheets/_dashboard.scss | 2 +- app/assets/stylesheets/_forms.scss | 6 -- app/assets/stylesheets/_projects.scss | 94 +++++++++++++++++++ app/assets/stylesheets/_styles_preview.scss | 2 +- app/assets/stylesheets/_typography.scss | 2 +- app/assets/stylesheets/_variables.scss | 3 + app/assets/stylesheets/application.scss | 17 ++++ app/controllers/projects_controller.rb | 2 + app/javascript/entrypoints/application.js | 2 + app/javascript/entrypoints/showMoreLess.js | 23 +++++ app/presenters/project_show_presenter.rb | 16 ++++ .../_project_details_heading.html.erb | 71 ++++++++++++++ app/views/projects/contents.html.erb | 4 +- app/views/projects/show.html.erb | 19 +--- app/views/welcome/styles_preview.html.erb | 5 +- spec/system/project_show_spec.rb | 12 +-- spec/system/project_spec.rb | 6 +- 18 files changed, 264 insertions(+), 37 deletions(-) create mode 100644 app/assets/images/status_pending.svg create mode 100644 app/assets/stylesheets/_projects.scss create mode 100644 app/javascript/entrypoints/showMoreLess.js create mode 100644 app/views/projects/_project_details_heading.html.erb diff --git a/app/assets/images/status_pending.svg b/app/assets/images/status_pending.svg new file mode 100644 index 000000000..5e212d797 --- /dev/null +++ b/app/assets/images/status_pending.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/app/assets/stylesheets/_dashboard.scss b/app/assets/stylesheets/_dashboard.scss index d6c22ea3f..4db485357 100644 --- 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 index 1d5723fcb..53c79a0c3 100644 --- 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 new file mode 100644 index 000000000..d394efecd --- /dev/null +++ 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 index e75765815..b58725e22 100644 --- 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 index cc8bdfd9e..ef45efdc0 100644 --- a/app/assets/stylesheets/_typography.scss +++ b/app/assets/stylesheets/_typography.scss @@ -24,4 +24,4 @@ h5 { h6 { font-size: 1rem; -} +} \ No newline at end of file diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss index c485f84e5..d7ea178b5 100644 --- 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 index 610592730..23e52aae3 100644 --- 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 index 291f94f05..3b9500819 100644 --- 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 index ba7914389..a9b61a6ab 100644 --- a/app/javascript/entrypoints/application.js +++ b/app/javascript/entrypoints/application.js @@ -20,6 +20,7 @@ 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; @@ -27,6 +28,7 @@ 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 new file mode 100644 index 000000000..4175047f0 --- /dev/null +++ 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 index a6e7b702b..db4ce2364 100644 --- 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 new file mode 100644 index 000000000..9df2bcf42 --- /dev/null +++ b/app/views/projects/_project_details_heading.html.erb @@ -0,0 +1,71 @@ +
+ +
+
+

<%= @project.title %>

+
+
+
+ <%= @project.status %> +
+
+
+ + +
+ +
+
+ <%= @project.description %> +
+ more... +
+ +
+
+
+
    +
  • Date Created: <%= @project.created %>
    • +
  • Last updated: <%= @project.updated %>
    • +
+
+
+
+ + +
+
+
+
    +
  • Data Sponsor: <%= @project.data_sponsor %>
    • +
  • Data Manager: <%= @project.data_manager %>
    • +
+
+
+
+
+ + diff --git a/app/views/projects/contents.html.erb b/app/views/projects/contents.html.erb index 4784aa783..4e0750eb7 100644 --- a/app/views/projects/contents.html.erb +++ b/app/views/projects/contents.html.erb @@ -1,5 +1,7 @@ +<%= render partial: "project_details_heading" %> + -

Project Contents

+

Contents Summary

diff --git a/app/views/projects/show.html.erb b/app/views/projects/show.html.erb index 0ecc2d63c..3c0850446 100644 --- a/app/views/projects/show.html.erb +++ b/app/views/projects/show.html.erb @@ -1,27 +1,12 @@ - -

-Project Details: -<%= @project.title %> -

+<%= render partial: "project_details_heading" %> + <% unless @project.in_mediaflux? %>
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.
<% end %> -<% alert_class = if @project.pending? - "alert-warning" - else - "alert-success" - end %> - - -

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 index 2919fc9f7..3b931a820 100644 --- a/app/views/welcome/styles_preview.html.erb +++ b/app/views/welcome/styles_preview.html.erb @@ -21,8 +21,11 @@
White
Green Dark
Red Dark
-
Yello
+
Red Darker
+
Yellow
+
Yellow Dark
Blue
+
Blue Dark
Light Blue
Status Success
Status Error
diff --git a/spec/system/project_show_spec.rb b/spec/system/project_show_spec.rb index 36629294f..6b3fdc21e 100644 --- a/spec/system/project_show_spec.rb +++ b/spec/system/project_show_spec.rb @@ -51,7 +51,7 @@ expect(page).not_to have_content(project_in_mediaflux.project_directory) expect(page).not_to have_content(pending_text) - expect(page).to have_css ".alert-success" + expect(page).to have_css ".approved" expect(page).to have_selector(:link_or_button, "Edit") # button next to role and description heading expect(page).to have_selector(:link_or_button, "Review Contents") expect(page).to have_selector(:link_or_button, "Withdraw Project Request") @@ -86,7 +86,7 @@ visit "/projects/#{project_not_in_mediaflux.id}" expect(page).to have_content(project_not_in_mediaflux.title) expect(page).to have_content(pending_text) - expect(page).to have_css ".alert-warning" + expect(page).to have_css ".pending" expect(page).not_to have_link("Edit") expect(page).to have_selector(:link_or_button, "Review Contents") click_on("Return to Dashboard") @@ -101,7 +101,7 @@ visit "/projects/#{project_not_in_mediaflux.id}" expect(page).to have_content(project_not_in_mediaflux.title) expect(page).to have_content(pending_text) - expect(page).to have_css ".alert-warning" + expect(page).to have_css ".pending" expect(page).not_to have_link("Edit") expect(page).to have_selector(:link_or_button, "Approve Project") expect(page).to have_selector(:link_or_button, "Deny Project") @@ -141,7 +141,7 @@ submission_event sign_in sponsor_user visit "/projects/#{project.id}" - expect(page).to have_content "Status\n#{::Project::PENDING_STATUS}" + expect(page).to have_css ".pending" end end @@ -168,7 +168,7 @@ visit "/projects/#{project.id}" expect(page).to have_selector(:link_or_button, "Review Contents") click_on("Review Contents") - expect(page).to have_content("Project Contents") + expect(page).to have_content("Contents Summary") expect(page).to have_content("File Count") expect(find(:css, "#file_count").text).to eq "16" @@ -177,7 +177,7 @@ click_on("Return to Dashboard") expect(page).to have_content("Welcome, #{sponsor_user.given_name}!") find(:xpath, "//h2[text()='#{project.title}']").click - expect(page).to have_content("Project Details: #{project.title}") + expect(page).to have_content(project.title) end it "displays the caveat message" do diff --git a/spec/system/project_spec.rb b/spec/system/project_spec.rb index 4a0977975..089be0a90 100644 --- a/spec/system/project_spec.rb +++ b/spec/system/project_spec.rb @@ -97,7 +97,7 @@ sign_in sponsor_user visit "/projects/#{project_not_in_mediaflux.id}/edit" - expect(page).to have_content("Project Details: #{project_not_in_mediaflux.title}") + expect(page).to have_content(project_not_in_mediaflux.title) expect(page).to have_content("Pending projects can not be edited.") end end @@ -116,7 +116,7 @@ # project_in_mediaflux.save! visit "/projects/#{project_in_mediaflux.id}/edit" - expect(page).to have_content("Project Details: #{project_not_in_mediaflux.title}") + expect(page).to have_content(project_not_in_mediaflux.title) expect(page).to have_content("Only data sponsors and data managers can revise this project.") end @@ -159,7 +159,7 @@ it "redirects the user back to the project show page" do click_on "Cancel" - expect(page).to have_content "Project Details: #{project_in_mediaflux.title}" + expect(page).to have_content(project_in_mediaflux.title) end end end