Skip to content

Commit

Permalink
Data users layout (#1143)
Browse files Browse the repository at this point in the history 
* Started playing with the new style. Early work in progress while we figure out how to copy the styles from Figma.

Co-authored-by: Robert-Anthony Lee-Faison <leefaisonr@users.noreply.github.com>

* Got the table header working and the No Data Users message. Still have to make sure the rows are displayed on different lines, though

* Got the rows to display correctly (hard-coded rows, but they display right)

* Got the rows to display correctly (data driven again)

* Minor tweaks

* Renamed the classes to make more sense. Kept the reference to the original frame in Figma as a comment.

---------

Co-authored-by: Robert-Anthony Lee-Faison <leefaisonr@users.noreply.github.com>
  • Loading branch information
@hectorcorrea @leefaisonr
hectorcorrea and leefaisonr authored Dec 23, 2024
1 parent 606e784 commit fa150e7
Show file tree
Hide file tree
Showing 5 changed files with 217 additions and 61 deletions.
174 changes: 170 additions & 4 deletions app/assets/stylesheets/_project.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
font-weight: 400;
line-height: 18px;
width: 100%;

thead {
background-color: $gray-10;
overflow: hidden;
Expand All @@ -31,7 +31,7 @@
}

tr {
border: 1px solid $gray-20;
border: 1px solid $gray-20;
overflow: hidden;
color: $gray-100;
text-overflow: ellipsis;
Expand Down Expand Up @@ -68,8 +68,174 @@

#project-contents {
margin-bottom: 0.75rem;

.sorting:hover {
cursor: pointer;
}
}
}

.data-users-title {
color: $black;
/* Body L Bold */
font-family: "Libre Franklin";
font-size: 1.25rem;
font-style: normal;
font-weight: 600;
line-height: 1.875rem; /* 150% */
}

.added-user-textbox {
border: none !important;
background-color: white !important;
width: 100% !important;
}

.delete-user-row {
color: $red-dark;
}

/* Used for the delete button when adding users within the modal */
.transparent-button {
background-color: transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
}

.data-users-section { /* frame-218 in Figma */
display: inline-flex;
align-items: flex-start;
gap: 6.75rem;

.data-users-container { /* frame-187 in Figma */
display: flex;
width: 55.9375rem;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;

.data-users-table { /* table-5 in Figma */
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
border-radius: 0.5rem;
margin-bottom: -10px; /* not in Figma */

.table {
display: flex;
width: 55.9375rem;
flex-direction: column;
align-items: flex-start;
border-radius: 0.25rem;
border: 1px solid $gray-20;

.thead {
display: flex;
height: 2.9375rem;
align-items: flex-start;
align-self: stretch;
background: $gray-10;

.cell {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
background: rgba(255, 255, 255, 0.05);
font-weight: 600; /* not in Figma */

.content {
display: flex;
padding: 0.25rem 0.75rem;
align-items: flex-start;
align-self: stretch;
}
}
} /* thead */

.table-row {
display: flex;
height: 2.25rem;
align-items: flex-start;
align-self: stretch;
background: #FFF;

.table-col {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
background: rgba(255, 255, 255, 0.05);

.content {
display: flex;
padding: 0.25rem 0.75rem;
align-items: flex-start;
/* align-self: stretch; */
input {
width: 100% !important;
}
}
}
} /* table-row */

.table-row-no-data {
display: flex;
height: 2.25rem;
align-items: flex-start;
align-self: stretch;
background: #FFF;
width: 100%; /* not in Figma */

#text-no-users {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1 0 0;
align-self: stretch;
background: rgba(255, 255, 255, 0.00);
color: var(--Neutral-Dark-Gray, #717171);

/* Body XS */
font-family: "Libre Franklin";
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
line-height: 1.3125rem; /* 150% */
}
} /* table-row-no-data */
} /* table */
} /* table-5 */

.frame-106 {
display: flex;
width: 55.9375rem;
justify-content: space-between;
align-items: center;

.frame-252 {
display: flex;
align-items: center;
gap: 0.25rem;

a {
color: var(--Neutral-Black, #121212);
/* Body S Bold */
font-family: "Libre Franklin";
font-size: 1rem;
font-style: normal;
font-weight: 600;
line-height: 1.5rem; /* 150% */
}
}
}
} /* data-users-container */
} /* data-users-section */
32 changes: 1 addition & 31 deletions app/assets/stylesheets/application.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ h1, h2, h3, h4, h5, h6 {
}

.hidden-element {
display: none;
display: none !important;
}

.netid-large {
Expand Down Expand Up @@ -118,36 +118,6 @@ h1, h2, h3, h4, h5, h6 {
color: var(--Secondary-Red-Dark, #b00002);
}

/* Used for the delete button when adding users */
.transparent-button {
background-color: transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
}

/* Data users in the Edit form */
#data-users-table {
border-color: gray;
border-style: solid;
border-width: 1px;
}

#data-users-table > thead {
background-color: lightgray;
}

.added-user-textbox {
border: none !important;
background-color: white !important;
}

.delete-user-row {
color: red;
}

.alert-primary {
position: absolute;
}
Expand Down
58 changes: 39 additions & 19 deletions app/views/projects/_edit_form.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,25 +38,39 @@
</div>
</div> <!-- row -->

<div class="row ">
<div class="row">
<div class="col-md-3">
<label for="data-user-uid-to-add">Data Users</label>
<span class="data-users-title">Data Users</span>
</div>
<div class="col-md-9">
<table id="data-users-table">
<thead>
<td>NetID</td>
<td>Read Only</td>
<td>Read Write</td>
<td>Action</td>
</thead>
<tbody>
<tr id="row-no-users">
<td>No Data User(s) added</td>
</tr>
</tbody>
</table>
<a id="addUsersButton" href="#" data-toggle="modal" data-target="#addUsersModal">+ Add User(s)</a>
<div class="data-users-section">
<div class="data-users-container">
<div class="data-users-table">
<div class="table" id="data-users-table">
<div class="thead">
<div class="cell"><div class="content">NetID</div></div>
<div class="cell"><div class="content">Read Only</div></div>
<div class="cell"><div class="content">Read Write</div></div>
<div class="cell"><div class="content">Action</div></div>
</div>
<div class="table-row-no-data" id="row-no-users">
<div id="text-no-users">
No Data User(s) added
</div>
</div>
<!-- data rows added via JavaScript addUserHtml() -->
</div>
</div>
<div class="frame-106">
<div class="frame-252">
<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.6094 6.85714H7.46652V12H5.75223V6.85714H0.609375V5.14286H5.75223V0H7.46652V5.14286H12.6094V6.85714Z" fill="#121212"/>
</svg>
<a id="addUsersButton" href="#" data-toggle="modal" data-target="#addUsersModal">Add User(s)</a>
</div>
</div>
</div> <!-- data-users-container -->
</div> <!-- data-users-section -->
</div>
</div> <!-- row -->

Expand Down Expand Up @@ -231,8 +245,14 @@
rwHtml += " checked>"
}
const actionHtml = `<a href="#" class="delete-user-row">Remove</a>`;
const rowHtml = `<tr><td>${netIdHtml}</td><td>${roHtml}</td><td>${rwHtml}</td><td>${actionHtml}</td></tr>`;
$(`#data-users-table>tbody`).append(rowHtml);
const rowHtml = `
<div class="table-row">
<div class="table-col"><div class="content">${netIdHtml}</div></div>
<div class="table-col"><div class="content">${roHtml}</div></div>
<div class="table-col"><div class="content">${rwHtml}</div></div>
<div class="table-col"><div class="content">${actionHtml}</div></div>
</div>`;
$(`#data-users-table`).append(rowHtml);
}

