Merge pull request opf#15800 from opf/feature/52555-add-searchbar-to-…

…submenu-component-2 [52555] Add searchbar to Submenu component
Eric-Guo · Jun 13, 2024 · f672afc · f672afc
2 parents 814a98b + eaaef34
commit f672afc
Show file tree

Hide file tree

Showing 30 changed files with 344 additions and 123 deletions.
diff --git a/app/components/_index.sass b/app/components/_index.sass
@@ -3,6 +3,5 @@
 @import "work_packages/progress/modal_body_component"
 @import "open_project/common/attribute_component"
 @import "filter/filters_component"
-@import "projects/settings/project_custom_field_sections/index_component"
 @import "projects/row_component"
 @import "settings/project_custom_fields/project_custom_field_mapping/new_project_mapping_component"
diff --git a/app/components/filter/filter_button_component.html.erb b/app/components/filter/filter_button_component.html.erb
@@ -1,7 +1,7 @@
 <%= render(Primer::Beta::Button.new(scheme: :secondary,
                                     disabled:,
-                                    data: { "filters-target": "filterFormToggle",
-                                            action: "filters#toggleDisplayFilters" },
+                                    data: { "filter--filters-form-target": "filterFormToggle",
+                                            action: "filter--filters-form#toggleDisplayFilters" },
                                     test_selector: "filter-component-toggle")) do |button| %>
   <% button.with_trailing_visual_counter(count: filters_count, test_selector: "filters-button-counter") %>
   <%= t(:label_filter) %>

diff --git a/app/components/filter/filter_component.html.erb b/app/components/filter/filter_component.html.erb
@@ -2,14 +2,14 @@
              method: :get,
              class: "op-filters-form op-filters-form_top-margin #{show_filters_section? ? "-expanded" : ""}",
              data: {
-               'filters-target': 'filterForm',
-               action: 'submit->filters#sendForm:prevent'
+               'filter--filters-form-target': 'filterForm',
+               action: 'submit->filter--filters-form#sendForm:prevent'
              }) do %>
   <% operators_without_values = %w[* !* t w] %>
   <fieldset class="advanced-filters--container">
     <a title="<%= t('js.close_form_title') %>"
        class="advanced-filters--close icon-context icon-close"
-       data-action="filters#toggleDisplayFilters"></a>
+       data-action="filter--filters-form#toggleDisplayFilters"></a>
     <legend><%= t(:label_filter_plural) %></legend>
     <ul class="advanced-filters--filters">
       <% each_filter do |filter, filter_active, additional_options| %>
@@ -19,7 +19,7 @@
         <li class="advanced-filters--filter <%= filter_active ? '' : 'hidden' %>"
             filter-name="<%= filter.name %>"
             filter-type="<%= filter.type %>"
-            data-filters-target="filter">
+            data-filter--filters-form-target="filter">
           <label class='advanced-filters--filter-name' for="<%= filter.name %>">
             <%= filter.human_name %>
           </label>
@@ -33,9 +33,9 @@
                              selected_operator),
                            class: 'advanced-filters--select',
                            data: {
-                             action: 'change->filters#setValueVisibility',
-                             'filters-filter-name-param': filter.name,
-                             'filters-target': 'operator',
+                             action: 'change->filter--filters-form#setValueVisibility',
+                             'filter--filters-form-filter-name-param': filter.name,
+                             'filter--filters-form-target': 'operator',
                              'filter-name': filter.name
                            } %>
           <% end %>
@@ -68,16 +68,16 @@
           <div class="advanced-filters--remove-filter">
             <a href="#"
                class="filter_rem"
-               data-action="click->filters#removeFilter"
-               data-filters-filter-name-param="<%= filter.name %>">
+               data-action="click->filter--filters-form#removeFilter"
+               data-filter--filters-form-filter-name-param="<%= filter.name %>">
               <%= helpers.op_icon("icon-close advanced-filters--remove-filter-icon", title: I18n.t('js.button_delete')) %>
             </a>
           </div>
         </li>
       <% end %>
 
       <li class="advanced-filters--spacer <%= query.filters.blank? ? 'hidden' : '' %>"
