Skip to content

Commit

Permalink
Merge pull request #5688 from nebulab/spaghetticode/convert-modals-to…
Browse files Browse the repository at this point in the history 
…-turbo-frames

Convert existing Admin modals to Turbo frames
  • Loading branch information
@spaghetticode
spaghetticode authored Mar 13, 2024
2 parents 0870e75 + 8de68cb commit 79f3754
Show file tree
Hide file tree
Showing 13 changed files with 189 additions and 165 deletions.
110 changes: 56 additions & 54 deletions admin/app/components/solidus_admin/orders/show/address/component.html.erb
View file
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
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
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
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
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
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
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
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

0 comments on commit 79f3754

Please sign in to comment.