PS ajaxify scaffold

app/controllers/directors_controller.rb

@@ -27,6 +27,7 @@ def create
       if @director.save
         format.html { redirect_to @director, notice: "Director was successfully created." }
         format.json { render :show, status: :created, location: @director }
+        format.js
       else
         format.html { render :new, status: :unprocessable_entity }
         format.json { render json: @director.errors, status: :unprocessable_entity }

app/controllers/movies_controller.rb

@@ -1,9 +1,10 @@
 class MoviesController < ApplicationController
-  before_action :set_movie, only: %i[ show edit update destroy ]
+  before_action :set_movie, only: %i[ show edit update destroy edit_field ]
 
   # GET /movies or /movies.json
   def index
     @movies = Movie.all
+    @movie = Movie.new
   end
 
   # GET /movies/1 or /movies/1.json
@@ -19,6 +20,15 @@ def new
   def edit
   end
 
+  # GET /movies/:id/:field/edit
+  def edit_field
+    @movie_id =  params.fetch(:id)
+    @field =  params.fetch(:field)
+    respond_to do |format|
+      format.js
+    end
+  end
+
   # POST /movies or /movies.json
   def create
     @movie = Movie.new(movie_params)
@@ -27,6 +37,7 @@ def create
       if @movie.save
         format.html { redirect_to @movie, notice: "Movie was successfully created." }
         format.json { render :show, status: :created, location: @movie }
+        format.js
       else
         format.html { render :new, status: :unprocessable_entity }
         format.json { render json: @movie.errors, status: :unprocessable_entity }
@@ -40,19 +51,23 @@ def update
       if @movie.update(movie_params)
         format.html { redirect_to @movie, notice: "Movie was successfully updated." }
         format.json { render :show, status: :ok, location: @movie }
+        format.js
       else
         format.html { render :edit, status: :unprocessable_entity }
         format.json { render json: @movie.errors, status: :unprocessable_entity }
       end
     end
   end
 
+
+
   # DELETE /movies/1 or /movies/1.json
   def destroy
     @movie.destroy
     respond_to do |format|
       format.html { redirect_to movies_url, notice: "Movie was successfully destroyed." }
       format.json { head :no_content }
+      format.js
     end
   end
 

app/javascript/packs/application.js

@@ -3,7 +3,7 @@
 // a relevant structure within app/javascript and only use these pack files to reference
 // that code so it'll be compiled.
 
-import Rails from "@rails/ujs"
+import Rails, { $ } from "@rails/ujs"; global.Rails = Rails;
 import * as ActiveStorage from "@rails/activestorage"
 import "channels"
 

app/models/actor.rb

@@ -1,2 +1,17 @@
+# == Schema Information
+#
+# Table name: actors
+#
+#  id         :bigint           not null, primary key
+#  name       :string
+#  bio        :text
+#  dob        :date
+#  image      :string
+#  created_at :datetime         not null
+#  updated_at :datetime         not null
+#
 class Actor < ApplicationRecord
+  has_many :characters, dependent: :destroy
+  has_many :movies, through: :characters
+
 end

app/models/character.rb

@@ -1,3 +1,14 @@
+# == Schema Information
+#
+# Table name: characters
+#
+#  id         :bigint           not null, primary key
+#  name       :string
+#  actor_id   :bigint           not null
+#  movie_id   :bigint           not null
+#  created_at :datetime         not null
+#  updated_at :datetime         not null
+#
 class Character < ApplicationRecord
   belongs_to :actor
   belongs_to :movie

app/models/director.rb

@@ -1,2 +1,15 @@
+# == Schema Information
+#
+# Table name: directors
+#
+#  id         :bigint           not null, primary key
+#  name       :string
+#  bio        :text
+#  dob        :date
+#  image      :string
+#  created_at :datetime         not null
+#  updated_at :datetime         not null
+#
 class Director < ApplicationRecord
