calebgasser

calebgasser

How would i go about creating an input field for tags?

I may be going about this the wrong way but I can’t seem to figure out a good way to handle input for “tags” in a blog post. I’ve looked at using .inputs_for but I don’t want to create an input field for every tag. Ideally, it would just be a single text input that spits the value on spaces and transforms those into “tag” structs. Maybe this would be better to do outside a form?

I’ve been messing with it for hours and this doesn’t seem like it should be that difficult. Hopefully someone can point out an easier way I’m missing. Here is what I have right now (back to square one because the handful of things I tried hadn’t worked).

form_component.ex

#...
  @impl true
  def render(assigns) do
    ~H"""
    <div>
      <.header>
        <%= @title %>
        <:subtitle>by <%= @post.author %></:subtitle>
      </.header>

      <.simple_form
        :let={form}
        for={@form}
        id="post-form"
        as={"post_form"}
        phx-target={@myself}
        phx-change="validate"
        phx-submit="save"
      >
        <.input field={@form[:title]} type="text" label="Title" />
        <.input field={@form[:tags]} type="text" label="Tags"/> # <<<< This doesn't work, of course.
        <.input field={@form[:author]} type="hidden" />
        <.input field={@form[:body]} type="textarea" label="Body" />
        <:actions>
          <.button phx-disable-with="Saving...">Save Post</.button>
        </:actions>
      </.simple_form>
    </div>
    """
  end
# ...

post.ex

defmodule Personal.Blog.Post do
  use Ecto.Schema
  import Ecto.Changeset

  schema "posts" do
    field :author, :string
    field :body, :string
    field :title, :string
    field :views, :integer, default: 0
    many_to_many(:tags, Personal.Blog.Tag, join_through: "post_tags",  on_replace: :delete)

    timestamps(type: :utc_datetime)
  end

  @doc false
  def changeset(post, attrs) do
    post
    |> cast(attrs, [:title, :author, :body, :views])
    |> validate_required([:title, :author, :body, :views])
  end
end

tag.ex

defmodule Personal.Blog.Tag do
  use Ecto.Schema
  import Ecto.Changeset

  schema "tags" do
    field :name, :string, default: ""
    many_to_many(:posts, Personal.Blog.Post, join_through: "post_tags", on_replace: :delete)

    timestamps(type: :utc_datetime)
  end

  @doc false
  def changeset(tag, attrs) do
    tag
    |> cast(attrs, [:name])
    |> validate_required([:name])
  end
end

post_tag.ex

defmodule Personal.Blog.PostTag do
  use Ecto.Schema
  import Ecto.Changeset

  schema "post_tags" do
    belongs_to(:posts, Personal.Blog.Post)
    belongs_to(:tags, Personal.Blog.Tag)

    timestamps(type: :utc_datetime)
  end

  @doc false
  def changeset(post_tag, attrs) do
    post_tag
    |> cast(attrs, [:post_id, :tag_id])
    |> validate_required([:post_id, :tag_id])
  end
end

Marked As Solved

codeanpeace

codeanpeace

There’s a bit to unpack here as tagging implementations often vary to support different use cases. For example, do you want that text input to also act like a typeahead with suggestions/autocomplete for existing tags? Do you allow creations of new tags on the fly? Do you want to support removing added tags?

Here’s a relevant article on Buy paugramming.com – Premium Expired .com Domain on GoDaddy | ExpiredDomains.com that demonstrates how to create a client side hook which watches for comma seperated tags. And here’s previous discussion on Building a dynamic select component (in Phoenix LiveView?) - #4 by kartheek and filtering/narrowing down options based on a typeahead input.

Also Liked

trisolaran

trisolaran

You can also give LiveSelect a try. It doesn’t split values on spaces though.

calebgasser

calebgasser

This looks promising, I don’t want to have to reinvent the wheel if there is a good solution out there for it. Although, if it’s a simple thing to impliement it might be better to avoid the dependency. I’ll give it another shot after going through the resources people have provided me here and if it turns out to be too much work I’ll turn to this. Thanks a ton, I appreciate the resource!

Where Next?

Popular in Questions Top

nobody
How to bind a phoenix app to a specific ip address? could not find anything about that, nowhere, unfortunately, but for me this is quite...
New
qwerescape
Is there a way to get the call stack or stack trace at any point in the code? Not from exceptions, but an expression that returns how the...
New
tduccuong
Hi, is there any work on GUI with Elixir, that is similar to Electron/Javascript? My idea is to bundle Phoenix and BEAM into a single se...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
vac
Hi, I’m quite new in Elixir and I’m trying to format a string to a PEM format. I have the certificate value like MIIDBTCCAe2...... and I...
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
yawaramin
In the Dialyzer docs ( dialyzer — OTP 29.0.2 (dialyzer 6.0.1) ), there is a way to turn off a specific warning for a function: -dialyzer...
New

Other popular topics Top

mcarvalho
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
vrod
I am using the Starship cross-shell prompt – it seems pretty nice, but I get some errors: [WARN] - (starship::utils): Executing command ...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New
svb
Hi! Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New

Latest on Elixir Forum

Elixir Forum

We're in Beta

About us Mission Statement