-          data-filters-target="spacer"></li>
+          data-filter--filters-form-target="spacer"></li>
 
       <li class="advanced-filters--add-filter">
         <!-- Add filters -->
@@ -104,8 +104,8 @@
                          focus: "false",
                          'aria-invalid': "false",
                          data: {
-                           'filters-target': 'addFilterSelect',
-                           action: 'change->filters#addFilter:prevent'
+                           'filter--filters-form-target': 'addFilterSelect',
+                           action: 'change->filter--filters-form#addFilter:prevent'
                          } %>
         </div>
       </li>

diff --git a/app/components/open_project/common/submenu_component.html.erb b/app/components/open_project/common/submenu_component.html.erb
@@ -1,10 +1,34 @@
-<div class="op-sidebar">
+<div class="op-sidebar" data-controller="filter--filter-list" data-application-target="dynamic">
+  <% if @searchable %>
+    <div class="op-sidebar--search">
+      <%= render Primer::Alpha::TextField.new(name: "search",
+                                              label: I18n.t("label_search"),
+                                              leading_visual: { icon: :search },
+                                              visually_hide_label: true,
+                                              classes: "op-sidebar--search-input",
+                                              data: {
+                                                action: "input->filter--filter-list#filterLists",
+                                                "filter--filter-list-target": "filter",
+                                                "test-selector": "op-sidebar--search-input"
+                                              },)  %>
+
+      <%= render Primer::Beta::Text.new(display: :none,
+                                        classes: "op-sidebar--search-no-results-container",
+                                        data: {
+                                          "test-selector": "op-sidebar--search-no-results",
+                                          "filter--filter-list-target": "noResultsText",
+                                        }) do
+        I18n.t("js.autocompleter.notFoundText")
+      end %>
+    </div>
+  <% end %>
+
   <div class="op-sidebar--body">
     <% if top_level_sidebar_menu_items.any? %>
       <div class="op-sidemenu">
         <ul class="op-sidemenu--items">
           <% top_level_sidebar_menu_items.first.children.each do |menu_item| %>
-            <li class="op-sidemenu--item">
+            <li class="op-sidemenu--item" data-filter--filter-list-target="searchItem">
               <% selected = menu_item.selected ? 'selected' : '' %>
               <a class="op-sidemenu--item-action <%= selected %>" href="<%= menu_item.href %>">
                 <span class="op-sidemenu--item-title"><%= menu_item.title %></span>
@@ -33,7 +57,7 @@
         <ul class="op-sidemenu--items"
             data-menus--expandable-sidemenu-target="container">
           <% menu_item.children.each do |child_item| %>
-            <li class="op-sidemenu--item">
+            <li class="op-sidemenu--item" data-filter--filter-list-target="searchItem">
               <% selected = child_item.selected ? 'selected' : '' %>
               <a class="op-sidemenu--item-action <%= selected %>" href="<%= child_item.href %>">
                 <span class="op-sidemenu--item-title"><%= child_item.title %></span>

diff --git a/app/components/open_project/common/submenu_component.rb b/app/components/open_project/common/submenu_component.rb
@@ -31,9 +31,10 @@
 module OpenProject
   module Common
     class SubmenuComponent < ApplicationComponent
-      def initialize(sidebar_menu_items: nil)
+      def initialize(sidebar_menu_items: nil, searchable: false)
         super()
         @sidebar_menu_items = sidebar_menu_items
+        @searchable = searchable
       end
 
       def render?

diff --git a/app/components/projects/index_sub_header_component.html.erb b/app/components/projects/index_sub_header_component.html.erb
@@ -1,5 +1,5 @@
 <%= render(Primer::OpenProject::SubHeader.new(data: {
-    controller: "filters",
+    controller: "filter--filters-form",
     "application-target": "dynamic",
   })) do |subheader|
     subheader.with_filter_component do

diff --git a/app/components/projects/settings/project_custom_field_sections/index_component.html.erb b/app/components/projects/settings/project_custom_field_sections/index_component.html.erb
@@ -12,7 +12,7 @@
                                         size: :small
                                       },
                                       show_clear_button: true,
