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

SolidusAdmin: Extract page layout helpers #5445

Merged
merged 2 commits into from
Oct 23, 2023
Merged

SolidusAdmin: Extract page layout helpers #5445

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cc56036
Extract the table toolbar to an internal component
elia Oct 16, 2023
510878d
Extract common layout tags into a page helper
elia Oct 17, 2023
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
55 changes: 55 additions & 0 deletions admin/app/components/solidus_admin/layout/page_helpers.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
# frozen_string_literal: true

module SolidusAdmin::Layout::PageHelpers
def page(&block)
tag.div(capture(&block), class: "px-4 relative", "data-controller": stimulus_id)
end

def page_header_actions(&block)
tag.div(safe_join([
render(component("feedback").new),
capture(&block),
]), class: "flex gap-2 items-center")
end

def page_header_back(back_path)
render component("ui/button").new(
tag: :a,
title: t(".back"),
icon: "arrow-left-line",
scheme: :secondary,
href: back_path
)
end

def page_header_title(title, &block)
tag.h1(safe_join([
tag.span(title, class: "body-title"),
(capture(&block) if block_given?) || "",
]), class: "flex-1 text-2xl font-bold")
end

def page_header(&block)
tag.header(capture(&block), class: "py-6 flex items-center gap-4")
end

def page_with_sidebar(&block)
tag.div(capture(&block), class: "flex gap-4 items-start pb-4")
end

def page_with_sidebar_main(&block)
tag.div(capture(&block), class: "justify-center items-start gap-4 flex flex-col w-full")
end

def page_with_sidebar_aside(&block)
tag.aside(capture(&block), class: "justify-center items-start gap-4 flex flex-col w-full max-w-sm")
end

def page_footer(&block)
tag.div(capture(&block), class: "mt-4 py-4 px-2 pb-8 border-t border-gray-100 flex")
end

def page_footer_actions(&block)
tag.div(capture(&block), class: "flex gap-2 grow")
end
end
25 changes: 9 additions & 16 deletions admin/app/components/solidus_admin/orders/new/component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,13 @@
<div class="px-4 relative" data-controller="<%= stimulus_id %>">
<header class="py-6 flex items-center gap-4">
<%= render component("ui/button").new(
tag: :a,
title: t(".back"),
icon: "arrow-left-line",
scheme: :secondary,
href: solidus_admin.orders_path
) %>
<h1 class="flex items-center gap-2">
<span class="body-title"><%= t(".create_order") %></span>
</h1>
<%= page do %>
<%= page_header do %>
<%= page_header_back solidus_admin.orders_path %>

<div class="ml-auto flex gap-2 items-center">
<%= page_header_title t(".create_order") %>

<%= page_header_actions do %>
<%= render component("feedback").new %>
<%= render component("ui/button").new(tag: :button, scheme: :secondary, text: t(".discard"), form: form_id) %>
<%= render component("ui/button").new(tag: :button, text: t(".save"), form: form_id) %>
</div>
</header>
</div>
<% end %>
<% end %>
<% end %>
2 changes: 2 additions & 0 deletions admin/app/components/solidus_admin/orders/new/component.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
# frozen_string_literal: true

class SolidusAdmin::Orders::New::Component < SolidusAdmin::BaseComponent
include SolidusAdmin::Layout::PageHelpers

def initialize(order:)
@order = order
end
Expand Down
17 changes: 7 additions & 10 deletions admin/app/components/solidus_admin/products/index/component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,16 @@
<div class="<%= stimulus_id %> px-4">
<header class="py-6 flex items-center">
<h1 class="body-title">
<%= title %>
</h1>

<div class="ml-auto flex gap-2 items-center">
<%= page do %>
<%= page_header do %>
<%= page_header_title title %>
<%= page_header_actions do %>
<%= render component("feedback").new %>
<%= render component("ui/button").new(
tag: :a,
text: t('.add_product'),
href: spree.new_admin_product_path,
icon: "add-line",
) %>
</div>
</header>
<% end %>
<% end %>

<%= render component('ui/table').new(
id: 'products-list',
Expand All @@ -28,4 +25,4 @@
prev_page_link: prev_page_link,
next_page_link: next_page_link,
) %>
</div>
<% end %>
2 changes: 2 additions & 0 deletions admin/app/components/solidus_admin/products/index/component.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
# frozen_string_literal: true

class SolidusAdmin::Products::Index::Component < SolidusAdmin::BaseComponent
include SolidusAdmin::Layout::PageHelpers

def initialize(page:)
@page = page
end
Expand Down
47 changes: 19 additions & 28 deletions admin/app/components/solidus_admin/products/show/component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,10 @@
<div class="px-4 relative" data-controller="<%= stimulus_id %>">
<header class="py-6 flex items-center gap-4">
<%= render component("ui/button").new(
tag: :a,
title: t(".back"),
icon: "arrow-left-line",
scheme: :secondary,
href: solidus_admin.products_path
) %>
<h1 class="flex items-center gap-2">
<span class="body-title"><%= @product.name %></span>
<%= page do %>
<%= page_header do %>
<%= page_header_back(solidus_admin.products_path) %>
<%= page_header_title(@product.name) do %>
<%= render component("products/status").from_product(@product) %>
</h1>

<div class="ml-auto flex gap-2 items-center">
<%= render component("feedback").new %>
<% end %>
<%= page_header_actions do %>
<%= render component("ui/button").new(
tag: :a,
text: t(".duplicate"),
Expand All @@ -29,12 +20,12 @@
scheme: :ghost
) %>
<%= render component("ui/button").new(tag: :button, text: t(".save"), form: form_id) %>
</div>
</header>
<% end %>
<% end %>

