From 3ca436d75e08aa97bcedd05329db2d1fdd7eb8be Mon Sep 17 00:00:00 2001
From: Bohdan <dennger228@gmail.com>
Date: Sat, 30 Nov 2024 19:35:26 +0200
Subject: [PATCH] Added fieldsets and legends to the form, so it would be more
 clear to the user

---
 .../constructors_form_indexing_controller.js  | 26 ++++++++++
 .../partials/_category_fields.html.erb        | 17 ++++---
 .../partials/_field_fields.html.erb           | 47 ++++++++++++-------
 .../calculators/partials/_form.html.erb       | 37 +++++++++------
 .../partials/_formula_fields.html.erb         | 19 ++++----
 5 files changed, 99 insertions(+), 47 deletions(-)
 create mode 100644 app/javascript/controllers/constructors_form_indexing_controller.js

diff --git a/app/javascript/controllers/constructors_form_indexing_controller.js b/app/javascript/controllers/constructors_form_indexing_controller.js
new file mode 100644
index 000000000..9e5677b96
--- /dev/null
+++ b/app/javascript/controllers/constructors_form_indexing_controller.js
@@ -0,0 +1,26 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="constructors-form-indexing"
+export default class extends Controller {
+  static targets = ["index"];
+
+  afterInsert(event) {
+    const fieldsets = this.element.querySelectorAll(":scope > .nested-fields");
+    const span = fieldsets[fieldsets.length - 1].querySelector("[data-constructors-form-indexing-target='index']")
+
+    if (span) {
+      span.textContent = `${fieldsets.length}`;
+    }
+  }
+
+  afterRemove(event) {
+    const fieldsets = this.element.querySelectorAll(":scope > .nested-fields");
+
+    fieldsets.forEach((fieldset, index) => {
+      const span = fieldset.querySelector("[data-constructors-form-indexing-target='index']");
+      if (span) {
+        span.textContent = `${index + 1}`;
+      }
+    });
+  }
+}
diff --git a/app/views/account/calculators/partials/_category_fields.html.erb b/app/views/account/calculators/partials/_category_fields.html.erb
index b90a7a26d..ab81bb659 100644
--- a/app/views/account/calculators/partials/_category_fields.html.erb
+++ b/app/views/account/calculators/partials/_category_fields.html.erb
@@ -1,7 +1,10 @@
-<div class="nested-fields">
-  <%= f.input :en_name, label: "Category Name:" %>
-  <%= f.input :uk_name, label: "Uk Category Name:" %>
-  <%= f.input :price, label: "Category Price:" %>
-  
-  <%= link_to_remove_association "- Remove Category", f, class: "text-red-500 underline" %>
-</div>
+<fieldset class="bordered nested-fields">
+  <legend class="admin-legend">Category <span data-constructors-form-indexing-target="index">1</span></legend>
+  <div>
+    <%= f.input :en_name, label: "Category Name:" %>
+    <%= f.input :uk_name, label: "Uk Category Name:" %>
+    <%= f.input :price, label: "Category Price:" %>
+
+    <%= link_to_remove_association "- Remove Category", f, class: "text-red-500 underline" %>
+  </div>
+</fieldset>
diff --git a/app/views/account/calculators/partials/_field_fields.html.erb b/app/views/account/calculators/partials/_field_fields.html.erb
index 2df9d0d8e..3c86bf24b 100644
--- a/app/views/account/calculators/partials/_field_fields.html.erb
+++ b/app/views/account/calculators/partials/_field_fields.html.erb
@@ -1,21 +1,32 @@
-<div class="nested-fields" data-controller="field-type">
-  <%= f.input :en_label, label: "Field Label:" %>
-  <%= f.input :uk_label, label: "Uk Field Label:" %>
-  <%= f.input :var_name, label: "Variable Name:" %>
-  <%= f.input( 
-        :kind, 
-        collection: Field.kinds.keys.map { |key| [key.humanize, key] },
-        prompt: "Select Field Type",
-        label: "Field Type:",
-        input_html: { data: { field_type_target: "fieldTypeSelect" } } 
-      ) %>
+<fieldset class="bordered nested-fields">
+  <legend class="admin-legend">Field <span data-constructors-form-indexing-target="index">1</span></legend>
+
+  <div data-controller="field-type">
+    <%= f.input :en_label, label: "Field Label:" %>
+    <%= f.input :uk_label, label: "Uk Field Label:" %>
+    <%= f.input :var_name, label: "Variable Name:" %>
+    <%= f.input(
+          :kind,
+          collection: Field.kinds.keys.map { |key| [key.humanize, key] },
+          prompt: "Select Field Type",
+          label: "Field Type:",
+          input_html: { data: { field_type_target: "fieldTypeSelect" } }
+        ) %>
 
     <div class="hidden category-fields" data-field-type-target="categoryFields">