-                                      clear_button_id: "project-custom-fields-mapping-filter-clear-button",
+                                      clear_button_id: clear_button_id,
                                       data: {
                                         action: "input->projects--settings--project-custom-fields-mapping-filter#filterLists",
                                         "projects--settings--project-custom-fields-mapping-filter-target": "filter"

diff --git a/app/components/projects/settings/project_custom_field_sections/index_component.rb b/app/components/projects/settings/project_custom_field_sections/index_component.rb
@@ -46,9 +46,14 @@ def initialize(project:, project_custom_field_sections:)
         def wrapper_data_attributes
           {
             controller: "projects--settings--project-custom-fields-mapping-filter",
-            "application-target": "dynamic"
+            "application-target": "dynamic",
+            "projects--settings--project-custom-fields-mapping-filter-clear-button-id-value": clear_button_id
           }
         end
+
+        def clear_button_id
+          "project-custom-fields-mapping-filter-clear-button"
+        end
       end
     end
   end

diff --git a/app/components/projects/settings/project_custom_field_sections/index_component.sass b/app/components/projects/settings/project_custom_field_sections/index_component.sass
diff --git a/app/views/filters/_autocomplete.html.erb b/app/views/filters/_autocomplete.html.erb
@@ -9,7 +9,7 @@
                             class: 'form--field',
                             data: {
                               'filter-autocomplete': true,
-                              'filters-target': 'filterValueContainer',
+                              'filter--filters-form-target': 'filterValueContainer',
                               'filter-name': filter.name
                             }
   %>

diff --git a/app/views/filters/_boolean.html.erb b/app/views/filters/_boolean.html.erb
@@ -1,5 +1,5 @@
 <label class="advanced-filters--filter-value"
-       data-filters-target="filterValueContainer"
+       data-filter--filters-form-target="filterValueContainer"
        data-filter-name="<%= filter.name %>">
   <%= angular_component_tag 'spot-switch',
                             inputs: {

diff --git a/app/views/filters/_text.html.erb b/app/views/filters/_text.html.erb
@@ -1,13 +1,13 @@
 <div class="advanced-filters--filter-value <%= value_visibility %>"
-     data-filters-target="filterValueContainer"
+     data-filter--filters-form-target="filterValueContainer"
      data-filter-name="<%= filter.name %>">
   <% if filter.type == :string %>
       <div>
         <%= text_field_tag :value,
                            filter.values.first,
                            class: 'advanced-filters--text-field -slim',
                            data: {
-                             'filters-target': 'simpleValue',
+                             'filter--filters-form-target': 'simpleValue',
                              'filter-name': filter.name
                            } %>
       </div>
@@ -17,7 +17,7 @@
                            filter.values.first,
                            class: 'advanced-filters--text-field -slim',
                            data: {
-                             'filters-target': 'simpleValue',
+                             'filter--filters-form-target': 'simpleValue',
                              'filter-name': filter.name
                            } %>
       </div>
@@ -28,7 +28,7 @@
                              class: 'advanced-filters--text-field -slim',
                              step: 'any',
                              data: {
-                               'filters-target': 'simpleValue',
+                               'filter--filters-form-target': 'simpleValue',
                                'filter-name': filter.name
                              }%>
       </div>
@@ -39,7 +39,7 @@
                              class: 'advanced-filters--text-field -slim',
                              step: 'any',
                              data: {
-                               'filters-target': 'simpleValue',
+                               'filter--filters-form-target': 'simpleValue',
                                'filter-name': filter.name
                              }%>
       </div>

diff --git a/app/views/filters/date/_days.html.erb b/app/views/filters/date/_days.html.erb
@@ -5,7 +5,7 @@
           <%= number_field_tag :value,
                                value,
                                class: 'advanced-filters--text-field -slim',
-                               'data-filters-target': 'days',
+                               'data-filter--filters-form-target': 'days',
                                'data-filter-name': filter.name %>
           <label for="value" class="form-label -transparent">days</label>
          </span>

diff --git a/app/views/filters/date/_input_options.html.erb b/app/views/filters/date/_input_options.html.erb
@@ -9,7 +9,7 @@
   end
 %>
 <div class="advanced-filters--filter-value <%= value_visibility %> <%= value_format %>"
-     data-filters-target="filterValueContainer"
+     data-filter--filters-form-target="filterValueContainer"
      data-filter-name="<%= filter.name %>">
   <%= render partial: 'filters/date/days',
              locals: { filter: filter,

diff --git a/app/views/filters/list/_input_options.html.erb b/app/views/filters/list/_input_options.html.erb
@@ -1,7 +1,7 @@
 <% filter_values = filter.values || [] %>
 
 <div class="advanced-filters--filter-value <%= value_visibility %> <%= filter_values.size > 1 ? 'multi-value' : '' %>"
-     data-filters-target="filterValueContainer"
+     data-filter--filters-form-target="filterValueContainer"
      data-filter-name="<%= filter.name %>">
   <%= render partial: 'filters/list/select', locals: { filter: filter, selected_values: filter_values.first, multi_value: false } %>
   <%= render partial: 'filters/list/select', locals: { filter: filter, selected_values: filter_values, multi_value: true } %>

diff --git a/app/views/filters/list/_select.html.erb b/app/views/filters/list/_select.html.erb
@@ -8,7 +8,7 @@
                               selected_values),
                           {
                             class: 'form--select -slim',
-                            'data-filters-target': 'filterValueSelect',
+                            'data-filter--filters-form-target': 'filterValueSelect',
                             'data-filter-name': filter.name
                           }]
        if multi_value
@@ -18,8 +18,8 @@
     <a href=""
        class="form-label no-decoration-on-hover -transparent multi-select-toggle"
        tabindex="0"
-       data-action="click->filters#toggleMultiSelect"
-       data-filters-filter-name-param="<%= filter.name %>">
+       data-action="click->filter--filters-form#toggleMultiSelect"
+       data-filter--filters-form-filter-name-param="<%= filter.name %>">
       <span class="icon-context icon-button <%= multi_value ? 'icon-minus2' : 'icon-add' %> icon4" title="<%= t(:label_enable_multi_select) %>">
         <span class="hidden-for-sighted"><%= t(:label_enable_multi_select) %></span>
       </span>

diff --git a/app/views/projects/menus/show.html.erb b/app/views/projects/menus/show.html.erb
@@ -1,3 +1,3 @@
 <%= turbo_frame_tag "projects_sidemenu" do %>
-  <%= render OpenProject::Common::SubmenuComponent.new(sidebar_menu_items: @sidebar_menu_items) %>
+  <%= render OpenProject::Common::SubmenuComponent.new(sidebar_menu_items: @sidebar_menu_items, searchable: true) %>
 <% end %>
diff --git a/...ed/components/datepicker/basic-single-date-picker/basic-single-date-picker.component.html b/...ed/components/datepicker/basic-single-date-picker/basic-single-date-picker.component.html
@@ -3,7 +3,7 @@
   #input
   type="text"
   class="spot-input"
-  data-filters-target="singleDay"
+  data-filter--filters-form-target="singleDay"
   [ngClass]="inputClassNames"
   [attr.data-value]="value"
   [id]="id"
@@ -20,7 +20,7 @@
   <input
     type="date"
     class="spot-input"
-    data-filters-target="singleDay"
+    data-filter--filters-form-target="singleDay"
     [ngClass]="inputClassNames"
     [attr.data-value]="value"
     [id]="id"

diff --git a/frontend/src/global_styles/content/_sidebar.sass b/frontend/src/global_styles/content/_sidebar.sass
@@ -4,6 +4,18 @@
   flex-direction: column
   overflow: hidden
 
+  &--search
+    margin: 12px
+    color: var(--main-menu-font-color)
+    display: flex
+    flex-direction: column
+    row-gap: 16px
+
+  &--search-input
+    // Overriding the defult input styles, because of the default dark background of the sidebar
+    color: var(--main-menu-font-color) !important
+    border-color: var(--borderColor-muted) !important
+
   &--body
     flex-grow: 1
     overflow: auto