DEV Community: Ricardo Ruwer

Load specific JS files in Elixir and Phoenix

Ricardo Ruwer — Mon, 29 Jul 2019 18:51:01 +0000

First of all, I'd like to say that this post is based on that one:
http://codeloveandboards.com/blog/2016/04/26/page-specific-javascript-in-phoenix-framework-pt-2/
But I made some changes to (IMO) simplify it...

So, let's start:

First, we can add in our file assets/js/app.js this code:

// Import specific page views
import './views/init';

And now we'll create this init.js file in assets/js/views/init.js and add this code:

import loadView from './loader';

function handleDOMContentLoaded() {
  const viewName = document.body.dataset.jsViewPath;

  const view = loadView(viewName);
  view.mount();

  window.currentView = view;
}

function handleDocumentUnload() {
  window.currentView.unmount();
}

window.addEventListener('DOMContentLoaded', handleDOMContentLoaded, false);
window.addEventListener('unload', handleDocumentUnload, false);

And now we'll create this loader.js file mentioned on the import, so create the file assets/js/views/loader.js and add this code:

import MainView from './main';

export default function loadView(viewPath) {
  if (!viewPath) return new MainView();

  const ViewClass = require('./' + viewPath);
  return new ViewClass.default();
}

And now this other file called main.js in assets/js/views/main.js with this code:

export default class MainView {
  // It will be executed when the document loads...
  mount() { }

  // It will be executed when the document unloads...
  unmount() { }
}

Nice! :)
Now in our controller, we can return a new value to the view, informing the directory of our js file, something like this:

conn
|> assign(:js_view, "posts/index")
|> render("index.html")

And now in our layout file, that may be in templates/layout/app.html.eex we can add this code in our <body> tag:

<body data-js-view-path="<%= assigns[:js_view] %>">

And it's ready! :)
So, we'll only try to fetch the JS file is we set the js_view on the controller.

Now, to use it, you can create a file in assets/js/views/posts/index.js and add code similar to this:

import MainView from '../main';

export default class View extends MainView {
  mount() {
    // Add your JS code here...
    console.log('UHULL! It works!')

    super.mount();
  }

  unmount() {
    super.unmount();
  }
}

✨

Create a paginator using Elixir and Phoenix

Ricardo Ruwer — Sun, 21 Jul 2019 21:48:27 +0000

I'm writing this for the same reason I wrote about creating a sitemap.xml, I could find only solutions using libs, but it's simple, we don't need a lib to do this. So I made this solution and I hope it helps you.

First, we can create a new file like lib/myapp/paginator.ex:

defmodule MyApp.Paginator do
  @moduledoc """
  Paginate your Ecto queries.

  Instead of using: `Repo.all(query)`, you can use: `Paginator.page(query)`.
  To change the page you can pass the page number as the second argument.

  ## Examples

      iex> Paginator.paginate(query, 1)
      [%Item{id: 1}, %Item{id: 2}, %Item{id: 3}, %Item{id: 4}, %Item{id: 5}]

      iex> Paginator.paginate(query, 2)
      [%Item{id: 6}, %Item{id: 7}, %Item{id: 8}, %Item{id: 9}, %Item{id: 10}]

  """

  import Ecto.Query

  alias MyApp.Repo

  @results_per_page 12

  def paginate(query, page) when is_nil(page) do
    paginate(query, 1)
  end

  def paginate(query, page) when is_binary(page) do
    paginate(query, String.to_integer(page))
  end

  def paginate(query, page) do
    results = execute_query(query, page)
    total_results = count_total_results(query)
    total_pages = count_total_pages(total_results)

    %{
      current_page: page,
      results_per_page: @results_per_page,
      total_pages: total_pages,
      total_results: total_results,
      list: results
    }
  end

  defp execute_query(query, page) do
    query
    |> limit(^@results_per_page)
    |> offset((^page - 1) * ^@results_per_page)
    |> Repo.all()
  end

  defp count_total_results(query) do
    Repo.aggregate(query, :count, :id)
  end

  defp count_total_pages(total_results) do
    total_pages = ceil(total_results / @results_per_page)

    if total_pages > 0, do: total_pages, else: 1
  end
end

Now we'll create the logic to be used in the front-end. So we can create a file like lib/myapp_web/helpers/paginator_helper.ex:

defmodule MyAppWeb.Helpers.PaginatorHelper do
  @moduledoc """
  Renders the pagination with a previous button, the pages, and the next button.
  """

  use Phoenix.HTML

  def render(conn, data, class: class) do
    first = prev_button(conn, data)
    pages = page_buttons(conn, data)
    last = next_button(conn, data)

    content_tag(:ul, [first, pages, last], class: class)
  end

  defp prev_button(conn, data) do
    page = data.current_page - 1
    disabled = data.current_page == 1
    params = build_params(conn, page)

    content_tag(:li, disabled: disabled) do
      link to: "?#{params}", rel: "prev" do
        "<"
      end
    end
  end

  defp page_buttons(conn, data) do
    for page <- 1..data.total_pages do
      class = if data.current_page == page, do: "active"
      disabled = data.current_page == page
      params = build_params(conn, page)

      content_tag(:li, class: class, disabled: disabled) do
        link(page, to: "?#{params}")
      end
    end
  end

  defp next_button(conn, data) do
    page = data.current_page + 1
    disabled = data.current_page >= data.total_pages
    params = build_params(conn, page)

    content_tag(:li, disabled: disabled) do
      link to: "?#{params}", rel: "next" do
        ">"
      end
    end
  end

  defp build_params(conn, page) do
    conn.query_params |> Map.put(:page, page) |> URI.encode_query()
  end
end

And it's basically all we need.

When the page isn't available, it will be disabled. I also added some CSS like this:

.paginator-list li[disabled] a {
  opacity: .4;
  pointer-events: none;
}

So now let's suppose we have a method to list all the posts in a blog, it'll be something like this:

alias MyApp.Paginator

def list_paged_posts(params) do
  Paginator.paginate(Post, params["page"])
end

And in our Controller you can use this:

def index(conn, params)
  posts = Post.list_paged_posts(params)

  render(conn, "index.html", posts: posts)
end

And in our HTML you can use this:

<%= for post <- @posts.list do %>
  <%= post.title %>
<% end %>

<%= MyApp.Helpers.PaginatorHelper.render(@conn, @posts, class: "paginator-list") %>

And that's all :)

But don't forget the tests! So, we can create the file test/myapp/paginator_test.exs:

defmodule MyApp.PaginatorTest do
  use MyApp.DataCase

  alias MyApp.Post
  alias MyApp.Paginator

  describe "when the page is nil" do
    test "sets the page to the first page" do
      create_posts(1)

      paginator = Paginator.paginate(Post, nil)

      assert paginator.current_page == 1
    end
  end

  describe "when the page is a string" do
    test "sets the page to an integer" do
      create_posts(1)

      paginator = Paginator.paginate(Post, "1")

      assert paginator.current_page == 1
    end
  end

  test "paginate as 12 results per page" do
    create_posts(15)

    paginator_first_page = Paginator.paginate(Post, 1)
    assert length(paginator_first_page.list) == 12

    paginator_second_page = Paginator.paginate(Post, 2)
    assert length(paginator_second_page.list) == 3
  end

  test "prints pagination info" do
    posts = create_posts(10)

    paginator = Paginator.paginate(Post, 1)

    assert paginator.current_page == 1
    assert paginator.results_per_page == 12
    assert paginator.total_pages == 1
    assert paginator.total_results == 10

    Enum.each(posts, fn post ->
      assert post in paginator.list
    end)
  end

  defp create_posts(quantity) do
    for n <- 1..quantity do
      # Here you create a new Post!
      post_fixture()
    end
  end
end

And also the test file for the paginator_helper in test/myapp_web/helpers/paginator_helper_test.exs with something like this:

defmodule MyAppWeb.Helpers.PaginatorHelperTest do
  use MyAppWeb.ConnCase

  import Phoenix.HTML, only: [safe_to_string: 1]

  alias MyApp.Post
  alias MyAppWeb.Helpers.PaginatorHelper

  describe "render/3" do
    test "renders the paginator" do
      conn = get(build_conn(), "/?q=paginator+elixir")
      paginated_results = Posts.list_paged_posts(%{page: 1})

      paginator =
        conn
        |> PaginatorHelper.render(paginated_results, class: "paginator")
        |> safe_to_string()

      assert paginator ==
               "<ul class=\"paginator\">" <>
                 "<li disabled>" <>
                 "<a href=\"?page=0&amp;q=paginator+elixir\" rel=\"prev\"><</a>" <>
                 "</li>" <>
                 "<li class=\"active\" disabled>" <>
                 "<a href=\"?page=1&amp;q=paginator+elixir\">1</a>" <>
                 "</li>" <>
                 "<li disabled>" <>
                 "<a href=\"?page=2&amp;q=paginator+elixir\" rel=\"next\">></a>" <>
                 "</li>" <>
                 "</ul>"
    end
  end
