feat(elixir): category managing w/ filtering &CRUD

lib/components_elixir_web/live/components_live.ex

@@ -67,6 +67,23 @@ defmodule ComponentsElixirWeb.ComponentsLive do
      |> push_patch(to: ~p"/?#{build_query_params(socket, %{criteria: criteria})}")}
   end
 
+  def handle_event("category_filter", %{"category_id" => ""}, socket) do
+    {:noreply,
+     socket
+     |> assign(:selected_category, nil)
+     |> assign(:offset, 0)
+     |> load_components()}
+  end
+
+  def handle_event("category_filter", %{"category_id" => category_id}, socket) do
+    category_id = String.to_integer(category_id)
+    {:noreply,
+     socket
+     |> assign(:selected_category, category_id)
+     |> assign(:offset, 0)
+     |> load_components()}
+  end
+
   def handle_event("load_more", _params, socket) do
     new_offset = socket.assigns.offset + @items_per_page
 
@@ -195,9 +212,11 @@ defmodule ComponentsElixirWeb.ComponentsLive do
     filters = [
       search: socket.assigns.search,
       sort_criteria: socket.assigns.sort_criteria,
+      category_id: socket.assigns.selected_category,
       limit: @items_per_page,
       offset: socket.assigns.offset
     ]
+    |> Enum.reject(fn {_k, v} -> is_nil(v) end)
 
     %{components: new_components, has_more: has_more} =
       Inventory.paginate_components(filters)
@@ -255,6 +274,12 @@ defmodule ComponentsElixirWeb.ComponentsLive do
               >
                 <.icon name="hero-plus" class="w-4 h-4 mr-2" /> Add Component
               </button>
+              <.link
+                navigate={~p"/categories"}
+                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-folder" class="w-4 h-4 mr-2" /> Categories
+              </.link>
               <.link
                 href="/logout"
                 method="post"
@@ -267,7 +292,7 @@ defmodule ComponentsElixirWeb.ComponentsLive do
         </div>
       </div>
 
-    <!-- Filters -->
+      <!-- Filters -->
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
         <div class="flex flex-col sm:flex-row gap-4">
           <div class="flex-1">
@@ -281,6 +306,25 @@ defmodule ComponentsElixirWeb.ComponentsLive do
               />
             </form>
           </div>
+          <div>
+            <form phx-change="category_filter">
+              <select
+                name="category_id"
+                class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+              >
+                <option value="" selected={is_nil(@selected_category)}>All Categories</option>
+                <%= for category <- @categories do %>
+                  <option value={category.id} selected={@selected_category == category.id}>
+                    <%= if category.parent do %>
+                      {category.parent.name} > {category.name}
+                    <% else %>
+                      {category.name}
+                    <% end %>
+                  </option>
+                <% end %>
+              </select>
+            </form>
+          </div>
           <div>
             <form phx-change="sort_change">
               <select