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.

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

[Admin] Add stock_items/edit modal component #5543

Merged
merged 9 commits into from
Dec 12, 2023
Next Next commit
Add new ui/resource_item component
Co-Authored-By: Elia Schito <[email protected]>
  • Loading branch information
rainerdema and elia committed Dec 11, 2023
commit 670814caafcefeb1b4b04b6dbcf5cf208f5e5c79
Original file line number Diff line number Diff line change
Expand Up @@ -30,20 +30,11 @@
<% @order.line_items.each do |line_item| %>
<tr class="border-gray-100 border-t">
<td class="px-6 py-4">
<div class="flex gap-2 grow">
<% variant = line_item.variant %>
<%= render component("ui/thumbnail").new(
src: (variant.images.first || variant.product.gallery.images.first)&.url(:small),
alt: variant.name
) %>
<div class="flex-col">
<div class="leading-5 text-black body-small-bold"><%= variant.name %></div>
<div class="leading-5 text-gray-500 body-small">
SKU: <%= variant.sku %>
<%= variant.options_text.presence&.prepend("- ") %>
</div>
</div>
</div>
<%= render component("ui/resource_item").new(
thumbnail: (line_item.variant.images.first || line_item.variant.product.gallery.images.first)&.url(:small),
title: line_item.variant.name,
subtitle: "#{line_item.variant.sku}#{line_item.variant.options_text.presence&.prepend("- ")}",
) %>
</td>
<td class="px-6 py-4">
<%= form_for(line_item, url: solidus_admin.order_line_item_path(@order, line_item), html: {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<div class="flex gap-2 grow">
<%= render component("ui/thumbnail").new(
src: @thumbnail,
alt: @title,
) if @thumbnail %>
<div class="flex-col">
<div class="leading-5 text-black body-small-bold"><%= @title %></div>
<div class="leading-5 text-gray-500 body-small"><%= @subtitle %></div>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
# frozen_string_literal: true

class SolidusAdmin::UI::ResourceItem::Component < SolidusAdmin::BaseComponent
def initialize(title:, subtitle:, thumbnail: nil)
@thumbnail = thumbnail
@title = title
@subtitle = subtitle
end
end
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
# frozen_string_literal: true

# @component "ui/resource_item"
class SolidusAdmin::UI::ResourceItem::ComponentPreview < ViewComponent::Preview
include SolidusAdmin::Preview

def overview
render_with_template
end

# @param thumbnail text
# @param title text
# @param subtitle text
def render_resource_item(title: "Your Title", subtitle: "Your Subtitle", thumbnail: "https://picsum.photos/200/300")
render current_component.new(
title: title,
subtitle: subtitle,
thumbnail: thumbnail
)
end
end
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<div class="mb-8">
<%= render current_component.new(
title: "Sample Product Name",
subtitle: "SKU12345 - Additional details here",
thumbnail: "https://picsum.photos/200/300"
) %>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
# frozen_string_literal: true

require "spec_helper"

RSpec.describe SolidusAdmin::UI::ResourceItem::Component, type: :component do
it "renders the overview preview" do
render_preview(:overview)
end
end