Skip to content

Commit

Permalink
adding a styled column to the datatables (#1160)
Browse files Browse the repository at this point in the history 
This allows us to style the row as desired, but still includes datatables in the UI

fixes #1147
  • Loading branch information
@carolyncole
carolyncole authored Jan 7, 2025
1 parent 9d759e2 commit 4f5a9af
Show file tree
Hide file tree
Showing 7 changed files with 218 additions and 103 deletions.
250 changes: 174 additions & 76 deletions app/assets/stylesheets/_dashboard.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -215,6 +312,7 @@
flex-direction: column;
align-items: flex-start;
gap: 1.25rem;
flex-grow: 1;
}

.sidebar {
Expand Down
6 changes: 6 additions & 0 deletions app/javascript/entrypoints/pulDataTables.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
48 changes: 29 additions & 19 deletions app/views/welcome/_project_list_view.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,32 @@
<tr class="project">
<td>
<a class="click-row" href="<%= project_path(project.id) %>" >
<table class="fixed-table">
<tr>
<td>
<h2><%= project.title %></h2>
</td>
</tr>
</table>
</a>
<div class="w3-light-grey w3-round-xlarge">
<div class="w3-orange w3-round-xlarge" style="height:6px;width:<%= project.quota_percentage(session_id: current_user.mediaflux_session) %>%"></div>
<tr class="project" >
<td class="project-row">
<div class="project-details">
<div class="title">
<a class="click-row" href="<%= project_path(project.id) %>" ><%= project.title %></a>
</div>
<div class="summary">
<div class="status <%= project.status.downcase %>"><%= project.status %></div>
<div class="type"><%= project.type %></div>
<div class="role"><%= project.role(current_user) %></div>
<div class="download"><%= project.latest_file_list_time %></div>
<div class="activity"><%= project.last_activity %></div>
</div>
</div>
<div class="storage-details">
<div class="storage">
<div class="w3-light-grey w3-round-xlarge">
<div class="w3-orange w3-round-xlarge" style="height:6px;width:<%= project.quota_percentage(session_id: current_user.mediaflux_session) %>%"></div>
</div>
<div class="usage"> <%= project.quota_usage(session_id: current_user.mediaflux_session) %></div>
</div>
</div>
</td>
<td class="status details <%= project.status.downcase %>"><%= project.status %></td>
<td class="project-type details"><%= project.type %></td>
<td class="user-role details"><%= project.role(current_user) %></td>
<td class="last-download details"><%= project.latest_file_list_time %></td>
<td class="last-activity details"><%= project.last_activity %></td>
<td class="quota-usage"><%= project.quota_usage(session_id: current_user.mediaflux_session) %></td>
<!-- table columns being kept, but not shown for DataTables sorting and search -->
<td style="display: none"><%= project.title %></td>
<td style="display: none"><%= project.status %></td>
<td style="display: none"><%= project.type %></td>
<td style="display: none"><%= project.role(current_user) %></td>
<td style="display: none"><%= project.latest_file_list_time %></td>
<td style="display: none"><%= project.last_activity %></td>
<td style="display: none"><%= project.quota_usage(session_id: current_user.mediaflux_session) %></td>
</tr>
3 changes: 2 additions & 1 deletion app/views/welcome/_projects_listing.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<div class="table">
<table id="<%= table_id %>" >
<table id="<%= table_id %>" width="100%"> <!-- width is needed to override datatables calculation -->
<thead>
<tr class="project heading">
<th>display</th>
<th>title</th>
<th>status</th>
<th>type</td>
Expand Down
6 changes: 3 additions & 3 deletions spec/system/project_details_spec.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion spec/system/project_roles_spec.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)")
Expand Down
Loading

0 comments on commit 4f5a9af

Please sign in to comment.