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

feat(elixir): QR code generate & download function

Browse Source
This commit is contained in:
Schuwi
2025-09-14 16:35:06 +02:00
parent 1b498d286d
commit 788ad54724
10 changed files with 290 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -590,7 +590,7 @@ defmodule ComponentsElixirWeb.ComponentsLive do
<%= if @editing_component && @editing_component.image_filename do %>
<div class="mt-1 mb-2">
<p class="text-sm text-gray-600">Current image:</p>
<img src={"/uploads/images/#{@editing_component.image_filename}"} alt="Current component" class="h-20 w-20 object-cover rounded-lg" />
<img src={"/user_generated/uploads/images/#{@editing_component.image_filename}"} alt="Current component" class="h-20 w-20 object-cover rounded-lg" />
</div>
<% end %>
<div class="mt-1">
@@ -656,8 +656,8 @@ defmodule ComponentsElixirWeb.ComponentsLive do
<!-- Component Image -->
<div class="flex-shrink-0 mr-4">
<%= if component.image_filename do %>
<button phx-click="show_image" phx-value-url={"/uploads/images/#{component.image_filename}"} class="hover:opacity-75 transition-opacity">
<img src={"/uploads/images/#{component.image_filename}"} alt={component.name} class="h-12 w-12 rounded-lg object-cover cursor-pointer" />
<button phx-click="show_image" phx-value-url={"/user_generated/uploads/images/#{component.image_filename}"} class="hover:opacity-75 transition-opacity">
<img src={"/user_generated/uploads/images/#{component.image_filename}"} alt={component.name} class="h-12 w-12 rounded-lg object-cover cursor-pointer" />
</button>
<% else %>
<div class="h-12 w-12 rounded-lg bg-gray-200 flex items-center justify-center">
@@ -835,7 +835,7 @@ defmodule ComponentsElixirWeb.ComponentsLive do
uploaded_files =
consume_uploaded_entries(socket, :image, fn %{path: path}, entry ->
filename = "#{System.unique_integer([:positive])}_#{entry.client_name}"
dest = Path.join(["priv", "static", "uploads", "images", filename])
dest = Path.join(["priv", "static", "user_generated", "uploads", "images", filename])
# Ensure the upload directory exists
File.mkdir_p!(Path.dirname(dest))
@@ -858,7 +858,7 @@ defmodule ComponentsElixirWeb.ComponentsLive do
defp delete_image_file(""), do: :ok
defp delete_image_file(filename) do
path = Path.join(["priv", "static", "uploads", "images", filename])
path = Path.join(["priv", "static", "user_generated", "uploads", "images", filename])
File.rm(path)
end

103
lib/components_elixir_web/live/storage_locations_live.ex
View File

@@ -154,6 +154,28 @@ defmodule ComponentsElixirWeb.StorageLocationsLive do
{:noreply, assign(socket, :scanned_codes, [])}
end
def handle_event("download_qr", %{"id" => id}, socket) do
case Inventory.get_storage_location!(id) do
location ->
case QRCode.generate_qr_image(location) do
{:ok, png_data} ->
filename = "#{location.name |> String.replace(" ", "_")}_QR.png"
# Send file download to browser
{:noreply,
socket
|> push_event("download_file", %{
filename: filename,
data: Base.encode64(png_data),
mime_type: "image/png"
})}
{:error, _reason} ->
{:noreply, put_flash(socket, :error, "Failed to generate QR code")}
end
end
end
defp reload_storage_locations(socket) do
storage_locations = list_storage_locations()
assign(socket, :storage_locations, storage_locations)
@@ -208,6 +230,10 @@ defmodule ComponentsElixirWeb.StorageLocationsLive do
Inventory.count_components_in_storage_location(location_id)
end
defp get_qr_image_url(location) do
QRCode.get_qr_image_url(location)
end
# Component for rendering individual storage location items with QR code support
defp location_item(assigns) do
# Calculate margin based on depth (0 = no margin, 1+ = incremental margin)
@@ -243,46 +269,71 @@ defmodule ComponentsElixirWeb.StorageLocationsLive do
~H"""
<div class={[@border_class, @depth > 0 && "mt-4"]} style={"margin-left: #{@margin_left}px"}>
<div class="flex items-center justify-between">
<div class="flex-1">
<div class="flex items-center">
<.icon name={@icon_name} class={"#{@icon_size} #{if @depth == 0, do: "text-blue-500", else: "text-gray-400"} mr-3"} />
<div>
<%= if @title_tag == "h3" do %>
<h3 class={"#{@text_size} font-medium #{if @depth == 0, do: "text-gray-900", else: "text-gray-700"}"}>{@location.name}</h3>
<% else %>
<h4 class={"#{@text_size} font-medium #{if @depth == 0, do: "text-gray-900", else: "text-gray-700"}"}>{@location.name}</h4>
<div class="flex items-center flex-1 space-x-4">
<.icon name={@icon_name} class={"#{@icon_size} #{if @depth == 0, do: "text-blue-500", else: "text-gray-400"}"} />
<div class="flex-1">
<%= if @title_tag == "h3" do %>
<h3 class={"#{@text_size} font-medium #{if @depth == 0, do: "text-gray-900", else: "text-gray-700"}"}>{@location.name}</h3>
<% else %>
<h4 class={"#{@text_size} font-medium #{if @depth == 0, do: "text-gray-900", else: "text-gray-700"}"}>{@location.name}</h4>
<% end %>
<%= if @location.description do %>
<p class="text-sm text-gray-500 mt-1">{@location.description}</p>
<% end %>
<div class="flex items-center space-x-2 mt-1">
<p class="text-xs text-gray-400">
{count_components_in_location(@location.id)} components
</p>
<%= if @location.qr_code do %>
<span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">
QR: {@location.qr_code}
</span>
<% end %>
<%= if @location.description do %>
<p class="text-sm text-gray-500 mt-1">{@location.description}</p>
<% end %>
<div class="flex items-center space-x-2 mt-1">
<p class="text-xs text-gray-400">
{count_components_in_location(@location.id)} components
</p>
<%= if @location.qr_code do %>
<span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">
QR: {@location.qr_code}
</span>
<% end %>
</div>
</div>
</div>
<%= if @location.qr_code do %>
<div class="flex items-center space-x-3">
<%= if get_qr_image_url(@location) do %>
<div class="qr-code-container flex-shrink-0">
<img
src={get_qr_image_url(@location)}
alt={"QR Code for #{@location.name}"}
class="w-16 h-16 border border-gray-200 rounded bg-white"
onerror="this.style.display='none'"
/>
</div>
<% else %>
<div class="w-16 h-16 border border-gray-200 rounded bg-gray-50 flex items-center justify-center flex-shrink-0">
<.icon name="hero-qr-code" class="w-8 h-8 text-gray-400" />
</div>
<% end %>
<button
phx-click="download_qr"
phx-value-id={@location.id}
class="inline-flex items-center px-3 py-1.5 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 flex-shrink-0"
title="Download QR Code"
>
<.icon name="hero-arrow-down-tray" class="w-4 h-4 mr-1.5" />
Download
</button>
</div>
<% end %>
</div>
<div class="flex items-center space-x-2">
<div class="flex items-center space-x-2 ml-4">
<button
phx-click="show_edit_form"
phx-value-id={@location.id}
class={"inline-flex items-center #{@button_size} border border-transparent rounded-full shadow-sm text-white bg-blue-600 hover:bg-blue-700"}
class="inline-flex items-center p-2 border border-transparent rounded-full shadow-sm text-white bg-blue-600 hover:bg-blue-700"
>
<.icon name="hero-pencil" class={@icon_size} />
<.icon name="hero-pencil" class="w-4 h-4" />
</button>
<button
phx-click="delete_location"
phx-value-id={@location.id}
data-confirm="Are you sure you want to delete this storage location? This action cannot be undone."
class={"inline-flex items-center #{@button_size} border border-transparent rounded-full shadow-sm text-white bg-red-600 hover:bg-red-700"}
class="inline-flex items-center p-2 border border-transparent rounded-full shadow-sm text-white bg-red-600 hover:bg-red-700"
>
<.icon name="hero-trash" class={@icon_size} />
<.icon name="hero-trash" class="w-4 h-4" />
</button>
</div>
</div>