end

And that's it. Hope it helps you :)

Many to many associations in Elixir and Phoenix

Ricardo Ruwer — Thu, 18 Jul 2019 13:01:46 +0000

I was creating the website of a construction company, so I had 2 schemas: properties and amenities. One property can have many amenities (like pool, barbecue grill, playground, etc), one amenity can belong to many properties.

Another popular example similar to this one is posts and tags.

So my idea was: I can create a lot of amenities, and in the property form I list these amenities in checkboxes to the user check which one the property has.

I had some bad times trying to do that, so that's why I created this post, so I may help someone...

OK, so I created this schema called properties_amenities:

defmodule MyApp.PropertiesAmenities do
  use Ecto.Schema

  import Ecto.Changeset

  @primary_key false
  schema "properties_amenities" do
    belongs_to :property, MyApp.Properties.Property
    belongs_to :amenity, MyApp.Amenities.Amenity
  end

  def changeset(struct, params \\ %{}) do
    struct
    |> cast(params, [:property_id, :amenity_id])
    |> validate_required([:property_id, :amenity_id])
  end
end

And then I added it to the properties schema:

schema "properties" do
  # ...

  many_to_many(:amenities, MyApp.Amenities.Amenity, join_through: MyApp.PropertiesAmenities)

  # ...
end

And the amenities schema:

schema "amenities" do
  # ...

  many_to_many(:properties, MyApp.Properties.Property, join_through: MyApp.PropertiesAmenities)

  # ...
end

OK, now I created a helper to list all the amenities on the property form, so in the file lib/myapp_web/helpers/checkbox_helper.ex:

defmodule ConstrutoraLcHiertWeb.Helpers.CheckboxHelper do
  use Phoenix.HTML

  @doc """
  Renders multiple checkboxes.

  ## Example

      iex> multiselect_checkboxes(
             f,
             :amenities,
             Enum.map(@amenities, fn c -> { c.name, c.id } end),
             selected: Enum.map(@changeset.data.amenities,&(&1.id))
           )
      <div class="checkbox">
        <label>
          <input name="property[amenities][]" id="property_amenities_1" type="checkbox" value="1" checked>
          <input name="property[amenities][]" id="property_amenities_2" type="checkbox" value="2">
        </label>
      </div
  """
  def multiselect_checkboxes(form, field, options, opts \\ []) do
    {selected, _} = get_selected_values(form, field, opts)
    selected_as_strings = Enum.map(selected, &"#{&1}")

    for {value, key} <- options, into: [] do
      content_tag(:label, class: "checkbox-inline") do
        [
          tag(:input,
            name: input_name(form, field) <> "[]",
            id: input_id(form, field, key),
            type: "checkbox",
            value: key,
            checked: Enum.member?(selected_as_strings, "#{key}")
          ),
          value
        ]
      end
    end
  end

  defp get_selected_values(form, field, opts) do
    {selected, opts} = Keyword.pop(opts, :selected)
    param = field_to_string(field)

    case form do
      %{params: %{^param => sent}} ->
        {sent, opts}

      _ ->
        {selected || input_value(form, field), opts}
    end
  end

  defp field_to_string(field) when is_atom(field), do: Atom.to_string(field)
  defp field_to_string(field) when is_binary(field), do: field
end

And added it to lib/myapp_web.ex:

def view do
  quote do
    # ...

    import MyAppWeb.Helpers.CheckboxHelper

    # ...
  end
end

Now I returned the amenities to the form of properties, so, in the properties_controller#new I added:

def new(conn, _params) do
  # ...

  amenities = Amenities.list_amenities()

  render("new.html", changeset: changeset, amenities: amenities)
end

And used the new function to render multi-select checkboxes in the new.html.eex file:

<div class="form-group">
  <%=
    multiselect_checkboxes(
      f,
      :amenities,
      Enum.map(@amenities, fn a -> { a.name, a.id } end),
      selected: Enum.map(@changeset.data.amenities,&(&1.id))
    )
  %>
</div>

Now the view is rendering the checkboxes :)

OK, now we have to create a new function to create the association between properties and amenities, to do this, I created this function in the file containing all the function related to properties:

defp maybe_put_amenities(changeset, []), do: changeset

