Fix sorting of external protocols and start showing results

app/assets/javascripts/protocols/external_protocols_tab.js

@@ -17,8 +17,7 @@ function applyClickCallbackOnProtocolCards() {
       },
       error: function(_error) {
         // TODO: we should probably show some alert bubble
-        $('.empty-preview-panel').show();
+        resetPreviewPanel();
-        $('.full-preview-panel').hide();
         animateSpinner($('.protocol-preview-panel'), false);
       }
     });
@@ -27,4 +26,49 @@ function applyClickCallbackOnProtocolCards() {
   });
 }
 
-applyClickCallbackOnProtocolCards();
+// Resets preview to the default state
+function resetPreviewPanel() {
+  $('.empty-preview-panel').show();
+  $('.full-preview-panel').hide();
+}
+
+function setDefaultViewState() {
+  resetPreviewPanel();
+  $('.empty-text').show();
+  $('.list-wrapper').hide();
+}
+
+// Apply AJAX callbacks onto the search box
+function applySearchCallback() {
+  // Submit form on every input in the search box
+  $('input[name="key"]').off('input').on('input', function() {
+    $('form.protocols-search-bar').submit();
+  });
+
+  // Submit form when clicking on sort buttons
+  $('.protocol-sort label').off('click').on('click', function () {
+    $('form.protocols-search-bar').submit();
+  });
+
+  // Bind ajax calls on the form
+  $('form.protocols-search-bar').off('ajax:success').off('ajax:error')
+    .bind('ajax:success', function(evt, data, status, xhr) {
+      if (data.html) {
+        resetPreviewPanel();
+        $('.empty-text').hide();
+        $('.list-wrapper').show();
+
+        $('.list-wrapper').html(data.html)
+        applyClickCallbackOnProtocolCards();
+      } else {
+        setDefaultViewState();
+      }
+    })
+    .bind("ajax:error", function(evt, xhr, status, error) {
+      setDefaultViewState();
+
+      console.log(xhr.responseText);
+    });
+}
+
+applySearchCallback();

app/assets/stylesheets/protocol_management.scss

@@ -150,6 +150,11 @@
       font-size: 13px;
       margin-top: 20px;
     }
+
+    .list-wrapper {
+      overflow: auto;
+      height: 100%;
+    }
   }
 
   .protocol-preview-panel {

app/services/protocol_importers/search_protocols_service.rb

@@ -51,16 +51,6 @@ module ProtocolImporters
         @errors[:invalid_params][:page_id] = 'Page needs to be positive'
       end
 
-      # try if order_field is ok
-      if @query_params[:order_field] && CONSTANTS[:available_order_fields].exclude?(@query_params[:order_field]&.to_sym)
-        @errors[:invalid_params][:order_field] = 'Order field is not ok'
-      end
-
-      # try if order dir is ok
-      if @query_params[:order_field] && CONSTANTS[:available_order_dirs].exclude?(@query_params[:order_dir]&.to_sym)
-        @errors[:invalid_params][:order_dir] = 'Order dir is not ok'
-      end
-
       # try if endpints exists
       @errors[:invalid_params][:source_endpoint] = 'Wrong source endpoint' unless endpoint_name&.is_a?(String)
 

app/utilities/protocol_importers/protocols_io/v3/api_client.rb

@@ -44,8 +44,13 @@ module ProtocolImporters
         #     Default is 1.
         def protocol_list(query_params = {})
           response = with_handle_network_errors do
+            sort_mappings = CONSTANTS[:sort_mappings]
             query = CONSTANTS.dig(:endpoints, :protocols, :default_query_params)
-                             .merge(query_params)
+                             .merge(query_params.except(:sort_by))
+
+            if sort_mappings[query_params[:sort_by].to_sym]
+              query = query.merge(sort_mappings[query_params[:sort_by].to_sym])
+            end
 
             self.class.get('/protocols', query: query)
           end

app/utilities/protocol_importers/protocols_io/v3/protocol_normalizer.rb

@@ -69,6 +69,7 @@ module ProtocolImporters
             {
               id: e[:id],
               title: e[:title],
+              source: Constants::PROTOCOLS_IO_V3_API[:source_id],
               created_on: e[:created_on],
               authors: e[:authors].map { |a| a[:name] }.join(', '),
               nr_of_steps: e[:stats][:number_of_steps],

app/views/protocol_importers/_list_of_protocol_cards.html.erb

@@ -1,4 +1,4 @@
-<% protocols.each do |protocol| %>
+<% protocols[:protocols].each do |protocol| %>
 	<%= render partial: 'protocol_importers/protocol_card',
 		locals: { protocol: protocol } %>
 	<hr>

app/views/protocols/index/_external_protocols_tab.html.erb

@@ -21,10 +21,11 @@
           <span class='input-group-addon'><i class='fas fa-search '></i></span>
         </div>
       </div>
+
       <div class='col-md-7'>
         <div class='protocol-sort'>
           <span><%= t('protocols.index.external_protocols.sort_by.title') %></span>
-          <div class='btn-group' data-toggle='buttons' >
+          <div class='btn-group' data-toggle='buttons'>
             <label class='btn btn-link active'>
               <input type='radio' name='sort_by' id='alphabetically' value='alpha'>
               <%= t('protocols.index.external_protocols.sort_by.alphabetically') %>
@@ -52,32 +53,7 @@
         <%= t('protocols.index.external_protocols.list_panel.empty_text') %>
       </div>
 
-      <div class='list'>
+      <div class='list-wrapper'></div>
-      <div class="external-protocol-result">
-        <a href="#" data-source="protocolsio/v3" data-id="11176" data-action="external-import" data-url="<%= team_build_external_protocol_path(current_team.id,) %>">Protocols IO, 11176</a>
-      </div>
-
-      <div class='protocol-card'
-        data-protocol-source='protocolsio/v3'
-        data-show-url='<%= team_show_external_protocol_path(current_team.id) %>'
-        data-show-protocol-id='Extracting-DNA-from-bananas-esvbee6'>
-        Banana protocol (click me)
-      </div>
-
-      <div class='protocol-card'
-        data-protocol-source='protocolsio/v3'
-        data-show-url='<%= team_show_external_protocol_path(current_team.id) %>'
-        data-show-protocol-id='cut-run-targeted-in-situ-genome-wide-profiling-wit-mgjc3un'>
-        Cut run targeted protocol (click me)
-      </div>
-
-      <div class='protocol-card'
-        data-protocol-source='protocolsio/3'
-        data-show-url='<%= team_show_external_protocol_path(current_team.id) %>'
-        data-show-protocol-id='errorr'>
-        Error protocol (click me, should default to default screen)
-      </div>
-      </div>
     </div>
 
     <div class='col-md-7 protocol-preview-panel'>

config/initializers/constants.rb

@@ -203,8 +203,11 @@ class Constants
     base_uri: 'https://www.protocols.io/api/v3/',
     default_timeout: 10,
     debug_level: :debug,
-    available_order_fields: %i(title created_on),
+    sort_mappings: {
-    available_order_dirs: %i(asc desc),
+      alpha: { order_field: :name, order_dir: :asc },
+      newest: { order_field: :date, order_dir: :desc },
+      oldest: { order_field: :date, order_dir: :asc }
+    },
     endpoints: {
       protocols: {
         default_query_params: {