Data users new design

app/assets/stylesheets/application.scss

@@ -64,7 +64,7 @@ body {
   background-color: $gray-10;
   padding: 0rem 0.375em;
   justify-content: center;
-  align-items: center; 
+  align-items: center;
 }
 
 
@@ -112,3 +112,34 @@ body {
 .autocomplete-error {
   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;
+}

app/javascript/entrypoints/application.js

@@ -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);
 
@@ -255,7 +157,6 @@ function initPage() {
   $('#test-jquery').click((event) => {
     setTargetHtml(event, 'jQuery works!');
   });
-  initDataUsers();
   initListContentsModal();
   showMoreLessContent();
   showMoreLessSysAdmin();

app/models/project_metadata.rb

@@ -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
 
@@ -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
@@ -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?