-      <%= f.simple_fields_for :categories do |category_fields| %>
-        <%= render "account/calculators/partials/category_fields", f: category_fields %>
-      <% end %>
-      <%= link_to_add_association "+ Add Category", f, :categories, partial: "account/calculators/partials/category_fields",  class: "underline" %>
+      <fieldset class="bordered" data-controller="constructors-form-indexing"
+                data-action="cocoon:after-insert->constructors-form-indexing#afterInsert cocoon:after-remove->constructors-form-indexing#afterRemove">
+        <legend class="admin-legend">Categories</legend>
+
+        <%= f.simple_fields_for :categories do |category_fields| %>
+          <%= render "account/calculators/partials/category_fields", f: category_fields %>
+        <% end %>
+        <div class="links">
+          <%= link_to_add_association "+ Add Category", f, :categories, partial: "account/calculators/partials/category_fields", class: "underline" %>
+        </div>
+      </fieldset>
     </div>
-  
-  <%= link_to_remove_association "- Remove Field", f, class: "text-red-500 underline" %>
-</div>
+
+    <%= link_to_remove_association "- Remove Field", f, class: "text-red-500 underline" %>
+  </div>
+</fieldset>
diff --git a/app/views/account/calculators/partials/_form.html.erb b/app/views/account/calculators/partials/_form.html.erb
index 781d15c5d..438b34288 100644
--- a/app/views/account/calculators/partials/_form.html.erb
+++ b/app/views/account/calculators/partials/_form.html.erb
@@ -1,27 +1,36 @@
 <%= simple_form_for(@calculator, url: account_calculators_path) do |f| %>
   <div class="form-group row">
     <div class="my-auto col-12 has-float-label">
-      <%= f.input :en_name, label: "Calculator Name:", class: 'form-control' %>
-      <%= f.input :uk_name, label: "Uk Calculator Name:", class: 'form-control' %>
+      <fieldset class="bordered">
+        <legend class="admin-legend">Calculator</legend>
+        <%= f.input :en_name, label: "Calculator Name:", class: 'form-control' %>
+        <%= f.input :uk_name, label: "Uk Calculator Name:", class: 'form-control' %>
+      </fieldset>
 
       <!-- formula input-->
       <div id="formulas" class="space-y-4">
-        <%= f.simple_fields_for :formulas do |formula_fields| %>
-          <%= render "account/calculators/partials/formula_fields", f: formula_fields %>
-        <% end %>
-        <div class="links">
-          <%= link_to_add_association "+ Add Formula", f, :formulas, partial: "account/calculators/partials/formula_fields", class: "underline" %>
-        </div>
+        <fieldset class="bordered" data-controller="constructors-form-indexing"
+                  data-action="cocoon:after-insert->constructors-form-indexing#afterInsert cocoon:after-remove->constructors-form-indexing#afterRemove">
+          <%= f.simple_fields_for :formulas do |formula_fields| %>
+            <%= render "account/calculators/partials/formula_fields", f: formula_fields %>
+          <% end %>
+          <div class="links">
+            <%= link_to_add_association "+ Add Formula", f, :formulas, partial: "account/calculators/partials/formula_fields", class: "underline" %>
+          </div>
+        </fieldset>
       </div>
 
       <!-- field input-->
       <div id="fields" class="space-y-4">
-        <%= f.simple_fields_for :fields do |field_fields| %>
-          <%= render "account/calculators/partials/field_fields", f: field_fields %>
-        <% end %>
-        <div class="links">
-          <%= link_to_add_association "Add Field", f, :fields, partial: "account/calculators/partials/field_fields", class: "underline" %>
-        </div>
+        <fieldset class="bordered" data-controller="constructors-form-indexing"
+                  data-action="cocoon:after-insert->constructors-form-indexing#afterInsert cocoon:after-remove->constructors-form-indexing#afterRemove">
+          <%= f.simple_fields_for :fields do |field_fields| %>
+            <%= render "account/calculators/partials/field_fields", f: field_fields %>
+          <% end %>
+          <div class="links">
+            <%= link_to_add_association "+ Add Field", f, :fields, partial: "account/calculators/partials/field_fields", class: "underline" %>
+          </div>
+        </fieldset>
       </div>
     </div>
   </div>
diff --git a/app/views/account/calculators/partials/_formula_fields.html.erb b/app/views/account/calculators/partials/_formula_fields.html.erb
index a0787f159..ce40536f6 100644
--- a/app/views/account/calculators/partials/_formula_fields.html.erb
+++ b/app/views/account/calculators/partials/_formula_fields.html.erb
@@ -1,10 +1,13 @@
-<div class="nested-fields">
-  <%= f.input :en_label, label: "Formula Label:" %>
-  <%= f.input :uk_label, label: "Uk Formula Label:" %>
-  <%= f.input :expression, label: "Formula Expression:" %>
+<fieldset class="bordered nested-fields">
+  <legend class="admin-legend">Formula <span data-constructors-form-indexing-target="index">1</span></legend>
+  <div>
+    <%= f.input :en_label, label: "Formula Label:" %>
+    <%= f.input :uk_label, label: "Uk Formula Label:" %>
+    <%= f.input :expression, label: "Formula Expression:" %>
 
-  <%= f.input :uk_unit, label: "Uk Unit Label:" %>
-  <%= f.input :en_unit, label: "Unit Label:" %>
+    <%= f.input :uk_unit, label: "Uk Unit Label:" %>
+    <%= f.input :en_unit, label: "Unit Label:" %>
 
-  <%= link_to_remove_association "- Remove Formula", f, class: "text-red-500 underline" %>
-</div>         
+    <%= link_to_remove_association "- Remove Formula", f, class: "text-red-500 underline" %>
+  </div>
+</fieldset>