From f92c4d62a42ba8da2d46c26148ab84340bfa092b Mon Sep 17 00:00:00 2001
From: hatz <hatz@hey.com>
Date: Fri, 9 May 2025 14:05:32 -0500
Subject: [PATCH] Fix AND prefix on rule form

This new condition prefix data target is used to ensure the AND prefix is added/removed to additional conditions/groups when there aren't any saved conditions yet.
---
 app/javascript/controllers/rules_controller.js      | 13 +++++++++++++
 app/views/rule/conditions/_condition.html.erb       |  7 +++++--
 app/views/rule/conditions/_condition_group.html.erb |  6 +++++-
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/app/javascript/controllers/rules_controller.js b/app/javascript/controllers/rules_controller.js
index 0db0e67a..ca34984b 100644
--- a/app/javascript/controllers/rules_controller.js
+++ b/app/javascript/controllers/rules_controller.js
@@ -16,6 +16,7 @@ export default class extends Controller {
       this.conditionGroupTemplateTarget,
       this.conditionsListTarget,
     );
+    this.updateConditionPrefixes();
   }
 
   addCondition() {
@@ -23,6 +24,7 @@ export default class extends Controller {
       this.conditionTemplateTarget,
       this.conditionsListTarget,
     );
+    this.updateConditionPrefixes();
   }
 
   addAction() {
@@ -45,4 +47,15 @@ export default class extends Controller {
   #uniqueKey() {
     return Date.now();
   }
+
+  updateConditionPrefixes() {
+    const items = this.conditionsListTarget.querySelectorAll('[data-condition-prefix]');
+    items.forEach((el, idx) => {
+      if (idx === 0) {
+        el.classList.add('hidden');
+      } else {
+        el.classList.remove('hidden');
+      }
+    });
+  }
 }
diff --git a/app/views/rule/conditions/_condition.html.erb b/app/views/rule/conditions/_condition.html.erb
index b79978a1..04cbc755 100644
--- a/app/views/rule/conditions/_condition.html.erb
+++ b/app/views/rule/conditions/_condition.html.erb
@@ -6,10 +6,13 @@
 <li data-controller="rule--conditions" data-rule--conditions-condition-filters-value="<%= rule.condition_filters.to_json %>" class="flex items-center gap-3">
   <% if form.index.to_i > 0 && show_prefix %>
     <div class="pl-4">
-      <span class="font-medium uppercase text-xs">and</span>
+      <span class="font-medium uppercase text-xs" data-condition-prefix>and</span>
+    </div>
+  <% else %>
+    <div class="pl-4">
+      <span class="font-medium uppercase text-xs hidden" data-condition-prefix>and</span>
     </div>
   <% end %>
-
   <div class="grow flex gap-2 items-center h-full">
     <%= form.hidden_field :_destroy, value: false, data: { rule__conditions_target: "destroyField" } %>
 
diff --git a/app/views/rule/conditions/_condition_group.html.erb b/app/views/rule/conditions/_condition_group.html.erb
index 67b3eb0f..fb459c71 100644
--- a/app/views/rule/conditions/_condition_group.html.erb
+++ b/app/views/rule/conditions/_condition_group.html.erb
@@ -11,7 +11,11 @@
     <div class="flex items-center gap-2">
       <% unless form.index == 0 %>
         <div class="pl-2">
-          <span class="font-medium uppercase text-xs">and</span>
+          <span class="font-medium uppercase text-xs" data-condition-prefix>and</span>
+        </div>
+      <% else %>
+        <div class="pl-2">
+          <span class="font-medium uppercase text-xs hidden" data-condition-prefix>and</span>
         </div>
       <% end %>
       <p class="text-sm text-secondary">match</p>