defp maybe_put_amenities(changeset, attrs) do
  amenities = Amenities.get_amenities(attrs["amenities"])

  Ecto.Changeset.put_assoc(changeset, :amenities, amenities)
end

And this function in the file related to amenities:

def get_amenities(nil), do: []

def get_amenities(ids) do
  Repo.all(from a in MyApp.Amenities.Amenity, where: a.id in ^ids)
end

And added this new method maybe_put_amenities in the function that creates a new property, like this:

def create_property(attrs) do
  %Property{}
  |> Property.changeset(attrs)
  |> maybe_put_amenities(attrs)
  |> Repo.insert()
end

So now, when the access the properties/new page, it will render the form and all the amenities. When we select the amenities and click on the Submit button, it will go the properties_controller#create and execute the code like:

Properties.create_property(params)

And it will execute our function maybe_put_amenities that will list all the amenities using the function Amenities.get_amenities/1 and put_assoc in every amenity found. And then save it. And it's done. It works.

But we still may have a problem when trying to submit the form but it got an error. For example, if the user selects some amenities, click on submit but it got an error, and we render again the new page, the previously selected amenities will not be selected anymore, so to fix that, we can do this in the properties_controller.ex:

def create(conn, %{"property" => params}) do
  case Properties.create_property(params) do
    {:ok, property} ->
      conn
      |> put_flash(:info, "Success!")
      |> redirect(to: "/")

    {:error, changeset} ->
      data = Properties.load_amenities(changeset.data)
      amenities = Amenities.list_amenities()

      conn
      |> put_flash(:error, "Error!"))
      |> render("new.html", changeset: %{changeset | data: data}, amenities: amenities)
  end
end

And create this new method in the file responsible for properties:

def load_amenities(property), do: Repo.preload(property, :amenities)

And that's all. It looks like a lot of steps but I hope I can help someone :)

SVG icons in Elixir and Phoenix

Ricardo Ruwer — Thu, 18 Jul 2019 12:51:06 +0000

Here's the best way I can find to use SVG icons in Elixir and Phoenix framework:

First, you can create a file lib/myapp_web/helpers/icon_helper.ex:

defmodule MyAppWeb.Helpers.IconHelper do
  @moduledoc """
  Give some icons to be used on templates.
  """

  use Phoenix.HTML

  alias MyAppWeb.Router.Helpers, as: Routes

  def icon_tag(conn, name, opts \\ []) do
    classes = Keyword.get(opts, :class, "") <> " icon"

    content_tag(:svg, class: classes) do
      tag(:use, "xlink:href": Routes.static_path(conn, "/images/icons.svg#" <> name))
    end
  end
end

And then in your file lib/myapp_web.ex you can import this helper:

def view do
  quote do
    # ...

    import MyAppWeb.Helpers.IconHelper

    # ...
  end
end

Now let's create our icons in the file assets/static/images/icons.svg:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg id="active" viewBox="0 0 426 426">
    <path d="M213.333,0C95.518,0,0,95.514,0,213.333s95.518,213.333,213.333,213.333 c117.828,0,213.333-95.514,213.333-213.333S331.157,0,213.333,0z M174.199,322.918l-93.935-93.931l31.309-31.309l62.626,62.622 l140.894-140.898l31.309,31.309L174.199,322.918z"/>
  </svg>

  <svg id="right-arrow" viewBox="0 0 31 31">
    <path d="M21.205,5.007c-0.429-0.444-1.143-0.444-1.587,0c-0.429,0.429-0.429,1.143,0,1.571l8.047,8.047H1.111 C0.492,14.626,0,15.118,0,15.737c0,0.619,0.492,1.127,1.111,1.127h26.554l-8.047,8.032c-0.429,0.444-0.429,1.159,0,1.587 c0.444,0.444,1.159,0.444,1.587,0l9.952-9.952c0.444-0.429,0.444-1.143,0-1.571L21.205,5.007z"/>
  </svg>
</svg>

I added 2 icons here, the active and the right-arrow, but you can add as many as you want.

Now all your views will have the icon_tag/3 so you can use in your HTML:

<%= icon_tag(@conn, "active", class: "something") %>

<%= icon_tag(@conn, "right-arrow", class: "something") %>

You can also add in your CSS file something like:

.icon {
  fill: currentColor;
}

