Merge branch 'calculators-constructor' of github.com:ita-social-proje…

…cts/ZeroWaste into 970-ability-upload-logo

app/assets/stylesheets/components/form.css

@@ -36,4 +36,16 @@
   .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 w-28 h-14;
+  }
+  /* Formula field */
+  .formula{
+    border-radius: inherit !important;
+    border-color: #6b7280 !important;
+    overflow: hidden;
+    resize: none !important;
+  }
 }

app/controllers/account/calculators_controller.rb

@@ -11,6 +11,7 @@ def index
 
   def show
     @calculator = resource
+    @calculator = resource
   end
 
   def new
@@ -30,7 +31,7 @@ def create
     @calculator = Calculator.new(calculator_params)
 
     if @calculator.save
-      redirect_to account_calculators_path, notice: t("notifications.calculator_created")
+      redirect_to account_calculator_path(slug: @calculator), notice: t("notifications.calculator_created")
     else
       render :new, status: :unprocessable_entity
     end
@@ -81,7 +82,7 @@ def collect_fields_for_kind(kind)
 
   def calculator_params
     params.require(:calculator).permit(
-      :id, :en_name, :uk_name, :logo_picture,
+      :id, :en_name, :uk_name, :color, :logo_picture,
       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/controllers/calculators_controller.rb

@@ -26,6 +26,9 @@ def calculate
 
     @results = Calculators::CalculationService.new(@calculator, params[:inputs]).perform
 
+    session[:calculation_results]                 ||= {}
+    session[:calculation_results][@calculator.slug] = @results
+
     respond_to :turbo_stream
   end
 

app/javascript/controllers/textarea_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["textarea"];
+
+  connect() {
+    this.resize(this.element);
+  }
+
+  resize(textarea) {
+    textarea.style.height = "auto";
+    textarea.style.height = `${textarea.scrollHeight}px`; // Adjust height based on scrollHeight
+  }
+
+  input(event) {
+    this.resize(event.target);
+  }
+}

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
@@ -37,6 +38,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/services/calculators/calculation_service.rb

@@ -8,7 +8,7 @@ def initialize(calculator, inputs)
 
   def perform
     @calculator.formulas.map do |formula|
-      result = @dentaku.evaluate(formula.expression, @inputs)
+      result = @dentaku.evaluate(formula.expression, @inputs).round(2)
 
       { label: formula.label, result: result, unit: formula.unit }
     end

app/views/account/calculators/edit.html.erb

