Use hotwire to make form dynamic via ajax

Author: rossta

app/controllers/examples/posts_controller.rb

@@ -1,20 +1,44 @@
 class Examples::PostsController < ApplicationController
   def index
-    postable = case params[:type]
+    post = Examples::Post.new(postable: build_postable)
+
+    render Examples::Posts::IndexView.new(post: post)
+  end
+
+  def create
+    if params[:commit] == "Refresh"
+      post_params = params.require(:examples_post).permit(:title)
+      post = Examples::Post.new(post_params) do |p|
+        p.postable = build_postable
+      end
+      Rails.logger.info("Post: #{post.inspect}")
+      return render Examples::Posts::IndexView.new(post: post), status: :unprocessable_entity
+    end
+
+    post = Examples::Post.new(post_create_params)
+
+    if post.save
+      redirect_to :index
+    else
+      render Examples::Posts::IndexView.new(post: post), status: :unprocessable_entity
+    end
+  end
+
+  private
+
+  def post_create_params
+    postable_attributes = (params.dig(:examples_post, :postable_type) == "Examples::Posts::Markdown") ? [:body] : [:url]
+    params.require(:examples_post).permit(:title, :postable_type, postable_attributes: postable_attributes)
+  end
+
+  def build_postable
+    case params[:type]
     when "link"
       Examples::Posts::Link.new
     when "image"
       Examples::Posts::Image.new
     else
       Examples::Posts::Markdown.new
     end
-
-    post = Examples::Post.new(postable: postable)
-
-    render Examples::Posts::IndexView.new(post: post)
-  end
-
-  def create
-    raise params.inspect
   end
 end

app/javascript/controllers/forms/refresh.js

@@ -0,0 +1,23 @@
+import { Controller } from '@hotwired/stimulus';
+import debug from '../../utils/debug';
+
+const console = debug('app:javascript:controllers:forms:refresh');
+
+export default class extends Controller {
+  connect() {
+    console.log('connect');
+  }
+
+  refresh() {
+    this.element.querySelectorAll('[required]').forEach((element) => {
+      element.required = false;
+    });
+    const submitButton = document.createElement('input');
+    submitButton.type = 'submit';
+    submitButton.name = 'commit';
+    submitButton.value = 'Refresh';
+    submitButton.style.display = 'none';
+    this.element.closest('form').appendChild(submitButton);
+    submitButton.click();
+  }
+}

app/javascript/controllers/index.js

@@ -15,6 +15,8 @@ import PwaWebPushDemo from './pwa/web-push-demo';
 import AnalyticsCustomEvent from './analytics/custom-event';
 import TableOfContents from './table-of-contents';
 
+import FormRefresh from './forms/refresh';
+
 application.register('analytics', AnalyticsCustomEvent);
 application.register('code-example', CodeExample);
 application.register('clipboard-copy', ClipboardCopy);
@@ -24,3 +26,5 @@ application.register('pwa-installation', PwaInstallation);
 application.register('pwa-web-push-subscription', PwaWebPushSubscription);
 application.register('pwa-web-push-demo', PwaWebPushDemo);
 application.register('table-of-contents', TableOfContents);
+
+application.register('form-refresh', FormRefresh);

app/models/examples/post.rb

@@ -4,4 +4,6 @@ class Examples::Post < ApplicationRecord
     Examples::Posts::Link
     Examples::Posts::Image
   ]
+
+  accepts_nested_attributes_for :postable
 end

app/views/examples/posts/index_view.rb

@@ -3,6 +3,10 @@
 class Examples::Posts::IndexView < ApplicationView
   include Phlex::Rails::Helpers::FormWith
   include Phlex::Rails::Helpers::LinkTo
+  include Phlex::Rails::Helpers::ContentFor
+  include Phlex::Rails::Helpers::LabelTag
+  include Phlex::Rails::Helpers::RadioButtonTag
+  include Phlex::Rails::Helpers::TurboFrameTag
 
   def initialize(post:)
     @post = post
@@ -15,40 +19,43 @@ def view_template
     )
 
     div(class: "section-content container py-gap") do
-      div(class: "tabs") do
-        link_to "Text", examples_posts_path
-        link_to "Link", examples_posts_path(type: "link")
-        link_to "Image", examples_posts_path(type: "image")
-      end
+      turbo_frame_tag :examples_post_form do
+        form_with model: @post, url: examples_posts_path, method: :post, data: {controller: "form-refresh"} do |form|
+          div(class: "tabs") do
+            link_to "Text", url_for(type: "markdown"), class: "tab"
+            link_to "Link", url_for(type: "link"), class: "tab"
+            link_to "Image", url_for(type: "image"), class: "tab"
+          end
 
-      form_with model: @post, url: examples_posts_path, method: :post do |form|
-        fieldset do
-          form.label :title
-          form.text_field :title, placeholder: "My Post 🎸", required: true
-        end
+          fieldset do
+            form.label :title
+            form.text_field :title, placeholder: "My Post 🎸", required: false
+          end
 
-        form.fields_for :postable, @post.postable do |postable_form|
-          case @post.postable
-          when Examples::Posts::Markdown
-            fieldset do
-              postable_form.label :body, "Text (Markdown)"
-              postable_form.text_area :body, placeholder: "# This is a post about guitars 🎸", required: true
-            end
-          when Examples::Posts::Link
-            fieldset do
-              postable_form.label :url, "Link URL"
-              postable_form.text_field :url, placeholder: "https://example.com", required: true
-            end
-          when Examples::Posts::Image
-            fieldset do
-              postable_form.label :url, "Image URL"
-              postable_form.text_field :url, placeholder: "https://example.com/image.jpg", required: true
+          form.hidden_field :postable_type
+          form.fields_for :postable, @post.postable do |postable_form|
+            case @post.postable
+            when Examples::Posts::Markdown
+              fieldset do
+                postable_form.label :body, "Text (Markdown)"
+                postable_form.text_area :body, placeholder: "# This is a post about guitars 🎸", required: false
+              end
+            when Examples::Posts::Link
+              fieldset do
+                postable_form.label :url, "Link URL"
+                postable_form.text_field :url, placeholder: "https://example.com", required: false
+              end
+            when Examples::Posts::Image
+              fieldset do
+                postable_form.label :url, "Image URL"
+                postable_form.text_field :url, placeholder: "https://example.com/image.jpg", required: true
+              end
             end
           end
-        end
 
-        fieldset do
-          form.submit "Save", class: "button primary"
+          fieldset do
+            form.submit "Save", class: "button primary"
+          end
         end
       end
     end