Updating the department select to utilize LuxInputMultiSelect (#2251)

The component only allows an item to be selected once (only for non
async results which departments are).

fixes #2134

Author: carolyncole

app/assets/stylesheets/_wizard.scss

@@ -155,6 +155,10 @@
         .modal-content .text-input,
         .lux-field {
           width: 100%;
+
+          .search-icon {
+            top: 0.5rem;
+          }
         }
       }
 
@@ -518,7 +522,8 @@
       }
 
       .data-manager .text-input,
-      .data-sponsor .text-input {
+      .data-sponsor .text-input,
+      .departments .text-input {
         width: 95%;
       }
 

app/views/new_project_wizard/_form_department_input.html.erb

@@ -2,29 +2,36 @@
   <%= render partial: "/new_project_wizard/form_field_label",
            locals: {field_label: "Department(s)", field_sub_label: "Required"} %>
   <div class="input-frame">
-    <div class="text-input">
+    <div class="text-input lux-field">
       <div class="horizontal-frame">
         <div class="vertical-frame">
-          <input class="form-input datalist" type="text" name="department_find" id="department_find"
-                list="princeton_departments" placeholder="Search using department code or name" autocomplete="off"></input>
-          <datalist id="princeton_departments">
-            <% @princeton_departments.each do |department| %>
-                <!-- Non breaking space &nbsp; is at the end of every option to indicate an option was selected not just the user typing -->
-                <option data-value="<%= {code: department.code, name: department.name}.to_json %>" value="<%= "(#{department.code}) #{department.name}" %>&nbsp;"></option>
-            <% end %>
-          </datalist>
+          <div class="lux-field">
+            <lux-input-multiselect
+                label="Departments"
+                hide-label="true"
+                selected-items-label=""
+                none-selected-label="No departments selected"
+                placeholder="Search using department code or name"
+                :items='<%= @princeton_departments.map{|dep| {id: dep.code, label: "(#{dep.code}) #{dep.name}", value: dep.name }}.to_json %>'
+                :default-values="<%= departments.map{|dep| {id: dep['code'], value: dep['name']}}.to_json %>"
+                >
+                <template #item="{itemProps}">
+                    <div class="info">
+                      <lux-badge class="badge">
+                        <div class="badge-text">{{ itemProps.id }}</div>
+                      </lux-badge>
+                      <div class="item-text">{{ itemProps.value }}</div>
+                    </div>
+                </template>
+
+                <template v-slot:hidden-input="{ selectedItems }">
+                  <input v-for="item in selectedItems" type="hidden" name="request[departments][]" :value="JSON.stringify( {'code': item.id, 'name': item.value})" class="selected-item"></input>
+                </template>
+            </lux-input-multiselect>
+          </div>
           <div class="input-error">
                <%= department_error %>
           </div>
-          <ul class="selected-departments selected-items">
-            <% departments.each do |department| %>
-              <li class="selected-item">
-                <%= "(#{department['code']}) #{department['name']}" %>
-                <div tabindex="0" class="remove-department remove-item" title="Remove department"></div>
-                <input type="hidden" name="request[departments][]" value="<%= {code: department['code'], name: department['name']}.to_json %>"> </input>
-              </li>
-            <% end %>
-          </ul>
           <input type="hidden" id="request-departments" name="request[departments][]" value="" />
         </div>
       </div>

app/views/new_project_wizard/_review_and_submit_form.html.erb

@@ -1,4 +1,4 @@
-<div class="section">
+<div class="section lux">
     <div class="section-title">
       <div class="section-frame">
         Project Information - Basic Details

app/views/new_project_wizard/project_information.html.erb

@@ -1,9 +1,11 @@
 <% content_for :title, "New Project Request" %>
 <% content_for :form_title, "Basic Details" %>
 <% content_for :form_description, "Tell us a little about your project! These details are important for setting up and organizing your project." %>
-<%= render partial: "/new_project_wizard/form_project_title_input", locals: {project_title: @request_model.project_title || "", project_title_error: "", input_id: "project_title" } %>
-<%= render partial: "/new_project_wizard/form_project_path_input", locals: {project_folder: @request_model.project_folder || "", project_folder_error: "",
-                                                                            parent_folder: @request_model.parent_folder || "", parent_folder_error: ""} %>
-<%= render partial: "/new_project_wizard/form_project_purpose_input", locals: {project_purpose: @request_model.project_purpose || "", project_purpose_error: "" } %>
-<%= render partial: "/new_project_wizard/form_project_description_input", locals: {description: @request_model.description || "", description_error: "" } %>
-<%= render partial: "/new_project_wizard/form_department_input", locals: {departments: @request_model.departments || [], department_error: "" } %>
+<div class="lux">
+    <%= render partial: "/new_project_wizard/form_project_title_input", locals: {project_title: @request_model.project_title || "", project_title_error: "", input_id: "project_title" } %>
+    <%= render partial: "/new_project_wizard/form_project_path_input", locals: {project_folder: @request_model.project_folder || "", project_folder_error: "",
+                                                                                parent_folder: @request_model.parent_folder || "", parent_folder_error: ""} %>
+    <%= render partial: "/new_project_wizard/form_project_purpose_input", locals: {project_purpose: @request_model.project_purpose || "", project_purpose_error: "" } %>
+    <%= render partial: "/new_project_wizard/form_project_description_input", locals: {description: @request_model.description || "", description_error: "" } %>
+    <%= render partial: "/new_project_wizard/form_department_input", locals: {departments: @request_model.departments || [], department_error: "" } %>
+</div>

spec/support/select_department.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+def select_and_verify_department(department:, department_code:, department_list:)
+  select_department(department:, department_code:)
+
+  within(".departments") do
+    # The user selected is visible on the page
+    expect(page).to have_content(department)
+    # the hidden input has all the users
+    expect(page).to have_field("request[departments][]", type: :hidden, with: { code: department_code, name: department }.to_json)
+
+    department_list.each do |old_department|
+      expect(page).to have_field("request[departments][]", type: :hidden, with: { code: old_department[:code], name: old_department[:name] }.to_json)
+    end
+
+    # the javascript cleared the find to get ready for the next search
+    expect(page.find(".lux-field input").value).to eq("")
+  end
+end
+
+def select_department(department:, department_code:)
+  within(".departments") do
+    page.find(".lux-field input").fill_in with: department_code
+    expect(page).to have_content department
+    find(".lux-autocomplete-result").click
+  end
+end

spec/system/new_project_request_wizard_spec.rb

@@ -82,13 +82,9 @@
       select "Teaching", from: :project_purpose
       fill_in :description, with: "An awesome project to show the wizard is magic"
       expect(page).to have_content "46/1000 characters"
-      expect(page).not_to have_content("(77777) RDSS-Research Data and Scholarship Services")
-      # Non breaking space `u00A0` is at the end of every option to indicate an option was selected
-      select "(77777) RDSS-Research Data and Scholarship Services\u00A0", from: "department_find"
-      # This is triggering the html5 element like it would normally if the page has focus
-      page.find(:datalist_input, "department_find").execute_script("document.getElementById('department_find').dispatchEvent(new Event('input'))")
-      expect(page).to have_content("(77777) RDSS-Research Data and Scholarship Services")
-      expect(page).to have_field("request[departments][]", type: :hidden, with: "{\"code\":\"77777\",\"name\":\"RDSS-Research Data and Scholarship Services\"}")
+      expect(page).not_to have_content("RDSS-Research Data and Scholarship Services")
+      select_and_verify_department(department: "RDSS-Research Data and Scholarship Services", department_code: "77777", department_list: [])
+      select_and_verify_department(department: "HPC-High Performance Computing", department_code: "66666", department_list: [{ code: "77777", name: "RDSS-Research Data and Scholarship Services" }])
 
       select_user(current_user, "data_sponsor", "request[data_sponsor]")
       select_user(current_user, "data_manager", "request[data_manager]")
@@ -156,14 +152,9 @@
       fill_in :project_folder, with: "skeletor"
       fill_in :description, with: "An awesome project to show the wizard is magic"
       expect(page).to have_content "46/1000 characters"
-      expect(page).not_to have_content("(77777) RDSS-Research Data and Scholarship Services")
-      # Non breaking space `u00A0` is at the end of every option to indicate an option was selected
-      select "(77777) RDSS-Research Data and Scholarship Services\u00A0", from: "department_find"
       select "Research", from: "project_purpose"
-      # This is triggering the html5 element like it would normally if the page has focus
-      page.find(:datalist_input, "department_find").execute_script("document.getElementById('department_find').dispatchEvent(new Event('input'))")
-      expect(page).to have_content("(77777) RDSS-Research Data and Scholarship Services")
-      expect(page).to have_field("request[departments][]", type: :hidden, with: "{\"code\":\"77777\",\"name\":\"RDSS-Research Data and Scholarship Services\"}")
+      expect(page).not_to have_content("RDSS-Research Data and Scholarship Services")
+      select_and_verify_department(department: "RDSS-Research Data and Scholarship Services", department_code: "77777", department_list: [])
 
       # force a save and page reload to make sure all data is being saved to the model
       click_on "Next"
@@ -184,7 +175,7 @@
       expect(page).to have_field("parent_folder", with: "abc_lab")
       expect(page).to have_field("project_folder", with: "skeletor")
       expect(page).to have_field("description", with: "An awesome project to show the wizard is magic")
-      expect(page).to have_content("(77777) RDSS-Research Data and Scholarship Services")
+      expect(page).to have_content("RDSS-Research Data and Scholarship Services")
       expect(page).to have_field("request[departments][]", type: :hidden, with: "{\"code\":\"77777\",\"name\":\"RDSS-Research Data and Scholarship Services\"}")
       click_on "Next"
       # TODO: when the wizard is fully functional the correct next step(s) are below
@@ -273,17 +264,13 @@
       expect(page).to have_content "46/1000 characters"
 
       # Select a department
-      department_to_test = "(77777) RDSS-Research Data and Scholarship Services"
-      expect(page).not_to have_content(department_to_test)
-      # Non breaking space `u00A0` is at the end of every option to indicate an option was selected
-      select "#{department_to_test}\u00A0", from: "department_find"
-      # This is triggering the html5 element like it would normally if the page has focus
-      page.find(:datalist_input, "department_find").execute_script("document.getElementById('department_find').dispatchEvent(new Event('input'))")
-      expect(page).to have_content(department_to_test)
-      expect(page).to have_field("request[departments][]", type: :hidden, with: "{\"code\":\"77777\",\"name\":\"RDSS-Research Data and Scholarship Services\"}")
+      department_to_test = "RDSS-Research Data and Scholarship Services"
+      select_and_verify_department(department: department_to_test, department_code: "77777", department_list: [])
 
       # Remove the department
-      page.execute_script("document.getElementsByClassName('remove-department')[0].click()")
+      within(".departments") do
+        page.execute_script("document.getElementsByClassName('remove-item')[0].click()")
+      end
       expect(page).not_to have_content(department_to_test)
     end
 
@@ -342,17 +329,21 @@
       sign_in current_user
       visit "new-project/project-info"
 
-      # Non breaking space `u00A0` is at the end of every option to indicate an option was selected
-      select "(77777) RDSS-Research Data and Scholarship Services\u00A0", from: "department_find"
-      select "(77777) RDSS-Research Data and Scholarship Services\u00A0", from: "department_find"
-      # This is triggering the html5 element like it would normally if the page has focus
-      page.find(:datalist_input, "department_find").execute_script("document.getElementById('department_find').dispatchEvent(new Event('input'))")
+      select_and_verify_department(department: "RDSS-Research Data and Scholarship Services", department_code: "77777", department_list: [])
+      # the option is no longer available
+      within(".departments") do
+        page.find(".lux-field input").fill_in with: "77777"
+        within(".lux-autocomplete-input") do
+          expect(page).not_to have_content "RDSS-Research Data and Scholarship Services"
+        end
+      end
+
       expect(page).to have_field("request[departments][]", type: :hidden, with: "{\"code\":\"77777\",\"name\":\"RDSS-Research Data and Scholarship Services\"}")
-      expect(page).to have_content("(77777) RDSS-Research Data and Scholarship Services").exactly(2).times
+      expect(page).to have_content("RDSS-Research Data and Scholarship Services").exactly(1).times
 
       click_on "Review and Submit"
       expect(page).to have_content("Take a moment to review your details and make any necessary edits before finalizing.")
-      expect(page).to have_content("(77777) RDSS-Research Data and Scholarship Services").exactly(1).times
+      expect(page).to have_content("RDSS-Research Data and Scholarship Services").exactly(1).times
 
       fill_in :project_title, with: "No Duplicate Departments Project"
       fill_in :parent_folder, with: "abc_lab"

spec/system/skeletor_spec.rb

@@ -46,12 +46,9 @@
       fill_in :description, with: "An awesome project to show the wizard is magic"
       select "Teaching", from: :project_purpose
       expect(page).to have_content "46/1000 characters"
-      expect(page).not_to have_content("(77777) RDSS-Research Data and Scholarship Services")
-      # Non breaking space `u00A0` is at the end of every option to indicate an option was selected
-      select "(77777) RDSS-Research Data and Scholarship Services\u00A0", from: "department_find"
-      # This is triggering the html5 element like it would normally if the page has focus
-      page.find(:datalist_input, "department_find").execute_script("document.getElementById('department_find').dispatchEvent(new Event('input'))")
-      expect(page).to have_content("(77777) RDSS-Research Data and Scholarship Services")
+      expect(page).not_to have_content("RDSS-Research Data and Scholarship Services")
+      select_and_verify_department(department: "RDSS-Research Data and Scholarship Services", department_code: "77777", department_list: [])
+      expect(page).to have_content("RDSS-Research Data and Scholarship Services")
       expect(page).to have_field("request[departments][]", type: :hidden, with: "{\"code\":\"77777\",\"name\":\"RDSS-Research Data and Scholarship Services\"}")
       click_on "Roles and People"
       select_user(datasponsor, "data_sponsor", "request[data_sponsor]")
@@ -90,11 +87,8 @@
       select "Teaching", from: :project_purpose
       expect(page).to have_content "46/1000 characters"
       expect(page).not_to have_content("(77777) RDSS-Research Data and Scholarship Services")
-      # Non breaking space `u00A0` is at the end of every option to indicate an option was selected
-      select "(77777) RDSS-Research Data and Scholarship Services\u00A0", from: "department_find"
-      # This is triggering the html5 element like it would normally if the page has focus
-      page.find(:datalist_input, "department_find").execute_script("document.getElementById('department_find').dispatchEvent(new Event('input'))")
-      expect(page).to have_content("(77777) RDSS-Research Data and Scholarship Services")
+      select_and_verify_department(department: "RDSS-Research Data and Scholarship Services", department_code: "77777", department_list: [])
+      expect(page).to have_content("RDSS-Research Data and Scholarship Services")
       expect(page).to have_field("request[departments][]", type: :hidden, with: "{\"code\":\"77777\",\"name\":\"RDSS-Research Data and Scholarship Services\"}")
       click_on "Roles and People"
       select_user(datasponsor, "data_sponsor", "request[data_sponsor]")

spec/system/space_ghost_spec.rb

@@ -25,12 +25,9 @@
       fill_in :description, with: "An awesome project to show the wizard is magic"
       select "Teaching", from: :project_purpose
       expect(page).to have_content "46/1000 characters"
-      expect(page).not_to have_content("(77777) RDSS-Research Data and Scholarship Services")
-      # Non breaking space `u00A0` is at the end of every option to indicate an option was selected
-      select "(77777) RDSS-Research Data and Scholarship Services\u00A0", from: "department_find"
-      # This is triggering the html5 element like it would normally if the page has focus
-      page.find(:datalist_input, "department_find").execute_script("document.getElementById('department_find').dispatchEvent(new Event('input'))")
-      expect(page).to have_content("(77777) RDSS-Research Data and Scholarship Services")
+      expect(page).not_to have_content("RDSS-Research Data and Scholarship Services")
+      select_and_verify_department(department: "RDSS-Research Data and Scholarship Services", department_code: "77777", department_list: [])
+      expect(page).to have_content("RDSS-Research Data and Scholarship Services")
       expect(page).to have_field("request[departments][]", type: :hidden, with: "{\"code\":\"77777\",\"name\":\"RDSS-Research Data and Scholarship Services\"}")
       click_on "Next"