Ingredients CRUD v1

Author: trinitytakei

.yarn/install-state.gz

@@ -37,11 +37,15 @@ group :development do
   gem "better_html", require: false
   gem "erb_lint", require: false
   gem "overcommit", require: false
+  gem "rails-erd", "~> 1.7.2"
+end
+
+group :test do
   gem "capybara"
+  gem "capybara-lockstep", "~> 2.2.2"
   gem "database_cleaner-active_record"
   gem "selenium-webdriver", "~> 4.27.0"
   gem "mocha", "~> 2.7.1"
-  gem "rails-erd", "~> 1.7.2"
 end
 
 group :development, :test do

Gemfile

@@ -123,6 +123,11 @@ GEM
       rack-test (>= 0.6.3)
       regexp_parser (>= 1.5, < 3.0)
       xpath (~> 3.2)
+    capybara-lockstep (2.2.2)
+      activesupport (>= 4.2)
+      capybara (>= 3.0)
+      ruby2_keywords
+      selenium-webdriver (>= 4.0)
     childprocess (5.1.0)
       logger (~> 1.5)
     choice (0.2.0)
@@ -561,6 +566,7 @@ DEPENDENCIES
   bootsnap
   brakeman (~> 7.0.0)
   capybara
+  capybara-lockstep (~> 2.2.2)
   database_cleaner-active_record
   debug (~> 1.10.0)
   dotenv-rails (~> 3.1.7)

Gemfile.lock

@@ -0,0 +1,59 @@
+class IngredientsController < ApplicationController
+  before_action :authenticate_user!
+  before_action :set_ingredient, only: [ :show, :edit, :update, :destroy ]
+
+  def index
+    @ingredients = Ingredient.all
+  end
+
+  def show
+  end
+
+  def new
+    @ingredient = current_user.ingredients.build
+  end
+
+  def edit
+  end
+
+  def create
+    @ingredient = current_user.ingredients.build(ingredient_params)
+
+    if @ingredient.save
+      redirect_to @ingredient, notice: "Ingredient was successfully created."
+    else
+      render :new, status: :unprocessable_entity
+    end
+  end
+
+  def update
+    if @ingredient.update(ingredient_params)
+      redirect_to @ingredient, notice: "Ingredient was successfully updated."
+    else
+      render :edit, status: :unprocessable_entity
+    end
+  end
+
+  def destroy
+    @ingredient.destroy
+    redirect_to ingredients_url, notice: "Ingredient was successfully deleted."
+  end
+
+  private
+
+  def set_ingredient
+    @ingredient = current_user.ingredients.find(params[:id])
+  end
+
+  def ingredient_params
+    params.require(:ingredient).permit(
+      :name,
+      :description,
+      :template_content,
+      :category,
+      :conflicts_with,
+      :requires,
+      :configures_with
+    )
+  end
+end

app/controllers/ingredients_controller.rb

@@ -0,0 +1,36 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["form", "field"]
+  static values = {
+    delay: { type: Number, default: 2000 }
+  }
+
+  connect() {
+    this.timeout = null
+  }
+
+  fieldChanged() {
+    if (this.timeout) {
+      clearTimeout(this.timeout)
+    }
+
+    this.timeout = setTimeout(() => {
+      this.save()
+    }, this.delayValue)
+  }
+
+  save() {
+    const form = this.formTarget
+    const formData = new FormData(form)
+
+    fetch(form.action, {
+      method: form.method,
+      body: formData,
+      headers: {
+        "Accept": "application/json",
+        "X-Requested-With": "XMLHttpRequest"
+      }
+    })
+  }
+}

app/javascript/controllers/autosave_controller.js

