feat(elixir): storage location system
This commit is contained in:
Schuwi
@@ -322,6 +322,12 @@ defmodule ComponentsElixirWeb.ComponentsLive do
|
||||
>
|
||||
<.icon name="hero-folder" class="w-4 h-4 mr-2" /> Categories
|
||||
</.link>
|
||||
<.link
|
||||
navigate={~p"/storage_locations"}
|
||||
class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
||||
>
|
||||
<.icon name="hero-archive-box" class="w-4 h-4 mr-2" /> Storage
|
||||
</.link>
|
||||
<.link
|
||||
href="/logout"
|
||||
method="post"
|
||||
|
||||
208
lib/components_elixir_web/live/storage_locations_live.ex
Normal file
208
lib/components_elixir_web/live/storage_locations_live.ex
Normal file
@@ -0,0 +1,208 @@
|
||||
defmodule ComponentsElixirWeb.StorageLocationsLive do
|
||||
@moduledoc """
|
||||
LiveView for managing storage locations and QR codes.
|
||||
"""
|
||||
use ComponentsElixirWeb, :live_view
|
||||
|
||||
alias ComponentsElixir.Inventory
|
||||
alias ComponentsElixir.Inventory.StorageLocation
|
||||
alias ComponentsElixir.QRCode
|
||||
|
||||
@impl true
|
||||
def mount(_params, _session, socket) do
|
||||
socket =
|
||||
socket
|
||||
|> assign(:storage_locations, list_storage_locations())
|
||||
|> assign(:form, to_form(%{}))
|
||||
|> assign(:show_form, false)
|
||||
|> assign(:edit_location, nil)
|
||||
|> assign(:qr_scanner_open, false)
|
||||
|> assign(:scanned_codes, [])
|
||||
|
||||
{:ok, socket}
|
||||
end
|
||||
|
||||
@impl true
|
||||
def handle_params(params, _url, socket) do
|
||||
{:noreply, apply_action(socket, socket.assigns.live_action, params)}
|
||||
end
|
||||
|
||||
defp apply_action(socket, :index, _params) do
|
||||
socket
|
||||
|> assign(:page_title, "Storage Locations")
|
||||
|> assign(:storage_location, %StorageLocation{})
|
||||
end
|
||||
|
||||
defp apply_action(socket, :new, _params) do
|
||||
socket
|
||||
|> assign(:page_title, "New Storage Location")
|
||||
|> assign(:storage_location, %StorageLocation{})
|
||||
|> assign(:show_form, true)
|
||||
end
|
||||
|
||||
defp apply_action(socket, :edit, %{"id" => id}) do
|
||||
location = Inventory.get_storage_location!(id)
|
||||
|
||||
socket
|
||||
|> assign(:page_title, "Edit Storage Location")
|
||||
|> assign(:storage_location, location)
|
||||
|> assign(:edit_location, location)
|
||||
|> assign(:show_form, true)
|
||||
|> assign(:form, to_form(Inventory.change_storage_location(location)))
|
||||
end
|
||||
|
||||
@impl true
|
||||
def handle_event("new", _params, socket) do
|
||||
{:noreply,
|
||||
socket
|
||||
|> assign(:show_form, true)
|
||||
|> assign(:storage_location, %StorageLocation{})
|
||||
|> assign(:edit_location, nil)
|
||||
|> assign(:form, to_form(Inventory.change_storage_location(%StorageLocation{})))}
|
||||
end
|
||||
|
||||
def handle_event("cancel", _params, socket) do
|
||||
{:noreply,
|
||||
socket
|
||||
|> assign(:show_form, false)
|
||||
|> assign(:edit_location, nil)
|
||||
|> push_patch(to: ~p"/storage_locations")}
|
||||
end
|
||||
|
||||
def handle_event("validate", %{"storage_location" => params}, socket) do
|
||||
# Normalize parent_id for validation too
|
||||
normalized_params =
|
||||
case Map.get(params, "parent_id") do
|
||||
"" -> Map.put(params, "parent_id", nil)
|
||||
value -> Map.put(params, "parent_id", value)
|
||||
end
|
||||
|
||||
changeset =
|
||||
case socket.assigns.edit_location do
|
||||
nil -> Inventory.change_storage_location(%StorageLocation{}, normalized_params)
|
||||
location -> Inventory.change_storage_location(location, normalized_params)
|
||||
end
|
||||
|
||||
{:noreply, assign(socket, :form, to_form(changeset, action: :validate))}
|
||||
end
|
||||
|
||||
def handle_event("save", %{"storage_location" => params}, socket) do
|
||||
# Normalize parent_id for consistency
|
||||
normalized_params =
|
||||
case Map.get(params, "parent_id") do
|
||||
"" -> Map.put(params, "parent_id", nil)
|
||||
value -> Map.put(params, "parent_id", value)
|
||||
end
|
||||
|
||||
case socket.assigns.edit_location do
|
||||
nil -> create_storage_location(socket, normalized_params)
|
||||
location -> update_storage_location(socket, location, normalized_params)
|
||||
end
|
||||
end
|
||||
|
||||
def handle_event("delete", %{"id" => id}, socket) do
|
||||
location = Inventory.get_storage_location!(id)
|
||||
|
||||
case Inventory.delete_storage_location(location) do
|
||||
{:ok, _} ->
|
||||
{:noreply,
|
||||
socket
|
||||
|> put_flash(:info, "Storage location deleted successfully")
|
||||
|> assign(:storage_locations, list_storage_locations())}
|
||||
|
||||
{:error, _} ->
|
||||
{:noreply, put_flash(socket, :error, "Unable to delete storage location")}
|
||||
end
|
||||
end
|
||||
|
||||
def handle_event("open_qr_scanner", _params, socket) do
|
||||
{:noreply, assign(socket, :qr_scanner_open, true)}
|
||||
end
|
||||
|
||||
def handle_event("close_qr_scanner", _params, socket) do
|
||||
{:noreply, assign(socket, :qr_scanner_open, false)}
|
||||
end
|
||||
|
||||
def handle_event("qr_scanned", %{"code" => code}, socket) do
|
||||
case QRCode.parse_qr_data(code) do
|
||||
{:ok, parsed} ->
|
||||
case Inventory.get_storage_location_by_qr_code(parsed.code) do
|
||||
nil ->
|
||||
{:noreply, put_flash(socket, :error, "Storage location not found for QR code: #{code}")}
|
||||
|
||||
location ->
|
||||
scanned_codes = [%{code: code, location: location} | socket.assigns.scanned_codes]
|
||||
|
||||
{:noreply,
|
||||
socket
|
||||
|> assign(:scanned_codes, scanned_codes)
|
||||
|> put_flash(:info, "Scanned: #{location.path}")}
|
||||
end
|
||||
|
||||
{:error, reason} ->
|
||||
{:noreply, put_flash(socket, :error, "Invalid QR code: #{reason}")}
|
||||
end
|
||||
end
|
||||
|
||||
def handle_event("clear_scanned", _params, socket) do
|
||||
{:noreply, assign(socket, :scanned_codes, [])}
|
||||
end
|
||||
|
||||
defp create_storage_location(socket, params) do
|
||||
case Inventory.create_storage_location(params) do
|
||||
{:ok, _location} ->
|
||||
{:noreply,
|
||||
socket
|
||||
|> put_flash(:info, "Storage location created successfully")
|
||||
|> assign(:show_form, false)
|
||||
|> assign(:storage_locations, list_storage_locations())}
|
||||
|
||||
{:error, %Ecto.Changeset{} = changeset} ->
|
||||
{:noreply, assign(socket, :form, to_form(changeset))}
|
||||
end
|
||||
end
|
||||
|
||||
defp update_storage_location(socket, location, params) do
|
||||
case Inventory.update_storage_location(location, params) do
|
||||
{:ok, _location} ->
|
||||
{:noreply,
|
||||
socket
|
||||
|> put_flash(:info, "Storage location updated successfully")
|
||||
|> assign(:show_form, false)
|
||||
|> assign(:edit_location, nil)
|
||||
|> assign(:storage_locations, list_storage_locations())
|
||||
|> push_patch(to: ~p"/storage_locations")}
|
||||
|
||||
{:error, %Ecto.Changeset{} = changeset} ->
|
||||
{:noreply, assign(socket, :form, to_form(changeset))}
|
||||
end
|
||||
end
|
||||
|
||||
defp list_storage_locations do
|
||||
Inventory.list_storage_locations()
|
||||
end
|
||||
|
||||
defp format_level(level) do
|
||||
case level do
|
||||
0 -> "Shelf"
|
||||
1 -> "Drawer"
|
||||
2 -> "Box"
|
||||
n -> "Level #{n}"
|
||||
end
|
||||
end
|
||||
|
||||
# Function to get parent options for select dropdown
|
||||
defp parent_options(current_location) do
|
||||
locations = Inventory.list_storage_locations()
|
||||
|
||||
# Filter out the current location if provided (to prevent self-parent)
|
||||
filtered_locations = case current_location do
|
||||
nil -> locations
|
||||
%{id: current_id} -> Enum.filter(locations, fn loc -> loc.id != current_id end)
|
||||
_ -> locations
|
||||
end
|
||||
|
||||
filtered_locations
|
||||
|> Enum.map(fn location -> {"#{location.name} (#{location.level})", location.id} end)
|
||||
end
|
||||
end
|
||||
265
lib/components_elixir_web/live/storage_locations_live.html.heex
Normal file
265
lib/components_elixir_web/live/storage_locations_live.html.heex
Normal file
@@ -0,0 +1,265 @@
|
||||
<div class="space-y-6">
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-gray-900">Storage Locations</h1>
|
||||
<p class="text-gray-600">Manage your physical storage locations and QR codes</p>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<.link
|
||||
navigate={~p"/"}
|
||||
class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 flex items-center gap-2"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
Components
|
||||
</.link>
|
||||
<button
|
||||
phx-click="new"
|
||||
class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 flex items-center gap-2"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
|
||||
</svg>
|
||||
New Location
|
||||
</button>
|
||||
|
||||
<button
|
||||
phx-click="open_qr_scanner"
|
||||
class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 flex items-center gap-2"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
|
||||
</svg>
|
||||
Scan QR Code
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Modal -->
|
||||
<div :if={@show_form} class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
||||
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
|
||||
<div class="mt-3">
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-4">
|
||||
<%= if @edit_location, do: "Edit Storage Location", else: "New Storage Location" %>
|
||||
</h3>
|
||||
|
||||
<.form for={@form} phx-submit="save" phx-change="validate" class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Name</label>
|
||||
<.input field={@form[:name]} type="text" placeholder="Enter location name" required />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Description</label>
|
||||
<.input field={@form[:description]} type="textarea" placeholder="Optional description" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Parent Location</label>
|
||||
<.input
|
||||
field={@form[:parent_id]}
|
||||
type="select"
|
||||
options={[{"None (Root Level)", ""} | parent_options(@edit_location)]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
phx-click="cancel"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700"
|
||||
>
|
||||
<%= if @edit_location, do: "Update", else: "Create" %>
|
||||
</button>
|
||||
</div>
|
||||
</.form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- QR Scanner Modal -->
|
||||
<div :if={@qr_scanner_open} class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
||||
<div class="relative top-10 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
|
||||
<div class="mt-3">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-bold text-gray-900">QR Code Scanner</h3>
|
||||
<button
|
||||
phx-click="close_qr_scanner"
|
||||
class="text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- QR Scanner Interface -->
|
||||
<div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
|
||||
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
|
||||
</svg>
|
||||
<p class="mt-2 text-sm text-gray-600">Camera QR scanner would go here</p>
|
||||
<p class="text-xs text-gray-500 mt-1">In a real implementation, this would use JavaScript QR scanning</p>
|
||||
|
||||
<!-- Test buttons for demo -->
|
||||
<div class="mt-4 space-y-2">
|
||||
<p class="text-sm font-medium text-gray-700">Test with sample codes:</p>
|
||||
<button
|
||||
phx-click="qr_scanned"
|
||||
phx-value-code="SL:0:1MTKDM:ROOT"
|
||||
class="block w-full px-3 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded"
|
||||
>
|
||||
Scan "Shelf A"
|
||||
</button>
|
||||
<button
|
||||
phx-click="qr_scanned"
|
||||
phx-value-code="SL:1:VDI701:1MTKDM"
|
||||
class="block w-full px-3 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded"
|
||||
>
|
||||
Scan "Drawer 1"
|
||||
</button>
|
||||
<button
|
||||
phx-click="qr_scanned"
|
||||
phx-value-code="SL:2:GPG9S8:VDI701"
|
||||
class="block w-full px-3 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded"
|
||||
>
|
||||
Scan "Box 1"
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scanned Codes Display -->
|
||||
<div :if={length(@scanned_codes) > 0} class="bg-green-50 border border-green-200 rounded-lg p-4">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<h3 class="text-lg font-medium text-green-800">Recently Scanned</h3>
|
||||
<button
|
||||
phx-click="clear_scanned"
|
||||
class="text-sm text-green-600 hover:text-green-800"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div :for={scan <- @scanned_codes} class="flex items-center justify-between bg-white p-2 rounded border">
|
||||
<div>
|
||||
<span class="font-medium text-gray-900"><%= scan.location.path %></span>
|
||||
<span class="text-sm text-gray-600 ml-2">(<%= scan.code %>)</span>
|
||||
</div>
|
||||
<span class="text-xs text-green-600 bg-green-100 px-2 py-1 rounded">
|
||||
Level <%= scan.location.level %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Storage Locations Table -->
|
||||
<div class="bg-white shadow rounded-lg">
|
||||
<div class="px-6 py-4 border-b border-gray-200">
|
||||
<h3 class="text-lg font-medium text-gray-900">Storage Locations</h3>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Location
|
||||
</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Level
|
||||
</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
QR Code
|
||||
</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Description
|
||||
</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
<tr :for={location <- @storage_locations} class="hover:bg-gray-50">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
<%= location.path %>
|
||||
<!-- DEBUG: Show actual database values -->
|
||||
<div class="text-xs text-red-600 mt-1">
|
||||
DEBUG - ID: <%= location.id %>, Parent: <%= inspect(location.parent_id) %>, Level: <%= location.level %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
|
||||
<%= format_level(location.level) %>
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<code class="text-sm bg-gray-100 px-2 py-1 rounded">
|
||||
<%= location.qr_code %>
|
||||
</code>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="text-sm text-gray-900 max-w-xs truncate">
|
||||
<%= location.description %>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
||||
<div class="flex space-x-2">
|
||||
<.link
|
||||
patch={~p"/storage_locations/#{location.id}/edit"}
|
||||
class="text-indigo-600 hover:text-indigo-900"
|
||||
>
|
||||
Edit
|
||||
</.link>
|
||||
<button
|
||||
phx-click="delete"
|
||||
phx-value-id={location.id}
|
||||
data-confirm="Are you sure?"
|
||||
class="text-red-600 hover:text-red-900"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div :if={length(@storage_locations) == 0} class="text-center py-8">
|
||||
<p class="text-gray-500">No storage locations yet. Create one to get started!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- QR Code Examples -->
|
||||
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<h3 class="text-lg font-medium text-blue-800 mb-2">QR Code Examples</h3>
|
||||
<p class="text-sm text-blue-700 mb-3">
|
||||
Here are some sample QR codes generated for your existing storage locations:
|
||||
</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div :for={location <- Enum.take(@storage_locations, 4)} class="bg-white p-3 rounded border">
|
||||
<div class="text-sm font-medium text-gray-900"><%= location.path %></div>
|
||||
<code class="text-xs text-gray-600 bg-gray-100 px-2 py-1 rounded mt-1 inline-block">
|
||||
<%= ComponentsElixir.QRCode.generate_qr_data(location) %>
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user