schuwi/component-system
2
1
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(elixir): improve display of component loc&cnt

Browse Source
This commit is contained in:
Schuwi
2025-09-14 20:18:00 +02:00
parent 4d68922876
commit 02521f9c6d
1 changed files with 36 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
lib/components_elixir_web/live/components_live.ex
View File

@@ -681,8 +681,9 @@ defmodule ComponentsElixirWeb.ComponentsLive do
</div>
<div class="flex-1 min-w-0">
<div class="flex items-center justify-between">
<div class="flex items-center">
<!-- Top row: Name and Category -->
<div class="flex items-start justify-between">
<div class="flex items-center min-w-0 flex-1">
<p class="text-sm font-medium text-indigo-600 truncate">
<%= if component.datasheet_url do %>
<a
@@ -700,36 +701,46 @@ defmodule ComponentsElixirWeb.ComponentsLive do
<span class="ml-2 text-blue-500" title="Datasheet available">📄</span>
<% end %>
</div>
<div class="ml-2 flex-shrink-0 flex">
<p class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
<div class="ml-4 flex-shrink-0">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
{component.category.name}
</p>
</span>
</div>
</div>
<div class="mt-2 flex justify-between">
<div class="sm:flex">
<p class="flex items-center text-sm text-gray-500">
<%= if component.description do %>
{component.description}
<% end %>
<!-- Middle row: Description -->
<%= if component.description do %>
<div class="mt-1">
<p class="text-sm text-gray-500 line-clamp-2">
{component.description}
</p>
</div>
<div class="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
<%= if component.storage_location do %>
<p class="mr-6">
<span class="font-medium">Location:</span> {storage_location_display_name(component.storage_location)}
</p>
<% end %>
<p class="mr-6">
<span class="font-medium">Count:</span> {component.count}
</p>
<%= if @sort_criteria == "all" or @sort_criteria == "id" do %>
<p class="mr-6">
<span class="font-medium">ID:</span> {component.id}
</p>
<% end %>
<% end %>
<!-- Bottom row: Metadata -->
<div class="mt-2 grid grid-cols-1 sm:grid-cols-3 gap-x-4 gap-y-1 text-sm text-gray-500">
<%= if component.storage_location do %>
<div class="flex items-center min-w-0">
<.icon name="hero-map-pin" class="w-4 h-4 mr-1 text-gray-400 flex-shrink-0" />
<span class="font-medium">Location:</span>
<span class="ml-1 truncate">{storage_location_display_name(component.storage_location)}</span>
</div>
<% end %>
<div class="flex items-center">
<.icon name="hero-cube" class="w-4 h-4 mr-1 text-gray-400" />
<span class="font-medium">Count:</span>
<span class="ml-1">{component.count}</span>
</div>
<%= if @sort_criteria == "all" or @sort_criteria == "id" do %>
<div class="flex items-center">
<.icon name="hero-hashtag" class="w-4 h-4 mr-1 text-gray-400" />
<span class="font-medium">ID:</span>
<span class="ml-1">{component.id}</span>
</div>
<% end %>
</div>
<!-- Keywords row -->
<%= if component.keywords do %>
<div class="mt-2">
<p class="text-xs text-gray-400">