@@ -0,0 +1,73 @@
+import { Controller } from "@hotwired/stimulus"
+import CodeMirror from "codemirror"
+import "codemirror/mode/ruby/ruby"
+import "codemirror/mode/yaml/yaml"
+import "codemirror/lib/codemirror.css"
+import "codemirror/theme/monokai.css"
+
+export default class extends Controller {
+  static values = {
+    mode: String,
+    readonly: { type: Boolean, default: false }
+  }
+
+  connect() {
+    const config = {
+      mode: this.modeValue || "ruby",
+      theme: "monokai",
+      lineNumbers: true,
+      lineWrapping: true,
+      readOnly: this.readonlyValue,
+      tabSize: 2,
+      indentWithTabs: false,
+      viewportMargin: Infinity,
+      scrollbarStyle: null,
+      fixedGutter: true,
+      gutters: ["CodeMirror-linenumbers"]
+    }
+
+    if (!this.readonlyValue) {
+      config.autofocus = true
+      config.extraKeys = {
+        "Tab": (cm) => {
+          if (cm.somethingSelected()) {
+            cm.indentSelection("add")
+          } else {
+            cm.replaceSelection("  ", "end")
+          }
+        }
+      }
+    }
+
+    // For read-only mode, we need to create a new div and set its content
+    if (this.readonlyValue) {
+      const content = this.element.textContent.trim()
+      this.element.textContent = ""
+      this.editor = CodeMirror(this.element, {
+        ...config,
+        value: content
+      })
+    } else {
+      this.editor = CodeMirror.fromTextArea(this.element, config)
+    }
+
+    if (!this.readonlyValue) {
+      this.editor.on("change", () => {
+        this.element.value = this.editor.getValue()
+        this.element.dispatchEvent(new Event("input"))
+      })
+    }
+
+    // Refresh after initialization to ensure proper rendering
+    setTimeout(() => this.editor.refresh(), 1)
+  }
+
+  disconnect() {
+    if (this.editor) {
+      if (!this.readonlyValue) {
+        this.editor.toTextArea()
+      }
+      this.editor = null
+    }
+  }
+}

app/javascript/controllers/codemirror_controller.js

@@ -2,3 +2,4 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 @import "./custom/basics.css";
+@import "./custom/codemirror.css";

app/javascript/stylesheets/application.css

@@ -0,0 +1,34 @@
+.CodeMirror {
+  height: auto !important;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+}
+
+.CodeMirror-focused {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+.CodeMirror-gutters {
+  border-right: 1px solid #e5e7eb;
+  background-color: #f9fafb;
+}
+
+.CodeMirror-linenumber {
+  color: #6b7280;
+}
+
+.cm-s-monokai.CodeMirror {
+  background-color: #272822;
+}
+
+/* Fix extra space issue */
+.CodeMirror-scroll {
+  overflow: hidden !important;
+  margin-bottom: -50px;
+  padding-bottom: 50px;
+  height: 100%;
+}

app/javascript/stylesheets/custom/codemirror.css

@@ -16,8 +16,8 @@
 #
 # Indexes
 #
-#  index_ingredients_on_created_by_id  (created_by_id)
-#  index_ingredients_on_name           (name) UNIQUE
+#  index_ingredients_on_created_by_id           (created_by_id)
+#  index_ingredients_on_name_and_created_by_id  (name,created_by_id) UNIQUE
 #
 # Foreign Keys
 #
@@ -28,11 +28,11 @@ class InvalidConfigurationError < StandardError; end
   include GitBackedModel
 
   belongs_to :created_by, class_name: "User"
-  has_many :recipe_ingredients, dependent: :destroy
+  has_many :recipe_ingredients, dependent: :delete_all
   has_many :recipes, through: :recipe_ingredients
-  has_many :app_changes, dependent: :destroy
+  has_many :recipe_changes, dependent: :delete_all
 
-  validates :name, presence: true, uniqueness: true
+  validates :name, presence: true, uniqueness: { scope: :created_by_id }
   validates :template_content, presence: true
 
   serialize :conflicts_with, coder: YAML

app/models/ingredient.rb

@@ -29,6 +29,7 @@ class User < ApplicationRecord
   has_many :notifications, as: :recipient,
                           dependent: :destroy,
                           class_name: "Noticed::Notification"
+  has_many :ingredients, foreign_key: :created_by_id, dependent: :destroy
 
 
   validates :provider, presence: true