From 4f5a9afe22bfa639d226c7a1171180fb7731aa2c Mon Sep 17 00:00:00 2001 From: carolyncole <1599081+carolyncole@users.noreply.github.com> Date: Tue, 7 Jan 2025 10:52:08 -0500 Subject: [PATCH] adding a styled column to the datatables (#1160) This allows us to style the row as desired, but still includes datatables in the UI fixes #1147 --- app/assets/stylesheets/_dashboard.scss | 250 ++++++++++++------ app/javascript/entrypoints/pulDataTables.js | 6 + app/views/welcome/_project_list_view.html.erb | 48 ++-- app/views/welcome/_projects_listing.html.erb | 3 +- spec/system/project_details_spec.rb | 6 +- spec/system/project_roles_spec.rb | 2 +- spec/system/project_spec.rb | 6 +- 7 files changed, 218 insertions(+), 103 deletions(-) diff --git a/app/assets/stylesheets/_dashboard.scss b/app/assets/stylesheets/_dashboard.scss index 022be1ca..4ac6c00f 100644 --- a/app/assets/stylesheets/_dashboard.scss +++ b/app/assets/stylesheets/_dashboard.scss @@ -57,6 +57,179 @@ border: none; } + .sorting_disabled { + display: none; + } + + .project-row { + display: flex; + padding: 0.75rem; + align-items: center; + gap: 0.5rem; + align-self: stretch; + border-bottom: 1px solid var(--Neutral-Medium-Gray, #D0D0D0); + background: var(--Neutral-White, #FFF); + + .project-details { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.75rem; + flex: 1 0 0; + + .title { + display: flex; + align-items: center; + gap: 0.25rem; + display: -webkit-box; + max-width: 90%; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; + + a { + color: $gray-100; + } + + overflow: hidden; + text-overflow: ellipsis; + + /* Body S Bold */ + font-family: "Libre Franklin"; + font-size: 1rem; + font-style: normal; + font-weight: 600; + line-height: 1.5rem; /* 150% */ + } + + .summary { + display: flex; + padding: 0.25rem 0rem; + align-items: center; + gap: 1rem; + + .status { + display: flex; + align-items: center; + gap: 0.25rem; + } + + .status::before { + content: ""; + display: inline-flex; + width: 20px; + height: 20px; + vertical-align: top; + } + + .active { + background: url("status_active.svg") no-repeat; + } + + .pending { + background: url("status_pending.svg") no-repeat; + } + + .approved { + background: url("status_approved.svg") no-repeat; + } + + .rejected { + background: url("status_rejected.svg") no-repeat; + } + + .type { + text-transform: capitalize; + display: flex; + align-items: center; + gap: 0.25rem; + } + + .type::before { + content: ""; + display: inline-flex; + background: url("project_type.svg") no-repeat; + width: 20px; + height: 20px; + vertical-align: top; + } + + .role { + text-transform: capitalize; + display: flex; + align-items: center; + gap: 0.25rem; + } + + .role::before { + content: ""; + display: inline-flex; + background: url("user_role.svg") no-repeat; + width: 20px; + height: 20px; + vertical-align: top; + } + + .download { + display: flex; + align-items: center; + gap: 0.25rem; + } + + .download::before { + content: ""; + display: inline-flex; + background: url("last_download.svg") no-repeat; + width: 20px; + height: 20px; + vertical-align: top; + } + + .activity { + display: flex; + align-items: center; + gap: 0.25rem; + } + + .activity::before { + content: ""; + display: inline-flex; + background: url("last_activity.svg") no-repeat; + width: 20px; + height: 20px; + vertical-align: top; + } + + } + } + + .storage-details { + display: flex; + width: 9.375rem; + padding: 0.375rem 0rem; + justify-content: center; + align-items: center; + gap: 0.75rem; + + .storage { + + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.75rem; + + usage { + color: var(--Neutral-Dark-Gray, #717171); + + /* Body XXS */ + font-family: "Libre Franklin"; + font-size: 0.75rem; + font-style: normal; + font-weight: 400; + line-height: 1.125rem; /* 150% */ + } + } + } + } .project { display: flex; flex-wrap: wrap; @@ -106,82 +279,6 @@ } } - .last { - border-bottom: none; - } - - .status { - text-transform: capitalize; - } - - .status::before { - content: ""; - display: inline-flex; - width: 20px; - height: 20px; - vertical-align: top; - } - - .active { - background: url("status_active.svg") no-repeat; - } - - .pending { - background: url("status_pending.svg") no-repeat; - } - - .approved { - background: url("status_approved.svg") no-repeat; - } - - .rejected { - background: url("status_rejected.svg") no-repeat; - } - - .project-type { - text-transform: capitalize; - } - - .project-type::before { - content: ""; - display: inline-flex; - background: url("project_type.svg") no-repeat; - width: 20px; - height: 20px; - vertical-align: top; - } - - .user-role { - text-transform: capitalize; - } - - .user-role::before { - content: ""; - display: inline-flex; - background: url("user_role.svg") no-repeat; - width: 20px; - height: 20px; - vertical-align: top; - } - - .last-download::before { - content: ""; - display: inline-flex; - background: url("last_download.svg") no-repeat; - width: 20px; - height: 20px; - vertical-align: top; - } - - .last-activity::before { - content: ""; - display: inline-flex; - background: url("last_activity.svg") no-repeat; - width: 20px; - height: 20px; - vertical-align: top; - } - } #admin-listing { @@ -215,6 +312,7 @@ flex-direction: column; align-items: flex-start; gap: 1.25rem; + flex-grow: 1; } .sidebar { diff --git a/app/javascript/entrypoints/pulDataTables.js b/app/javascript/entrypoints/pulDataTables.js index 759e47d8..ee18015a 100644 --- a/app/javascript/entrypoints/pulDataTables.js +++ b/app/javascript/entrypoints/pulDataTables.js @@ -15,6 +15,12 @@ export function setupTable(tableId) { info: '_START_ - _END_ out of _TOTAL_ shown', paginate: { next: '>', previous: '<' }, }, + columnDefs: [{ + targets: 0, + searchable: false, + orderable: false, + }, + ], }; // If we have a table initialize it with DataTables diff --git a/app/views/welcome/_project_list_view.html.erb b/app/views/welcome/_project_list_view.html.erb index ede747c6..de63f579 100644 --- a/app/views/welcome/_project_list_view.html.erb +++ b/app/views/welcome/_project_list_view.html.erb @@ -1,22 +1,32 @@ - - - - - - - -
-

<%= project.title %>

-
- -
-
+ + +
+
+ <%= project.title %> +
+
+
<%= project.status %>
+
<%= project.type %>
+
<%= project.role(current_user) %>
+
<%= project.latest_file_list_time %>
+
<%= project.last_activity %>
+
+
+
+
+
+
+
+
<%= project.quota_usage(session_id: current_user.mediaflux_session) %>
+
- <%= project.status %> - <%= project.type %> - <%= project.role(current_user) %> - <%= project.latest_file_list_time %> - <%= project.last_activity %> - <%= project.quota_usage(session_id: current_user.mediaflux_session) %> + + <%= project.title %> + <%= project.status %> + <%= project.type %> + <%= project.role(current_user) %> + <%= project.latest_file_list_time %> + <%= project.last_activity %> + <%= project.quota_usage(session_id: current_user.mediaflux_session) %> diff --git a/app/views/welcome/_projects_listing.html.erb b/app/views/welcome/_projects_listing.html.erb index 53b765f3..314736f8 100644 --- a/app/views/welcome/_projects_listing.html.erb +++ b/app/views/welcome/_projects_listing.html.erb @@ -1,7 +1,8 @@
- +
+
display title status type diff --git a/spec/system/project_details_spec.rb b/spec/system/project_details_spec.rb index 14134c08..9994f2a1 100644 --- a/spec/system/project_details_spec.rb +++ b/spec/system/project_details_spec.rb @@ -58,7 +58,7 @@ expect(page).to have_selector(:link_or_button, "Dashboard") click_on("Dashboard") expect(page).to have_content("Welcome, #{sponsor_user.given_name}!") - find(:xpath, "//h2[text()='#{project_in_mediaflux.title}']").click + find(:xpath, "//a[text()='#{project_in_mediaflux.title}']").click end end context "SysAdmin" do @@ -88,7 +88,7 @@ expect(page).to have_selector(:link_or_button, "Content Preview") click_on("Dashboard") expect(page).to have_content("Welcome, #{sponsor_user.given_name}!") - find(:xpath, "//h2[text()='#{project_in_mediaflux.title}']").click + find(:xpath, "//a[text()='#{project_in_mediaflux.title}']").click end end context "SysAdmin" do @@ -169,7 +169,7 @@ expect(page).to have_selector(:link_or_button, "Dashboard") click_on("Dashboard") expect(page).to have_content("Welcome, #{sponsor_user.given_name}!") - find(:xpath, "//h2[text()='#{project.title}']").click + find(:xpath, "//a[text()='#{project.title}']").click expect(page).to have_content(project.title) end diff --git a/spec/system/project_roles_spec.rb b/spec/system/project_roles_spec.rb index 2ff11e12..4b7cee98 100644 --- a/spec/system/project_roles_spec.rb +++ b/spec/system/project_roles_spec.rb @@ -54,7 +54,7 @@ expect(page).to have_content "New Project Request Received" click_on "Return to Dashboard" expect(page).to have_content("Welcome") - find(:xpath, "//h2[text()='My test project']").click + find(:xpath, "//a[text()='My test project']").click click_on "Details" expect(page).to have_content("This project has not been saved to Mediaflux") expect(page).to have_content(read_only.display_name + " (read only)") diff --git a/spec/system/project_spec.rb b/spec/system/project_spec.rb index a1170223..9691cad0 100644 --- a/spec/system/project_spec.rb +++ b/spec/system/project_spec.rb @@ -245,7 +245,7 @@ .skipping(:'color-contrast') click_on "Return to Dashboard" expect(page).to have_content "Sponsor" - find(:xpath, "//h2[text()='My test project']").click + find(:xpath, "//a[text()='My test project']").click click_on "Details" # defaults have been applied expect(page).to have_content "Storage Capacity (Requested)\n500 GB" @@ -271,7 +271,7 @@ expect(page).to have_content("/td-test-001/") click_on "Submit" click_on "Return to Dashboard" - find(:xpath, "//h2[text()='My test project']").click + find(:xpath, "//a[text()='My test project']").click expect(page).to have_content "My test project" click_on "Details" expect(page).to have_content read_only.display_name + " (read only)" @@ -293,7 +293,7 @@ expect(page).to have_content("/td-test-001/") click_on "Submit" click_on "Return to Dashboard" - find(:xpath, "//h2[text()='My test project']").click + find(:xpath, "//a[text()='My test project']").click expect(page).to have_content "My test project" click_on "Details" expect(page).to have_content read_write.display_name