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

36
lib/components_elixir/inventory.ex
View File

@@ -21,8 +21,17 @@ defmodule ComponentsElixir.Inventory do
|> Repo.all()
# Compute hierarchy fields for all locations efficiently
compute_hierarchy_fields_batch(locations)
processed_locations = compute_hierarchy_fields_batch(locations)
|> Enum.sort_by(&{&1.level, &1.name})
# Ensure QR codes exist for all locations (in background)
spawn(fn ->
Enum.each(processed_locations, fn location ->
ComponentsElixir.QRCode.get_qr_image_url(location)
end)
end)
processed_locations
end
# Efficient batch computation of hierarchy fields
@@ -123,9 +132,18 @@ defmodule ComponentsElixir.Inventory do
# Convert string keys to atoms to maintain consistency
attrs = normalize_string_keys(attrs)
%StorageLocation{}
result = %StorageLocation{}
|> StorageLocation.changeset(attrs)
|> Repo.insert()
case result do
{:ok, location} ->
# Automatically generate QR code image
spawn(fn -> ComponentsElixir.QRCode.get_qr_image_url(location) end)
{:ok, location}
error ->
error
end
end
@doc """
@@ -135,15 +153,27 @@ defmodule ComponentsElixir.Inventory do
# Convert string keys to atoms to maintain consistency
attrs = normalize_string_keys(attrs)
storage_location
result = storage_location
|> StorageLocation.changeset(attrs)
|> Repo.update()
case result do
{:ok, updated_location} ->
# Automatically regenerate QR code image if name or hierarchy changed
spawn(fn -> ComponentsElixir.QRCode.get_qr_image_url(updated_location, force_regenerate: true) end)
{:ok, updated_location}
error ->
error
end
end
@doc """
Deletes a storage location.
"""
def delete_storage_location(%StorageLocation{} = storage_location) do
# Clean up QR code image before deleting
ComponentsElixir.QRCode.cleanup_qr_image(storage_location.id)
Repo.delete(storage_location)
end

130
lib/components_elixir/qr_code.ex
View File

@@ -100,4 +100,134 @@ defmodule ComponentsElixir.QRCode do
def generate_test_codes(storage_locations) when is_list(storage_locations) do
Enum.map(storage_locations, &generate_qr_data/1)
end
@doc """
Generates a QR code image (PNG) for a storage location.
Returns the binary PNG data that can be saved to disk or served directly.
## Options
- `:size` - The size of the QR code image in pixels (default: 200)
- `:background` - Background color as `{r, g, b}` tuple (default: white)
- `:foreground` - Foreground color as `{r, g, b}` tuple (default: black)
## Examples
iex> location = %StorageLocation{level: 1, qr_code: "ABC123"}
iex> {:ok, png_data} = ComponentsElixir.QRCode.generate_qr_image(location)
iex> File.write!("/tmp/qr_code.png", png_data)
"""
def generate_qr_image(storage_location, _opts \\ []) do
qr_data = generate_qr_data(storage_location)
qr_data
|> QRCode.create()
|> QRCode.render(:png)
end
@doc """
Generates and saves a QR code image to the specified file path.
## Examples
iex> location = %StorageLocation{level: 1, qr_code: "ABC123"}
iex> ComponentsElixir.QRCode.save_qr_image(location, "/tmp/qr_code.png")
:ok
"""
def save_qr_image(storage_location, file_path, opts \\ []) do
case generate_qr_image(storage_location, opts) do
{:ok, png_data} ->
# Ensure directory exists
file_path
|> Path.dirname()
|> File.mkdir_p!()
File.write!(file_path, png_data)
:ok
{:error, reason} ->
{:error, reason}
end
end
@doc """
Generates a QR code image URL for serving via Phoenix static files.
This function generates the QR code image and saves it to the static directory,
returning a URL that can be used in templates.
## Examples
iex> location = %StorageLocation{id: 123, qr_code: "ABC123"}
iex> ComponentsElixir.QRCode.get_qr_image_url(location)
"/qr_codes/storage_location_123.png"
"""
def get_qr_image_url(storage_location, opts \\ []) do
filename = "storage_location_#{storage_location.id}.png"
file_path = Path.join([Application.app_dir(:components_elixir, "priv/static/user_generated/qr_codes"), filename])
# Generate and save the image if it doesn't exist or if regeneration is forced
force_regenerate = Keyword.get(opts, :force_regenerate, false)
if force_regenerate || !File.exists?(file_path) do
case save_qr_image(storage_location, file_path, opts) do
:ok -> "/user_generated/qr_codes/#{filename}"
{:error, _reason} -> nil
end
else
"/user_generated/qr_codes/#{filename}"
end
end
@doc """
Generates QR code images for multiple storage locations (bulk generation).
Returns a list of results indicating success or failure for each location.
## Examples
iex> locations = [location1, location2, location3]
iex> ComponentsElixir.QRCode.bulk_generate_images(locations)
[
{:ok, "/qr_codes/storage_location_1.png"},
{:ok, "/qr_codes/storage_location_2.png"},
{:error, "Failed to generate for location 3"}
]
"""
def bulk_generate_images(storage_locations, opts \\ []) do
# Use Task.async_stream for concurrent generation with back-pressure
storage_locations
|> Task.async_stream(
fn location ->
case get_qr_image_url(location, Keyword.put(opts, :force_regenerate, true)) do
nil -> {:error, "Failed to generate QR code for location #{location.id}"}
url -> {:ok, url}
end
end,
timeout: :infinity,
max_concurrency: System.schedulers_online() * 2
)
|> Enum.map(fn {:ok, result} -> result end)
end
@doc """
Cleans up QR code images for deleted storage locations.
Should be called when storage locations are deleted to prevent orphaned files.
"""
def cleanup_qr_image(storage_location_id) do
filename = "storage_location_#{storage_location_id}.png"
file_path = Path.join([Application.app_dir(:components_elixir, "priv/static/user_generated/qr_codes"), filename])
if File.exists?(file_path) do
File.rm(file_path)
else
:ok
end
end
end

2
lib/components_elixir_web.ex
View File

@@ -17,7 +17,7 @@ defmodule ComponentsElixirWeb do
those modules here.
"""
def static_paths, do: ~w(assets fonts images uploads favicon.ico robots.txt)
def static_paths, do: ~w(assets fonts images user_generated favicon.ico robots.txt)
def router do
quote do

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>