improve chart

assets/css/phoenix.css

@@ -98,4 +98,4 @@ header nav a {
     flex-basis: 527px;
     margin: 2rem 1rem;
   }
-}
+}

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
-    sorted_list = Enum.sort_by(list, fn %Clothes{name: name} -> name end)
-    Map.put(acc, type, sorted_list)
+  def assign_clothespiece_to_map(clothes, map) do
+    case map[clothes.name] do
+      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,22 +1,26 @@
 <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>
-    <table>
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Color</th>
-          <th>Game</th>
-          <th></th>
-         </tr>
-      </thead>
-    <tbody>
-    <%= for clothes <- list_of_clothes do %>
-        <%= live_component PokemonCoutureWeb.Components.ClothesComponent, id: clothes.id, clothes: clothes, user: @user %>
+    <%= for {name, list_of_clothes} <- map_of_clothes_by_name do %>
+        <table>
+          <thead>
+            <tr>
+              <th colspan="3" style="text-align:center"> <b> <%= name %> </b> </th>
+            </tr>
+            <tr>
+              <th>Color</th>
+              <th>Game</th>
+              <th></th>
+            </tr>
+          </thead>
+        <tbody>
+        <%= for clothes <- list_of_clothes do %>
+            <%= live_component PokemonCoutureWeb.Components.ClothesComponent, id: clothes.id, clothes: clothes, user: @user %>
+        <% end %>
+          </tbody>
+        </table>
     <% end %>
-      </tbody>
-    </table>
   <% 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>