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

…cts/ZeroWaste into 978-rounding-results-to-2-decimal-places
ita-social-projects · Dec 2, 2024 · 3303bac · 3303bac
2 parents 57171ed + f934abb
commit 3303bac
Show file tree

Hide file tree

Showing 27 changed files with 316 additions and 104 deletions.
diff --git a/app/assets/stylesheets/pages/calculator.scss b/app/assets/stylesheets/pages/calculator.scss
@@ -16,6 +16,28 @@
   font-style: normal;
   transition: transform 0.5s ease-in-out;
   max-width: 300px;
+  @include transition(all 0.5s ease-in-out);
+
+  &:hover {
+    background-color: $matte_lime_green;
+  }
+}
+
+.btn-nonito {
+  font-size: 14px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  font-weight: 400;
+  font-family: "Nunito", sans-serif;
+  font-style: normal;
+}
+
+.dynamic-text-color {
+  color: var(--calculator-color);
+}
+
+.dynamic-background-color {
+  background-color: var(--calculator-color);
 }
 
 #calc {
@@ -61,6 +83,11 @@
   margin-right: 0px;
 }
 
+.calculator-field {
+  background-color: $light_gray !important;
+  border: 0;
+}
+
 .flex-item {
   display: flex;
   flex-wrap: wrap;

diff --git a/app/assets/stylesheets/pages/feature_flags.scss b/app/assets/stylesheets/pages/feature_flags.scss
@@ -41,19 +41,13 @@
 }
 
 input[type="submit"] {
-  background-color: $success;
   border: none;
   border-radius: 4px;
   color: #fff;
   cursor: pointer;
   font-size: 16px;
   padding: 10px;
   min-width: 110px;
-  @include transition(all 0.5s ease-in-out);
-
-  &:hover {
-    background-color: $matte_lime_green;
-  }
 }
 
 .btn-grey {

diff --git a/app/controllers/account/calculators_controller.rb b/app/controllers/account/calculators_controller.rb
@@ -2,10 +2,9 @@
 
 class Account::CalculatorsController < Account::BaseController
   load_and_authorize_resource
+  before_action :check_constructor_flipper
 
   def index
-    render "shared/under_construction" unless Rails.env.local?
-
     @q           = collection.ransack(params[:q])
     @calculators = @q.result.page(params[:page])
   end
@@ -95,4 +94,10 @@ def updater
       @calculator.update(calculator_params)
     end
   end
+
+  def check_constructor_flipper
+    return if Flipper[:constructor_status].enabled?
+
+    raise ActionController::RoutingError, "Constructor flipper is disabled"
+  end
 end
diff --git a/app/controllers/calculators_controller.rb b/app/controllers/calculators_controller.rb
@@ -2,6 +2,8 @@
 
 class CalculatorsController < ApplicationController
   before_action :authenticate_user!, only: :receive_recomendations
+
+  before_action :check_constructor_flipper, only: [:index, :show, :calculate]
   before_action :check_mhc_flipper, only: :mhc_calculator
 
   def index
@@ -15,6 +17,8 @@ def index
 
   def show
     @calculator = resource
+    add_breadcrumb t("breadcrumbs.home"), root_path
+    add_breadcrumb @calculator.name
   end
 
   def calculate
@@ -58,6 +62,12 @@ def resource
     collection.friendly.find(params[:slug])
   end
 
+  def check_constructor_flipper
+    return if Flipper[:constructor_status].enabled?
+
+    raise ActionController::RoutingError, "Constructor flipper is disabled"
+  end
+
   def check_mhc_flipper
     return if Flipper[:mhc_calculator_status].enabled?
 

diff --git a/app/javascript/controllers/constructors_form_indexing_controller.js 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/models/formula.rb b/app/models/formula.rb
@@ -22,11 +22,15 @@
 #  fk_rails_...  (calculator_id => calculators.id)
 #
 class Formula < ApplicationRecord
+  include Translatable
+
   belongs_to :calculator
 
   validates_with FormulaValidator
 
   validates :uk_label, :en_label, :uk_unit, :en_unit, :expression, presence: true
   validates :uk_label, :en_label, length: { minimum: 3, maximum: 50 }
   validates :en_unit, :uk_unit, length: { minimum: 1, maximum: 30 }
+
+  translates :label, :unit
 end
diff --git a/app/services/calculators/calculation_service.rb b/app/services/calculators/calculation_service.rb
@@ -10,7 +10,7 @@ def perform
     @calculator.formulas.map do |formula|
       result = @dentaku.evaluate(formula.expression, @inputs).round(2)
 
-      { label: formula.en_label, result: result }
+      { label: formula.label, result: result, unit: formula.unit }
     end
   end
 end
diff --git 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
@@ -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
@@ -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
@@ -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>
diff --git a/app/views/account/shared/_navigation.html.erb b/app/views/account/shared/_navigation.html.erb
@@ -23,7 +23,7 @@
         </li>
         <% if user_signed_in? && current_user.admin? %>
           <li>
-            <%= link_to t("layouts.navigation.admin"), account_calculators_path, class: "tab-main-page" %>
+            <%= link_to t("layouts.navigation.admin"), edit_account_site_setting_path, class: "tab-main-page" %>
           </li>
         <% end %>
         <% if user_signed_in? %>

diff --git a/app/views/calculators/partials/_calculation_results.html.erb b/app/views/calculators/partials/_calculation_results.html.erb
@@ -1,14 +1,22 @@
-<h2 class="mt-4 text-2xl font-bold text-white underline">Calculation Results</h2>
-<div class="mt-2 space-y-2 text-white">
-  <% results.each do |result| %>
-    <div class="flex gap-2 text-lg font-medium">
-      <h3>
-        <%= result[:label] %>
-      </h3>
-      =
-      <p>
-        <%= result[:result] %>
-      </p>
-    </div>
-  <% end %>
+<%# TODO: Delete this and use user provided value%>
+<% formula_image = "money_to_spent_2.png" %>
+
+<div class="calculation-results rounded jumbotron jumbotron-fluid position-relative">
+  <h2 class="pt-6 text-2xl font-semibold text-center dynamic-text-color">Calculation Results</h2>
+  <div class="jumbotron calculation-results result main-result-container result-container">
+    <% results.each do |result| %>
+      <div>
+          <%= image_tag "#{formula_image}", class: "img-margin", alt: "icon" %>
+          <p class="dynamic-text-color">
+            <%= result[:result] %>
+          </p>
+          <p class="text-2xl dynamic-text-color">
+            <%= result[:unit] %>
+          </p>
+          <p class="diapers-font-text">
+            <%= result[:label] %>
+          </p>
+      </div>
+    <% end %>
+  </div>
 </div>
diff --git a/app/views/calculators/partials/show/_constructor_calculator_description.erb b/app/views/calculators/partials/show/_constructor_calculator_description.erb
@@ -0,0 +1,8 @@
+<%# TODO: Delete this if %>
+<% if false %>
+  <section class="description-section">
+    <div class="description-block">
+      <%# TODO: ADD text here %>
+    </div>
+  </section>
+<% end %>