From f1ced42ae6bd1c73638d566962a3c689284ea2a3 Mon Sep 17 00:00:00 2001
From: zmagoD <zmago_devetak@yahoo.com>
Date: Fri, 30 Apr 2021 15:25:08 +0200
Subject: [PATCH] add filtering logic

---
 app/assets/javascripts/application.js.erb     |  1 +
 app/assets/javascripts/shared/filter_list.js  | 20 +++++++++++++++++++
 .../partials/_new_assignments_form.html.erb   |  3 +++
 .../partials/_user_assignment_field.html.erb  |  2 +-
 config/locales/en.yml                         |  1 +
 5 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/javascripts/shared/filter_list.js

diff --git a/app/assets/javascripts/application.js.erb b/app/assets/javascripts/application.js.erb
index 474cd5e98..3ca3166e4 100644
--- a/app/assets/javascripts/application.js.erb
+++ b/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
diff --git a/app/assets/javascripts/shared/filter_list.js b/app/assets/javascripts/shared/filter_list.js
new file mode 100644
index 000000000..c7d9d0844
--- /dev/null
+++ b/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);
+})();
diff --git a/app/views/access_permissions/partials/_new_assignments_form.html.erb b/app/views/access_permissions/partials/_new_assignments_form.html.erb
index f49c8eaca..67fef99c2 100644
--- a/app/views/access_permissions/partials/_new_assignments_form.html.erb
+++ b/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  %>
diff --git a/app/views/access_permissions/partials/_user_assignment_field.html.erb b/app/views/access_permissions/partials/_user_assignment_field.html.erb
index 258b2439d..105f68ce1 100644
--- a/app/views/access_permissions/partials/_user_assignment_field.html.erb
+++ b/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>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 545aaee4f..5b04be165 100644
--- a/config/locales/en.yml
+++ b/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: "&#128269; Find people"
     modals:
       show_modal:
         title: "Access to %{resource_name}"