<%= form_for @product, url: solidus_admin.product_path(@product), html: { id: form_id } do |f| %>
<div class="flex gap-4 items-start pb-4">
<div class="justify-center items-start gap-4 flex flex-col w-full">
<%= page_with_sidebar do %>
<%= page_with_sidebar_main do %>
<%= render component('ui/panel').new do %>
<%= render component("ui/forms/field").text_field(f, :name) %>
<%= render component("ui/forms/field").text_field(f, :slug) %>
Expand Down Expand Up @@ -105,9 +96,9 @@
href: spree.admin_product_product_properties_path(@product)
) %>
<% end %>
</div>
<% end %>

<aside class="justify-center items-start gap-4 flex flex-col w-full max-w-sm">
<%= page_with_sidebar_aside do %>
<%= render component('ui/panel').new(title: "Publishing") do %>
<%= render component("ui/forms/field").text_field(f, :available_on, tip: t(".hints.available_on_html"), type: :date) %>
<%= render component("ui/forms/field").text_field(f, :discontinue_on, tip: t(".hints.discontinue_on_html"), type: :date) %>
Expand All @@ -125,12 +116,12 @@
<%= render component('ui/panel').new(title: "Product organization") do %>
<%= render component("ui/forms/field").select(f, :taxon_ids, taxon_options, multiple: true, "size" => taxon_options.size) %>
<% end %>
</aside>
</div>
<% end %>
<% end %>
<% end %>

<div class="mt-4 py-4 px-2 pb-8 border-t border-gray-100 flex">
<div class="flex gap-2 grow">
<%= page_footer do %>
<%= page_footer_actions do %>
<%= form_for @product, url: solidus_admin.product_path(@product), method: :delete do %>
<%= render component("ui/button").new(
tag: :button,
Expand All @@ -140,7 +131,7 @@
"data-#{stimulus_id}-message-param": t(".delete_confirmation"),
) %>
<% end %>
</div>
<% end %>
<%= render component("ui/button").new(tag: :button, text: t(".save"), form: form_id) %>
</div>
</div>
<% end %>
<% end %>
2 changes: 2 additions & 0 deletions admin/app/components/solidus_admin/products/show/component.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
# frozen_string_literal: true

class SolidusAdmin::Products::Show::Component < SolidusAdmin::BaseComponent
include SolidusAdmin::Layout::PageHelpers

def initialize(product:)
@product = product
end
Expand Down
22 changes: 8 additions & 14 deletions admin/app/components/solidus_admin/ui/table/component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,8 @@
<%= component("ui/table/ransack_filter").stimulus_id %>:showSearch-><%= stimulus_id %>#showSearch
"
>
<% toolbar_classes = "
h-14 p-2 bg-white border-b border-gray-100
justify-start items-center gap-2
visible:flex hidden:hidden
rounded-t-lg
" %>
<div role="search">
<div class="<%= toolbar_classes %>" data-<%= stimulus_id %>-target="searchToolbar">
<%= render component("ui/table/toolbar").new("data-#{stimulus_id}-target": "searchToolbar") do %>
<%= form_with(
url: @search_url,
method: :get,
Expand Down Expand Up @@ -47,17 +41,17 @@
"data-action": "#{stimulus_id}#cancelSearch",
) %>
</div>
</div>
<% end %>

<% if @filters.any? %>
<div class="<%= toolbar_classes %>" data-<%= stimulus_id %>-target="filterToolbar">
<%= render component("ui/table/toolbar").new("data-#{stimulus_id}-target": "filterToolbar") do %>
<% @filters.each_with_index do |filter, index| %>
<%= render_ransack_filter_dropdown(filter, index) %>
<% end %>
</div>
<% end %>
<% end %>

<div class="<%= toolbar_classes %>" data-<%= stimulus_id %>-target="scopesToolbar">
<%= render component("ui/table/toolbar").new("data-#{stimulus_id}-target": "scopesToolbar") do %>
<div class="flex-grow">
<%= render component("ui/tab").new(text: "All", current: true, href: "") %>
</div>
Expand All @@ -68,15 +62,15 @@
scheme: :secondary,
"data-action": "#{stimulus_id}#showSearch",
) %>
</div>
<% end %>
</div>

<div class="<%= toolbar_classes %>" data-<%= stimulus_id %>-target="batchToolbar" role="toolbar" aria-label="<%= t(".batch_actions") %>">
<%= render component("ui/table/toolbar").new("data-#{stimulus_id}-target": "batchToolbar", role: "toolbar", "aria-label": t(".batch_actions")) do %>
<%= form_tag '', id: batch_actions_form_id %>
<% @batch_actions.each do |batch_action| %>
<%= render_batch_action_button(batch_action) %>
<% end %>
</div>
<% end %>

<%= turbo_frame_tag table_frame_id, target: "_top" do %>
<table class="table-fixed w-full border-collapse">
Expand Down
14 changes: 14 additions & 0 deletions admin/app/components/solidus_admin/ui/table/toolbar/component.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
# frozen_string_literal: true

class SolidusAdmin::UI::Table::Toolbar::Component < SolidusAdmin::BaseComponent
erb_template <<~ERB
<div class="
h-14 p-2 bg-white border-b border-gray-100
justify-start items-center gap-2
visible:flex hidden:hidden
rounded-t-lg
">
<%= content %>
</div>
ERB
end