Skip to content

Commit

Permalink
Data users new design (#1088)
Browse files Browse the repository at this point in the history 
* WIP

* First sort-of runnig version. Still WIP but much more advanced

* Got the delete to work, fixed a few validation issues.

* Adjusted the save logic to account for the new way we represent RO vs RW users

* Display the initial list of rw and ro users

* Fix merge conflict

* Minor clean up

* Moved CSS to the application level

* Started re-creating the data users tests

* Adjusted test to use new HTML FORM keys

* Bye byebug

* Adjust the test for the new keys

* Adjust the test for the new HTML FORM keys

* Adjust test to new UI for data users

* Added test for invalid data users entered

* Removed commented lines
  • Loading branch information
@hectorcorrea @kelynch
hectorcorrea authored and kelynch committed Dec 17, 2024
1 parent af06235 commit 778f859
Show file tree
Hide file tree
Showing 8 changed files with 336 additions and 243 deletions.
32 changes: 31 additions & 1 deletion app/assets/stylesheets/application.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,36 @@ 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;
}
}
99 changes: 0 additions & 99 deletions app/javascript/entrypoints/application.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,104 +33,6 @@ window.showMoreLess = showMoreLess;
window.projectStyle = projectStyle;
window.projectTab = projectTab;

function initDataUsers() {
function counterIncrement(counterId) {
let counter = parseInt($(`#${counterId}`).val(), 10);
counter += 1;
$(`#${counterId}`).val(counter);
return counter;
}

function addUserHtml(netIdToAdd, elementId, listElementId, textElementId) {
const html = `<input id="${elementId}" name="${elementId}" value="${netIdToAdd}" readonly class="added_user_textbox" />
<span id="${elementId}_delete_icon">
<a class="delete-ro-user" data-el-id="${elementId}" data-uid="${netIdToAdd}" href="#" title="Revoke user ability to read">
<i class="bi bi-trash delete_icon" data-el-id="${elementId}" data-uid="${netIdToAdd}"></i>
</a>
<br/>
</span>`;
$(`#${listElementId}`).append(html);
$(`#${textElementId}`).val('');
$(`#${textElementId}`).focus();
}

// Adds a read-only user
$('#btn-add-ro-user').on('click', () => {
const netIdToAdd = $('#ro-user-uid-to-add').val();
if (netIdToAdd.trim() === '') {
// nothing to do
return false;
}

const counter = counterIncrement('ro_user_counter');
const roUserId = `ro_user_${counter}`;
addUserHtml(netIdToAdd, roUserId, 'ro-users-list', 'ro-user-uid-to-add');
return false;
});

// Adds a read-write user
$('#btn-add-rw-user').on('click', () => {
const netIdToAdd = $('#rw-user-uid-to-add').val();
if (netIdToAdd.trim() === '') {
// nothing to do
return false;
}

const counter = counterIncrement('rw_user_counter');
const rwUserId = `rw_user_${counter}`;
addUserHtml(netIdToAdd, rwUserId, 'rw-users-list', 'rw-user-uid-to-add');
return false;
});

// Wire up the delete button for all read-only users.
//
// Notice the use of $(document).on("click", selector, ...) instead of the
// typical $(selector).on("click", ...). This syntax is required so that
// we can detect the click even on HTML elements _added on the fly_ which
// is the case when a user adds a new submitter or admin to the group.
// Reference: https://stackoverflow.com/a/17086311/446681
$(document).on('click', '.delete-ro-user', (el) => {
const uid = $(el.target).data('uid');
const roUserId = $(el.target).data('el-id');
const roUserDeleteIcon = `${roUserId}_delete_icon`;
const message = `Revoke read-only access to user ${uid}`;
if (window.confirm(message)) {
$(`#${roUserId}`).remove();
$(`#${roUserDeleteIcon}`).remove();
}
return false;
});

// Wire up the delete button for all read-write users.
$(document).on('click', '.delete-rw-user', (el) => {
const uid = $(el.target).data('uid');
const rwUserId = $(el.target).data('el-id');
const rwUserDeleteIcon = `${rwUserId}_delete_icon`;
const message = `Revoke read-write access to user ${uid}`;
if (window.confirm(message)) {
$(`#${rwUserId}`).remove();
$(`#${rwUserDeleteIcon}`).remove();
}
return false;
});

// Render the pre-existing read-only users on the record
$('.ro-user-item').each((ix, el) => {
const counter = counterIncrement('ro_user_counter');
const roUserId = `ro_user_${counter}`;
const netIdToAdd = $(el).data('uid');
addUserHtml(netIdToAdd, roUserId, 'ro-users-list', 'ro-user-uid-to-add');
});

// Render the pre-existing read-write users on the record
$('.rw-user-item').each((ix, el) => {
const counter = counterIncrement('rw_user_counter');
const rwUserId = `rw_user_${counter}`;
const netIdToAdd = $(el).data('uid');
addUserHtml(netIdToAdd, rwUserId, 'rw-users-list', 'rw-user-uid-to-add');
});
}

async function fetchListContents(listContentsPath) {
const response = await fetch(listContentsPath);

Expand Down Expand Up @@ -255,7 +157,6 @@ function initPage() {
$('#test-jquery').click((event) => {
setTargetHtml(event, 'jQuery works!');
});
initDataUsers();
initListContentsModal();
showMoreLessContent();
showMoreLessSysAdmin();
Expand Down
41 changes: 22 additions & 19 deletions app/models/project_metadata.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,8 @@ def initialize_from_hash(metadata_hash)

# Initializes the object with the values in the params (which is an ActionController::Parameters)
def initialize_from_params(params)
@data_user_read_only = user_list_params(params, read_only_counter(params), "ro_user_")
@data_user_read_write = user_list_params(params, read_write_counter(params), "rw_user_")
@data_user_read_only = ro_users_from_params(params)
@data_user_read_write = rw_users_from_params(params)
initialize_from_hash(params)
end

Expand All @@ -72,8 +72,10 @@ def update_with_params(params, current_user)
set_value(params, "project_purpose")
calculate_project_directory(params)

@data_user_read_only = user_list_params(params, read_only_counter(params), "ro_user_") if params["ro_user_counter"].present?
@data_user_read_write = user_list_params(params, read_write_counter(params), "rw_user_") if params["rw_user_counter"].present?
if params["data_user_counter"].present?
@data_user_read_only = ro_users_from_params(params)
@data_user_read_write = rw_users_from_params(params)
end

update_storage_capacity(params)
update_storage_performance_expectations
Expand All @@ -98,27 +100,28 @@ def rw_users

private

def read_only_counter(params)
return if params.nil?
params[:ro_user_counter].to_i
end

def read_write_counter(params)
return if params.nil?
params[:rw_user_counter].to_i
end

def user_list_params(params, counter, key_prefix)
return if params.nil?

def data_users_from_params(params, access)
return [] if params.nil?
users = []
counter = params[:data_user_counter].to_i
(1..counter).each do |i|
key = "#{key_prefix}#{i}"
users << params[key]
key = "data_user_#{i}"
access_key = key + "_read_access"
if params[access_key] == access
users << params[key]
end
end
users.compact.uniq
end

def ro_users_from_params(params)
data_users_from_params(params, "read-only")
end

def rw_users_from_params(params)
data_users_from_params(params, "read-write")
end

# Initializes values that we have defaults for.
def set_defaults
if @storage_capacity.nil?
Expand Down
Loading

0 comments on commit 778f859

Please sign in to comment.