improve chart

lib/pokemon_couture_web/live/clothes_tracker_live.ex

@@ -20,16 +20,25 @@ defmodule PokemonCoutureWeb.ClothesTrackerLive do
     end
   end
 
-  def inner_map_sorter({type, list}, acc) do
+  def assign_clothespiece_to_map(clothes, map) do
-    sorted_list = Enum.sort_by(list, fn %Clothes{name: name} -> name end)
+    case map[clothes.name] do
-    Map.put(acc, type, sorted_list)
+      nil ->
+        Map.put(map, clothes.name, [clothes])
+      list_of_clothes when is_list(list_of_clothes) ->
+        Map.put(map, clothes.name, [clothes | list_of_clothes])
+    end
+  end
+
+  def inner_map_creator({type, list}, acc) do
+    clothes_map = Enum.reduce(list, %{}, &assign_clothespiece_to_map/2)
+    Map.put(acc, type, clothes_map)
   end
 
   def mount(_params, %{"user_token" => user_token} = _session, socket) do
     user = Accounts.get_user_by_session_token(user_token)
     clothes_map = Enum.reduce(Shops.list_clothes_with_owners(), %{}, &create_shop_map/2)
     clothes_map = for {shop, map} <- clothes_map
-                  do {shop, Enum.reduce(map, %{}, &inner_map_sorter/2)}
+                  do {shop, Enum.reduce(map, %{}, &inner_map_creator/2)}
                   end
     socket =
       socket

lib/pokemon_couture_web/live/clothes_tracker_live.html.leex

@@ -1,12 +1,15 @@
 <h1>Listing Clothes</h1>
 <%= for {shop, map_of_clothes_by_type} <- @clothes_map do %>
   <h2> <%= shop %></h2>
-  <%= for {type, list_of_clothes} <- map_of_clothes_by_type do %>
+  <%= for {type, map_of_clothes_by_name} <- map_of_clothes_by_type do %>
     <h3> <%= type %> </h3>
+    <%= for {name, list_of_clothes} <- map_of_clothes_by_name do %>
         <table>
           <thead>
             <tr>
-          <th>Name</th>
+              <th colspan="3" style="text-align:center"> <b> <%= name %> </b> </th>
+            </tr>
+            <tr>
               <th>Color</th>
               <th>Game</th>
               <th></th>
@@ -20,3 +23,4 @@
         </table>
     <% end %>
   <% end %>
+<% end %>

lib/pokemon_couture_web/live/components/clothes_component.ex

@@ -6,7 +6,6 @@ defmodule PokemonCoutureWeb.Components.ClothesComponent do
   def render(assigns) do
     ~L"""
     <tr>
-        <td><%= @clothes.name %></td>
         <td><%= @clothes.color %></td>
         <td><%= @clothes.game %></td>