add tags

lib/cannery/tags.ex

@@ -4,7 +4,7 @@ defmodule Cannery.Tags do
   """
 
   import Ecto.Query, warn: false
-  alias Cannery.Repo
+  alias Cannery.{Accounts, Repo}
 
   alias Cannery.Tags.Tag
 
@@ -17,8 +17,15 @@ defmodule Cannery.Tags do
       [%Tag{}, ...]
 
   """
-  def list_tags do
-    Repo.all(Tag)
+  @spec list_tags(Accounts.User.t()) :: [Tag.t()]
+  def list_tags(%{id: user_id}) do
+    list_tags(user_id)
+  end
+
+  def list_tags(user_id) do
+    Repo.all(
+      from t in Tag, where: t.user_id == ^user_id
+    )
   end
 
   @doc """
@@ -35,6 +42,7 @@ defmodule Cannery.Tags do
       ** (Ecto.NoResultsError)
 
   """
+  @spec get_tag!(Ecto.UUID.t()) :: Tag.t()
   def get_tag!(id), do: Repo.get!(Tag, id)
 
   @doc """
@@ -49,10 +57,9 @@ defmodule Cannery.Tags do
       {:error, %Ecto.Changeset{}}
 
   """
-  def create_tag(attrs \\ %{}) do
-    %Tag{}
-    |> Tag.changeset(attrs)
-    |> Repo.insert()
+  @spec create_tag(map()) :: {:ok, Tag.t()} | {:error, Ecto.Changeset.t()}
+  def create_tag(attrs) do
+    %Tag{} |> Tag.changeset(attrs) |> Repo.insert()
   end
 
   @doc """
@@ -67,10 +74,9 @@ defmodule Cannery.Tags do
       {:error, %Ecto.Changeset{}}
 
   """
-  def update_tag(%Tag{} = tag, attrs) do
-    tag
-    |> Tag.changeset(attrs)
-    |> Repo.update()
+  @spec update_tag(Tag.t(), map()) :: {:ok, Tag.t()} | {:error, Ecto.Changeset.t()}
+  def update_tag(tag, attrs) do
+    tag |> Tag.changeset(attrs) |> Repo.update()
   end
 
   @doc """
@@ -85,7 +91,8 @@ defmodule Cannery.Tags do
       {:error, %Ecto.Changeset{}}
 
   """
-  def delete_tag(%Tag{} = tag) do
+  @spec delete_tag(Tag.t()) :: {:ok, Tag.t()} | {:error, Ecto.Changeset.t()}
+  def delete_tag(tag) do
     Repo.delete(tag)
   end
 
@@ -98,7 +105,9 @@ defmodule Cannery.Tags do
       %Ecto.Changeset{data: %Tag{}}
 
   """
-  def change_tag(%Tag{} = tag, attrs \\ %{}) do
+  @spec change_tag(Tag.t()) :: Ecto.Changeset.t()
+  @spec change_tag(Tag.t(), map()) :: Ecto.Changeset.t()
+  def change_tag(tag, attrs \\ %{}) do
     Tag.changeset(tag, attrs)
   end
 end

lib/cannery/tags/tag.ex

@@ -16,7 +16,7 @@ defmodule Cannery.Tags.Tag do
   @doc false
   def changeset(tag, attrs) do
     tag
-    |> cast(attrs, [:name, :bg_color, :text_color])
-    |> validate_required([:name, :bg_color, :text_color])
+    |> cast(attrs, [:name, :bg_color, :text_color, :user_id])
+    |> validate_required([:name, :bg_color, :text_color, :user_id])
   end
 end

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" %>
+  <%= 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 %>
+  <%= 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 %>
+  <%= 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>