From 6479990f6d2960c27984ab65d898ccba4472121f Mon Sep 17 00:00:00 2001 From: David Cook Date: Thu, 11 Jan 2024 11:21:30 +1100 Subject: [PATCH] Show image update form in modal It submits to the existing controller. I wanted to submit it with StimulusReflex, but it [doesn't support file uploads](https://docs.stimulusreflex.com/guide/working-with-forms.html#a-note-about-file-uploads). Perhaps we'll enhance this with javascript later. --- .../modal_component/modal_component.scss | 10 ++++++++++ app/controllers/spree/admin/images_controller.rb | 2 +- app/reflexes/products_reflex.rb | 15 +++++++++++++++ .../admin/products_v3/_edit_image.html.haml | 16 ++++++++++++++++ app/views/admin/products_v3/_table.html.haml | 2 +- app/views/admin/products_v3/index.html.haml | 2 ++ config/locales/en.yml | 3 +++ 7 files changed, 48 insertions(+), 2 deletions(-) create mode 100644 app/views/admin/products_v3/_edit_image.html.haml diff --git a/app/components/modal_component/modal_component.scss b/app/components/modal_component/modal_component.scss index 5223d23824..5e9f6ad8bd 100644 --- a/app/components/modal_component/modal_component.scss +++ b/app/components/modal_component/modal_component.scss @@ -6,6 +6,16 @@ &.in { padding: 1.2rem; } + + h1, + h2, + h3, + h4, + h5, + h6, + p { + margin-bottom: 0.5em; + } } /* prevent arrow on selected admin menu item appearing above modal */ diff --git a/app/controllers/spree/admin/images_controller.rb b/app/controllers/spree/admin/images_controller.rb index 89e2087c0b..44b26278f8 100644 --- a/app/controllers/spree/admin/images_controller.rb +++ b/app/controllers/spree/admin/images_controller.rb @@ -76,7 +76,7 @@ module Spree end def location_after_save - spree.admin_product_images_url(params[:product_id], @url_filters) + params[:return_url] || spree.admin_product_images_url(params[:product_id], @url_filters) end def load_data diff --git a/app/reflexes/products_reflex.rb b/app/reflexes/products_reflex.rb index 711f4a577c..01f185914f 100644 --- a/app/reflexes/products_reflex.rb +++ b/app/reflexes/products_reflex.rb @@ -74,6 +74,15 @@ 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 + + morph "#modal-component", + render(partial: "admin/products_v3/edit_image", + locals: { product:, image: product.image, return_url: url }) + end + private def init_filters_params @@ -232,4 +241,10 @@ class ProductsReflex < ApplicationReflex def current_id_from_element(element) element.dataset.current_id end + + def image_params + params.require(:image).permit( + :attachment, :viewable_id + ) + end end diff --git a/app/views/admin/products_v3/_edit_image.html.haml b/app/views/admin/products_v3/_edit_image.html.haml new file mode 100644 index 0000000000..2f64a278ec --- /dev/null +++ b/app/views/admin/products_v3/_edit_image.html.haml @@ -0,0 +1,16 @@ += render ModalComponent.new id: "#modal_edit_product_image_#{image.id}", instant: true do + %h2= t(".title") + + %p= image_tag image.variant(:product) + + -# Submit to controller, because StimulusReflex doesn't support file uploads + = form_for [:admin, product, image], url: admin_product_image_path(product, image), + html: { multipart: true } do |f| + %input{ type: :hidden, name: :return_url, value: return_url} + = f.hidden_field :viewable_id, value: product.id + + %p + -# 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 icon-upload-alt" + = f.file_field :attachment, style: "display: none" + = f.submit # todo: submit automatically diff --git a/app/views/admin/products_v3/_table.html.haml b/app/views/admin/products_v3/_table.html.haml index 68dfa43cff..4ad0d5663e 100644 --- a/app/views/admin/products_v3/_table.html.haml +++ b/app/views/admin/products_v3/_table.html.haml @@ -52,7 +52,7 @@ .image-field = image_tag product.image&.url(:mini) || Spree::Image.default_image_url(:mini), width: 40, height: 40 - if product.image.present? - = link_to t('admin.products_page.image.edit'), edit_admin_product_image_path(product, product.image), class: "button secondary mini" + = link_to t('admin.products_page.image.edit'), edit_admin_product_image_path(product, product.image), class: "button secondary mini", "data-controller": "modal", "data-reflex": "click->products#edit_image", "data-current-id": product.id %td.field.align-left.header = product_form.hidden_field :id = product_form.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 a7833c22df..52ca21def8 100644 --- a/app/views/admin/products_v3/index.html.haml +++ b/app/views/admin/products_v3/index.html.haml @@ -19,3 +19,5 @@ #products-content - %w[product variant].each do |object_type| = render partial: 'delete_modal', locals: { object_type: } + #modal-component + diff --git a/config/locales/en.yml b/config/locales/en.yml index 1838426b45..b8ac7d6fb3 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -872,6 +872,9 @@ en: reset: Discard changes bulk_update: success: Changes saved + edit_image: + title: Edit product photo + upload: Upload photo delete_product: success: Successfully deleted the product error: Unable to delete the product