Added notes to constructor

Gemfile

@@ -124,3 +124,4 @@ gem "rails_db", "~> 2.4"
 gem "meta-tags"
 gem "inline_svg"
 gem "breadcrumbs_on_rails"
+gem "tinymce-rails"

Gemfile.lock

@@ -582,6 +582,8 @@ GEM
     thor (1.3.2)
     tilt (2.4.0)
     timeout (0.4.1)
+    tinymce-rails (7.5.1)
+      railties (>= 3.1.1)
     turbo-rails (2.0.11)
       actionpack (>= 6.0.0)
       railties (>= 6.0.0)
@@ -710,6 +712,7 @@ DEPENDENCIES
   standard (~> 1.0)
   stimulus-rails
   tailwindcss-rails (~> 2.0)
+  tinymce-rails
   tzinfo-data
   web-console (>= 4.1.0)
   webdrivers (~> 5.3.1)

app/controllers/account/calculators_controller.rb

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

app/helpers/calculators_helper.rb

@@ -55,4 +55,8 @@ def old_calculator_items
       { image: "money_to_spent.png", data_target: "moneyWillBeSpent", text: t(".money_will_be_spent") },
       { image: "money_spent.png", data_target: "moneySpent", text: t(".money_spent") }]
   end
+
+  def sanitize_content(notes)
+    sanitize(notes, tags: ["p", "strong", "em", "ul", "li", "a", "div", "span", "img"], attributes: ["href", "target", "class", "src", "alt", "style"])
+  end
 end

app/javascript/controllers/tinymce_controller.js

@@ -0,0 +1,20 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['input']
+
+  connect() {
+    tinymce.init(this.tinymceConfig)
+  }
+
+  disconnect() {
+    tinymce.remove()
+  }
+
+  get tinymceConfig() {
+    return {
+      target: this.inputTarget,
+      ...TinyMCERails.configuration.default
+    }
+  }
+}

app/models/calculator.rb

@@ -23,7 +23,7 @@ class Calculator < ApplicationRecord
 
   friendly_id :en_name, use: :sequentially_slugged
 
-  translates :name
+  translates :name, :notes
 
   has_many :fields, dependent: :destroy
   has_many :formulas, -> { ordered_by_priority }, dependent: :destroy, inverse_of: :calculator
@@ -38,9 +38,18 @@ 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 :en_notes, :uk_notes,
+            length: {
+              maximum: 500,
+              tokenizer: :strip_tags_and_tokenize
+            }
   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"]
   end
+
+  def strip_tags_and_tokenize(string)
+    ActionController::Base.helpers.strip_tags(string).chars
+  end
 end

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

@@ -8,6 +8,7 @@
         <div id="fields" class="space-y-4">
           <%= render "account/calculators/partials/color_selector", f: f %>
         </div>
+        <%= render "account/calculators/partials/tinymce_form", f: f %>
       </fieldset>
 
       <!-- formula input-->

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

@@ -0,0 +1,14 @@
+<%= tinymce_assets %>
+<div data-controller="tinymce">
+  <div class="pt-4">
+    <%= f.label :uk_notes, t("account.calculators.new.uk_notes") %>
+    <%= f.text_area :uk_notes, data: { tinymce_target: "input" }, class: "tinymce", rows: 20, cols: 60 %>
+  </div>
+
+  <div class="pt-4 pb-4">
+    <%= f.label :en_notes, t("account.calculators.new.en_notes") %>
+    <%= f.text_area :en_notes, data: { tinymce_target: "input" }, class: "tinymce", rows: 20, cols: 60 %>
+  </div>
+</div>
+
+<%= tinymce %>

app/views/calculators/partials/show/_constructor_calculator_description.erb

@@ -1,8 +1,7 @@
-<%# TODO: Delete this if %>
-<% if false %>
+<% if calculator.uk_notes.present? || calculator.en_notes.present? %>
   <section class="description-section">
-    <div class="description-block">
-      <%# TODO: ADD text here %>
+    <div class="description-section">
+      <%= sanitize_content(calculator.notes) %>
     </div>
   </section>
 <% end %>

app/views/calculators/show.html.erb

@@ -38,4 +38,4 @@
   <% end %>
 </div>
 
-<%= render "calculators/partials/show/constructor_calculator_description" %>
+<%= render "calculators/partials/show/constructor_calculator_description", calculator: @calculator %>

config/locales/en/en.yml

@@ -150,11 +150,11 @@ en:
       use_less_link: https://zerowastelviv.org.ua/en/zero-waste-nappies-en/
     mhc_description_block:
       mhc_description_block_html:
-        "These data are approximate, and exact values may vary depending on your individual needs and habits. 
+        "These data are approximate, and exact values may vary depending on your individual needs and habits.
         Using reusable menstrual products can significantly reduce waste and serve as a cost-effective alternative to disposable options.
-        You can optimize the use of these products at any stage, which will help lower expenses and increase comfort. 
-        We recommend exploring methods for the effective use of reusable menstrual products and learning about their benefits. 
-        More %{information_link} about the calculations regarding the quantity and cost of these products can be found in our materials 
+        You can optimize the use of these products at any stage, which will help lower expenses and increase comfort.
+        We recommend exploring methods for the effective use of reusable menstrual products and learning about their benefits.
+        More %{information_link} about the calculations regarding the quantity and cost of these products can be found in our materials
         or by %{contact_link} with your questions."
       information_link_text: "detailed information"
       contact_link_text: "contacting us"
@@ -473,6 +473,8 @@ en:
           no_fields_yet_label: "No fields yet"
           update_calculator_button: "Update calculator"
       new:
+        uk_notes: "Ukrainian Notes"
+        en_notes: "English Notes"
         create_calculator_button: "Save calculator"
     feature_flags:
       submit_button: "Save"

