Skip to content

Commit

Permalink
1016 webform cosmetic changes (#1019)
Browse files Browse the repository at this point in the history 
* WIP implementing form look and feel changes

* More form changes

* Arranged form components

* Added styles for edit of Mediaflux ID

* Fixed breaking tests

* Added required field indicator

* One more test
  • Loading branch information
@kelynch
kelynch authored Oct 31, 2024
1 parent ebd9e71 commit 8a93b6b
Show file tree
Hide file tree
Showing 8 changed files with 262 additions and 112 deletions.
68 changes: 68 additions & 0 deletions app/assets/stylesheets/_forms.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
@import "variables";
@import "typography";
@import "bootstrap";

#project-form {
.heading-decoration {
background-color: $princeton-orange;
width: 100px;
height: 8px;
margin-bottom: 12px;
}

.row {
padding-bottom: 40px;
}

h2 {
margin-top: 80px;
margin-bottom: 40px;
}

label {
font-family: "Libre Franklin";
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 27px;
}

input {
width: 285px;
}

input, select, textarea {
border-radius: 8px;
border: 1px solid $gray-60;
}

.mediaflux-tooltip {
font-family: "Libre Franklin";
font-size: 14px;
font-style: normal;
color: $gray-60;
}

.required-field {
font-family: "Libre Franklin";
font-size: 14px;
font-style: normal;
line-height: 21px;
color: $gray-60;
}

.actions {
text-align: right;
#submit-btn {
background-color: $black;
color: $white;
border: none;
}

#cancel-btn {
background-color: $white;
border: $black solid 1px;
color: $black;
}
}
}
2 changes: 0 additions & 2 deletions app/assets/stylesheets/_settings.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,8 +130,6 @@
}
h2 {// Heading for the details div
margin-left: 0.2em;
text-decoration: underline;
text-decoration-thickness: 3px;
.btn.btn-primary.btn-sm{
margin-left: 1.5em;
}
Expand Down
1 change: 1 addition & 0 deletions app/assets/stylesheets/application.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
@import "components/mediaflux_status";
@import "emulator";
@import "footer";
@import "forms";
@import "header";
@import "settings";
@import "styles_preview";
Expand Down
265 changes: 171 additions & 94 deletions app/views/projects/_edit_form.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,114 +1,191 @@
<%= render 'form_errors' %>
<%= render 'data_list' %>
<div>
<h2>Project Roles</h2>

<div class="row ">
<div class="col-md-3">
<label for="data_sponsor">Data Sponsor</label>
<div class="required-field">Required</div>
</div>
<div class="col-md-9">
<% if current_user.superuser? %>
<input type="text" list="sponsor-users" id="data_sponsor" aria-label="data sponsor" name="data_sponsor" required value="<%= @project.metadata_model.data_sponsor %>" /></input>
<% else %>
<input type="hidden" id="data_sponsor" name="data_sponsor" value="<%= @project.metadata_model.data_sponsor || current_user.uid %>">
<span id="non-editable-data-sponsor"><%= @project.metadata_model.data_sponsor || current_user.uid %></span>
<% end %>
</div>
</div>

<div id="edit">
<h2>Project Roles</h2>
<div class="row ">
<div class="col-md-3">
<label for="data_manager">Data Manager</label>
<div class="required-field">Required</div>
</div>
<div class="col-md-9">
<% if !@project.persisted? || @project.metadata_model.data_sponsor == current_user.uid %>
<input type="text" list="manager-users" id="data_manager" aria-label="data manager" name="data_manager" required value="<%= @project.metadata_model.data_manager %>" /></input>
<% else %>
<input type="hidden" id="data_manager" aria-label="data manager" name="data_manager" value="<%= @project.metadata_model.data_manager %>">
<span id="non-editable-data-manager"><%= @project.metadata_model.data_manager %></span>
<% end %>
</div>
</div>

<p>Data Sponsor:
<label>Data User(s)</label>
<div class="row ">
<div class="col-md-3">
<label for="ro-user-uid-to-add">Read Only</label>
</div>
<div class="col-md-9">
<div class="data-users">
<ul id="ro-users-list">
<% (@project.metadata_model.ro_users || []).compact.each do |user| %>
<span class="ro-user-item" data-uid="<%= user %>"></span>
<% end %>
</ul>
<div class="add_new_uer_div">
<input id="ro-user-uid-to-add" list="all-users" placeholder="netid" class="add_new_user_textbox"></input>
<input type="submit" value="Add User" id="btn-add-ro-user" class="btn btn-secondary" title="Adds a read only user"/>
<span id="add-ro-user-message"></span>
</div>
</div>
</div>
</div>

<% if current_user.superuser? %>
<input type="text" list="sponsor-users" id="data_sponsor" aria-label="data sponsor" name="data_sponsor" required value="<%= @project.metadata_model.data_sponsor %>" /></input>
<% else %>
<input type="hidden" id="data_sponsor" name="data_sponsor" value="<%= @project.metadata_model.data_sponsor || current_user.uid %>">
<span id="non-editable-data-sponsor"><%= @project.metadata_model.data_sponsor || current_user.uid %></span></p>
<% end %>
<div class="row ">
<div class="col-md-3">
<label for="rw-user-uid-to-add">Read/Write</label>
</div>
<div class="col-md-9">
<div class="data-users">
<ul id = "rw-users-list">
<% (@project.metadata_model.rw_users || []).compact.each do |user|%>
<span class="rw-user-item" data-uid="<%= user %>"></span>
<%end%>
</ul>
<div class="add_new_user_div">
<input id = "rw-user-uid-to-add" list="all-users" placeholder = "netid" class="add_new_user_textbox"> </input>
<input type="submit" value="Add User" id="btn-add-rw-user" class="btn btn-secondary" title="Adds a read write user"/>
<span id = "add-rw-user-message"></span>
</div>
</div>
</div>
</div>

<h2>Project Description</h2>
<% if current_user.superuser? %>
<div class="row ">
<div class="col-md-3">
<label for="project_id">Project ID</label>
</div>
<div class="col-md-9">
<input type="text" id="project_id" aria-label="project id" name="project_id" value="<%= @project.metadata_model.project_id %>" /></input>
</div>
</div>
<% end %>
<div class="row ">
<div class="col-md-3">
<label for="title">Title</label>
<div class="required-field">Required</div>
</div>
<div class="col-md-9">
<input type="text" id="title" name="title" aria-label="project title" required value="<%= @project.metadata_model.title %>" />
</div>
</div>

<% if @project.in_mediaflux? %>
<!--
Make the field readonly so the user cannot change it, but leave it as an HTML INPUT so that it is
send back to the controller (we don't want to lose this value)
-->
<div class="row ">
<div class="col-md-3">
<label for="project_directory">Project Directory <%= @project.project_directory_parent_path %>/</label>

</div>
<div class="col-md-9">
<input type="text" aria-label="project directory" id="project_directory" name="project_directory" readonly value="<%= @project.project_directory_short %>" />
</div>
</div>

<% if (current_user.superuser? || current_user.eligible_sysadmin?) %>
<div class="row ">
<div class="col-md-3">
<label>MediaFlux ID</label>


<p>Data Manager:
</div>
<div class="col-md-9">
<input readonly value="<%= @project.mediaflux_id %>" />
<p class="mediaflux-tooltip">This project has already been saved to Mediaflux and the project_directory cannot be changed</p>

<% if !@project.persisted? || @project.metadata_model.data_sponsor == current_user.uid %>
<input type="text" list="manager-users" id="data_manager" aria-label="data manager" name="data_manager" required value="<%= @project.metadata_model.data_manager %>" /></input>
<% else %>
<input type="hidden" id="data_manager" aria-label="data manager" name="data_manager" value="<%= @project.metadata_model.data_manager %>">
<span id="non-editable-data-manager"><%= @project.metadata_model.data_manager %></span>
<% end %>
</p>
</div>
</div>
<% end %>

<p>Data User(s): </p>
<% end %>

<div class="data-users">
<p>Read Only:</p>
<ul id="ro-users-list">
<% (@project.metadata_model.ro_users || []).compact.each do |user| %>
<span class="ro-user-item" data-uid="<%= user %>"></span>
<% end %>
</ul>
<div class="add_new_user_div">
<input id="ro-user-uid-to-add" list="all-users" placeholder="netid" class="add_new_user_textbox"></input>
<input type="submit" value="Add User" id="btn-add-ro-user" class="btn btn-secondary" title="Adds a read only user"/>
<span id="add-ro-user-message"></span>
</div>
</div>

<div class="data-users">
<p>Read/Write:</p>
<ul id = "rw-users-list">
<% (@project.metadata_model.rw_users || []).compact.each do |user|%>
<span class="rw-user-item" data-uid="<%= user %>"></span>
<%end%>
</ul>
<div class="add_new_user_div">
<input id = "rw-user-uid-to-add" list="all-users" placeholder = "netid" class="add_new_user_textbox"> </input>
<input type="submit" value="Add User" id="btn-add-rw-user" class="btn btn-secondary" title="Adds a read write user"/>
<span id = "add-rw-user-message"></span>
</div>
</div>
<div class="row ">
<div class="col-md-3">
<label for="project_directory">Directory Path</label>
<div class="required-field">Required</div>
</div>
<div class="col-md-9">
<span class="path-info"><%= @project.project_directory_parent_path %>/ </span><input type="text" aria-label="project directory" id="project_directory" name="project_directory" required value="<%= @project.project_directory_short %>" pattern="[\w\p{L}\-]{1,64}" />
</div>
</div>


<div class="row ">
<div class="col-md-3">

<label for="departments">Departments</label>
<div class="required-field">Required</div>
</div>
<div class="col-md-9">

<select id="departments" name="departments[]" aria-label="project department" required value class="form-select" multiple >
<% Affiliation.all.each do |affiliation| %>
<% if @project.departments.include?(affiliation[:code]) %>
<option selected><%= affiliation[:code] %></option>
<% else %>
<option><%= affiliation[:code] %></option>
<% end %>
<% end %>
</select>
</div>
</div>

<div>
<h2>Project Description</h2>
<div class="description-container">
<% if current_user.superuser? %>
<div>Project ID:<br/>
<input type="text" id="project_id" aria-label="project id" name="project_id" value="<%= @project.metadata_model.project_id %>" /></input>
</div>
<% end %>

<div>Departments:<br/>
<select id="departments" name="departments[]" aria-label="project department" required value class="form-select" multiple >
<% Affiliation.all.each do |affiliation| %>
<% if @project.departments.include?(affiliation[:code]) %>
<option selected><%= affiliation[:code] %></option>
<% else %>
<option><%= affiliation[:code] %></option>
<% end %>
<% end %>
</select>
</div>

<% if @project.in_mediaflux? %>
<!--
Make the field readonly so the user cannot change it, but leave it as an HTML INPUT so that it is
send back to the controller (we don't want to lose this value)
-->
<p>Project Directory: <%= @project.project_directory_parent_path %>/<input type="text" aria-label="project directory" id="project_directory" name="project_directory" readonly value="<%= @project.project_directory_short %>" />
<% if (current_user.superuser? || current_user.eligible_sysadmin?) %>
(MediaFlux id: <%= @project.mediaflux_id %>)<br/>
<% end %>
This project has already been saved to Mediaflux and the project_directory cannot be changed</p>
<% else %>
<!-- Unicode alphanumeric, minus-dash, and/or underscore characters -->
<p>Project Directory: <%= @project.project_directory_parent_path %>/<input type="text" aria-label="project directory" id="project_directory" name="project_directory" required value="<%= @project.project_directory_short %>" pattern="[\w\p{L}\-]{1,64}" /></p>
<% end %>

<p>Title: <input type="text" id="title" name="title" aria-label="project title" required value="<%= @project.metadata_model.title %>" /></p>
<div>Description:</div>
<textarea type="text" id="description" aria-label="project description" name="description" class="input-text-long"
rows="5" cols="120" placeholder=""><%= @project.metadata_model.description %></textarea>
</div>

<div class="row ">
<div class="col-md-3">
<label for="description">Description</label>


</div>
<div class="col-md-9">

<textarea type="text" id="description" aria-label="project description" name="description" class="input-text-long"
rows="5" cols="72" placeholder=""><%= @project.metadata_model.description %></textarea>

</div>
</div>


<!-- Keeps track of added read-only and read-write users -->
<input type="text" id="ro_user_counter" name="ro_user_counter" value="0" style="display:none;"/>
<input type="text" id="rw_user_counter" name="rw_user_counter" value="0" style="display:none;"/>

<div class="actions">
<button type=submit value="Submit" class="btn btn-primary">Submit</button>
<% if params[:action] == 'edit' %>
<%= link_to "Cancel", @project, class: "btn btn-secondary" %>
<% else %>
<%= link_to "Cancel", root_path, class: "btn btn-secondary" %>
<% end %>
</div>
<button type=submit value="Submit" class="btn btn-primary" id="submit-btn">Submit</button>
<% if params[:action] == 'edit' %>
<%= link_to "Cancel", @project, class: "btn btn-secondary", id: "cancel-btn" %>
<% else %>
<%= link_to "Cancel", root_path, class: "btn btn-secondary", id: "cancel-btn" %>
<% end %>
</div>



</div>
11 changes: 7 additions & 4 deletions app/views/projects/edit.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
<h1>Editing Project</h1>
<div id="project-form">
<h1>Editing Project</h1>
<div class="heading-decoration"></div>

<%= form_with url: project_path(@project), method: :put do |form| %>
<%= render "edit_form" %>
<% end %>
<%= form_with url: project_path(@project), method: :put do |form| %>
<%= render "edit_form" %>
<% end %>
</div>
Loading

0 comments on commit 8a93b6b

Please sign in to comment.