PC-58 updated add parameters page

Author: AndrewRiabets

app/admin/items.rb

@@ -283,26 +283,29 @@ def apply_tmp_params(item, tmp)
 
     when "Select"
       sub_hash = {}
-      (1..10).each do |i|
-        desc = params["option_description_#{i}"]
-        val  = params["option_value_#{i}"]
+
+      # Отримаємо масив select_options з параметрів
+      select_options = params[:select_options] || []
+
+      select_options.each do |pair|
+        desc = pair["description"]
+        val  = pair["value"]
         next if desc.blank? || val.blank?
-    
+
         sub_hash[desc] = val
       end
-    
-      value_label = params[:value_label].to_s.strip
-    
-      if param_name.blank? || value_label.blank? || sub_hash.empty?
-        flash[:error] = "Select Name, Value Label and at least one option are required"
+
+      value_label = params[:value_label]
+      if value_label.blank?
+        flash[:error] = "Value Label is required for Select parameter"
         return redirect_back(fallback_location: edit_admin_item_path(@item))
       end
-    
+
       store[:select][param_name] = {
         "options" => sub_hash,
         "value_label" => value_label
       }
-    
+
     else
       flash[:error] = "Unknown parameter type"
       return redirect_back(fallback_location: edit_admin_item_path(@item))
@@ -313,6 +316,9 @@ def apply_tmp_params(item, tmp)
     Rails.logger.info "📤 Session after update: #{session[:tmp_params][item_key]}"
 
     flash[:notice] = "Parameter '#{param_name}' added (stored in session)."
+    Rails.logger.info "🧠 Final saved SELECT: #{store[:select][param_name].inspect}"
+    Rails.logger.info "📤 Full session after update: #{session[:tmp_params].inspect}"
+
     redirect_to @item.persisted? ? edit_admin_item_path(@item) : new_resource_path
   end
 
@@ -403,33 +409,31 @@ def apply_tmp_params(item, tmp)
       session[:tmp_params]["new"]["calculation_formula"] = params[:calculation_formula]
     else
       @item = Item.find(params[:id])
-      
+
       session[:tmp_params] ||= {}
       session[:tmp_params][@item.id.to_s] ||= {}
       session[:tmp_params][@item.id.to_s]["calculation_formula"] = params[:calculation_formula]
-      
+
       @item.calculation_formula = params[:calculation_formula]
     end
-  
+
     flash[:notice] = "Formula saved (in session)!"
     redirect_to params[:id] == "new" ? new_resource_path : edit_admin_item_path(params[:id])
   end
-  
 
   member_action :clear_session, method: :post do
     item_key = params[:id].to_s
     if session[:tmp_params].present?
       Rails.logger.info "⚠️ TRYING TO DELETE session[:tmp_params][#{item_key}]"
       Rails.logger.info "🔍 BEFORE DELETE: #{session[:tmp_params][item_key].inspect}"
-      
+
       session[:tmp_params].delete(item_key)
-  
+
       Rails.logger.info "🧹 DELETED! AFTER: #{session[:tmp_params].inspect}"
     else
       Rails.logger.warn "⚠️ tmp_params session is empty, nothing to delete"
     end
 
     head :ok
   end
-  
 end

app/assets/javascripts/active_admin.js