+  has_many :movies
 end

app/models/movie.rb

@@ -1,3 +1,19 @@
+# == Schema Information
+#
+# Table name: movies
+#
+#  id          :bigint           not null, primary key
+#  title       :string
+#  description :text
+#  duration    :integer
+#  image       :string
+#  year        :integer
+#  director_id :bigint
+#  created_at  :datetime         not null
+#  updated_at  :datetime         not null
+#
 class Movie < ApplicationRecord
   belongs_to :director
+  has_many :characters, dependent: :destroy
+  has_many :actors, through: :characters
 end

app/views/layouts/application.html.erb

@@ -6,6 +6,8 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
+    <%= render "shared/cdn_assets" %>
+
     <%= stylesheet_link_tag 'application', media: 'all' %>
     <%= javascript_pack_tag 'application' %>
   </head>

app/views/movies/_field_form.html.erb

@@ -0,0 +1,16 @@
+
+<% if @field == "director"%>
+  <td>
+    <%= form_with(model: movie, local: false) do |form| %>
+      <%= form.collection_select :director_id, Director.order(:name),:id,:name,{}, onchange: 'Rails.fire(this.form, "submit")' %>
+    <% end %>
+  </td>
+
+<% else %>
+  <td>
+    <%= form_with(model: movie, local: false) do |form| %>
+      <%= form.text_field @field %>
+    <% end %>
+  </td>
+
+<% end %>

app/views/movies/_form.html.erb

@@ -1,4 +1,5 @@
-<%= form_with(model: movie) do |form| %>
+<div>
+<%= form_with(model: movie, local: false) do |form| %>
   <% if movie.errors.any? %>
     <div id="error_explanation">
       <h2><%= pluralize(movie.errors.count, "error") %> prohibited this movie from being saved:</h2>
@@ -10,38 +11,47 @@
       </ul>
     </div>
   <% end %>
-
-  <div class="field">
-    <%= form.label :title %>
-    <%= form.text_field :title %>
-  </div>
-
-  <div class="field">
-    <%= form.label :description %>
-    <%= form.text_area :description %>
-  </div>
-
-  <div class="field">
-    <%= form.label :duration %>
-    <%= form.number_field :duration %>
-  </div>
-
-  <div class="field">
-    <%= form.label :image %>
-    <%= form.text_field :image %>
-  </div>
-
-  <div class="field">
-    <%= form.label :year %>
-    <%= form.number_field :year %>
-  </div>
-
-  <div class="field">
-    <%= form.label :director_id %>
-    <%= form.text_field :director_id %>
-  </div>
-
-  <div class="actions">
-    <%= form.submit %>
-  </div>
+  <tr>  
+    <td>
+      <div class="field">
+        <%= form.label :title %>
+        <%= form.text_field :title %>
+      </div>
+    </td>
+
+    <td>
+      <div class="field">
+        <%= form.label :description %>
+        <%= form.text_area :description %>
+      </div>
+    </td>
+
+    <td>  
+      <div class="field">
+        <%= form.label :duration %>
+        <%= form.number_field :duration %>
+      </div>
+    </td>
+
+
+    <td>
+      <div class="field">
+        <%= form.label :year %>
+        <%= form.number_field :year %>
+      </div>
+    </td>
+    <td>
+      <div class="field">
+        <%= form.label :director_name %>
+        <%= form.collection_select :director_id, Director.order(:name),:id,:name, include_blank: true %>
+      </div>
+    </td>
+
+  <td>
+    <div class="actions">
+      <%= form.submit %>
+    </div>
+  </td>
+  </tr>
 <% end %>
+</div>

app/views/movies/_table_row.html.erb

