diff --git a/app/components/add_tag_rule_modal_component.rb b/app/components/add_tag_rule_modal_component.rb index 204ef37a04..9f29bce49b 100644 --- a/app/components/add_tag_rule_modal_component.rb +++ b/app/components/add_tag_rule_modal_component.rb @@ -2,7 +2,7 @@ class AddTagRuleModalComponent < ModalComponent def initialize(id:, tag_rule_types:, current_index:, div_id:, is_default: false, - customer_tag: "" ) + customer_tag: "", hidden_field_customer_tag_options: {} ) super @close_button = false @@ -13,7 +13,9 @@ class AddTagRuleModalComponent < ModalComponent @div_id = div_id @is_default = is_default @customer_tag = customer_tag + @hidden_field_customer_tag_options = hidden_field_customer_tag_options end - attr_reader :tag_rule_types, :current_index, :div_id, :is_default, :customer_tag + attr_reader :tag_rule_types, :current_index, :div_id, :is_default, :customer_tag, + :hidden_field_customer_tag_options end diff --git a/app/components/add_tag_rule_modal_component/add_tag_rule_modal_component.html.haml b/app/components/add_tag_rule_modal_component/add_tag_rule_modal_component.html.haml index 7c29304e3b..48600bd86d 100644 --- a/app/components/add_tag_rule_modal_component/add_tag_rule_modal_component.html.haml +++ b/app/components/add_tag_rule_modal_component/add_tag_rule_modal_component.html.haml @@ -6,18 +6,26 @@ %div{ id: @id, "data-controller": @data_controller, "data-action": @data_action, "data-modal-instant-value": @instant, **@options } .reveal-modal-bg.fade{ "data-modal-target": "background", "data-action": "click->modal#close" } .reveal-modal.fade.modal-component{ "data-modal-target": "modal", class: @modal_class } - #new-tag-rule-dialog{ "data-controller": "add-tag-rule-modal-component--add-tag-rule-modal", "data-action": "add-tag-rule-modal-component--add-tag-rule-modal:ruleAdded->tag-rule-index#added" } - = hidden_field_tag "current_index", current_index, { "data-add-tag-rule-modal-component--add-tag-rule-modal-target": "index" } - = hidden_field_tag "div_id", div_id, { "data-add-tag-rule-modal-component--add-tag-rule-modal-target": "divId" } - = hidden_field_tag "is_default", is_default, { "data-add-tag-rule-modal-component--add-tag-rule-modal-target": "isDefault" } - -# TODO the group-form stuff should be passed as a dependency - = hidden_field_tag "customer_tag", customer_tag, { "data-add-tag-rule-modal-component--add-tag-rule-modal-target": "ruleCustomerTag", "data-tag-rule-group-form-component--tag-rule-group-form-target": "ruleCustomerTag" } + #new-tag-rule-dialog{ "data-controller": "add-tag-rule-modal-component--add-tag-rule-modal", + "data-add-tag-rule-modal-component--add-tag-rule-modal-index-value": current_index } + + -# Ideally we would use event to communicate the update of customer tag, but we would need + -# the element with "data-controller": "add-tag-rule-modal-component--add-tag-rule-modal" + -# to be parent of the element with "data-controller": "tag-rule-group-form-component--tag-rule-group-form" + -# so it could respond to event generated by "tag-rule-group-form-component--tag-rule-group-form". + -# Here we are in the opposite situation so we use a hidden field to store the value of + -# the customer tag, so it can be updated by "tag-rule-group-form-component--tag-rule-group-form" + = hidden_field_tag "customer_tag", customer_tag, { "data-add-tag-rule-modal-component--add-tag-rule-modal-target": "ruleCustomerTag" }.merge(hidden_field_customer_tag_options) .text-normal.margin-bottom-30.text-center = t('components.add_tag_rule_modal.select_rule_type') .text-center.margin-bottom-30 = select_tag :rule_type_selector, options_for_select(tag_rule_types), { "data-controller": "tom-select", "data-add-tag-rule-modal-component--add-tag-rule-modal-target": "rule", class: "primary no-search" } .text-center - %input.button.red.icon-plus{ type: 'button', value: "#{t('components.add_tag_rule_modal.add_rule')}", "data-action": "click->add-tag-rule-modal-component--add-tag-rule-modal#add click->modal#close", } + %input.button.red.icon-plus{ type: 'button', + value: "#{t('components.add_tag_rule_modal.add_rule')}", + "data-action": "click->add-tag-rule-modal-component--add-tag-rule-modal#add click->modal#close", + "data-add-tag-rule-modal-component--add-tag-rule-modal-div-id-param": div_id, + "data-add-tag-rule-modal-component--add-tag-rule-modal-is-default-param": "#{is_default}"} - if close_button? .text-center diff --git a/app/components/add_tag_rule_modal_component/add_tag_rule_modal_controller.js b/app/components/add_tag_rule_modal_component/add_tag_rule_modal_controller.js index 211e2a033b..85f9b71141 100644 --- a/app/components/add_tag_rule_modal_component/add_tag_rule_modal_controller.js +++ b/app/components/add_tag_rule_modal_component/add_tag_rule_modal_controller.js @@ -1,14 +1,17 @@ import { Controller } from "stimulus"; export default class extends Controller { - static targets = ["rule", "index", "divId", "isDefault", "ruleCustomerTag"]; + static targets = ["rule", "ruleCustomerTag"]; + static values = { index: Number }; - add() { + add({ params }) { const rule_type = this.ruleTarget.value; - const index = this.indexTarget.value; - const divId = this.divIdTarget.value; - const isDefault = this.isDefaultTarget.value; - const customerTags = this.hasRuleCustomerTagTarget ? this.ruleCustomerTagTarget.value : undefined; + const index = this.indexValue; + const divId = params["divId"]; + const isDefault = params["isDefault"]; + const customerTags = this.hasRuleCustomerTagTarget + ? this.ruleCustomerTagTarget.value + : undefined; const urlParams = new URLSearchParams(); urlParams.append("rule_type", rule_type); @@ -29,7 +32,7 @@ export default class extends Controller { .then((r) => r.text()) .then((html) => { Turbo.renderStreamMessage(html); - this.indexTarget.value = parseInt(index) + 1; + this.indexValue = parseInt(index) + 1; }) .catch((error) => console.warn(error)); } diff --git a/app/components/tag_rule_group_form_component/tag_rule_group_form_component.html.haml b/app/components/tag_rule_group_form_component/tag_rule_group_form_component.html.haml index ee453c29af..83404fdcaf 100644 --- a/app/components/tag_rule_group_form_component/tag_rule_group_form_component.html.haml +++ b/app/components/tag_rule_group_form_component/tag_rule_group_form_component.html.haml @@ -31,4 +31,9 @@ .add_rule.text-center %input.button{ type: 'button', value: t('components.tag_rule_group_form.add_new_rule'), "data-controller": "modal-link", "data-action": "click->modal-link#open", "data-modal-link-target-value": "tag_rule_add_new_rule_#{index}" } - = render AddTagRuleModalComponent.new(id: "tag_rule_add_new_rule_#{index}", tag_rule_types: tag_rule_types, current_index: (rule_index + 1), div_id: customer_tag_rule_div_id, customer_tag: group[:tags]) + = render AddTagRuleModalComponent.new(id: "tag_rule_add_new_rule_#{index}", + tag_rule_types: tag_rule_types, + current_index: (rule_index + 1), + div_id: customer_tag_rule_div_id, + customer_tag: group[:tags], + hidden_field_customer_tag_options: { "data-tag-rule-group-form-component--tag-rule-group-form-target": "ruleCustomerTag" })