@@ -111,7 +111,7 @@ document.addEventListener("DOMContentLoaded", function () {
       })
         .then((response) => {
           if (response.ok) {
-            window.location.href = "/admin/items/new"; 
+            window.location.href = "/admin/items/new";
           } else {
             alert("❌ Session clear failed");
           }
@@ -141,3 +141,56 @@ document.addEventListener("DOMContentLoaded", function () {
   }
 });
 
+
+document.addEventListener("DOMContentLoaded", () => {
+  const wrapper = document.getElementById("select-options-wrapper");
+  const addBtn = document.getElementById("add-option-button");
+
+  const createOptionRow = () => {
+    const row = document.createElement("div");
+    row.className = "select-option-row";
+
+    row.innerHTML = `
+      <div class="select-field">
+        <label>Description</label>
+        <input type="text" name="select_options[][description]" />
+      </div>
+      <div class="select-field">
+        <label>Value</label>
+        <input type="text" name="select_options[][value]" />
+      </div>
+      <button type="button" class="delete-option-button button light">Delete</button>
+    `;
+
+    // кнопка Delete
+    row.querySelector(".delete-option-button").addEventListener("click", () => {
+      if (wrapper.querySelectorAll(".select-option-row").length > 2) {
+        row.remove();
+      } else {
+        alert("At least 2 options are required.");
+      }
+    });
+
+    return row;
+  };
+
+  // Додати новий рядок
+  addBtn.addEventListener("click", () => {
+    const newRow = createOptionRow();
+    wrapper.appendChild(newRow);
+  });
+
+  // Додати обробники на існуючі 2 рядки
+  wrapper.querySelectorAll(".select-option-row").forEach((row) => {
+    const delBtn = row.querySelector(".delete-option-button");
+    delBtn.addEventListener("click", () => {
+      if (wrapper.querySelectorAll(".select-option-row").length > 2) {
+        row.remove();
+      } else {
+        alert("At least 2 options are required.");
+      }
+    });
+  });
+});
+
+

app/assets/stylesheets/active_admin.scss

@@ -16,28 +16,32 @@
 //
 //   .status_tag { background: #6090DB; }
 .parameter-table {
-    width: 100%;
-    border-collapse: collapse;
-  
-    th, td {
-      padding: 8px 12px;
-      border: 1px solid #ddd;
-      text-align: left;
-    }
-  
-    th:nth-child(1), td:nth-child(1) {
-      width: 40%;
-    }
-  
-    th:nth-child(2), td:nth-child(2) {
-      width: 40%;
-    }
-  
-    th:nth-child(3), td:nth-child(3) {
-      width: 20%;
-    }
+  width: 100%;
+  border-collapse: collapse;
+
+  th,
+  td {
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    text-align: left;
+  }
+
+  th:nth-child(1),
+  td:nth-child(1) {
+    width: 40%;
   }
 
+  th:nth-child(2),
+  td:nth-child(2) {
+    width: 40%;
+  }
+
+  th:nth-child(3),
+  td:nth-child(3) {
+    width: 20%;
+  }
+}
+
 .parameter-panel {
   padding: 20px;
   border: 1px solid #ccc;
@@ -69,7 +73,7 @@
 
     input {
       width: 100%;
-      max-width: 400px;
+      max-width: 503px;
     }
   }
 
@@ -90,32 +94,78 @@
     }
   }
 }
+
 .select-option-row {
   display: flex;
+  flex-wrap: wrap;
   align-items: flex-end;
   gap: 16px;
-  margin-bottom: 12px;
+  margin-bottom: 16px;
+  border-radius: 8px;
 
   .select-field {
     display: flex;
     flex-direction: column;
-    flex: 1;
+    flex: 1 1 250px;
+    min-width: 200px;
 
     label {
-      margin-bottom: 4px;
-      font-weight: 600;
+      margin-bottom: 6px;
+      color: #444;
     }
 
     input[type="text"] {
-      width: 100%;
-      max-width: 280px;
+      padding: 8px 10px;
+      border-radius: 4px;
+      border: 1px solid #ccc;
+      background-color: #fff;
+      transition: border-color 0.2s;
+
+      &:focus {
+        border-color: #888;
+        outline: none;
+      }
     }
   }
 }
 
