From 665273ce2fd383b18efda9609bace313063a2df0 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Wed, 22 May 2024 16:29:02 +1000
Subject: [PATCH] [wip] Attempt to update edited image in-place with Turbo
 Stream

but it doesn't quite work.

Maybe we can force it with JS (https://www.writesoftwarewell.com/process-turbo-stream-javascript/)
---
 app/controllers/spree/admin/images_controller.rb      | 8 +++++++-
 app/views/admin/products_v3/_product_image.html.haml  | 3 +++
 app/views/admin/products_v3/_product_row.html.haml    | 4 +---
 app/views/spree/admin/images/edit.turbo_stream.haml   | 6 +++---
 app/views/spree/admin/images/update.turbo_stream.haml | 2 ++
 5 files changed, 16 insertions(+), 7 deletions(-)
 create mode 100644 app/views/admin/products_v3/_product_image.html.haml
 create mode 100644 app/views/spree/admin/images/update.turbo_stream.haml

diff --git a/app/controllers/spree/admin/images_controller.rb b/app/controllers/spree/admin/images_controller.rb
index 28ef28bbcb7..60849721026 100644
--- a/app/controllers/spree/admin/images_controller.rb
+++ b/app/controllers/spree/admin/images_controller.rb
@@ -3,6 +3,8 @@
 module Spree
   module Admin
     class ImagesController < ::Admin::ResourceController
+      helper ::Admin::ProductsHelper
+
       # This will make resource controller redirect correctly after deleting product images.
       # This can be removed after upgrading to Spree 2.1.
       # See here https://github.com/spree/spree/commit/334a011d2b8e16355e4ae77ae07cd93f7cbc8fd1
@@ -50,7 +52,11 @@ def update
 
         if @object.update(permitted_resource_params)
           flash[:success] = flash_message_for(@object, :successfully_updated)
-          redirect_to location_after_save
+
+          respond_with do |format|
+            format.html { redirect_to location_after_save }
+            format.turbo_stream
+          end
         else
           respond_with(@object)
         end
diff --git a/app/views/admin/products_v3/_product_image.html.haml b/app/views/admin/products_v3/_product_image.html.haml
new file mode 100644
index 00000000000..cc3e77d1416
--- /dev/null
+++ b/app/views/admin/products_v3/_product_image.html.haml
@@ -0,0 +1,3 @@
+%a.image-field{ href: product_image_form_path(product), 'data-turbo-stream': true }
+  = image_tag product.image&.url(:mini) || Spree::Image.default_image_url(:mini), width: 40, height: 40
+  .button.secondary.mini= t('admin.products_page.image.edit')
diff --git a/app/views/admin/products_v3/_product_row.html.haml b/app/views/admin/products_v3/_product_row.html.haml
index 706a3ec7ed0..0908652009c 100644
--- a/app/views/admin/products_v3/_product_row.html.haml
+++ b/app/views/admin/products_v3/_product_row.html.haml
@@ -1,7 +1,5 @@
 %td.with-image{ id: "image-#{product.id}" }
-  %a.image-field{ href: product_image_form_path(product), 'data-turbo-stream': true }
-    = image_tag product.image&.url(:mini) || Spree::Image.default_image_url(:mini), width: 40, height: 40
-    .button.secondary.mini= t('admin.products_page.image.edit')
+  = render partial: "product_image", locals: { product: }
 %td.field.align-left.header.naked_inputs
   = f.hidden_field :id
   = f.text_field :name, 'aria-label': t('admin.products_page.columns.name')
diff --git a/app/views/spree/admin/images/edit.turbo_stream.haml b/app/views/spree/admin/images/edit.turbo_stream.haml
index 4cadb689888..89dbb89bdfe 100644
--- a/app/views/spree/admin/images/edit.turbo_stream.haml
+++ b/app/views/spree/admin/images/edit.turbo_stream.haml
@@ -5,9 +5,9 @@
     -# Display image in the same way it appears in the shopfront popup
     %p= image_tag @image.persisted? ? @image.url(:large) : Spree::Image.default_image_url(:large), width: 433, height: 433
 
-    -# Submit to controller
+    -# Submit as turbo stream to avoid full page reload. But turbo is ignoring it??!!
     = form_for [:admin, @product, @image],
-        html: { multipart: true }, data: { controller: "form" } do |f|
+        html: { multipart: true }, data: { controller: "form", 'turbo-stream': true } do |f|
       %input{ type: :hidden, name: :return_url, value: request.referer }
       = f.hidden_field :viewable_id, value: @product.id
 
@@ -15,4 +15,4 @@
         %input{ class: "secondary relaxed", type: 'button', value: t('.close'), "data-action": "click->modal#close" }
         -# label.button provides a handy shortcut to open the file selector on click. Unfortunately this trick isn't keyboard accessible though..
         = f.label :attachment, t(".upload"), class: "button primary relaxed icon-upload-alt"
-        = f.file_field :attachment, accept: "image/*", style: "display: none", "data-action": "change->form#submit"
+        = f.file_field :attachment, accept: "image/*", style: "display: none", "data-action": "change->form#submit change->modal#close"
diff --git a/app/views/spree/admin/images/update.turbo_stream.haml b/app/views/spree/admin/images/update.turbo_stream.haml
new file mode 100644
index 00000000000..88638b34039
--- /dev/null
+++ b/app/views/spree/admin/images/update.turbo_stream.haml
@@ -0,0 +1,2 @@
+= turbo_stream.update "image-#{@product.id}" do
+  = render partial: "admin/products_v3/product_image", locals: { product: @product }