add tags

lib/cannery_web/live/tag_live/form_component.ex

@@ -15,6 +15,8 @@ defmodule CanneryWeb.TagLive.FormComponent do
 
   @impl true
   def handle_event("validate", %{"tag" => tag_params}, socket) do
+    tag_params = tag_params |> Map.put("user_id", socket.assigns.current_user.id)
+
     changeset =
       socket.assigns.tag
       |> Tags.change_tag(tag_params)
@@ -24,6 +26,7 @@ defmodule CanneryWeb.TagLive.FormComponent do
   end
 
   def handle_event("save", %{"tag" => tag_params}, socket) do
+    tag_params = tag_params |> Map.put("user_id", socket.assigns.current_user.id)
     save_tag(socket, socket.assigns.action, tag_params)
   end
 

lib/cannery_web/live/tag_live/form_component.html.leex

@@ -1,22 +1,32 @@
-<h2><%= @title %></h2>
+<h2 class="title text-xl text-primary-500">
+  <%= @title %>
+</h2>
 
 <%= f = form_for @changeset, "#",
   id: "tag-form",
+  class: "grid grid-cols-3 justify-center items-center space-y-4",
   phx_target: @myself,
   phx_change: "validate",
   phx_submit: "save" %>
 
   <%= label f, :name, class: "title text-lg text-primary-500" %>
-  <%= text_input f, :name, class: "input input-primary" %>
-  <%= error_tag f, :name %>
+  <%= text_input f, :name, class: "input input-primary col-span-2" %>
+  <span class="col-span-3">
+    <%= error_tag f, :name %>
+  </span>
 
   <%= label f, :bg_color, class: "title text-lg text-primary-500" %>
-  <%= text_input f, :bg_color %>
-  <%= error_tag f, :bg_color %>
+  <%= color_input f, :bg_color, class: "mx-auto col-span-2" %>
+  <span class="col-span-3">
+    <%= error_tag f, :bg_color %>
+  </span>
 
   <%= label f, :text_color, class: "title text-lg text-primary-500" %>
-  <%= text_input f, :text_color %>
-  <%= error_tag f, :text_color %>
+  <%= color_input f, :text_color, class: "mx-auto col-span-2" %>
+  <span class="col-span-3">
+    <%= error_tag f, :text_color %>
+  </span>
 
-  <%= submit "Save", phx_disable_with: "Saving..." %>
+  <%= submit "Save", class: "mx-auto btn btn-primary col-span-3",
+    phx_disable_with: "Saving..." %>
 </form>

lib/cannery_web/live/tag_live/index.ex

@@ -6,7 +6,7 @@ defmodule CanneryWeb.TagLive.Index do
 
   @impl true
   def mount(_params, session, socket) do
-    {:ok, socket |> assign_defaults(session) |> assign(:tags, list_tags())}
+    {:ok, socket |> assign_defaults(session) |> display_tags()}
   end
 
   @impl true
@@ -36,11 +36,12 @@ defmodule CanneryWeb.TagLive.Index do
   def handle_event("delete", %{"id" => id}, socket) do
     tag = Tags.get_tag!(id)
     {:ok, _} = Tags.delete_tag(tag)
-
-    {:noreply, socket |> assign(:tags, list_tags())}
+    socket = socket |> put_flash(:info, "Tag deleted succesfully")
+    {:noreply, socket |> display_tags()}
   end
 
-  defp list_tags do
-    Tags.list_tags()
+  defp display_tags(socket) do
+    tags = Tags.list_tags(socket.assigns.current_user)
+    socket |> assign(tags: tags)
   end
 end

lib/cannery_web/live/tag_live/index.html.leex

@@ -1,4 +1,55 @@
-<h1>Listing Tags</h1>
+<div class="flex flex-col space-y-8 justify-center items-center">
+  <h1 class="title text-2xl title-primary-500">
+    Listing Tags
+  </h1>
+
+  <p class="title text-md text-primary-500">
+    Tags can be added to your containers to help you organize
+  </p>
+
+  <%= if @tags |> Enum.empty?() do %>
+    <div class="flex flex-col space-y-4 justify-center items-center">
+      <h1 class="title text-xl text-primary-500">
+        No tags
+      </h1>
+
+      <%= live_patch to: Routes.tag_index_path(@socket, :new),
+        class: "btn btn-primary" do %>
+        Create your first tag!
+      <% end %>
+    </div>
+  <% else %>
+    <%= live_patch to: Routes.tag_index_path(@socket, :new),
+      class: "btn btn-primary" do %>
+      New Tag
+    <% end %>
+  <% end %>
+
+  <div class="flex flex-row flex-wrap space-x-4 space-y-4">
+    <%= for tag <- @tags do %>
+      <div id="tag-<%= tag.id %>"
+        class="px-8 py-4 flex flex-col justify-center items-center space-y-4
+        border border-gray-400 rounded-lg shadow-lg hover:shadow-md">
+
+        <h1 class="px-4 py-2 rounded-lg title text-xl"
+          style="color: <%= tag.text_color %>; background-color: <%= tag.bg_color %>">
+          <%= tag.name %>
+        </h1>
+
+        <div class="flex space-x-4 justify-center items-center">
+          <%= live_patch "Edit", to: Routes.tag_index_path(@socket, :edit, tag),
+            class: "text-primary-500 link" %>
+
+          <%= link "Delete", to: "#",
+            class: "text-primary-500 link",
+            phx_click: "delete",
+            phx_value_id: tag.id,
+            data: [confirm: "Are you sure you want to delete #{tag.name}?"] %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>
 
 <%= if @live_action in [:new, :edit] do %>
   <%= live_modal CanneryWeb.TagLive.FormComponent,
@@ -6,33 +57,6 @@
     title: @page_title,
     action: @live_action,
     tag: @tag,
-    return_to: Routes.tag_index_path(@socket, :index) %>
+    return_to: Routes.tag_index_path(@socket, :index),
+    current_user: @current_user %>
 <% end %>
-
-<table>
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Bg-color</th>
-      <th>Text-color</th>
-
-      <th></th>
-    </tr>
-  </thead>
-  <tbody id="tags">
-    <%= for tag <- @tags do %>
-      <tr id="tag-<%= tag.id %>">
-        <td><%= tag.name %></td>
-        <td><%= tag.bg_color %></td>
-        <td><%= tag.text_color %></td>
-
-        <td>
-          <span><%= live_patch "Edit", to: Routes.tag_index_path(@socket, :edit, tag) %></span>
-          <span><%= link "Delete", to: "#", phx_click: "delete", phx_value_id: tag.id, data: [confirm: "Are you sure?"] %></span>
-        </td>
-      </tr>
-    <% end %>
-  </tbody>
-</table>
-
-<span><%= live_patch "New Tag", to: Routes.tag_index_path(@socket, :new) %></span>