@@ -0,0 +1,37 @@
+<tr id="<%= dom_id(movie) %>">
+
+        <td>
+          <div id="<%= dom_id(movie) %>_title">
+            <%= link_to movie.title, "/movies/#{movie.id}/title/edit", remote: true %>
+          </div>
+        </td>
+
+        <td>
+          <details>
+            <summary>Show description</summary>
+              <p>
+                <div id="<%= dom_id(movie) %>_description">
+                  <%= link_to movie.description, "/movies/#{movie.id}/description/edit", remote: true %>
+                </div>
+              </p>
+          </details>
+        </td>
+        <td>
+          <div id="<%= dom_id(movie) %>_duration">
+            <%= link_to movie.duration, "/movies/#{movie.id}/duration/edit", remote: true %>
+          </div>
+        </td>
+        <td>
+          <div id="<%= dom_id(movie) %>_year">
+            <%= link_to movie.year, "/movies/#{movie.id}/year/edit", remote: true %>
+          </div>
+        </td>
+        <td>
+          <div id="<%= dom_id(movie) %>_director">
+            <%= link_to movie.director.name, "/movies/#{movie.id}/director/edit", remote: true %>
+          </div>
+        </td>
+        <td><%= link_to 'Destroy', movie, method: :delete, remote: true %>
+
+        </td>
+      </tr>

app/views/movies/create.js.erb

@@ -0,0 +1,5 @@
+var added_movie = $("<%= j(render 'movies/table_row', movie: @movie) %>");
+
+$("#movies").before(added_movie);
+
+

app/views/movies/destroy.js.erb

@@ -0,0 +1,3 @@
+$("#<%= dom_id(@movie) %>").fadeOut(function() {
+  $(this).remove();
+});

app/views/movies/edit_field.js.erb

@@ -0,0 +1,4 @@
+var updated_field = $("<%= j(render 'movies/field_form', movie: @movie, movie_id: @movie_id, field: @field ) %>");
+
+$("#movie_<%= @movie_id %>_<%= @field %>").replaceWith(updated_field);
+

app/views/movies/index.html.erb

@@ -14,22 +14,16 @@
     </tr>
   </thead>
 
-  <tbody>
+
+  <%= render 'form', movie: @movie %>
+
+
+  <tbody id="movies">
     <% @movies.each do |movie| %>
-      <tr>
-        <td><%= movie.title %></td>
-        <td><%= movie.description %></td>
-        <td><%= movie.duration %></td>
-        <td><%= movie.year %></td>
-        <td><%= movie.director_id %></td>
-        <td><%= link_to 'Show', movie %></td>
-        <td><%= link_to 'Edit', edit_movie_path(movie) %></td>
-        <td><%= link_to 'Destroy', movie, method: :delete, data: { confirm: 'Are you sure?' } %></td>
-      </tr>
+      <%= render 'table_row', movie: movie %>  
     <% end %>
   </tbody>
 </table>
 
 <br>
 
-<%= link_to 'New Movie', new_movie_path %>

app/views/movies/update.js.erb

@@ -0,0 +1,5 @@
+var updated_movie = $("<%= j(render 'movies/table_row', movie: @movie) %>");
+
+$("#movie_<%= @movie.id %>").replaceWith(updated_movie);
+
+

app/views/shared/_cdn_assets.html.erb

@@ -0,0 +1,8 @@
+<meta charset="utf-8">
+
+<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>

config/routes.rb

@@ -5,4 +5,9 @@
   resources :actors
   resources :directors
   resources :movies
+
+
+  get '/movies/:id/:field/edit', to: 'movies#edit_field'
+
+
 end

test/fixtures/actors.yml

@@ -1,4 +1,15 @@
-# Read about fixtures at https://api.rubyonrails.org/classes/ActiveRecord/FixtureSet.html
+# == Schema Information
+#
+# Table name: actors
+#
+#  id         :bigint           not null, primary key
+#  name       :string
+#  bio        :text
+#  dob        :date
+#  image      :string
+#  created_at :datetime         not null
+#  updated_at :datetime         not null
+#
 
 one:
   name: MyString