Add pause application toggle to pets page (#375)

Change toggle position to center of column

Add toggle virtual attribute to pets

The toggle attr is used as a condition for turbo_stream depending
one where the pet is updated from.

Change unused turbo_frame to div

Add testing for toggle turbo_stream

Revert model file to upstream

app/controllers/organizations/pets_controller.rb

@@ -40,7 +40,10 @@ def create
 
   def update
     if pet_in_same_organization?(@pet.organization_id) && @pet.update(pet_params)
-      redirect_to @pet, notice: "Pet updated successfully."
+      respond_to do |format|
+        format.html { redirect_to @pet, notice: "Pet updated successfully." }
+        format.turbo_stream if params[:pet][:toggle] == "true"
+      end
     else
       render :edit, status: :unprocessable_entity
     end
@@ -95,6 +98,7 @@ def pet_params
       :weight_unit,
       :species,
       :placement_type,
+      :toggle,
       images: [],
       files: [])
   end

app/models/pet.rb

@@ -77,6 +77,8 @@ class Pet < ApplicationRecord
   scope :adopted, -> { Pet.includes(:match).where.not(match: {id: nil}) }
   scope :unadopted, -> { Pet.includes(:match).where(match: {id: nil}) }
 
+  attr_writer :toggle
+
   # check if pet has any applications with adoption pending status
   def has_adoption_pending?
     adopter_applications.any? { |app| app.status == "adoption_pending" }

app/views/organizations/pets/_pause_toggle.html.erb

@@ -0,0 +1,12 @@
+<div id=<%= "pet_pause_toggle_#{pet.id}" %>>
+  <%= form_with model: pet do |form| %>
+    <div class='form-group d-flex justify-content-center'>
+      <div class="form-check form-switch">
+        <%= form.hidden_field :application_paused, value: false %>
+        <%= form.hidden_field :toggle, value: 'true' %>
+        <%= form.check_box :application_paused,{ class: "form-check-input",
+        role: "switch", id: "flexSwitchCheckChecked", onchange: "this.form.requestSubmit()"}, true, false %>
+      </div>
+    </div>
+  <% end %>
+</div>

app/views/organizations/pets/index.html.erb

@@ -1,11 +1,9 @@
 <% breadcrumb :dashboard_pets %>
-
 <%= render "components/dashboard/page" do |p| %>
   <% p.header_title t(".our_pets") %>
   <% p.actions do %>
     <%= link_to t('.create_pet'), new_pet_path, class: "btn btn-primary" %><br>
   <% end %>
-
   <% p.content do %>
     <!--filter section-->
     <div>
@@ -38,7 +36,6 @@
         <% end %>
       </div>
     </div>
-
     <!-- row -->
     <div class="justify-content-md-between mb-4 mb-xl-0 gx-3">
       <!-- card -->
@@ -52,7 +49,7 @@
                 <th scope="col">Sex</th>
                 <th scope="col">Breed</th>
                 <th scope="col">Weight</th>
-                <th scope="col">Status</th>
+                <th class="text-center" scope="col">Pause Applications</th>
                 <th scope="col"></th>
               </tr>
             </thead>
@@ -85,7 +82,7 @@
                     <%= "#{pet.weight_from} - #{pet.weight_to} #{pet.weight_unit}" %>
                   </td>
                   <td>
-                    <span class="badge bg-info-soft"><%= pet.application_paused == false ? t('.application.active') : t('.application.paused') %></span>
+                    <%= render 'pause_toggle', pet: pet %>
                   </td>
                   <% if current_user.staff_account %>
                     <td>
@@ -101,15 +98,6 @@
                           <%= link_to pet_path(pet), class: 'dropdown-item' do %>
                             <i class="fe fe-link dropdown-item-icon"></i>Copy link
                           <% end %>
-                          <% if pet.application_paused %>
-                            <%= button_to pet, method: :put, class: 'dropdown-item', params: {pet: {application_paused: false }} do %>
-                              <i class="fe fe-play dropdown-item-icon"></i>Resume applications
-                            <% end %>
-                          <% else %>
-                            <%= button_to pet, method: :put, class: 'dropdown-item', params: {pet: {application_paused: true}} do %>
-                              <i class="fe fe-pause dropdown-item-icon"></i>Pause applications
-                            <% end %>
-                          <% end %>
                           <%= button_to pet, method: :delete, class: 'dropdown-item', data: { turbo_confirm: t('.are_you_sure_delete') } do %>
                             <i class="fe fe-trash dropdown-item-icon"></i>Delete
                           <% end %>

app/views/organizations/pets/update.turbo_stream.erb

@@ -0,0 +1,2 @@
+<%= turbo_stream.replace "pet_pause_toggle_#{@pet.id}", partial: "pause_toggle",
+locals: {pet: @pet} %>

test/controllers/organizations/pets_controller_test.rb

@@ -43,4 +43,18 @@ class Organizations::PetsControllerTest < ActionDispatch::IntegrationTest
       assert_equal URI.decode_www_form(URI.parse(request.url).query).join("="), "active_tab=files"
     end
   end
+
+  test "update application paused should respond with turbo_stream when toggled on pets page" do
+    patch url_for(@pet), params: {pet: {application_paused: true, toggle: "true"}}, as: :turbo_stream
+
+    assert_equal Mime[:turbo_stream], response.media_type
+    assert_response :success
+  end
+
+  test "update application paused should respond with html when not on pets page" do
+    patch url_for(@pet), params: {pet: {application_paused: true}}, as: :turbo_stream
+
+    assert_equal Mime[:html], response.media_type
+    assert_response :redirect
+  end
 end