Feature: Enhance agents search input component (#703)

* make agents search field component results unlimited to only 4 * make agents cherchable by acronym, affiliations, email and home page * Update the agent search input to display the result in this format Orga name (ACRONYM) – ROR:003vg9w96 and for persons Person Name – ORCID:0000-1524-5487-5487 * chagne display mode value type from string to boolean in search input component * remove agents search logic from UI side and limit it to only name, acronym and identifiers * use the endpoint '/search/agents' for the agents search input component
ontoportal-lirmm · Jul 25, 2024 · 1e4204f · 1e4204f
1 parent 8c1e205
commit 1e4204f
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 22 deletions.
diff --git a/app/assets/stylesheets/components/search_input.scss b/app/assets/stylesheets/components/search_input.scss
@@ -9,6 +9,12 @@
   position: absolute;
 }
 
+.search-container.search-container-scroll{
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+
 .search-content{
   display: flex;
   flex-wrap: wrap;

diff --git a/app/components/agent_search_input_component/agent_search_input_component.html.haml b/app/components/agent_search_input_component/agent_search_input_component.html.haml
@@ -1,11 +1,11 @@
 = hidden_field_tag  "#{@name_prefix}[#{@id}]"
-= render SearchInputComponent.new(id: 'agent' + @id, name:'agent' + @id, ajax_url: "/ajax/agents?agent_type=#{@agent_type}&name=",
+= render SearchInputComponent.new(id: 'agent' + @id, name:'agent' + @id, ajax_url: "/ajax/agents?query=", display_all: true,
      item_base_url:"/agents/#{@id}?parent_id=#{@parent_id}&edit_on_modal=#{@edit_on_modal}&name_prefix=#{@name_prefix}&deletable=#{@deletable}&agent_id=", id_key: 'id',
      use_cache: false,
      actions_links: {create_new_agent: {link: "/agents/new?name=&id=#{@id}&parent_id=#{@parent_id}&type=#{@agent_type}&show_affiliations=#{@show_affiliations}&deletable=#{@deletable}&edit_on_modal=#{@edit_on_modal}&name_prefix=#{@name_prefix}[#{@id}]", target:'_self'}}) do |s|
   - s.template do
     %a{href: "LINK", class: "search-content", 'data-turbo-frame': '_self'}
       %p.search-element.home-searched-ontology
-        NAME (IDENTIFIERS)
+        NAME ACRONYM IDENTIFIERS
       %p.home-result-type
         TYPE
diff --git a/app/components/search_input_component.rb b/app/components/search_input_component.rb
@@ -11,7 +11,8 @@ def initialize(id: '',
                  item_base_url:,
                  id_key:,
                  links_target: '_top',
-                 search_icon_type: nil)
+                 search_icon_type: nil,
+                 display_all: false)
     @id = id
     @name = name
     @placeholder = placeholder
@@ -23,6 +24,7 @@ def initialize(id: '',
     @id_key = id_key
     @links_target = links_target
     @search_icon_type = search_icon_type
+    @display_all = display_all
   end
   def action_link_info(value)
     if value.is_a?(Hash)
@@ -34,4 +36,7 @@ def action_link_info(value)
   def nav_icon_class
     @search_icon_type.eql?('nav') ? 'search-input-nav-icon' : ''
   end
+  def display_all_mode_class
+    @display_all ? 'search-container-scroll' : ''
+  end
 end
diff --git a/app/components/search_input_component/search_input_component.html.haml b/app/components/search_input_component/search_input_component.html.haml
@@ -4,7 +4,8 @@
   'data-search-input-id-key-value': @id_key,
   'data-search-input-cache-value': @use_cache.to_s,
   'data-search-input-scroll-down-value': @scroll_down.to_s,
-  'data-search-input-selected-item-value': 0
+  'data-search-input-selected-item-value': 0,
+  'data-search-input-display-all-value': @display_all
   }
 
   - if @search_icon_type
@@ -21,7 +22,7 @@
   = render Input::InputFieldComponent.new(name: @name, placeholder: @placeholder,
                                             data: {'action': 'input->search-input#search blur->search-input#blur keydown.down->search-input#arrow_down keydown.up->search-input#arrow_up keydown.enter->search-input#enter_key',
                                             'search-input-target': 'input'})
-  .search-container{'data-search-input-target': 'dropDown', 'data-action': 'mousedown->search-input#prevent'}
+  %div{class: "search-container #{display_all_mode_class}", 'data-search-input-target': 'dropDown', 'data-action': 'mousedown->search-input#prevent'}
     - @actions_links.each do |key, value|
       - link, target = action_link_info(value)
       %a.search-content#search-content{href:  link, 'data-turbo-frame': target, 'data-search-input-target': 'actionLink'}

diff --git a/app/components/search_input_component/search_input_component_controller.js b/app/components/search_input_component/search_input_component_controller.js
@@ -12,7 +12,8 @@ export default class extends Controller {
         idKey: String,
         cache: {type: Boolean, default: true},
         selectedItem: Number,
-        searchEndpoint: {type: String, default: '/search'}
+        searchEndpoint: {type: String, default: '/search'},
+        displayAll: Boolean
     }
 
     connect() {
@@ -114,14 +115,14 @@ export default class extends Controller {
             this.dropDown.innerHTML = ""
             let breaker = 0
             for (let i = 0; i < this.items.length; i++) {
-                if (breaker === 4) {
+                if (!this.displayAllValue && breaker === 4) {
                     break;
                 }
                 // Get the current item from the ontologies array
                 const item = this.items[i];
 
                 let text =  Object.values(item).reduce((acc, value) => acc + value, "")
-
+                
                 // Check if the item contains the substring
                 if (!this.cacheValue || text.toLowerCase().includes(inputValue.toLowerCase())) {
                     results_list.push(item);
@@ -149,18 +150,22 @@ export default class extends Controller {
 
     #renderLine(item) {
         let template = this.templateTarget.content
-        let newElement = template.firstElementChild
-        let string = newElement.outerHTML
-
+        let newElement = template.firstElementChild.outerHTML
         Object.entries(item).forEach( ([key, value]) => {
             key = key.toString().toUpperCase()
             if (key === 'TYPE'){
                 value  = value.toString().split('/').slice(-1)
             }
+            if (key === 'ACRONYM'){
+                value = value ? `(${value.toString()})` : ''
+            }
+            if (key === 'IDENTIFIERS'){
+                value = value ? `- ${value.toString()}` : ''
+            }
             const regex = new RegExp('\\b' + key + '\\b', 'gi');
-            string =  string.replace(regex, value ? value.toString() : "")
+            newElement =  newElement.replace(regex, value ? value.toString() : "")
         })
-
-        return new DOMParser().parseFromString(string, "text/html").body.firstElementChild
+        
+        return new DOMParser().parseFromString(newElement, "text/html").body.firstElementChild
     }
 }
diff --git a/app/controllers/agents_controller.rb b/app/controllers/agents_controller.rb
@@ -18,15 +18,15 @@ def show
   end
 
   def ajax_agents
-    filters = { name: params[:name] }
-    filters[:agentType] = params[:agent_type] if params[:agent_type]
-    @agents = LinkedData::Client::Models::Agent.all(filters)
-    agents_json = @agents.map do |x|
+    filters = { query: params[:query]}
+    @agents = LinkedData::Client::HTTP.get('/search/agents', filters)
+    agents_json = @agents.collection.map do |x|
       {
-        id: x.id,
-        name: x.name,
-        type: x.agentType,
-        identifiers: x.identifiers.map { |i| "#{i.schemaAgency}:#{i.notation}" }.join(', ')
+        id: x.resource_id,
+        name: x.name_text,
+        type: x.agentType_t,
+        identifiers: x.identifiers_texts&.join(', '),
+        acronym: x.acronym_text
       }
     end