@@ -1,83 +1,3 @@
-<div id="calculators-edit" class="container">
-  <%= simple_form_for @calculator, url: { action: 'update' }, wrapper: :horizontal_form, html: { novalidate: false } do |f| %>
-    <div class="form-group row">
-      <div class="my-auto col-4 has-float-label">
-        <%= f.input :name, class: 'form-control', required: true %>
-      </div>
-      <div class="my-auto col-4 has-float-label">
-        <%= f.input :preferable, class: 'form-control' %>
-      </div>
-    </div>
-
-    <h4 class="mt-5"><%= t('.add_new_field_label') %></h4>
-
-    <div class="form-group row">
-      <div class="col-6">
-        <%= select_tag :kind,
-                        options_from_collection_for_select(Field.kinds.keys, :itself, :capitalize),
-                        id: 'calculator_fields_kind',
-                        prompt: t('.form.select_field_kind_label'),
-                        class: 'custom-select',
-                        data: { 'fields-list' => { form: [NamedValue.name, Select.name],
-                                                   parameter: [Value.name, RangeField.name, Select.name, Calculation.name],
-                                                   result: [Calculation.name] } } %>
-      </div>
-      <div class="col-4">
-        <%= select_tag :type, '', id: 'calculator_fields_type',
-                                prompt: t('.form.select_field_type_label'),
-                                class: 'custom-select',
-                                disabled: true %>
-      </div>
-      <div class="col-2">
-        <%= link_to t('buttons.create'), '#',
-                    class: 'btn btn-success text-white disabled',
-                    id: 'add-calculator-field',
-                    data: { url: new_account_calculator_field_path(calculator_slug: @calculator) } %>
-      </div>
-    </div>
-
-    <div class="my-5">
-      <h4 class="mb-2"><%= t('.form.form_label') %></h4>
-      <div class="form-group row" data-kind='form' data-selector-letter='F' data-last-selector='<%= extract_max_selector(@form_fields) %>'>
-        <% if @form_fields.any? %>
-          <%= f.fields_for :fields, @form_fields do |ff| %>
-            <%= render 'account/calculators/fields/form', f: ff %>
-          <% end %>
-        <% else %>
-          <p class="my-3 ms-3 text-black-50" data-empty-text=true><%= t('.form.no_fields_yet_label') %></p>
-        <% end %>
-      </div>
-
-      <h4 class="mb-2"><%= t('.form.parameters_label') %></h4>
-      <div class="form-group row" data-kind='parameter' data-selector-letter='P' data-last-selector='<%= extract_max_selector(@parameter_fields) %>'>
-        <% if @parameter_fields.any? %>
-          <%= f.fields_for :fields, @parameter_fields do |ff| %>
-            <%= render 'account/calculators/fields/form', f: ff %>
-          <% end %>
-        <% else %>
-          <p class="my-3 ms-3 text-black-50" data-empty-text=true><%= t('.form.no_fields_yet_label') %></p>
-        <% end %>
-      </div>
-
-      <h4 class="mb-2"><%= t('.form.results_label') %></h4>
-      <div class="form-group row" data-kind='result' data-selector-letter='R' data-last-selector='<%= extract_max_selector(@result_fields) %>'>
-        <% if @result_fields.any? %>
-          <%= f.fields_for :fields, @result_fields do |ff| %>
-            <%= render 'account/calculators/fields/form', f: ff %>
-          <% end %>
-        <% else %>
-          <p class="my-3 ms-3 text-black-50" data-empty-text=true><%= t('.form.no_fields_yet_label') %></p>
-        <% end %>
-      </div>
-    </div>
-
-    <div class="my-4 row">
-      <div class="col-12 d-flex justify-content-end button-group">
-        <%= f.button :submit, t('.form.update_calculator_button'), class: 'btn btn-green me-2' %>
-        <%= link_to account_calculators_path, class: 'btn btn-danger d-flex align-items-center justify-content-center' do %>
-          <span class="me-1"><%= t('buttons.cancel') %></span>
-        <% end %>
-      </div>
-    </div>
-  <% end %>
+<div class="container">
+  <%= render "account/calculators/partials/form", calculator: @calculator %>
 </div>

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

@@ -1,10 +1,13 @@
-<%= simple_form_for(@calculator, url: account_calculators_path) do |f| %>
+<%= simple_form_for(calculator, url: polymorphic_path([:account, calculator], locale: I18n.locale)) do |f| %>
   <div class="form-group row">
     <div class="my-auto col-12 has-float-label">
       <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' %>
+        <div id="fields" class="space-y-4">
+          <%= render "account/calculators/partials/color_selector", f: f %>
+        </div>
         <%= f.label :logo_picture, "Upload logo:", class: "form-label d-block" %>
         <%= f.file_field :logo_picture, accept: "image/jpeg, image/png", class: "file-input mb-3" %>
       </fieldset>

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

@@ -3,7 +3,9 @@
   <div>
     <%= f.input :en_label, label: "Formula Label:" %>
     <%= f.input :uk_label, label: "Uk Formula Label:" %>
-    <%= f.input :expression, label: "Formula Expression:" %>
+    <%= f.input :expression, as: :text, label: "Formula Expression:", input_html: { class: "formula",
+    data: { controller: "textarea", action: "input->textarea#input" }
+  } %>
 
     <%= f.input :uk_unit, label: "Uk Unit Label:" %>
     <%= f.input :en_unit, label: "Unit Label:" %>

app/views/account/calculators/show.html.erb

@@ -5,25 +5,53 @@
   <% end %>
 
   <div class="calc-details mb-4">
-    <span class="showpage-text"><%= t('.name') %>:</span>
+    <span class="text-lg showpage-text"><%= t('.name') %>:</span>
     <p class="text-2xl font-extrabold"> <%= @calculator.name %> </p>
   </div>
 
-  <div class="calc-details mb-6">
-    <span class="showpage-text"><%= t('.slug') %>:</span>
+  <div class="calc-details mb-4">
+    <span class="text-lg showpage-text"><%= t('.slug') %>:</span>
     <p class="font-bold"> <%= @calculator.slug %> </p>
   </div>
 
