From 4275c07007f6693591cd8697a96291dec5c33318 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20G=C3=BCnther?= Date: Fri, 20 Dec 2024 13:37:01 +0100 Subject: [PATCH] Get rid of decorated select altogether --- app/models/custom_actions/actions/base.rb | 6 +++ app/models/custom_actions/conditions/base.rb | 6 +++ app/views/custom_actions/_form.html.erb | 46 +++++++++---------- .../op-autocompleter.component.ts | 9 ++-- .../open_project/forms/autocompleter.html.erb | 30 ++---------- .../open_project/forms/autocompleter.rb | 29 ++++++++++-- .../forms/dsl/autocompleter_input.rb | 5 +- 7 files changed, 71 insertions(+), 60 deletions(-) diff --git a/app/models/custom_actions/actions/base.rb b/app/models/custom_actions/actions/base.rb index 8b64662449b5..4995d3c9371d 100644 --- a/app/models/custom_actions/actions/base.rb +++ b/app/models/custom_actions/actions/base.rb @@ -43,6 +43,12 @@ def allowed_values raise NotImplementedError end + def value_objects + values.map do |value| + allowed_values.find { |v| v[:value] == value } + end + end + def type raise NotImplementedError end diff --git a/app/models/custom_actions/conditions/base.rb b/app/models/custom_actions/conditions/base.rb index 93828f8d3880..ddd0a58fdd30 100644 --- a/app/models/custom_actions/conditions/base.rb +++ b/app/models/custom_actions/conditions/base.rb @@ -45,6 +45,12 @@ def allowed_values .map { |value, label| { value:, label: } } end + def value_objects + values.map do |value| + allowed_values.find { |v| v[:value] == value } + end + end + def human_name WorkPackage.human_attribute_name(self.class.key) end diff --git a/app/views/custom_actions/_form.html.erb b/app/views/custom_actions/_form.html.erb index 1858ded3b327..2791dd2fdf56 100644 --- a/app/views/custom_actions/_form.html.erb +++ b/app/views/custom_actions/_form.html.erb @@ -32,18 +32,17 @@ } %> <% else %> - <% selected_values = condition.values - select_options = condition.allowed_values.map { |v| { label: v[:label], value: v[:value], selected: selected_values.include?(v[:value]) } } %> - <%= render partial: 'augmented/autocomplete_select_decoration', - locals: { - select_options:, - inputs: { - inputName: input_name, - inputId: "custom_action_conditions_#{condition.key}", - multiple: true, - key: condition.key.to_s - } - } %> + <%= angular_component_tag 'opce-autocompleter', + inputs: { + multiple: true, + defaultData: false, + items: condition.allowed_values.map { |v| { id: v[:value], name: v[:label] } }, + model: condition.value_objects.map { |v| { id: v[:value], name: v[:label] } }, + inputName: input_name, + inputId: "custom_action_conditions_#{condition.key}", + appendTo: "body", + } + %> <% end %> @@ -79,18 +78,17 @@ } %> <% else %> - <% selected_values = action.values - select_options = action.allowed_values.map { |v| { label: v[:label], value: v[:value], selected: selected_values.include?(v[:value]) } } %> - <%= render partial: 'augmented/autocomplete_select_decoration', - locals: { - select_options:, - inputs: { - inputName: input_name, - inputId: "custom_action_actions_#{action.key}", - multiple: action.multi_value?, - key: action.key.to_s - } - } %> + <%= angular_component_tag 'opce-autocompleter', + inputs: { + multiple: true, + defaultData: false, + items: action.allowed_values.map { |v| { id: v[:value], name: v[:label] } }, + model: action.value_objects.map { |v| { id: v[:value], name: v[:label] } }, + inputName: input_name, + inputId: "custom_action_conditions_#{action.key}", + appendTo: "body", + } + %> <% end %> diff --git a/frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.ts b/frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.ts index 87a41864d2c5..210d04678aa9 100644 --- a/frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.ts +++ b/frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.ts @@ -146,7 +146,7 @@ export class OpAutocompleterComponent(null); @Input() public clearSearchOnAdd?:boolean = true; @@ -314,6 +314,10 @@ export class OpAutocompleterComponent(''); } + if (this.items) { + this.items$.next(this.items as IOPAutocompleterOption[]); + } + if (this.inputValue && !this.model) { this .opAutocompleterService @@ -328,8 +332,7 @@ export class OpAutocompleterComponent <%= content_tag(:div, **@field_wrap_arguments) do %> - <% if decorated_select? %> - <%= render partial: '/augmented/autocomplete_select_decoration', - formats: %i[html], - locals: { - inputs: @autocomplete_options.merge( - classes: "ng-select--primerized #{@input.invalid? ? '-error' : ''}", - inputName: @autocomplete_options.fetch(:inputName) { builder.field_name(@input.name) }, - inputId: @autocomplete_options.fetch(:inputId) { builder.field_id(@input.name) }, - inputValue: @autocomplete_options.fetch(:inputValue) { builder.object.send(@input.name) }, - key: @autocomplete_options.fetch(:resource, ''), - defaultData: @autocomplete_options.fetch(:defaultData) { true } - ), - select_options: select_options.map(&:to_h), - } %> - <% else %> - <%= content_tag(:div, class: ("projects-autocomplete-with-search-icon" if @autocomplete_options.delete(:with_search_icon))) do %> - <%= angular_component_tag @autocomplete_options.fetch(:component), - data: @autocomplete_options.delete(:data) { {} }, - inputs: @autocomplete_options.merge( - classes: "ng-select--primerized #{@input.invalid? ? '-error' : ''}", - inputName: @autocomplete_options.fetch(:inputName) { builder.field_name(@input.name) }, - inputValue: @autocomplete_options.fetch(:inputValue) { builder.object.send(@input.name) }, - defaultData: @autocomplete_options.fetch(:defaultData) { true } - ) - %> - <% end %> + <%= content_tag(:div, class: ("projects-autocomplete-with-search-icon" if @with_search_icon)) do %> + <%= angular_component_tag(@autocomplete_component, + data: @autocomplete_data, + inputs: @autocomplete_inputs) %> <% end %> <% end %> <% end %> diff --git a/lib/primer/open_project/forms/autocompleter.rb b/lib/primer/open_project/forms/autocompleter.rb index f2d35812d62a..cba64507ceef 100644 --- a/lib/primer/open_project/forms/autocompleter.rb +++ b/lib/primer/open_project/forms/autocompleter.rb @@ -8,17 +8,38 @@ class Autocompleter < Primer::Forms::BaseComponent include AngularHelper prepend WrappedInput - delegate :builder, :form, :select_options, to: :@input + delegate :builder, :form, to: :@input def initialize(input:, autocomplete_options:, wrapper_data_attributes: {}) super() @input = input - @autocomplete_options = autocomplete_options + @with_search_icon = autocomplete_options.delete(:with_search_icon) { false } + @autocomplete_component = autocomplete_options.delete(:component) { "opce-autocompleter" } + @autocomplete_data = autocomplete_options.delete(:data) { {} } + @autocomplete_inputs = extend_autocomplete_inputs(autocomplete_options) @wrapper_data_attributes = wrapper_data_attributes end - def decorated_select? - @autocomplete_options[:decorated] + def extend_autocomplete_inputs(inputs) + inputs[:classes] = "ng-select--primerized #{@input.invalid? ? '-error' : ''}" + inputs[:inputName] ||= builder.field_name(@input.name) + inputs[:inputValue] ||= builder.object.send(@input.name) + inputs[:defaultData] ||= true + + if inputs.delete(:decorated) + inputs[:items] = @input.select_options.map(&:to_h) + inputs[:model] = selected_options + inputs[:defaultData] = false + end + + inputs + end + + + def selected_options + @input.select_options.filter_map do |item| + item.value if item.selected + end end end end diff --git a/lib/primer/open_project/forms/dsl/autocompleter_input.rb b/lib/primer/open_project/forms/dsl/autocompleter_input.rb index 497658f27d91..11cf87d366aa 100644 --- a/lib/primer/open_project/forms/dsl/autocompleter_input.rb +++ b/lib/primer/open_project/forms/dsl/autocompleter_input.rb @@ -18,9 +18,8 @@ def initialize(label:, value:, selected: false) def to_h { - label:, - value:, - selected: + id: value, + name: label } end end