-.add-param-link-wrapper{
+.delete-option-button {
+  padding: 8px 14px;
+  font-weight: bold;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+  background: linear-gradient(#ffffff, #f7f7f7) !important;
+  text-shadow: none !important;
+  background: #fff;
+  color: #444;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+
+  &:hover {
+    background-color: #eee;
+    color: #000;
+  }
+}
+
+.add-param-link-wrapper {
   margin-bottom: 10px;
 }
 
+.cancel-button {
+  margin-left: 10px;
+  background: linear-gradient(#ffffff, #f7f7f7) !important;
+  border: 1px solid #ccc !important;
+  color: #444 !important;
+  padding: 8px 16px !important;
+  text-shadow: none !important;
+  border-radius: 8px !important;
+}
+
+.cancel-button:hover {
+  background: linear-gradient(#f0f0f0, #e6e6e6) !important;
+  border-color: #aaa !important;
+  color: #222 !important;
+}
+
 
-@import "active_admin/forms/select";
+@import "active_admin/forms/select";

app/models/item.rb

@@ -5,7 +5,7 @@ class Item < ApplicationRecord
   validates :name, uniqueness: { scope: :category_id, message: "Item name must be unique within category" }
   validate :category_must_be_active
   validate :fixed_parameters_values_must_be_numeric
-  validate :pricing_options_values_must_be_numeric
+  # validate :pricing_options_values_must_be_numeric
   validates :calculation_formula, presence: true, if: :requires_calculation_formula?
 
   def self.ransackable_attributes(_auth_object = nil)

app/views/admin/items/_parameters.html.erb

@@ -83,7 +83,7 @@
       <% end %>
     </h4>
 
-    <p>Value Label: <%= value_label %></p>
+    <p>Value label: <%= value_label %></p>
 
     <table class="parameter-table">
       <thead>

app/views/admin/items/new_formula.html.erb

@@ -28,6 +28,8 @@
       <%= hidden_field_tag :calculation_formula, '', id: 'formulaInput' %>
       <div class="form-actions" style="margin-top: 15px;">
         <%= submit_tag "Save Formula", class: "button" %>
+        <% back_path = @item.persisted? ? edit_admin_item_path(@item) : new_resource_path %>
+        <%= link_to "Cancel", back_path, class: "button cancel-button", style: "margin-left: 10px;" %>
       </div>
     <% end %>
   </div>

app/views/admin/items/new_parameter.html.erb

@@ -43,23 +43,35 @@
         <%= text_field_tag :value_label, nil, class: "value-label-input" %>
       </div>
 
-      <% 10.times do |i| %>
-        <div class="select-option-row">
-          <div class="select-field">
-            <%= label_tag "option_description_#{i + 1}", "Description #{i + 1}" %>
-            <%= text_field_tag "option_description_#{i + 1}" %>
+      <div id="select-options-wrapper">
+        <% 2.times do %>
+          <div class="select-option-row">
+            <div class="select-field">
+              <label>Description</label>
+              <input type="text" name="select_options[][description]" />
+            </div>
+            <div class="select-field">
+              <label>Value</label>
+              <input type="text" name="select_options[][value]" />
+            </div>
+            <button type="button" class="delete-option-button button light">Delete</button>
           </div>
-          <div class="select-field">
-            <%= label_tag "option_value_#{i + 1}", "Value #{i + 1}" %>
-            <%= text_field_tag "option_value_#{i + 1}" %>
-          </div>
-        </div>
-      <% end %>
+        <% end %>
+      </div>
+
+      <div class="form-actions">
+        <button type="button" id="add-option-button" class="button">Add Option</button>
+      </div>
+
     </div>
 
     <div class="form-actions">
-    <% tmp = session[:tmp_params] && session[:tmp_params]["new"] %>
-      <%= submit_tag "Add Parameter" %>
+      <% item_key = resource.persisted? ? resource.id.to_s : "new" %>
+      <% back_path = resource.persisted? ? edit_admin_item_path(resource) : new_resource_path %>
+
+      <%= submit_tag "Add Parameter", class: "button" %>
+      <%= link_to "Cancel", back_path, class: "button cancel-button" %>
     </div>
+
   <% end %>
 </div>