Implement array input

Author: visar

assets/js/app.js

@@ -17,3 +17,30 @@ import "phoenix_html"
 // paths "./socket" or full ones "web/static/js/socket".
 
 // import socket from "./socket"
+
+window.onload = () => {
+    const removeElement = ({target}) => {
+        let el = document.getElementById(target.dataset.id);
+        let li = el.parentNode;
+        li.parentNode.removeChild(li);
+    }
+    Array.from(document.querySelectorAll(".remove-form-field"))
+        .forEach(el => {
+            el.onclick = (e) => {
+                removeElement(e);
+            }
+        });
+    Array.from(document.querySelectorAll(".add-form-field"))
+        .forEach(el => {
+            el.onclick = ({target: {dataset}}) => {
+                let container = document.getElementById(dataset.container);
+                let index = container.dataset.index;
+                let newRow = dataset.prototype;
+                container.insertAdjacentHTML("beforeend",       newRow.replace(/__name__/g, index));
+                container.dataset.index = parseInt(container.dataset.index) + 1;
+                container.querySelector("a.remove-form-field").onclick = (e) => {
+                    removeElement(e);
+                }
+            }
+        });
+}

lib/many/accounts/accounts.ex

@@ -19,6 +19,7 @@ defmodule Many.Accounts do
   """
   def list_users do
     Repo.all(User)
+    |> Repo.preload(:posts)
   end
 
   @doc """

lib/many/blog/post.ex

@@ -4,7 +4,6 @@ defmodule Many.Blog.Post do
 
   schema "posts" do
     field(:content, :string)
-    field(:title, :string)
 
     belongs_to(:user, Many.Accounts.User)
 
@@ -14,7 +13,7 @@ defmodule Many.Blog.Post do
   @doc false
   def changeset(post, attrs) do
     post
-    |> cast(attrs, [:title, :content])
-    |> validate_required([:title, :content])
+    |> cast(attrs, [:content])
+    |> validate_required([:content])
   end
 end

lib/many_web.ex

@@ -40,6 +40,7 @@ defmodule ManyWeb do
       use Phoenix.HTML
 
       import ManyWeb.ErrorHelpers
+      import ManyWeb.InputHelpers
       import ManyWeb.Gettext
       alias ManyWeb.Router.Helpers, as: Routes
     end

lib/many_web/controllers/user_controller.ex

@@ -10,7 +10,7 @@ defmodule ManyWeb.UserController do
   end
 
   def new(conn, _params) do
-    changeset = Accounts.change_user(%User{posts: [%Many.Blog.Post{}]})
+    changeset = Accounts.change_user(%User{})
     render(conn, "new.html", changeset: changeset)
   end
 
@@ -38,6 +38,7 @@ defmodule ManyWeb.UserController do
   end
 
   def update(conn, %{"id" => id, "user" => user_params}) do
+    user_params = Map.put_new(user_params, "content", nil)
     user = Accounts.get_user!(id)
 
     case Accounts.update_user(user, user_params) do

lib/many_web/templates/user/form.html.eex

@@ -9,13 +9,10 @@
   <%= text_input f, :name %>
   <%= error_tag f, :name %>
 
-  <%= inputs_for f, :posts, [append: existing_records(@user)], fn post_f -> %>
-    <%= label post_f, :title %>
-    <%= text_input post_f, :title %>
-    <%= error_tag post_f, :title %>
-
+  <%= inputs_for f, :posts, [append: existing_records(@conn)], fn post_f -> %>
     <%= label post_f, :content %>
-    <%= textarea post_f, :content %>
+    <%= array_input post_f, :content %>
+    <%= array_add_button post_f, :content %>
     <%= error_tag post_f, :content %>
   <% end %>
 

lib/many_web/templates/user/show.html.eex

@@ -9,7 +9,7 @@
 
   <%= for post <- @user.posts do %>
   <li>
-    <%= post.title %>
+    <%= post.content %>
   </li>
   <% end %>
 </ul>

lib/many_web/views/input_helpers.ex

@@ -0,0 +1,76 @@
+defmodule ManyWeb.InputHelpers do
+  use Phoenix.HTML
+
+  def array_input(form, field, attr \\ []) do
+    default_attr = [
+      count: 1
+    ]
+
+    merged_attr = attr ++ default_attr
+    count = merged_attr[:count]
+    values = [Phoenix.HTML.Form.input_value(form, field)] || []
+
+    values =
+      if Enum.count(values) >= count,
+        do: values,
+        else: List.duplicate("", count - Enum.count(values)) ++ values
+
+    id = Phoenix.HTML.Form.input_id(form, field)
+
+    content_tag :ol,
+      id: container_id(id),
+      class: "input_container",
+      data: [index: Enum.count(values)] do
+      values
+      |> Enum.with_index()
+      |> Enum.map(fn {value, index} ->
+        form_elements(form, field, value, index)
+      end)
+    end
+  end
+
+  def array_add_button(form, field) do
+    id = Phoenix.HTML.Form.input_id(form, field)
+    # {:safe, content}
+    content =
+      form_elements(form, field, "", "__name__")
+      |> safe_to_string
+
+    # |> html_escape
+    data = [
+      prototype: content,
+      container: container_id(id)
+    ]
+
+    link("Add", to: "#", data: data, class: "add-form-field")
+  end
+
+  defp form_elements(form, field, value, index) do
+    type = Phoenix.HTML.Form.input_type(form, field)
+    id = Phoenix.HTML.Form.input_id(form, field)
+    new_id = id <> "_#{index}"
+
+    input_opts = [
+      name: new_field_name(form, field, index),
+      value: value,
+      id: new_id,
+      class: "form-control"
+    ]
+
+    content_tag :li do
+      [
+        apply(Phoenix.HTML.Form, type, [form, field, input_opts]),
+        link("Remove", to: "#", data: [id: new_id], title: "Remove", class: "remove-form-field")
+      ]
+    end
+  end
+
+  defp container_id(id), do: id <> "_container"
+
+  defp new_field_name(form, field, index) do
+    name = form.name |> String.slice(0..-4)
+    "#{name}[#{index}][#{field}]"
+
+    # Phoenix.HTML.Form.input_name(form, field) <> "[]"
+  end
+end

lib/many_web/views/user_view.ex

@@ -1,7 +1,19 @@
 defmodule ManyWeb.UserView do
   use ManyWeb, :view
 
-  def existing_records(user) do
-    if user.posts == [], do: [%Many.Blog.Post{}], else: []
+  def existing_records(conn) do
+    cond do
+      Map.has_key?(conn.assigns, :user) and conn.assigns.user.posts == [] ->
+        [%Many.Blog.Post{}]
+
+      Map.has_key?(conn.assigns, :user) and conn.assigns.user.posts != [] ->
+        []
+
+      not Map.has_key?(conn.assigns, :user) ->
+        [%Many.Blog.Post{}]
+
+      true ->
+        []
+    end
   end
 end

priv/repo/migrations/20180706023617_drop_textarea_comments.exs

@@ -0,0 +1,9 @@
+defmodule Many.Repo.Migrations.DropTextareaComments do
+  use Ecto.Migration
+
+  def change do
+    alter table(:posts) do
+      remove(:title)
+    end
+  end
+end