[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/)
This commit is contained in:
David Cook
2024-05-22 16:29:02 +10:00
parent 536b5608ab
commit 665273ce2f
5 changed files with 16 additions and 7 deletions

View File

@@ -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 @@ module Spree
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

View File

@@ -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')

View File

@@ -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')

View File

@@ -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"

View File

@@ -0,0 +1,2 @@
= turbo_stream.update "image-#{@product.id}" do
= render partial: "admin/products_v3/product_image", locals: { product: @product }