diff --git a/Gemfile b/Gemfile index fcb32f50a2..94f0e62398 100644 --- a/Gemfile +++ b/Gemfile @@ -105,6 +105,8 @@ gem 'sidekiq-scheduler' gem "cable_ready" gem "stimulus_reflex" +gem "turbo-rails" + gem 'combine_pdf' gem 'wicked_pdf' gem 'wkhtmltopdf-binary' diff --git a/Gemfile.lock b/Gemfile.lock index 50f1351d15..205621294a 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -783,6 +783,10 @@ GEM timecop (0.9.8) timeout (0.4.1) ttfunk (1.7.0) + turbo-rails (2.0.5) + actionpack (>= 6.0.0) + activejob (>= 6.0.0) + railties (>= 6.0.0) tzinfo (2.0.6) concurrent-ruby (~> 1.0) unicode-display_width (2.5.0) @@ -971,6 +975,7 @@ DEPENDENCIES stringex (~> 2.8.5) stripe timecop + turbo-rails valid_email2 validates_lengths_from_database vcr diff --git a/app/controllers/admin/products_v3_controller.rb b/app/controllers/admin/products_v3_controller.rb index f8cdc339c2..77098ee7bb 100644 --- a/app/controllers/admin/products_v3_controller.rb +++ b/app/controllers/admin/products_v3_controller.rb @@ -2,6 +2,8 @@ module Admin class ProductsV3Controller < Spree::Admin::BaseController + helper ProductsHelper + before_action :init_filters_params before_action :init_pagination_params diff --git a/app/controllers/spree/admin/images_controller.rb b/app/controllers/spree/admin/images_controller.rb index 0e0890a229..6084972102 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 @@ -17,7 +19,10 @@ module Spree def new @url_filters = ::ProductFilters.new.extract(request.query_parameters) - render layout: !request.xhr? + respond_with do |format| + format.turbo_stream { render :edit } + format.all { render layout: !request.xhr? } + end end def edit @@ -47,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 diff --git a/app/helpers/admin/products_helper.rb b/app/helpers/admin/products_helper.rb new file mode 100644 index 0000000000..e29b378342 --- /dev/null +++ b/app/helpers/admin/products_helper.rb @@ -0,0 +1,13 @@ +# frozen_string_literal: true + +module Admin + module ProductsHelper + def product_image_form_path(product) + if product.image.present? + edit_admin_product_image_path(product.id, product.image.id) + else + new_admin_product_image_path(product.id) + end + end + end +end diff --git a/app/reflexes/products_reflex.rb b/app/reflexes/products_reflex.rb index 74a0b49873..4c8aabc0d2 100644 --- a/app/reflexes/products_reflex.rb +++ b/app/reflexes/products_reflex.rb @@ -49,18 +49,6 @@ class ProductsReflex < ApplicationReflex fetch_and_render_products_with_flash end - def edit_image - id = current_id_from_element(element) - product = product_finder(id).find_product - image = product.image - - image = Spree::Image.new(viewable: product) if product.image.blank? - - morph "#modal-component", - render(partial: "admin/products_v3/edit_image", - locals: { product:, image:, return_url: url }) - end - private def init_filters_params diff --git a/app/views/admin/products_v3/_edit_image.html.haml b/app/views/admin/products_v3/_edit_image.html.haml deleted file mode 100644 index 57fccaac76..0000000000 --- a/app/views/admin/products_v3/_edit_image.html.haml +++ /dev/null @@ -1,17 +0,0 @@ -= render ModalComponent.new id: "#modal_edit_product_image_#{image.id}", instant: true, close_button: false, modal_class: :fit do - %h2= t(".title") - - -# 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, because StimulusReflex doesn't support file uploads - = form_for [:admin, product, image], - html: { multipart: true }, data: { controller: "form" } do |f| - %input{ type: :hidden, name: :return_url, value: return_url} - = f.hidden_field :viewable_id, value: product.id - - .modal-actions.justify-end - %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" 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 0000000000..cc3e77d141 --- /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 f82ef26933..0908652009 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 - %a.image-field{ href: admin_product_images_path(product), data: { controller: "modal", reflex: "click->products#edit_image", "current-id": product.id} } - = 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') +%td.with-image{ id: "image-#{product.id}" } + = 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/admin/products_v3/index.html.haml b/app/views/admin/products_v3/index.html.haml index 5087feddc2..668a8527a4 100644 --- a/app/views/admin/products_v3/index.html.haml +++ b/app/views/admin/products_v3/index.html.haml @@ -19,4 +19,4 @@ - %w[product variant].each do |object_type| = render partial: 'delete_modal', locals: { object_type: } #modal-component - + #edit_image_modal diff --git a/app/views/spree/admin/images/edit.turbo_stream.haml b/app/views/spree/admin/images/edit.turbo_stream.haml new file mode 100644 index 0000000000..d2ffe7dd53 --- /dev/null +++ b/app/views/spree/admin/images/edit.turbo_stream.haml @@ -0,0 +1,19 @@ += turbo_stream.update "edit_image_modal" do + = render ModalComponent.new id: "#modal_edit_product_image", instant: true, close_button: false, modal_class: :fit do + %h2= t(".title") + + -# 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 as turbo stream to avoid full page reload. + -# TODO: show loading indicator. + = form_for [:admin, @product, @image], + html: { multipart: true }, data: { controller: "form" } do |f| + %input{ type: :hidden, name: :return_url, value: request.referer } + = f.hidden_field :viewable_id, value: @product.id + + .modal-actions.justify-end + %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 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 0000000000..169bf5c89f --- /dev/null +++ b/app/views/spree/admin/images/update.turbo_stream.haml @@ -0,0 +1,3 @@ += turbo_stream.update "image-#{@product.id}" do + = render partial: "admin/products_v3/product_image", locals: { product: @product } + = render partial: "admin/shared/flashes", locals: { flashes: flash } if defined? flash diff --git a/app/webpacker/controllers/form_controller.js b/app/webpacker/controllers/form_controller.js index aaac9db4ec..54354d340f 100644 --- a/app/webpacker/controllers/form_controller.js +++ b/app/webpacker/controllers/form_controller.js @@ -2,6 +2,8 @@ import { Controller } from "stimulus"; export default class FormController extends Controller { submit() { - this.element.submit(); + // Validate and submit the form, using the default submit button. Raises JS events. + // Ref: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit + this.element.requestSubmit(); } } diff --git a/config/locales/en.yml b/config/locales/en.yml index b6d63a5632..a705c300b8 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -899,10 +899,6 @@ en: new_variant: New variant bulk_update: success: Changes saved - edit_image: - title: Edit product photo - close: Back - upload: Upload photo delete_product: success: Successfully deleted the product error: Unable to delete the product @@ -4148,6 +4144,11 @@ See the %{link} to find out more about %{sitename}'s features and to start using must_be_int: "must be an integer" admin: + images: + edit: + title: Edit product photo + close: Back + upload: Upload photo mail_methods: send_testmail: "Send test email" testmail: