Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Convert existing modals to use turbo frames #401

Closed
wants to merge 16 commits into from
Closed

Convert existing modals to use turbo frames #401

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
991a179
Fix flash messages coloring
spaghetticode Mar 5, 2024
75d3196
Merge pull request #5681 from nebulab/spaghetticode/fix-admin-flash
spaghetticode Mar 7, 2024
9c03da2
Merge pull request #5674 from nebulab/spaghetticode/admin-new-tax-cat…
spaghetticode Mar 11, 2024
71f4f0b
Manage order email dialog with turbo frame tag
spaghetticode Mar 5, 2024
8b0bfbe
Close email edit modal on current page
spaghetticode Mar 5, 2024
195a573
Wrap order email modal with turbo frame tag
spaghetticode Mar 5, 2024
29861b6
Use Turbo features in order modal controllers
spaghetticode Mar 5, 2024
855cf7f
Enable turbo frames for address modals
spaghetticode Mar 5, 2024
478e633
Revisit address modal to work with turbo frames
spaghetticode Mar 5, 2024
2e98881
Turbo refresh on successful address edit
spaghetticode Mar 5, 2024
8e4c4e3
Enable turbo frame links in URL params
spaghetticode Mar 5, 2024
affcd2c
Add turbo frame to stock item table rows
spaghetticode Mar 5, 2024
59797b1
Rework stock item form modal
spaghetticode Mar 5, 2024
1915918
Wrap stock edit dialog with turbo frame tag
spaghetticode Mar 5, 2024
bab4121
Remove explicit handling of q and page params
spaghetticode Mar 5, 2024
b3b0e2c
Refesh page on successful stock item update
spaghetticode Mar 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 56 additions & 54 deletions admin/app/components/solidus_admin/orders/show/address/component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,67 +1,69 @@
<div class="<%= stimulus_id %>" data-controller="<%= stimulus_id %>">
<%= render component("orders/show").new(order: @order) %>

<%= render component("ui/modal").new(title: t(".title.#{@type}"), close_path: solidus_admin.order_path(@order)) do |modal| %>
<%= form_for @order, url: solidus_admin.send("order_#{@type}_address_path", @order), html: { id: form_id } do |form| %>
<div class="w-full flex flex-col mb-4">
<div class="flex justify-between items-center mb-4 relative">
<h2 class="text-sm font-semibold">
<%= t(".subtitle.#{@type}") %>
</h2>
<%= turbo_frame_tag "edit_order_#{params[:type]}_address_modal" do %>
<%= render component("ui/modal").new(title: t(".title.#{@type}")) do |modal| %>
<%= form_for @order, url: solidus_admin.send("order_#{@type}_address_path", @order), html: { id: form_id } do |form| %>
<div class="w-full flex flex-col mb-4">
<div class="flex justify-between items-center mb-4 relative">
<h2 class="text-sm font-semibold">
<%= t(".subtitle.#{@type}") %>
</h2>

<% if @addresses.present? %>
<%= render component('ui/dropdown').new(
text: t(".select_address"),
"data-#{stimulus_id}-target": "addresses",
class: "max-h-[26rem] overflow-y-auto"
) do %>
<% @addresses.each do |address| %>
<%= tag.a(
format_address(address),
href: solidus_admin.send("order_#{@type}_address_path", @order, address_id: address.id),
'data-turbo-frame': address_frame_id,
'data-action': "#{component('ui/dropdown').stimulus_id}#close",
) %>
<% if @addresses.present? %>
<%= render component('ui/dropdown').new(
text: t(".select_address"),
"data-#{stimulus_id}-target": "addresses",
class: "max-h-[26rem] overflow-y-auto"
) do %>
<% @addresses.each do |address| %>
<%= tag.a(
format_address(address),
href: solidus_admin.send("order_#{@type}_address_path", @order, address_id: address.id),
'data-turbo-frame': address_frame_id,
'data-action': "#{component('ui/dropdown').stimulus_id}#close",
) %>
<% end %>
<% end %>
<% end %>
<% end %>
</div>
</div>

<div class="w-full flex gap-4">
<%= turbo_frame_tag address_frame_id do %>
<%= render component('ui/forms/address').new(address: @address, name: "order[#{@type}_address_attributes]") %>
<% end %>
</div>
<div class="w-full flex gap-4">
<%= turbo_frame_tag address_frame_id do %>
<%= render component('ui/forms/address').new(address: @address, name: "order[#{@type}_address_attributes]") %>
<% end %>
</div>

<label class="flex gap-2 items-center">
<%= form.hidden_field use_attribute, value: '0', id: false %>
<label class="flex gap-2 items-center">
<%= form.hidden_field use_attribute, value: '0', id: false %>

<%= render component("ui/forms/checkbox").new(
name: "#{form.object_name}[#{use_attribute}]",
checked: @address == (@type == 'ship' ? @order.bill_address : @order.ship_address),
value: '1'
) %>
<%= render component("ui/forms/checkbox").new(
name: "#{form.object_name}[#{use_attribute}]",
checked: @address == (@type == 'ship' ? @order.bill_address : @order.ship_address),
value: '1'
) %>

<span class="font-normal text-xs">
<%= t(".use_this_address.#{@type}") %>
</span>
</label>
</div>
<% end %>
<span class="font-normal text-xs">
<%= t(".use_this_address.#{@type}") %>
</span>
</label>
</div>
<% end %>

<% modal.with_actions do %>
<%= render component("ui/button").new(
tag: :a,
scheme: :secondary,
text: t(".cancel"),
href: solidus_admin.order_path(@order)
) %>
<% modal.with_actions do %>
<form method="dialog">
<%= render component("ui/button").new(
scheme: :secondary,
text: t(".cancel"),
) %>
</form>

<%= render component("ui/button").new(
tag: :button,
text: t(".save"),
form: form_id
) %>
<%= render component("ui/button").new(
tag: :button,
text: t(".save"),
form: form_id
) %>
<% end %>
<% end %>
<% end %>

<%= render component("orders/show").new(order: @order) %>
</div>
10 changes: 7 additions & 3 deletions admin/app/components/solidus_admin/orders/show/component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@

<%= page_with_sidebar_aside do %>
<%= render component('ui/panel').new do |panel| %>
<% panel.with_menu t(".edit_email"), solidus_admin.order_customer_path(@order) %>
<% panel.with_menu t(".edit_shipping"), solidus_admin.edit_order_ship_address_path(@order) %>
<% panel.with_menu t(".edit_billing"), solidus_admin.edit_order_bill_address_path(@order) %>
<% panel.with_menu t(".edit_email"), solidus_admin.order_customer_path(@order), data: { turbo_frame: :edit_order_email_modal } %>
<% panel.with_menu t(".edit_shipping"), solidus_admin.edit_order_ship_address_path(@order), data: { turbo_frame: :edit_order_ship_address_modal } %>
<% panel.with_menu t(".edit_billing"), solidus_admin.edit_order_bill_address_path(@order), data: { turbo_frame: :edit_order_bill_address_modal } %>
<% panel.with_menu t(".remove_customer"), solidus_admin.order_customer_path(@order), method: :delete, class: "text-red-500" if @order.user %>

<% panel.with_section(class: 'flex flex-col gap-6') do %>
Expand Down Expand Up @@ -73,4 +73,8 @@

<% end %>
<% end %>

<% turbo_frames.each do |frame| %>
<%= turbo_frame_tag frame %>
<% end %>
<% end %>
8 changes: 8 additions & 0 deletions admin/app/components/solidus_admin/orders/show/component.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,14 @@ def format_address(address)
], " ")
end

def turbo_frames
%w[
edit_order_email_modal
edit_order_bill_address_modal
edit_order_ship_address_modal
]
end

def customer_name(user)
(
user.default_user_bill_address ||
Expand Down
31 changes: 18 additions & 13 deletions admin/app/components/solidus_admin/orders/show/email/component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,23 @@
<div class="<%= stimulus_id %>">
<%= render component("orders/show").new(order: @order) %>
<%= render component("ui/modal").new(title: t(".title"), close_path: close_path) do |modal| %>
<%= form_for @order, url: close_path, html: { id: form_id} do |f| %>
<%= render component("ui/forms/field").text_field(f, :email) %>
<label class="font-normal text-sm mt-4 block">
<%= t('.guest_checkout') %>:
<output class="font-semibold text-sm"><%= @order.user ? t('.no') : t('.yes') %></output>
<%= render component('ui/toggletip').new(text: t('.guest_checkout_tip'), class: "align-middle") %>
</label>
<% end %>
<%= turbo_frame_tag "edit_order_email_modal" do %>
<%= render component("ui/modal").new(title: t(".title")) do |modal| %>
<%= form_for @order, url: solidus_admin.order_path(@order), html: { id: form_id } do |f| %>
<%= render component("ui/forms/field").text_field(f, :email) %>
<label class="font-normal text-sm mt-4 block">
<%= t('.guest_checkout') %>:
<output class="font-semibold text-sm"><%= @order.user ? t('.no') : t('.yes') %></output>
<%= render component('ui/toggletip').new(text: t('.guest_checkout_tip'), class: "align-middle") %>
</label>
<% end %>

<% modal.with_actions do %>
<%= render component("ui/button").new(tag: :a, scheme: :secondary, href: close_path, type: :submit, text: t('.cancel')) %>
<%= render component("ui/button").new(form: form_id, type: :submit, text: t('.submit')) %>
<% modal.with_actions do %>
<form method="dialog">
<%= render component("ui/button").new(scheme: :secondary, text: t('.cancel')) %>
</form>
<%= render component("ui/button").new(form: form_id, type: :submit, text: t('.submit')) %>
<% end %>
<% end %>
<% end %>

<%= render component("orders/show").new(order: @order) %>
</div>
4 changes: 0 additions & 4 deletions admin/app/components/solidus_admin/orders/show/email/component.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,4 @@ def initialize(order:)
def form_id
dom_id(@order, "#{stimulus_id}_email_form")
end

def close_path
@close_path ||= solidus_admin.order_path(@order)
end
end
138 changes: 66 additions & 72 deletions admin/app/components/solidus_admin/stock_items/edit/component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,85 +3,79 @@
data-<%= stimulus_id %>-initial-count-on-hand-value="<%= @stock_item.count_on_hand_was || @stock_item.count_on_hand %>"
data-action="input-><%= stimulus_id %>#updateCountOnHand"
>
<%= render component("ui/modal").new(title: t(".title"), close_path: solidus_admin.stock_items_path(page: params[:page], q: permitted_query_params)) do |modal| %>
<%= form_for @stock_item, url: solidus_admin.stock_item_path(@stock_item), html: { id: form_id } do |f| %>
<div class="flex flex-col gap-6 pb-4">
<div class="flex gap-4">
<%= link_to spree.edit_admin_product_variant_path(
@stock_item.variant.product,
@stock_item.variant,
), class: 'hover:bg-gray-25 rounded p-1 w-1/2 border border-gray-100' do %>
<%= render component("ui/resource_item").new(
thumbnail:
(
@stock_item.variant.images.first ||
@stock_item.variant.product.gallery.images.first
)&.url(:small),
title: @stock_item.variant.name,
subtitle:
"#{@stock_item.variant.sku}#{@stock_item.variant.options_text.presence&.prepend(" - ")}",
) %>
<% end %>
<%= link_to spree.edit_admin_stock_location_path(@stock_item.stock_location), class: 'hover:bg-gray-25 rounded p-1 w-1/2 border border-gray-100' do %>
<%= render component("ui/resource_item").new(
title: @stock_item.stock_location.name,
subtitle: "#{Spree::StockLocation.model_name.human} #{@stock_item.stock_location.code}",
<%= turbo_frame_tag :edit_stock_item_modal do %>
<%= render component("ui/modal").new(title: t(".title")) do |modal| %>
<%= form_for @stock_item, url: solidus_admin.stock_item_path(@stock_item), html: { id: form_id } do |f| %>
<div class="flex flex-col gap-6 pb-4">
<div class="flex gap-4">
<%= link_to spree.edit_admin_product_variant_path(
@stock_item.variant.product,
@stock_item.variant,
), class: 'hover:bg-gray-25 rounded p-1 w-1/2 border border-gray-100' do %>
<%= render component("ui/resource_item").new(
thumbnail:
(
@stock_item.variant.images.first ||
@stock_item.variant.product.gallery.images.first
)&.url(:small),
title: @stock_item.variant.name,
subtitle:
"#{@stock_item.variant.sku}#{@stock_item.variant.options_text.presence&.prepend(" - ")}",
) %>
<% end %>
<%= link_to spree.edit_admin_stock_location_path(@stock_item.stock_location), class: 'hover:bg-gray-25 rounded p-1 w-1/2 border border-gray-100' do %>
<%= render component("ui/resource_item").new(
title: @stock_item.stock_location.name,
subtitle: "#{Spree::StockLocation.model_name.human} #{@stock_item.stock_location.code}",
) %>
<% end %>
</div>

<%= render component("ui/forms/field").text_field(
f,
:count_on_hand,
disabled: true,
value: @stock_item.count_on_hand_was || @stock_item.count_on_hand,
"data-#{stimulus_id}-target": 'countOnHand',
) %>
<%= render component("ui/forms/field").new(
label: t(".quantity_adjustment"),
hint: t(".quantity_adjustment_hint_html"),
) do %>
<%= render component("ui/forms/input").new(
value: params[:quantity_adjustment] || 0,
name: :quantity_adjustment,
type: :number,
step: 1,
"data-#{stimulus_id}-target": 'quantityAdjustment',
) %>
<% end %>

<%= render component("ui/forms/switch_field").new(
name: "#{f.object_name}[backorderable]",
label: Spree::StockItem.human_attribute_name(:backorderable),
error: f.object.errors[:backorderable],
hint: t(".backorderable_hint_html"),
checked: f.object.backorderable?,
include_hidden: true,
) %>
</div>
<% end %>

<%= render component("ui/forms/field").text_field(
f,
:count_on_hand,
disabled: true,
value: @stock_item.count_on_hand_was || @stock_item.count_on_hand,
"data-#{stimulus_id}-target": 'countOnHand',
) %>
<%= render component("ui/forms/field").new(
label: t(".quantity_adjustment"),
hint: t(".quantity_adjustment_hint_html"),
) do %>
<%= render component("ui/forms/input").new(
value: params[:quantity_adjustment] || 0,
name: :quantity_adjustment,
type: :number,
step: 1,
"data-#{stimulus_id}-target": 'quantityAdjustment',
<% modal.with_actions do %>
<form method="dialog">
<%= render component("ui/button").new(
scheme: :secondary,
text: t(".cancel"),
) %>
<% end %>
</form>

<%= render component("ui/forms/switch_field").new(
name: "#{f.object_name}[backorderable]",
label: Spree::StockItem.human_attribute_name(:backorderable),
error: f.object.errors[:backorderable],
hint: t(".backorderable_hint_html"),
checked: f.object.backorderable?,
include_hidden: true,
<%= render component("ui/button").new(
tag: :button,
text: t(".submit"),
form: form_id,
) %>

<% if params[:q] %>
<%= f.hidden_field :q, value: params[:q].to_json, id: false %>
<% end %>

<% if params[:page] %>
<%= f.hidden_field :page, value: params[:page], id: false %>
<% end %>
</div>
<% end %>

<% modal.with_actions do %>
<%= render component("ui/button").new(
tag: :a,
scheme: :secondary,
text: t(".cancel"),
href: solidus_admin.stock_items_path(page: params[:page], q: params[:q]),
) %>

<%= render component("ui/button").new(
tag: :button,
text: t(".submit"),
form: form_id,
) %>
<% end %>
<% end %>
<% end %>

Expand Down
5 changes: 0 additions & 5 deletions admin/app/components/solidus_admin/stock_items/edit/component.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,4 @@ def title
def form_id
"#{stimulus_id}-#{dom_id(@stock_item)}"
end

def permitted_query_params
return params[:q].permit! if params[:q].respond_to?(:permit)
{}
end
end
7 changes: 3 additions & 4 deletions admin/app/components/solidus_admin/stock_items/index/component.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ def search_url
end

def row_url(stock_item)
solidus_admin.edit_stock_item_path(stock_item, page: params[:page], q: permitted_query_params)
solidus_admin.edit_stock_item_path(stock_item, _turbo_frame: :edit_stock_item_modal)
end

def scopes
Expand Down Expand Up @@ -167,8 +167,7 @@ def count_on_hand_column
}
end

def permitted_query_params
return params[:q].permit! if params[:q].respond_to?(:permit)
{}
def turbo_frames
%w[edit_stock_item_modal]
end
end
Loading
Loading