+  <!-- Display Fields -->
+  <div class="calc-details mb-4">
+    <h3 class="text-lg showpage-text"><%= t('.fields') %>:</h3>
+    <% @calculator.fields.each do |field| %>
+      <div class="field mb-3">
+        <div class="field-details">
+          <span class="font-bold"><%= field.label %></span>
+          <span class="italic"> (<%= field.var_name %>)<br></span>
+        </div>
+      </div>
+    <% end %>
+  </div>
+
+  <!-- Display Formulas -->
+  <div class="calc-details mb-4">
+    <h3 class="text-lg showpage-text"><%= t('.formulas') %>:</h3>
+    <% @calculator.formulas.each do |formula| %>
+      <div class="formula mb-3">
+        <div class="formula-details">
+          <span class="font-bold"><%= formula.label %></span>
+          <span class="italic"> (<%= formula.expression %>)<br></span>
+          <span class="font-semibold"><%= t('.unit') %>:</span>
+          <span><%= formula.unit %></span>
+        </div>
+      </div>
+    <% end %>
+  </div>
+
   <%= render "calculators/partials/logo_picture", calculator: @calculator %>
 
   <div class="showpage-buttons">
-    <%= link_to t('.edit'), 
-                edit_account_calculator_path(@calculator.slug, locale: I18n.locale), 
+    <%= link_to t('.edit'),
+                edit_account_calculator_path(@calculator.slug, locale: I18n.locale),
                 class: "btn btn-green" %>
-    
-    <%= button_to account_calculator_path(@calculator.slug, locale: I18n.locale), 
+
+    <%= button_to account_calculator_path(@calculator.slug, locale: I18n.locale),
                   method: :delete,
-                  data: { turbo_confirm: t('.confirm_delete') }, 
+                  data: { turbo_confirm: t('.confirm_delete') },
                   class: "btn btn-danger" do %>
       <%= t('.delete') %>
     <% end %>

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" %>
@@ -34,7 +31,11 @@
     </div>
   </div>
 
-  <%= turbo_frame_tag "calc-results" %>
+  <%= turbo_frame_tag "calc-results" do %>
+    <% if session.dig(:calculation_results, @calculator.slug).present? %>
+      <%= render "calculators/partials/calculation_results", results: session.dig(:calculation_results, @calculator.slug).map(&:with_indifferent_access) %>
+    <% end %>
+  <% end %>
 </div>
 
 <%= render "calculators/partials/show/constructor_calculator_description" %>

app/views/shared/under_construction.html.erb → app/views/shared/_under_construction.html.erb

@@ -1,12 +1,12 @@
-<section class="under-construction">
-  <div class="under-construction__wrapper">
-    <div class="under-construction__content">
-      <h1 class="under-construction__title"><%= t('.title') %></h1>
-      <p class="under-construction__text"><%= t('.text') %></p>
-      <p class="under-construction__text"><%= t('.text_update') %></p>
-    </div>
-    <div class="under-construction__img-box">
-      <%= image_tag "under_construction.png", alt: t('.alt_text'), class: 'under-construction__img' %>
-    </div>
-  </div>
-</section>
+<section class="under-construction">
+  <div class="under-construction__wrapper">
+    <div class="under-construction__content">
+      <h1 class="under-construction__title"><%= t('.title') %></h1>
+      <p class="under-construction__text"><%= t('.text') %></p>
+      <p class="under-construction__text"><%= t('.text_update') %></p>
+    </div>
+    <div class="under-construction__img-box">
+      <%= image_tag "under_construction.png", alt: t('.alt_text'), class: 'under-construction__img' %>
+    </div>
+  </div>
+</section>

config/locales/en/en.yml

@@ -376,7 +376,7 @@ en:
             no_fields_yet_label: "No fields yet"
             update_calculator_button: "Update calculator"
         new:
-          create_calculator_button: "Create calculator"
+          create_calculator_button: "Save calculator"
           cancel_button: "Сancel"
           prohibited_to_update: " prevent the calculator from updating"
           prohibited_to_save: " перешкоджають збереженню калькулятора"
@@ -473,7 +473,7 @@ en:
           no_fields_yet_label: "No fields yet"
           update_calculator_button: "Update calculator"
       new:
-        create_calculator_button: "Create calculator"
+        create_calculator_button: "Save calculator"
     feature_flags:
       submit_button: "Save"
       new_calculator_design:

config/locales/uk/uk.yml

@@ -356,7 +356,7 @@ uk:
           no_fields_yet_label: "Полів поки нема"
           update_calculator_button: "Оновити калькулятор"
       new:
-        create_calculator_button: "Створити калькулятор"
+        create_calculator_button: "Зберегти калькулятор"
         cancel_button: "Скасувати"
         prohibited_to_update: " перешкоджають оновленню калькулятора"
         prohibited_to_save: " перешкоджають збереженню калькулятора"

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