Add ability to update puzzles from the admin table

Author: FionaDL

app/assets/stylesheets/application.css

@@ -72,11 +72,11 @@ th {
   background-color: #4CAF50;
 }
 
-.reject-btn {
+.reject-btn, .close-btn {
   background-color: #f44336;
 }
 
-.pending-btn {
+.pending-btn, .edit-btn {
   background-color: yellow;
   color: black;
 }
@@ -109,4 +109,48 @@ th {
 .banner-message.alert {
   background-color: #fff3cd;
   color: #856404;
-}
+}
+
+/* full screen overlay */
+.modal-overlay {
+  position: fixed;
+  top: 0; 
+  left: 0; 
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+/* modal content box */
+.modal-content {
+  background-color: white;
+  padding: 1.5rem;
+  border-radius: 0.5rem;
+  min-width: 300px;
+  max-width: 600px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+}
+
+.modal-area {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1rem;
+}
+
+/* Horizontal radio buttons for puzzle answer */
+.answer-radio-group {
+  display: flex;
+  gap: 1.5em;
+  align-items: center;
+}
+.answer-radio-group label {
+  display: flex;
+  align-items: center;
+  gap: 0.3em;
+}
+
+

app/controllers/puzzles_controller.rb

@@ -9,4 +9,31 @@ def index
     @rejected_puzzles = Puzzle.rejected
     @archived_puzzles = Puzzle.archived
   end
+
+  def edit
+    @puzzle = Puzzle.find(params[:id])
+  end
+
+  def update
+    @puzzle = Puzzle.find(params[:id])
+    if @puzzle.update(puzzle_params)
+      respond_to do |format|
+        format.turbo_stream
+        format.html { redirect_to puzzles_path, notice: "Puzzle updated." }
+        format.json { render json: { success: true, puzzle: @puzzle } }
+      end
+    else
+      respond_to do |format|
+        format.turbo_stream { render turbo_stream: turbo_stream.replace(@puzzle, partial: "puzzles/form", locals: { puzzle: @puzzle }) }
+        format.html { render :edit, status: :unprocessable_entity }
+        format.json { render json: { success: false, errors: @puzzle.errors.full_messages }, status: :unprocessable_entity }
+      end
+    end
+  end
+
+  private
+
+  def puzzle_params
+    params.require(:puzzle).permit(:question, :answer, :explanation, :link)
+  end
 end

app/javascript/controllers/modal_controller.js

@@ -0,0 +1,11 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["content"]
+
+  close(event) {
+    if (event.target.dataset.action === "modal#close") {
+      this.element.remove()
+    }
+  }
+}

app/views/layouts/application.html.erb

@@ -33,5 +33,6 @@
     <% end %>
 
     <%= yield %>
+    <turbo-frame id="modal"></turbo-frame>
   </body>
 </html>

app/views/puzzles/_form.html.erb

@@ -0,0 +1,30 @@
+<%=form_with model: @puzzle do |f| %>
+  <div class="modal-area">
+    <%= f.label :question %>
+    <%= f.text_area :question %>
+  </div>
+
+<div class="modal-area">
+  <%= f.label :answer %><br>
+  <div class="answer-radio-group">
+    <label>
+      <%= f.radio_button :answer, "ruby" %> Ruby
+    </label>
+    <label>
+      <%= f.radio_button :answer, "rails" %> Rails
+    </label>
+  </div>
+</div>
+
+  <div class="modal-area">
+    <%= f.label :explanation %>
+    <%= f.text_area :explanation %>
+  </div>
+
+  <div class="modal-area">
+    <%= f.label :link %>
+    <%= f.text_field :link %>
+  </div>
+
+  <%= f.submit "Save", class: "btn approve-btn" %>
+<% end %>

app/views/puzzles/_puzzles_table.html.erb

@@ -10,7 +10,7 @@
   </thead>
   <tbody>
     <% puzzles.each do |puzzle| %>
-      <tr>
+      <tr id="<%= dom_id(puzzle) %>">
         <td><%= puzzle.question %></td>
         <td><%= puzzle.answer %></td>
         <td><%= puzzle.explanation %></td>
@@ -24,6 +24,10 @@
           <% if actions == :pending %>
             <%= button_to 'Approve', puzzle_state_path(puzzle, state: :approved), method: :patch, form_class: 'inline-form', class: 'btn approve-btn' %>
             <%= button_to 'Reject', puzzle_state_path(puzzle, state: :rejected), method: :patch, form_class: 'inline-form', class: 'btn reject-btn' %>
+            <%= link_to "Edit",
+              edit_puzzle_path(puzzle),
+              data: { turbo_frame: "modal" },
+              class: "btn edit-btn" %>
           <% elsif actions == :approved %>
             <%= button_to 'Reject', puzzle_state_path(puzzle, state: :rejected), method: :patch, form_class: 'inline-form', class: 'btn reject-btn' %>
             <%= button_to 'Pending', puzzle_state_path(puzzle, state: :pending), method: :patch, form_class: 'inline-form', class: 'btn pending-btn' %>

app/views/puzzles/edit.html.erb

@@ -0,0 +1,15 @@
+
+<turbo-frame id="modal">
+  <div data-controller="modal" data-action="modal#close"class="modal-overlay">
+    <div data-modal-target="content"
+        class="modal-content"
+        onclick="event.stopPropagation()">
+      <h2 class="text-xl mb-4">Edit Puzzle</h2>
+
+      <%= render "form", puzzle: @puzzle %>
+
+      <button data-action="modal#close"
+              class="btn close-btn">Close</button>
+    </div>
+  </div>
+</turbo-frame>

app/views/puzzles/update.turbo_stream.erb

@@ -0,0 +1,25 @@
+<turbo-stream action="replace" target="<%= dom_id(@puzzle) %>">
+  <template>
+    <tr id="<%= dom_id(@puzzle) %>">
+      <td><%= @puzzle.question %></td>
+      <td><%= @puzzle.answer %></td>
+      <td><%= @puzzle.explanation %></td>
+      <td>
+        <% if @puzzle.link.present? %>
+          <%= link_to 'View', @puzzle.link, target: '_blank' %>
+        <% end %>
+      </td>
+      <td>
+          <%= button_to 'Approve', puzzle_state_path(@puzzle, state: :approved), method: :patch, form_class: 'inline-form', class: 'btn approve-btn' %>
+          <%= button_to 'Reject', puzzle_state_path(@puzzle, state: :rejected), method: :patch, form_class: 'inline-form', class: 'btn reject-btn' %>
+          <%= link_to "Edit",
+              edit_puzzle_path(@puzzle),
+              data: { turbo_frame: "modal" },
+              class: "btn edit-btn" %>
+      </td>
+    </tr>
+  </template>
+</turbo-stream>
+<turbo-stream action="update" target="modal">
+  <template></template>
+</turbo-stream>

config/routes.rb

@@ -1,5 +1,5 @@
 Rails.application.routes.draw do
-  resources :puzzles, only: [ :index ] do
+  resources :puzzles, only: [ :index, :edit, :update ] do
     resource :state, only: [ :update ], module: :puzzles
   end
   resources :sessions, only: [ :create, :destroy ]