// Returns the netids of the users already in the HTML FORM
Expand Down Expand Up @@ -350,7 +370,7 @@

// Delete a `<tr>` that represents a user.
$(document).on("click", ".delete-user-row", (el) => {
$(el.target.parentElement.parentElement).remove();
$(el.target.parentElement.parentElement.parentElement).remove();
return false;
});

Expand Down
6 changes: 3 additions & 3 deletions spec/system/project_roles_spec.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
expect(page.find("button[value=Submit]").disabled?).to be false

# Adds a data user (read-only)
click_on "+ Add User(s)"
click_on "Add User(s)"
fill_in_and_out "data-user-uid-to-add", with: read_only.uid
click_on "Save changes"

Expand Down Expand Up @@ -172,7 +172,7 @@
it "allows a Data Sponsor to assign a Data User" do
sign_in sponsor_user
visit "/projects/#{project.id}/edit"
click_on "+ Add User(s)"
click_on "Add User(s)"
fill_in_and_out "data-user-uid-to-add", with: ro_data_user.uid
click_on "Save changes"
click_on "Submit"
Expand All @@ -182,7 +182,7 @@
it "allows a Data Manager to assign a Data User" do
sign_in data_manager
visit "/projects/#{project.id}/edit"
click_on "+ Add User(s)"
click_on "Add User(s)"
fill_in_and_out "data-user-uid-to-add", with: ro_data_user.uid
click_on "Save changes"
click_on "Submit"
Expand Down
8 changes: 4 additions & 4 deletions spec/system/project_spec.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -262,7 +262,7 @@
click_on "Create new project"
expect(page.find("#non-editable-data-sponsor").text).to eq sponsor_user.uid
fill_in_and_out "data_manager", with: data_manager.uid
click_on "+ Add User(s)"
click_on "Add User(s)"
fill_in_and_out "data-user-uid-to-add", with: read_only.uid
click_on "Save changes"
select "Research Data and Scholarship Services", from: "departments"
Expand All @@ -283,7 +283,7 @@
click_on "Create new project"
expect(page.find("#non-editable-data-sponsor").text).to eq sponsor_user.uid
fill_in_and_out "data_manager", with: data_manager.uid
click_on "+ Add User(s)"
click_on "Add User(s)"
fill_in_and_out "data-user-uid-to-add", with: read_write.uid
click_on "Save changes"
find(:xpath, "//*[@id='data_user_1_rw']").click # make user read-write
Expand All @@ -308,7 +308,7 @@
expect(page).to have_content "No Data User(s) added"

# Launch the modal, trigger the validation, and then add a valid user
click_on "+ Add User(s)"
click_on "Add User(s)"
fill_in_and_out "data-user-uid-to-add", with: "notuser"
expect(page.find("#data-user-uid-to-add_error").text).to eq "Invalid value entered"
fill_in_and_out "data-user-uid-to-add", with: read_only.uid
Expand All @@ -317,7 +317,7 @@

# Launch the modal again and this time don't add any users
# (but we already had added some so we don't expect the "no data users" message)
click_on "+ Add User(s)"
click_on "Add User(s)"
click_on "Save changes"
expect(page).not_to have_content "No Data User(s) added"
end
Expand Down

0 comments on commit fa150e7

Please sign in to comment.