Then the SVG icon will be filled with the color used in your CSS :)
(As long as you don't use one fill="color" inside the <path> in your icons.svg)

And now, to finish, we can create a test file for the IconHelper module:

defmodule MyAppWeb.Helpers.IconHelperTest do
  use MyAppWeb.ConnCase, async: true

  import Phoenix.HTML, only: [safe_to_string: 1]

  alias MyAppWeb.Helpers.IconHelper

  test "icon_tag/2 renders a svg icon" do
    image =
      MyAppWeb.Endpoint
      |> IconHelper.icon_tag("active", class: "something")
      |> safe_to_string()

    assert image ==
             "<svg class=\"something icon\">" <>
               "<use xlink:href=\"/images/icons.svg#active\">" <>
               "</svg>"
  end
end

Thank you @andrielfn for teaching it to me :)

Create dynamic sitemap.xml in Elixir and Phoenix

Ricardo Ruwer — Thu, 18 Jul 2019 12:37:50 +0000

I created a website for a construction company where they can sell their properties, I built it using Elixir and the Phoenix framework.

So I was searching on Google how to implement a sitemap.xml but all I can find was this lib called sitemap, so I tried it but...

On my website, I have a single page for each property that is created, and in this lib, I have to run a command to generate a new XML file every time I create a property. Also, I can't change the <lastmod> because it always uses the date where I generated the sitemap.

So I thought to create my own dynamic sitemap.xml and I will share with you how I did it, it's very simple :)

First of all, I created my new route on the file router.ex:

get "/sitemap.xml", SitemapController, :index

And then I created a new file lib/myapp_web/controllers/sitemap_controller.ex with this code:

defmodule MyAppWeb.SitemapController do
  use MyAppWeb, :controller

  plug :put_layout, false

  alias MyApp.Properties

  def index(conn, _params) do
    properties = Properties.list_properties()

    conn
    |> put_resp_content_type("text/xml")
    |> render("index.xml", properties: properties)
  end
end

Cool :) Now we have to create the file lib/myapp_web/templates/sitemap/index.xml.eex that will be our sitemap:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc><%= Routes.home_url(@conn, :index) %></loc>
    <changefreq>weekly</changefreq>
    <priority>0.5</priority>
  </url>
  <url>
    <loc><%= Routes.about_url(@conn, :index) %></loc>
    <changefreq>never</changefreq>
    <priority>0.3</priority>
  </url>
  <url>
    <loc><%= Routes.apartment_url(@conn, :index) %></loc>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc><%= Routes.house_url(@conn, :index) %></loc>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc><%= Routes.lot_url(@conn, :index) %></loc>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc><%= Routes.contact_url(@conn, :index) %></loc>
    <changefreq>never</changefreq>
    <priority>0.5</priority>
  </url>
  <%= for property <- @properties do %>
    <url>
      <loc><%= Routes.property_url(@conn, :show, property.slug) %></loc>
      <lastmod><%= format_date(property.updated_at) %></lastmod>
      <changefreq>weekly</changefreq>
      <priority>1</priority>
    </url>
  <% end %>
</urlset>

You can see that I added manually all the routes I have on my website: home, about, apartments, houses, lots and contact. And then I added all the dynamic pages for each property I have created.

And I have the <lastmod> with the correct date, using the updated_at. But we still have to create this function called format_date so we create the file lib/myapp_web/views/sitemap_view.ex:

defmodule MyAppWeb.SitemapView do
  use MyAppWeb, :view

  def format_date(date) do
    date
    |> DateTime.from_naive!("Etc/UTC")
    |> DateTime.to_date()
    |> to_string()
  end
end

And that's it! Now you can now add this URL: yoursite.com/sitemap.xml on the Google Console and it'll just work fine :)

But don't forget to add some tests for this! So we can do this on the file test/myapp_web/controllers/sitemap_controller_test.exs:

defmodule MyAppWeb.SitemapControllerTest do
  use MyAppWeb.ConnCase

  describe "GET /sitemap.xml" do
    test "accesses the sitemap in format xml", %{conn: conn} do
      property = property_fixture()

      conn = get(conn, "/sitemap.xml")

      assert response_content_type(conn, :xml)
      assert response(conn, 200) =~ ~r/<loc>.*#{property.slug}<\/loc>/
    end
  end
end

In this function property_fixture() you have to create a new property.

And then a test to our view in test/myapp_web/views/sitemap_view_test.exs:

defmodule MyAppWeb.SitemapViewTest do
  use MyAppWeb.ConnCase, async: true

  alias MyAppWeb.SitemapView

  test "format_date/1" do
    assert SitemapView.format_date(~N[2019-07-08 13:15:00]) == "2019-07-08"
  end
end

And that's all! :)