From 64d3091db9cc44f25a1c094f839000e8d16c3528 Mon Sep 17 00:00:00 2001 From: Gaetan Craig-Riou Date: Tue, 27 Aug 2024 14:32:42 +1000 Subject: [PATCH] Add product preview modal Plus open modal when clicking on "preview" link. It's using event to communicate between stimulus controller : https://stimulus.hotwired.dev/reference/controllers#cross-controller-coordination-with-events --- app/views/admin/products_v3/_product_row.html.haml | 2 +- app/views/admin/products_v3/index.html.haml | 3 +++ app/webpacker/controllers/product_preview_controller.js | 9 +++++++++ 3 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 app/webpacker/controllers/product_preview_controller.js diff --git a/app/views/admin/products_v3/_product_row.html.haml b/app/views/admin/products_v3/_product_row.html.haml index 15a9415e36..b35fb32472 100644 --- a/app/views/admin/products_v3/_product_row.html.haml +++ b/app/views/admin/products_v3/_product_row.html.haml @@ -40,4 +40,4 @@ "data-modal-link-target-value": "product-delete-modal", "class": "delete", "data-modal-link-modal-dataset-value": {'data-delete-path': admin_product_destroy_path(product)}.to_json } = t('admin.products_page.actions.delete') - = link_to "Preview", admin_product_preview_path(product), "data-turbo-stream": "" + = link_to "Preview", admin_product_preview_path(product), {"data-turbo-stream": "", "data-controller": "product-preview", "data-action": "click->product-preview#open" } # TODO move product-preview controller to table element ? diff --git a/app/views/admin/products_v3/index.html.haml b/app/views/admin/products_v3/index.html.haml index 668a8527a4..171b214153 100644 --- a/app/views/admin/products_v3/index.html.haml +++ b/app/views/admin/products_v3/index.html.haml @@ -20,3 +20,6 @@ = render partial: 'delete_modal', locals: { object_type: } #modal-component #edit_image_modal + + = render ModalComponent.new(id: "product-preview-modal", "data-action": "product-preview:open@window->modal#open") do + #product-preview diff --git a/app/webpacker/controllers/product_preview_controller.js b/app/webpacker/controllers/product_preview_controller.js new file mode 100644 index 0000000000..496b54eaaf --- /dev/null +++ b/app/webpacker/controllers/product_preview_controller.js @@ -0,0 +1,9 @@ +import { Controller } from "stimulus"; + +export default class extends Controller { + open() { + // dispatch "product-preview:open" event to trigger modal->open action + // see views/admin/product_v3/index.html.haml + this.dispatch("open"); + } +}