add filtering logic

app/assets/javascripts/application.js.erb

@@ -47,6 +47,7 @@
 //= require shared/replace_form
 //= require shared/remote_destroy
 //= require shared/toggle_visibility
+//= require shared/filter_list
 //= require activestorage
 //= require global_activities/side_pane
 //= require protocols/header

app/assets/javascripts/shared/filter_list.js

@@ -0,0 +1,20 @@
+(function() {
+  'use strict';
+
+  function initFilterListListeners() {
+    $(document).on('input', 'input[data-action="filter-list"]', function() {
+      let list = document.getElementById($(this).attr('data-target'));
+      let searchTerm = $(this).val();
+      $(list).find('div[data-filter-item]').each((_, el) => {
+        let itemValue = el.getAttribute('data-filter-item').toLowerCase();
+        if (itemValue.search(searchTerm.toLowerCase()) === -1) {
+          el.classList.add('hidden');
+        } else {
+          el.classList.remove('hidden');
+        }
+      });
+    });
+  }
+
+  $(document).one('turbolinks:load', initFilterListListeners);
+})();

app/views/access_permissions/partials/_new_assignments_form.html.erb

@@ -12,6 +12,9 @@
   </div>
   <%= form_with(model: form_object, url: create_path, method: :post, remote: true, html: { id: 'new-user-assignment-to-project-form', data: { action: 'replace-form', target: '#user_assignments_modal' } }) do |f| %>
     <div class="modal-body">
+      <div class="form-group">
+        <%= text_field_tag :search_users, '', placeholder: t('.find_people_html'), class: 'form-control', data: { action: 'filter-list', target: 'new-user-assignment-to-project-form' } %>
+      </div>
       <% f.object.resource_members.each do |member| %>
         <%= f.fields_for :resource_members, member do |member_form| %>
           <%= render 'access_permissions/partials/user_assignment_field.html.erb', f: member_form  %>

app/views/access_permissions/partials/_user_assignment_field.html.erb

@@ -6,7 +6,7 @@
   id = dom_id(user, :new_project_member)
 %>
 
-<div class="row">
+<div class="row" data-filter-item="<%= user.full_name %>">
   <%= f.hidden_field :user_id, value: user.id, name:"access_permissions_new_user_project_form[resource_members][#{user.id}][user_id]"  %>
   <div class="col-xs-1 checkbox text-center">
     <label>

config/locales/en.yml

@@ -2336,6 +2336,7 @@ en:
         submit: "Grand access"
         submit_singular: "Grand access to 1 user"
         submit_plural: "Grand access to {num} users"
+        find_people_html: "🔍 Find people"
     modals:
       show_modal:
         title: "Access to %{resource_name}"