config/locales/uk/uk.yml

@@ -132,11 +132,11 @@ uk:
       use_less_link: "https://zerowastelviv.org.ua/zero-waste-nappies/"
     mhc_description_block:
       mhc_description_block_html:
-        "Ці дані є орієнтовними, і точні значення можуть варіюватися залежно від ваших індивідуальних потреб та звичок. 
-        Використання багаторазових менструальних засобів може значно зменшити кількість відходів і стати економічно 
-        вигідною альтернативою одноразовим продуктам. Ви можете оптимізувати використання цих засобів на будь-якому етапі, 
-        що дозволить знизити витрати та підвищити комфорт. Ми рекомендуємо ознайомитися з методами ефективного використання 
-        багаторазових менструальних продуктів та їх перевагами. Більш %{information_link} про розрахунки кількості та вартості 
+        "Ці дані є орієнтовними, і точні значення можуть варіюватися залежно від ваших індивідуальних потреб та звичок.
+        Використання багаторазових менструальних засобів може значно зменшити кількість відходів і стати економічно
+        вигідною альтернативою одноразовим продуктам. Ви можете оптимізувати використання цих засобів на будь-якому етапі,
+        що дозволить знизити витрати та підвищити комфорт. Ми рекомендуємо ознайомитися з методами ефективного використання
+        багаторазових менструальних продуктів та їх перевагами. Більш %{information_link} про розрахунки кількості та вартості
         цих продуктів можна знайти в наших матеріалах або звернувшись %{contact_link} з вашими питаннями."
       information_link_text: "детальну інформацію"
       contact_link_text: "до нас"
@@ -361,6 +361,8 @@ uk:
         prohibited_to_update: " перешкоджають оновленню калькулятора"
         prohibited_to_save: " перешкоджають збереженню калькулятора"
         error: "помилки"
+        uk_notes: "Нотатки українською"
+        en_notes: "Нотатки англійською"
     site_settings:
       edit:
         meta-title: "Налаштування сайту"

config/tinymce.yml

@@ -0,0 +1,8 @@
+height: 300
+width: 800
+menubar: false
+toolbar:
+  - undo redo | blocks | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | removeformat 
+plugins:
+  - insertdatetime lists media table code  wordcount
+license_key: 'gpl'

db/migrate/20241121165300_add_language_notes_to_calculators.rb

@@ -0,0 +1,8 @@
+class AddLanguageNotesToCalculators < ActiveRecord::Migration[7.2]
+  def change
+    change_table :calculators, bulk: true do |t|
+      t.text :uk_notes
+      t.text :en_notes
+    end
+  end
+end

db/schema.rb

@@ -50,6 +50,8 @@
     t.string "uk_name", default: "", null: false
     t.string "en_name", default: "", null: false
     t.string "color", default: "#8fba3b"
+    t.text "uk_notes"
+    t.text "en_notes"
     t.index ["slug"], name: "index_calculators_on_slug", unique: true
   end
 

spec/helpers/calculators/calculators_helper_spec.rb

@@ -0,0 +1,42 @@
+require "rails_helper"
+
+RSpec.describe ApplicationHelper, type: :helper do
+  describe "#sanitize_content" do
+    let(:valid_html) do
+      '<p class="text-bold">This is <strong>bold</strong> and <em>italic</em>. <a href="http://example.com" target="_blank">Link</a></p>'
+    end
+
+    let(:invalid_html) do
+      '<script>alert("XSS")</script><p>This is safe content</p>'
+    end
+
+    let(:mixed_html) do
+      '<p>This is <strong>bold</strong> and <script>alert("XSS")</script> <a href="http://example.com">Link</a></p>'
+    end
+
+    let(:html_with_attributes) do
+      '<img src="image.png" alt="example image" style="width:100px;">'
+    end
+
+    it "allows specific tags and attributes" do
+      expect(helper.sanitize_content(valid_html)).to include('<p class="text-bold">')
+      expect(helper.sanitize_content(valid_html)).to include("<strong>bold</strong>")
+      expect(helper.sanitize_content(valid_html)).to include("<em>italic</em>")
+      expect(helper.sanitize_content(valid_html)).to include('<a href="http://example.com" target="_blank">Link</a>')
+    end
+
+    it "removes disallowed tags" do
+      expect(helper.sanitize_content(invalid_html)).not_to include("<script>")
+    end
+
+    it "removes disallowed tags but keeps allowed tags and attributes" do
+      expect(helper.sanitize_content(mixed_html)).to include("<p>This is <strong>bold</strong>")
+      expect(helper.sanitize_content(mixed_html)).not_to include("<script>")
+      expect(helper.sanitize_content(mixed_html)).to include('<a href="http://example.com">Link</a>')
+    end
+
+    it "does not remove allowed attributes from tags" do
+      expect(helper.sanitize_content(html_with_attributes)).to eq('<img src="image.png" alt="example image" style="width:100px;">')
+    end
+  end
+end

spec/models/calculator_spec.rb

@@ -29,6 +29,8 @@
     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 validate_length_of(:en_notes).is_at_most(500) }
+    it { is_expected.to validate_length_of(:uk_notes).is_at_most(500) }
     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) }
@@ -41,4 +43,16 @@
     it { is_expected.to have_many(:fields).dependent(:destroy) }
     it { is_expected.to have_many(:formulas).dependent(:destroy) }
   end
+
+  describe "#strip_tags_and_tokenize" do
+    let(:stripped_content) { Calculator.new.strip_tags_and_tokenize(content) }
+
+    context "when contents is simple" do
+      let(:content) { "<p>#{"a" * 500}</p>" }
+
+      it "ensures the stripped content length is correct" do
+        expect(stripped_content.length).to eq(500)
+      end
+    end
+  end
 end