#988 Add color to Calculator

app/assets/stylesheets/components/form.css

@@ -36,4 +36,11 @@
   .auth-login-links {
     @apply flex items-center justify-center gap-4 text-center border-t border-solid text-gray border-light_gray;
   }
+
+  /* Input styles */
+  .color-input {
+    @apply p-2;
+    width: 7rem;
+    height: 3.5rem;
+  }
 }

app/controllers/account/calculators_controller.rb

@@ -81,7 +81,7 @@ def collect_fields_for_kind(kind)
 
   def calculator_params
     params.require(:calculator).permit(
-      :id, :en_name, :uk_name,
+      :id, :en_name, :uk_name, :color,
       formulas_attributes: [:id, :expression, :en_label, :uk_label, :calculator_id, :en_unit, :uk_unit, :_destroy],
       fields_attributes: [:id, :en_label, :uk_label, :var_name, :kind, :_destroy,
         categories_attributes: [:id, :en_name, :uk_name, :price, :_destroy]]

app/models/calculator.rb

@@ -5,6 +5,7 @@
 # Table name: calculators
 #
 #  id         :bigint           not null, primary key
+#  color      :string           default("#000000")
 #  en_name    :string           default(""), not null
 #  slug       :string
 #  uk_name    :string           default(""), not null
@@ -35,6 +36,7 @@ class Calculator < ApplicationRecord
   validates :en_name, :uk_name, presence: true
   validates :en_name, :uk_name, length: { minimum: 3, maximum: 50 }
   validates :slug, presence: true, uniqueness: true
+  validates :color, format: { with: /\A#[0-9a-fA-F]{6}\z/ }
 
   def self.ransackable_attributes(auth_object = nil)
     ["created_at", "id", "name", "preferable", "slug", "updated_at", "uuid"]

app/views/account/calculators/partials/_color_selector.html.erb

@@ -0,0 +1,6 @@
+<div class="nested-fields">
+  <%= f.input :color, as: :color, label: 'Choose a Color for Calculator Page:',
+    input_html: {
+      class: 'color-input',
+    } %>
+</div>

app/views/account/calculators/partials/_form.html.erb

@@ -5,6 +5,9 @@
         <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' %>
+        <div id="fields" class="space-y-4">
+          <%= render "account/calculators/partials/color_selector", f: f %>
+        </div>
       </fieldset>
 
       <!-- formula input-->

app/views/calculators/show.html.erb

@@ -1,10 +1,7 @@
-<%# TODO: Delete this and use user provided value %>
-<% color = "#088F8F" %>
-
 <%# TODO: Delete this and use user provided value %>
 <% calculator_image = "scales.png" %>
 
-<div style="--calculator-color: <%= color %>">
+<div style="--calculator-color: <%= @calculator.color %>">
   <div class="rounded jumbotron jumbotron-fluid position-relative">
     <h1 class="pt-6 text-2xl font-semibold text-center font-sans dynamic-text-color">Calculator <%= @calculator.name %> <%= @text %></h1>
     <div class="flex-wrap d-flex justify-content-around calculator_wrap ms-5">
@@ -15,13 +12,13 @@
           <div class="pb-2 input_lable"><%= form.label field.var_name, field.label %></div>
           <% if field.kind == 'number' %>
             <div class="flex-row rounded flex-item w-100 age_wrapper form_fild">
-              <%= form.number_field "inputs[#{field.var_name}]", 
+              <%= form.number_field "inputs[#{field.var_name}]",
                                   placeholder: field.label,
                                   class: "required rounded w-100 calculator-field"
                                   %>
             </div>
           <% else %>
-            <%= form.select "inputs[#{field.var_name}]", 
+            <%= form.select "inputs[#{field.var_name}]",
                             options_from_collection_for_select(field.categories, :price, :name),
                             {},
                             class: "flex-row rounded flex-item w-100 form_fild calculator-field" %>

db/migrate/20241201141708_add_color_to_calculators.rb

@@ -0,0 +1,5 @@
+class AddColorToCalculators < ActiveRecord::Migration[7.2]
+  def change
+    add_column :calculators, :color, :string, default: "#8fba3b"
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.2].define(version: 2024_11_19_192344) do
+ActiveRecord::Schema[7.2].define(version: 2024_12_01_141708) do
   # These are extensions that must be enabled in order to support this database
   enable_extension "pgcrypto"
   enable_extension "plpgsql"
@@ -49,6 +49,7 @@
     t.string "slug"
     t.string "uk_name", default: "", null: false
     t.string "en_name", default: "", null: false
+    t.string "color", default: "#8fba3b"
     t.index ["slug"], name: "index_calculators_on_slug", unique: true
   end
 

spec/factories/calculators.rb

@@ -5,6 +5,7 @@
 # Table name: calculators
 #
 #  id         :bigint           not null, primary key
+#  color      :string           default("#000000")
 #  en_name    :string           default(""), not null
 #  slug       :string
 #  uk_name    :string           default(""), not null

spec/models/calculator_spec.rb

@@ -5,6 +5,7 @@
 # Table name: calculators
 #
 #  id         :bigint           not null, primary key
+#  color      :string           default("#000000")
 #  en_name    :string           default(""), not null
 #  slug       :string
 #  uk_name    :string           default(""), not null
@@ -28,6 +29,12 @@
     it { is_expected.to validate_presence_of(:uk_name) }
     it { is_expected.to validate_length_of(:uk_name).is_at_least(3).is_at_most(50) }
     it { is_expected.to validate_uniqueness_of(:slug) }
+    it { is_expected.to allow_value("#123abc").for(:color) }
+    it { is_expected.to allow_value("#ABCDEF").for(:color) }
+    it { is_expected.not_to allow_value("123abc").for(:color) }
+    it { is_expected.not_to allow_value("#12345").for(:color) }
+    it { is_expected.not_to allow_value("#1234567").for(:color) }
+    it { is_expected.not_to allow_value("#GHIJKL").for(:color) }
   end
 
   describe "associations" do