clear the error message when a data sponsor or manager has been selected (#2246)

Also move lux initialization to a higher div so that the user select
components are all in one lux session, which gives them different ids

fixes #2237

Co-authored-by: Jaymee Hyppolite <[email protected]>

Author: carolyncole

app/assets/stylesheets/_wizard.scss

@@ -153,7 +153,7 @@
         }
 
         .modal-content .text-input,
-        .lux {
+        .lux-field {
           width: 100%;
         }
       }

app/javascript/entrypoints/application.js

@@ -47,12 +47,18 @@ async function searchUsers(query) {
   return [];
 }
 
+function clearUserError(event, component) {
+  document.getElementById(component).innerHTML = '';
+}
+
 // If you are not running a full Vue application, just embedding the component into a static HTML,
 // ruby web app, or similar: one way to bind your logic to the async-load-items-function prop is
 // to add it to the vue application's globalProperties.
 const createMyApp = () => {
   const myapp = createApp(app);
   myapp.config.globalProperties.searchUsers = (query) => searchUsers(query);
+  myapp.config.globalProperties.clearUserError = (event, component) =>
+    clearUserError(event, component);
   return myapp;
 };
 

app/javascript/entrypoints/validation.js

@@ -3,7 +3,11 @@ export function validationClear() {
   $('.form-field input').on('keyup', (event) => {
     const element = event.currentTarget;
     const errorElement = element.parentNode.querySelector('.input-error');
-    if (element.value.length > 0 && errorElement.innerText === 'cannot be empty') {
+    if (
+      element.value.length > 0 &&
+      errorElement &&
+      errorElement.innerText === 'cannot be empty'
+    ) {
       errorElement.innerHTML = '';
     }
   });

app/views/new_project_wizard/_form_user_input.html.erb

@@ -3,21 +3,23 @@
       <div class="horizontal-frame">
         <div class="vertical-frame">
 
-          <div class="lux field" id="<%= field_name %>_input">
+          <div class="lux-field field" id="<%= field_name %>_input">
             <lux-input-async-select
               label="<%= field_name.titleize %>"
               hide-label="true"
               placeholder="Select a <%= field_name.titleize %>"
               :async-load-items-function="searchUsers"
+              @selected="clearUserError($event,'data-user-error-<%= field_name %>')"
               id="data-user-select-<%= field_name %>"
               :default-value="<%= {label: field_value, id: field_id_value}.to_json %>"
               >
               <template v-slot:hidden-input="{ selectedItem }">
+                  <input type="hidden" class="selected_user_label" :value="selectedItem.label"></input>
                   <input type="hidden" name="request[<%= field_name %>]" class="selected_user" :value="selectedItem.id"></input>
               </template>
             </lux-input-async-select>
           </div>
-          <div class="input-error">
+          <div class="input-error" id="data-user-error-<%= field_name %>">
                <%= field_error %>
           </div>
         </div>

app/views/new_project_wizard/_form_user_roles_input.html.erb

@@ -42,7 +42,7 @@
         <div class="text-input">
           <div class="horizontal-frame">
             <div class="vertical-frame">
-              <div class="lux field data-users">
+              <div class="lux-field field data-users">
                <lux-input-multiselect
                 label=""
                 selected-items-label=""

app/views/new_project_wizard/_review_and_submit_form.html.erb

@@ -12,7 +12,7 @@
     <%= render partial: "/new_project_wizard/form_department_input", locals: {departments: @request_model.departments || [], department_error: @request_model.errors[:departments].join(", ") } %>
 </div>
 <div class="section-line"></div>
-<div class="section">
+<div class="section lux">
     <div class="section-title">
       <div class="section-frame">
       Roles and People

app/views/new_project_wizard/roles_and_people.html.erb

@@ -2,10 +2,12 @@
 <% content_for :form_title, "Roles and People" %>
 <% content_for :form_description, "Assign roles for your project." %>
 
-<%= render partial: "/new_project_wizard/form_data_sponsor_input", 
-            locals: {data_sponsor: @request_model.data_sponsor || "", data_sponsor_name: @request_model.data_sponsor_name, data_sponsor_error: @request_model.errors[:data_sponsor].join(", ") } %>
-<%= render partial: "/new_project_wizard/form_data_manager_input", 
-            locals: {data_manager: @request_model.data_manager || "", data_manager_name: @request_model.data_manager_name, data_manager_error: @request_model.errors[:data_manager].join(", ") } %>
-<%= render partial: "/new_project_wizard/form_user_roles_input", locals: {user_roles: @request_model.user_roles || [], user_roles_error: "" } %>
+<div class="lux">
+    <%= render partial: "/new_project_wizard/form_data_sponsor_input", 
+                locals: {data_sponsor: @request_model.data_sponsor || "", data_sponsor_name: @request_model.data_sponsor_name, data_sponsor_error: @request_model.errors[:data_sponsor].join(", ") } %>
+    <%= render partial: "/new_project_wizard/form_data_manager_input", 
+                locals: {data_manager: @request_model.data_manager || "", data_manager_name: @request_model.data_manager_name, data_manager_error: @request_model.errors[:data_manager].join(", ") } %>
+    <%= render partial: "/new_project_wizard/form_user_roles_input", locals: {user_roles: @request_model.user_roles || [], user_roles_error: "" } %>
 
-<input id="users_lookup_url" type="hidden" value="<%= users_lookup_url %>"/>
+    <input id="users_lookup_url" type="hidden" value="<%= users_lookup_url %>"/>
+</div>

package.json

@@ -29,7 +29,7 @@
     "browserslist": "^4.21.5",
     "datatables": "^1.10.18",
     "jquery": "^3.6.3",
-    "lux-design-system": "^7.2.1",
+    "lux-design-system": "^7.3.0",
     "nanoid": ">=3.3.8",
     "vite-plugin-rails": "^0.5.0",
     "vue": "^3.5.22",

spec/support/select_user.rb

@@ -2,7 +2,7 @@
 def select_user(user, field, hidden_field)
   user_str = user.display_name_safe
   within("##{field}_input") do
-    page.find(".field.lux input").fill_in with: user.uid
+    page.find(".field.lux-field input").fill_in with: user.uid
     expect(page).to have_content user_str
     find(".lux-autocomplete-result").click
 
@@ -15,7 +15,7 @@ def select_data_user(user, user_list)
   user_str = user.display_name_safe
 
   within(".user-role") do
-    page.find(".data-users.lux input").fill_in with: user.uid
+    page.find(".data-users.lux-field input").fill_in with: user.uid
     expect(page).to have_content user_str
     find(".lux-autocomplete-result").click
 
@@ -25,6 +25,6 @@ def select_data_user(user, user_list)
     expect(page).to have_field("all_selected", type: :hidden, with: user_list.to_json)
 
     # the javascript cleared the find to get ready for the next search
-    expect(page.find(".data-users.lux input").value).to eq("")
+    expect(page.find(".data-users.lux-field input").value).to eq("")
   end
 end

spec/system/request_spec.rb

@@ -266,6 +266,8 @@
         expect(page).to have_content("Review")
         within(".project-title") do
           expect(page).to have_content("cannot be empty")
+          fill_in :project_title, with: "A basic Project"
+          expect(page).not_to have_content("cannot be empty")
         end
         within(".project-description") do
           expect(page).to have_content("cannot be empty")
@@ -281,6 +283,8 @@
         end
         within(".data-sponsor") do
           expect(page).to have_content("cannot be empty")
+          select_user(current_user, "data_sponsor", "request[data_sponsor]")
+          expect(page).not_to have_content("cannot be empty")
         end
         within(".project-folder") do
           expect(page).to have_content("cannot be empty")