Add protocols filters front end [SCI-7517]

app/assets/stylesheets/global_activities.scss

@@ -463,6 +463,7 @@
     padding-left: 5px;
     padding-right: 34px;
     position: relative;
+    width: 100%;
     z-index: 3;
 
     &::placeholder {

app/assets/stylesheets/protocols/index.scss

@@ -1,6 +1,4 @@
-// scss-lint:disable IdSelector
-// scss-lint:disable SelectorDepth
-// scss-lint:disable NestingDepth
+// scss-lint:disable IdSelector SelectorDepth NestingDepth
 
 .protocols-index {
   .protocols-datatable {
@@ -47,4 +45,24 @@
       height: 100%;
     }
   }
+
+  .protocol-filters {
+    display: flex;
+    position: relative;
+
+    .filter-container {
+      margin-right: 1em;
+    }
+
+    .dropdown-option.users-dropdown-list {
+      padding: 8px 10px;
+
+      .item-avatar {
+        border-radius: 50%;
+        height: 32px;
+        margin: 0 16px 0 0;
+        width: 32px;
+      }
+    }
+  }
 }

app/controllers/protocols_controller.rb

@@ -1029,13 +1029,13 @@ class ProtocolsController < ApplicationController
   end
 
   def permissions
-    if stale?(@protocol)
+    #if stale?(@protocol)
       render json: {
         copyable: can_clone_protocol_in_repository?(@protocol),
         archivable: can_manage_protocol_in_repository?(@protocol),
         restorable: can_restore_protocol_in_repository?(@protocol)
       }
-    end
+    #end
   end
 
   private

app/datatables/protocols_datatable.rb

@@ -87,6 +87,9 @@ class ProtocolsDatatable < CustomDatatable
         DT_CloneUrl: if can_clone_protocol_in_repository?(record)
                        clone_protocol_path(record, team: @team, type: @type)
                      end,
+        DT_RowAttr: {
+          'data-permissions-url': permissions_protocol_path(record)
+        },
         '1': record.archived? ? escape_input(record.name) : name_html(record),
         '2': record.code,
         '3': versions_html(record),

app/views/protocols/index.html.erb

@@ -27,6 +27,7 @@
 <%= render partial: "protocols/import_export/import_json_protocol_modal.html.erb" %>
 <%= render partial: "protocols/index/general_toolbar.html.erb" %>
 <%= render partial: "protocols/index/action_toolbar.html.erb" %>
+<%= render partial: "protocols/index/protocol_filters.html.erb" %>
 <%= render partial: "protocols/index/make_private_results_modal.html.erb" %>
 <%= render partial: "protocols/index/publish_results_modal.html.erb" %>
 <%= render partial: "protocols/index/confirm_archive_modal.html.erb" %>

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

@@ -30,13 +30,4 @@
       <% end %>
     </div>
   </div>
-
-  <div class="right-general-toolbar">
-    <%= render layout: 'shared/filter_dropdown', locals: {
-      container_class: 'protocols-filters',
-      dropdown_title: t("filters_modal.title"),
-      search_field_history_key: 'protocol_filters_per_team'
-    } do %>
-    <% end %>
-  </div>
 </template>

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

@@ -0,0 +1,33 @@
+<template id="protocolFilters">
+  <%= render layout: 'shared/filter_dropdown', locals: {
+    container_class: 'protocols-filters',
+    dropdown_title: 'Filters',
+    search_field_history_key: 'protocols_filters_per_team'
+  } do %>
+    <%= render partial: 'shared/filter_dropdown/text_search', locals: {container_class: ''} %>
+    <%= render partial: 'shared/filter_dropdown/datetime_search', locals: {container_class: 'published-on-filter', label: 'Published on', view_mode: nil } %>
+    <%= render partial: 'shared/filter_dropdown/datetime_search', locals: {container_class: 'modified-on-filter', label: 'Modified on', view_mode: nil } %>
+    <%= render partial: 'shared/filter_dropdown/datetime_search', locals: {container_class: 'archived-on-filter', label: 'Archived on', view_mode: 'archived' } %>
+    <div class="select-block">
+      <label>Published by</label>
+      <select class="published-by-filter"
+              data-ajax-url="<%= users_filter_projects_path %>"
+              data-placeholder="Select a publisher">
+      </select>
+    </div>
+    <div class="select-block">
+      <label>Access</label>
+      <select class="access-by-filter"
+              data-ajax-url="<%= users_filter_projects_path %>"
+              data-placeholder="Select who has access">
+      </select>
+    </div>
+    <div class="select-block folders">
+      <span class="sci-checkbox-container">
+        <%= check_box_tag :has_draft, 'accepted', false, {class: "sci-checkbox"} %>
+        <span class="sci-checkbox-label"></span>
+      </span>
+      <span class="folder-search-label">Has draft</span>
+    </div>
+  <% end %>
+</template>