Use data condition to update the prefix on conditions, condition groups, and subconditions

app/javascript/controllers/rules_controller.js

@@ -48,13 +48,33 @@ export default class extends Controller {
     return Date.now();
   }
 
+  // Updates the prefix visibility of all conditions and condition groups
+  // This is also called by the rule/conditions_controller when a subcondition is removed
   updateConditionPrefixes() {
-    const items = this.conditionsListTarget.querySelectorAll('[data-condition-prefix]');
+    // Update conditions
-    items.forEach((el, idx) => {
+    this.#updatePrefixesForList(this.conditionsListTarget);
-      if (idx === 0) {
+
-        el.classList.add('hidden');
+    // Update subconditions for each condition group
-      } else {
+    // We currently only support a single level of subconditions
-        el.classList.remove('hidden');
+    const groupSubLists = this.conditionsListTarget.querySelectorAll('[data-rule--conditions-target="subConditionsList"]');
+    groupSubLists.forEach((subList) => {
+      this.#updatePrefixesForList(subList);
+    });
+  }
+
+  // Helper to update prefixes for a given list
+  #updatePrefixesForList(listEl) {
+    const items = Array.from(listEl.children);
+    let conditionIdx = 0;
+    items.forEach((item) => {
+      const prefixEl = item.querySelector('[data-condition-prefix]');
+      if (prefixEl) {
+        if (conditionIdx === 0) {
+          prefixEl.classList.add('hidden');
+        } else {
+          prefixEl.classList.remove('hidden');
+        }
+        conditionIdx++;
       }
     });
   }

app/views/rule/conditions/_condition.html.erb

@@ -1,18 +1,14 @@
-<%# locals: (form:, show_prefix: true) %>
+<%# locals: (form:) %>
 
 <% condition = form.object %>
 <% rule = condition.rule %>
 
 <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">
+  <%# Show prefix on conditions, except the first one %>
-      <span class="font-medium uppercase text-xs" data-condition-prefix>and</span>
+  <div class="pl-2" data-condition-prefix>
-    </div>
+    <span class="font-medium uppercase text-xs">and</span>
-  <% else %>
+  </div>
-    <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" } %>
 

app/views/rule/conditions/_condition_group.html.erb

@@ -9,15 +9,10 @@
 
   <div class="flex items-center justify-between gap-2">
     <div class="flex items-center gap-2">
-      <% unless form.index == 0 %>
+      <%# Show prefix on condition groups, except the first one %>
-        <div class="pl-2">
+      <div class="pl-2" data-condition-prefix>
-          <span class="font-medium uppercase text-xs" data-condition-prefix>and</span>
+        <span class="font-medium uppercase text-xs">and</span>
-        </div>
+      </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>
       <%= form.select :operator, [["all", "and"], ["any", "or"]], { container_class: "w-fit" }, data: { rules_target: "operatorField" } %>
       <p class="text-sm text-secondary">of the following conditions</p>
@@ -40,7 +35,7 @@
 
   <ul data-rule--conditions-target="subConditionsList" class="space-y-3">
     <%= form.fields_for :sub_conditions do |scf| %>
-      <%= render "rule/conditions/condition", form: scf, show_prefix: false %>
+      <%= render "rule/conditions/condition", form: scf %>
     <% end %>
   </ul>