Wrap the edit form in a modal.

Author: cbeer

app/components/aeon/request_actions_component.html.erb

@@ -5,7 +5,7 @@
         </form>
       <% else %>
         <% if helpers.can? :edit, request %>
-          <%= link_to edit_aeon_request_path(request), class: 'btn btn-link su-underline p-0 me-sm-2' do %>
+          <%= link_to edit_aeon_request_path(request), class: 'btn btn-link su-underline p-0 me-sm-2', data: { action: 'modal#open' } do %>
             <i class="bi bi-pencil-fill me-1 align-middle"></i><span class="d-none d-sm-inline">Edit request</span>
           <% end %>
         <% end %>

app/controllers/aeon_requests_controller.rb

@@ -39,12 +39,14 @@ def resubmit
 
   def edit
     authorize! :update, @aeon_request
+
+    request.variant = :modal if params[:modal]
   end
 
   def update # rubocop:disable Metrics/AbcSize,Metrics/MethodLength
     authorize! :update, @aeon_request
 
-    AeonClient.new.update_request(
+    new_request = AeonClient.new.update_request(
       @aeon_request.transaction_number,
       AeonClient::RequestData.with_defaults.with(
         appointment_id: aeon_request_params[:appointment_id]&.to_i,
@@ -54,16 +56,21 @@ def update # rubocop:disable Metrics/AbcSize,Metrics/MethodLength
       )
     )
 
-    aeon_requests_path = @aeon_request.draft? ? drafts_aeon_requests_path : submitted_aeon_requests_path
-    redirect_to aeon_requests_path, notice: 'Request was successfully updated.'
+    respond_to do |format|
+      format.turbo_stream { render turbo_stream: turbo_stream.replace(new_request, Aeon::RequestComponent.new(request: new_request)) }
+      format.html do
+        aeon_requests_path = new_request.draft? ? drafts_aeon_requests_path : submitted_aeon_requests_path
+        redirect_to aeon_requests_path, notice: 'Request was successfully updated.'
+      end
+    end
   end
 
   def destroy
     authorize! :destroy, @aeon_request
 
     AeonClient.new.update_request_route(transaction_number: params[:id], status: 'Cancelled by User')
     respond_to do |format|
-      format.turbo_stream { render turbo_stream: turbo_stream.remove("request-#{params[:id]}") }
+      format.turbo_stream { render turbo_stream: turbo_stream.remove(@aeon_request) }
     end
   end
 

app/views/aeon_requests/_form.html.erb

@@ -0,0 +1,17 @@
+<%= form_with(model: @aeon_request, data: { turbo: true }) do |f| %>
+  <div class="modal-body">
+    <% if f.object.digital? %>
+      <%= render Aeon::DigitizationFormItemComponent.new(title: f.object.volume, dom_id: 'edit_aeon_item_request', object: f.object, base_name: 'aeon_request', series: nil, subseries: nil, collapsed: false) %>
+    <% else %>
+      <ul id="reading" class="appointments-container list-unstyled">
+        <%= render Aeon::AppointmentFormItemComponent.new(title: f.object.call_number, dom_id: 'edit_aeon_item_request', object: f.object, base_name: 'aeon_request', series: nil, subseries: nil, reading_room_id: f.object.reading_room.id, appointments: current_user.aeon.appointments_for(site: f.object.site)) %>
+      </ul>
+    <% end %>
+  </div>
+
+
+  <div class="modal-footer">
+    <%= link_to 'Cancel', aeon_appointments_path, class: 'btn btn-outline-primary', data: { 'bs-dismiss': 'modal' } %>
+    <%= f.submit class: 'btn btn-primary', data: { 'bs-dismiss': 'modal' } %>
+  </div>
+<% end %>

app/views/aeon_requests/edit.html+modal.erb

@@ -0,0 +1,9 @@
+<turbo-frame id="modal-contents">
+  <div class="modal-header">
+    <h1 class="mb-0">Edit request</h1>
+    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+  </div>
+  <div class="modal-body">
+    <%= render 'form' %>
+  </div>
+</turbo-frame>

app/views/aeon_requests/edit.html.erb

@@ -1,11 +1 @@
-<%= form_with(model: @aeon_request) do |f| %>
-  <% if f.object.digital? %>
-    <%= render Aeon::DigitizationFormItemComponent.new(title: f.object.volume, dom_id: 'edit_aeon_item_request', object: f.object, base_name: 'aeon_request', series: nil, subseries: nil, collapsed: false) %>
-  <% else %>
-    <ul id="reading" class="appointments-container list-unstyled">
-      <%= render Aeon::AppointmentFormItemComponent.new(title: f.object.call_number, dom_id: 'edit_aeon_item_request', object: f.object, base_name: 'aeon_request', series: nil, subseries: nil, reading_room_id: f.object.reading_room.id, appointments: current_user.aeon.appointments_for(site: f.object.site)) %>
-    </ul>
-  <% end %>
-
-  <%= f.submit class: 'btn btn-primary' %>
-<% end %>
+<%= render 'form' %>