# =============================================================================
# ASH FORM BUILDER - TODO APP INTEGRATION GUIDE
# =============================================================================
# Complete step-by-step guide: From mix.exs to LiveView CRUD
# =============================================================================
# =============================================================================
# STEP 1: ADD DEPENDENCIES (mix.exs)
# =============================================================================
defmodule TodoApp.MixProject do
use Mix.Project
def project do
[
app: :todo_app,
version: "0.1.0",
elixir: "~> 1.17",
elixirc_paths: elixirc_paths(Mix.env()),
start_permanent: Mix.env() == :prod,
aliases: aliases(),
deps: deps()
]
end
def application do
[
mod: {TodoApp.Application, []},
extra_applications: [:logger, :runtime_tools]
]
end
defp elixirc_paths(:test), do: ["lib", "test/support"]
defp elixirc_paths(_), do: ["lib"]
defp deps do
[
# Core Ash Framework
{:ash, "~> 3.0"},
{:ash_phoenix, "~> 2.0"},
{:ash_postgres, "~> 2.0"},
# Phoenix
{:phoenix, "~> 1.7.14"},
{:phoenix_html, "~> 4.0"},
{:phoenix_live_reload, "~> 1.2", only: :dev},
{:phoenix_live_view, "~> 1.0.0"},
{:floki, ">= 0.30.0", only: :test},
{:phoenix_live_reload, "~> 1.2", only: :dev},
# ASH FORM BUILDER ⭐
{:ash_form_builder, path: "../ash_form_builder"}, # Local path
# OR from git: {:ash_form_builder, git: "https://github.com/nagieeb0/ash_form_builder.git"},
# OR from hex (when published): {:ash_form_builder, "~> 0.1.0"}
# UI Components (Optional - for MishkaTheme)
{:mishka_chelekom, "~> 0.0.8"},
# Database
{:ecto_sql, "~> 3.10"},
{:postgrex, ">= 0.0.0"},
# Other
{:telemetry_metrics, "~> 1.0"},
{:telemetry_poller, "~> 1.0"},
{:gettext, "~> 0.20"},
{:jason, "~> 1.2"},
{:dns_cluster, "~> 0.1.1"},
{:bandit, "~> 1.5"}
]
end
defp aliases do
[
setup: ["deps.get", "ecto.setup", "assets.setup", "assets.build"],
"ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
"ecto.reset": ["ecto.drop", "ecto.setup"],
test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"]
]
end
end
# =============================================================================
# STEP 2: CONFIGURATION (config/config.exs)
# =============================================================================
import Config
# Configure AshFormBuilder theme
config :ash_form_builder, :theme, AshFormBuilder.Theme.MishkaTheme
# OR use default: config :ash_form_builder, :theme, AshFormBuilder.Themes.Default
# Configure Ash
config :ash, :include_embedded_source_by_default?, true
# Configure your endpoint
config :todo_app, TodoAppWeb.Endpoint,
url: [host: "localhost"],
adapter: Bandit.PhoenixAdapter,
render_errors: [
formats: [html: TodoAppWeb.ErrorHTML, json: TodoAppWeb.ErrorJSON],
layout: false
],
pubsub_server: TodoApp.PubSub,
live_view: [signing_salt: "your-signing-salt"]
# Configure your Repo
config :todo_app, TodoApp.Repo,
database: Path.expand("../todo_app_dev.db", Path.dirname(__ENV__.file)),
stacktrace: true,
show_sensitive_data_on_connection_error: true,
pool_size: 10,
pool: Ecto.Adapters.SQL.Sandbox
# Configure Ash domains
config :todo_app, ash_domains: [TodoApp.Todos]
# =============================================================================
# STEP 3: ASH DOMAIN (lib/todo_app/todos.ex)
# =============================================================================
defmodule TodoApp.Todos do
@moduledoc """
Todos domain - manages tasks, categories, and tags.
## Code Interfaces
This domain generates form helper functions via `define :form_to_*`:
- `TodoApp.Todos.Task.Form.for_create/1`
- `TodoApp.Todos.Task.Form.for_update/2`
These helpers integrate seamlessly with AshFormBuilder.
"""
use Ash.Domain
resources do
# Task resource with form code interfaces
resource TodoApp.Todos.Task do
# Standard CRUD
define :list_tasks, action: :read
define :get_task, action: :read, get_by: [:id]
define :destroy_task, action: :destroy
# ⭐ Form Code Interfaces - generates Form helpers
define :form_to_create_task, action: :create
define :form_to_update_task, action: :update
end
# Category resource
resource TodoApp.Todos.Category do
define :list_categories, action: :read
define :search_categories, action: :read
define :form_to_create_category, action: :create
end
# Tag resource (creatable on-the-fly)
resource TodoApp.Todos.Tag do
define :list_tags, action: :read
define :search_tags, action: :read
define :form_to_create_tag, action: :create
end
end
end
# =============================================================================
# STEP 4: ASH RESOURCES
# =============================================================================
# ─────────────────────────────────────────────────────────────────────────────
# 4.1 TASK RESOURCE (Main Todo Item)
# ─────────────────────────────────────────────────────────────────────────────
defmodule TodoApp.Todos.Task do
@moduledoc """
Task resource - represents a single todo item.
Features:
- Title, description, due date
- Priority and status enums
- Many-to-many with Categories
- Many-to-many with Tags (creatable!)
"""
use Ash.Resource,
domain: TodoApp.Todos,
data_layer: AshPostgres.DataLayer,
extensions: [AshFormBuilder] # ⭐ Required for AshFormBuilder
postgres do
table "tasks"
repo TodoApp.Repo
end
# ───────────────────────────────────────────────────────────────────────────
# Attributes
# ───────────────────────────────────────────────────────────────────────────
attributes do
uuid_primary_key :id
attribute :title, :string do
allow_nil? false
constraints min_length: 1, max_length: 200
end
attribute :description, :text do
allow_nil? true
end
attribute :completed, :boolean do
default false
end
attribute :priority, :atom do
constraints one_of: [:low, :medium, :high, :urgent]
default :medium
end
attribute :status, :atom do
constraints one_of: [:pending, :in_progress, :done]
default :pending
end
attribute :due_date, :date do
allow_nil? true
end
timestamps()
end
# ───────────────────────────────────────────────────────────────────────────
# Relationships
# ───────────────────────────────────────────────────────────────────────────
relationships do
# Many-to-many with Categories (select from existing)
many_to_many :categories, TodoApp.Todos.Category do
through TodoApp.Todos.TaskCategory
source_attribute_on_join_resource :task_id
destination_attribute_on_join_resource :category_id
end
# Many-to-many with Tags (creatable on-the-fly!)
many_to_many :tags, TodoApp.Todos.Tag do
through TodoApp.Todos.TaskTag
source_attribute_on_join_resource :task_id
destination_attribute_on_join_resource :tag_id
end
end
# ───────────────────────────────────────────────────────────────────────────
# Actions
# ───────────────────────────────────────────────────────────────────────────
actions do
defaults [:read]
create :create do
accept [:title, :description, :completed, :priority, :status, :due_date]
# Manage relationships
manage_relationship :categories, :categories, type: :append_and_remove
manage_relationship :tags, :tags, type: :append_and_remove
end
update :update do
accept [:title, :description, :completed, :priority, :status, :due_date]
manage_relationship :categories, :categories, type: :append_and_remove
manage_relationship :tags, :tags, type: :append_and_remove
end
destroy :destroy do
primary? true
require_atomic? false
end
end
# ───────────────────────────────────────────────────────────────────────────
# Validations
# ───────────────────────────────────────────────────────────────────────────
validations do
validate present([:title])
validate string_length(:title, min: 1, max: 200)
validate expression(:due_date, fn task, _ ->
if task.due_date && Date.compare(task.due_date, Date.utc_today()) == :lt do
{:error, "due date cannot be in the past"}
else
:ok
end
end)
end
# ───────────────────────────────────────────────────────────────────────────
# Policies
# ───────────────────────────────────────────────────────────────────────────
policies do
policy action_type(:create) do
authorize_if actor_present()
end
policy action_type(:update) do
authorize_if actor_present()
end
policy action_type(:destroy) do
authorize_if actor_present()
end
policy action_type(:read) do
authorize_if always()
end
end
# ===========================================================================
# ASH FORM BUILDER DSL - Form Configuration
# ===========================================================================
form do
action :create
submit_label "Create Task"
wrapper_class "space-y-6"
# ────────────────────────────────────────────────────────────────────────
# Standard Fields
# ────────────────────────────────────────────────────────────────────────
field :title do
label "Task Title"
placeholder "e.g., Complete project documentation"
required true
hint "Keep it concise but descriptive"
end
field :description do
label "Description"
type :textarea
placeholder "Add any additional details..."
rows 4
hint "Optional: Add more context about this task"
end
field :priority do
label "Priority"
type :select
options [
{"Low", :low},
{"Medium", :medium},
{"High", :high},
{"Urgent", :urgent}
]
hint "How important is this task?"
end
field :status do
label "Status"
type :select
options [
{"Pending", :pending},
{"In Progress", :in_progress},
{"Done", :done}
]
end
field :due_date do
label "Due Date"
type :date
hint "When should this be completed?"
end
field :completed do
label "Completed"
type :checkbox
hint "Mark as complete"
end
# ────────────────────────────────────────────────────────────────────────
# Many-to-Many: Categories (NON-CREATABLE)
# ────────────────────────────────────────────────────────────────────────
# Users can only select from existing categories
field :categories do
type :multiselect_combobox
label "Categories"
placeholder "Search categories..."
required false
opts [
search_event: "search_categories",
debounce: 300,
label_key: :name,
value_key: :id,
hint: "Organize your task into categories"
]
end
# ────────────────────────────────────────────────────────────────────────
# Many-to-Many: Tags (CREATABLE!) ⭐
# ────────────────────────────────────────────────────────────────────────
# Users can create new tags on-the-fly
field :tags do
type :multiselect_combobox
label "Tags"
placeholder "Search or create tags..."
required false
opts [
# ★ Enable creatable functionality
creatable: true,
create_action: :create,
create_label: "Create \"",
search_event: "search_tags",
debounce: 300,
label_key: :name,
value_key: :id,
hint: "Add tags or create new ones instantly"
]
end
end
end
# ─────────────────────────────────────────────────────────────────────────────
# 4.2 CATEGORY RESOURCE
# ─────────────────────────────────────────────────────────────────────────────
defmodule TodoApp.Todos.Category do
@moduledoc "Category for organizing tasks (e.g., Work, Personal, Shopping)"
use Ash.Resource,
domain: TodoApp.Todos,
data_layer: AshPostgres.DataLayer
postgres do
table "categories"
repo TodoApp.Repo
end
attributes do
uuid_primary_key :id
attribute :name, :string do
allow_nil? false
unique true
end
attribute :color, :string do
default "blue"
constraints one_of: ["red", "blue", "green", "yellow", "purple", "orange"]
end
attribute :icon, :string do
allow_nil? true
end
timestamps()
end
relationships do
many_to_many :tasks, TodoApp.Todos.Task do
through TodoApp.Todos.TaskCategory
source_attribute_on_join_resource :category_id
destination_attribute_on_join_resource :task_id
end
end
actions do
defaults [:read, :destroy]
create :create do
accept [:name, :color, :icon]
end
update :update do
accept [:name, :color, :icon]
end
end
validations do
validate present([:name])
end
end
# ─────────────────────────────────────────────────────────────────────────────
# 4.3 TAG RESOURCE (Creatable On-the-Fly)
# ─────────────────────────────────────────────────────────────────────────────
defmodule TodoApp.Todos.Tag do
@moduledoc "Tag for labeling tasks (e.g., #urgent, #waiting, #5min)"
use Ash.Resource,
domain: TodoApp.Todos,
data_layer: AshPostgres.DataLayer
postgres do
table "tags"
repo TodoApp.Repo
end
attributes do
uuid_primary_key :id
attribute :name, :string do
allow_nil? false
unique true
end
timestamps()
end
relationships do
many_to_many :tasks, TodoApp.Todos.Task do
through TodoApp.Todos.TaskTag
source_attribute_on_join_resource :tag_id
destination_attribute_on_join_resource :task_id
end
end
actions do
defaults [:read, :destroy]
create :create do
accept [:name]
end
update :update do
accept [:name]
end
end
validations do
validate present([:name])
validate string_length(:name, min: 1, max: 50)
end
end
# ─────────────────────────────────────────────────────────────────────────────
# 4.4 JOIN RESOURCES
# ─────────────────────────────────────────────────────────────────────────────
defmodule TodoApp.Todos.TaskCategory do
use Ash.Resource,
domain: TodoApp.Todos,
data_layer: AshPostgres.DataLayer
postgres do
table "tasks_categories"
repo TodoApp.Repo
end
attributes do
uuid_primary_key :id
attribute :task_id, :uuid, allow_nil?: false
attribute :category_id, :uuid, allow_nil?: false
end
relationships do
belongs_to :task, TodoApp.Todos.Task
belongs_to :category, TodoApp.Todos.Category
end
end
defmodule TodoApp.Todos.TaskTag do
use Ash.Resource,
domain: TodoApp.Todos,
data_layer: AshPostgres.DataLayer
postgres do
table "tasks_tags"
repo TodoApp.Repo
end
attributes do
uuid_primary_key :id
attribute :task_id, :uuid, allow_nil?: false
attribute :tag_id, :uuid, allow_nil?: false
end
relationships do
belongs_to :task, TodoApp.Todos.Task
belongs_to :tag, TodoApp.Todos.Tag
end
end
# =============================================================================
# STEP 5: PHOENIX LIVEVIEW - TASK FORM
# =============================================================================
defmodule TodoAppWeb.TaskLive.Form do
@moduledoc """
LiveView for creating and updating tasks.
Features:
- Zero manual AshPhoenix.Form calls
- Automatic form generation via AshFormBuilder
- Searchable combobox for categories
- Creatable combobox for tags
- Real-time validation
"""
use TodoAppWeb, :live_view
alias TodoApp.Todos
alias TodoApp.Todos.Task
# ───────────────────────────────────────────────────────────────────────────
# MOUNT - Initialize Form
# ───────────────────────────────────────────────────────────────────────────
@impl true
def mount(%{"id" => id} = _params, _session, socket) do
# EDIT MODE: Update existing task
task = Todos.get_task!(id, load: [:categories, :tags], actor: socket.assigns.current_user)
form = Task.Form.for_update(task, actor: socket.assigns.current_user)
{:ok,
socket
|> assign(:page_title, "Edit Task")
|> assign(:form, form)
|> assign(:task, task)
|> assign(:mode, :edit)
|> assign(:category_options, load_options(task.categories))
|> assign(:tag_options, load_options(task.tags))}
end
def mount(_params, _session, socket) do
# CREATE MODE: New task
form = Task.Form.for_create(actor: socket.assigns.current_user)
{:ok,
socket
|> assign(:page_title, "New Task")
|> assign(:form, form)
|> assign(:task, nil)
|> assign(:mode, :create)
|> assign(:category_options, [])
|> assign(:tag_options, [])}
end
# ───────────────────────────────────────────────────────────────────────────
# RENDER - Form UI
# ───────────────────────────────────────────────────────────────────────────
@impl true
def render(assigns) do
~H"""
<div class="max-w-2xl mx-auto px-4 py-8">
<h1 class="text-3xl font-bold mb-6 text-gray-900"><%= @page_title %></h1>
<div class="bg-white rounded-lg shadow-md p-6">
<%!--
AshFormBuilder.FormComponent:
- Renders all fields from the form DSL
- Uses configured theme (MishkaTheme)
- Handles validation errors
- Manages combobox search & create events
--%>
<.live_component
module={AshFormBuilder.FormComponent}
id="task-form"
resource={Task}
form={@form}
/>
</div>
<div class="mt-6 flex justify-between">
<.link
href={~p"/tasks"}
class="text-gray-600 hover:text-gray-900"
>
← Back to Tasks
</.link>
</div>
</div>
"""
end
# ───────────────────────────────────────────────────────────────────────────
# SEARCH HANDLERS - Combobox
# ───────────────────────────────────────────────────────────────────────────
@impl true
def handle_event("search_categories", %{"query" => query}, socket) do
categories =
TodoApp.Todos.Category
|> Ash.Query.filter(contains(name: ^query))
|> Todos.read!(actor: socket.assigns.current_user)
options = Enum.map(categories, &{&1.name, &1.id})
{:noreply, push_event(socket, "update_combobox_options", %{
field: "categories",
options: options
})}
end
@impl true
def handle_event("search_tags", %{"query" => query}, socket) do
# For creatable combobox - search existing tags
# Users can still create new ones via the create button
tags =
TodoApp.Todos.Tag
|> Ash.Query.filter(contains(name: ^query))
|> Todos.read!(actor: socket.assigns.current_user)
options = Enum.map(tags, &{&1.name, &1.id})
{:noreply, push_event(socket, "update_combobox_options", %{
field: "tags",
options: options
})}
end
# ───────────────────────────────────────────────────────────────────────────
# SUCCESS HANDLER - Form Submission
# ───────────────────────────────────────────────────────────────────────────
@impl true
def handle_info({:form_submitted, Task, task}, socket) do
message = case socket.assigns.mode do
:create -> "Task created successfully! 🎉"
:update -> "Task updated successfully! ✅"
end
{:noreply,
socket
|> put_flash(:info, message)
|> push_navigate(to: ~p"/tasks/#{task.id}")}
end
# ───────────────────────────────────────────────────────────────────────────
# PRIVATE HELPERS
# ───────────────────────────────────────────────────────────────────────────
defp load_options(records) do
Enum.map(records, &{&1.name, &1.id})
end
end
# =============================================================================
# STEP 6: PHOENIX LIVEVIEW - TASK INDEX (List View)
# =============================================================================
defmodule TodoAppWeb.TaskLive.Index do
@moduledoc "Lists all tasks with create button"
use TodoAppWeb, :live_view
alias TodoApp.Todos
alias TodoApp.Todos.Task
@impl true
def mount(_params, _session, socket) do
{:ok, stream(socket, :tasks, Todos.list_tasks())}
end
@impl true
def render(assigns) do
~H"""
<div class="max-w-6xl mx-auto px-4 py-8">
<div class="flex justify-between items-center mb-6">
<h1 class="text-3xl font-bold text-gray-900">Tasks</h1>
<.link
href={~p"/tasks/new"}
class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700"
>
+ New Task
</.link>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Title</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Priority</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Due Date</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200" id="tasks" phx-update="stream">
<tr :for={{id, task} <- @streams.tasks} class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900"><%= task.title %></div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class={priority_class(task.priority)}>
<%= String.capitalize(to_string(task.priority)) %>
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class={status_class(task.status)}>
<%= String.capitalize(to_string(task.status)) %>
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<%= if task.due_date, do: task.due_date, else: "-" %>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<.link href={~p"/tasks/#{task.id}"} class="text-blue-600 hover:text-blue-900 mr-3">
View
</.link>
<.link href={~p"/tasks/#{task.id}/edit"} class="text-green-600 hover:text-green-900">
Edit
</.link>
</td>
</tr>
</tbody>
</table>
</div>
</div>
"""
end
defp priority_class(:urgent), do: "px-2 py-1 text-xs rounded-full bg-red-100 text-red-800"
defp priority_class(:high), do: "px-2 py-1 text-xs rounded-full bg-orange-100 text-orange-800"
defp priority_class(:medium), do: "px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800"
defp priority_class(:low), do: "px-2 py-1 text-xs rounded-full bg-green-100 text-green-800"
defp status_class(:done), do: "px-2 py-1 text-xs rounded-full bg-green-100 text-green-800"
defp status_class(:in_progress), do: "px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800"
defp status_class(:pending), do: "px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800"
end
# =============================================================================
# STEP 7: PHOENIX LIVEVIEW - TASK SHOW (View Single Task)
# =============================================================================
defmodule TodoAppWeb.TaskLive.Show do
@moduledoc "Displays a single task with details"
use TodoAppWeb, :live_view
alias TodoApp.Todos
@impl true
def mount(%{"id" => id}, _session, socket) do
task = Todos.get_task!(id, load: [:categories, :tags])
{:ok,
socket
|> assign(:page_title, task.title)
|> assign(:task, task)}
end
@impl true
def render(assigns) do
~H"""
<div class="max-w-3xl mx-auto px-4 py-8">
<div class="bg-white rounded-lg shadow-md p-6">
<div class="flex justify-between items-start mb-4">
<h1 class="text-3xl font-bold text-gray-900"><%= @task.title %></h1>
<div class="flex gap-2">
<.link
href={~p"/tasks/#{@task.id}/edit"}
class="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700"
>
Edit
</.link>
</div>
</div>
<div class="space-y-4">
<div>
<h3 class="text-sm font-medium text-gray-500">Description</h3>
<p class="mt-1 text-gray-900"><%= @task.description || "No description" %></p>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<h3 class="text-sm font-medium text-gray-500">Priority</h3>
<p class="mt-1"><%= String.capitalize(to_string(@task.priority)) %></p>
</div>
<div>
<h3 class="text-sm font-medium text-gray-500">Status</h3>
<p class="mt-1"><%= String.capitalize(to_string(@task.status)) %></p>
</div>
<div>
<h3 class="text-sm font-medium text-gray-500">Due Date</h3>
<p class="mt-1"><%= if @task.due_date, do: @task.due_date, else: "Not set" %></p>
</div>
<div>
<h3 class="text-sm font-medium text-gray-500">Completed</h3>
<p class="mt-1"><%= if @task.completed, do: "Yes ✅", else: "No" %></p>
</div>
</div>
<div :if={length(@task.categories) > 0}>
<h3 class="text-sm font-medium text-gray-500">Categories</h3>
<div class="mt-2 flex flex-wrap gap-2">
<span
:for={category <- @task.categories}
class="px-3 py-1 text-sm rounded-full bg-blue-100 text-blue-800"
>
<%= category.name %>
</span>
</div>
</div>
<div :if={length(@task.tags) > 0}>
<h3 class="text-sm font-medium text-gray-500">Tags</h3>
<div class="mt-2 flex flex-wrap gap-2">
<span
:for={tag <- @task.tags}
class="px-3 py-1 text-sm rounded-full bg-purple-100 text-purple-800"
>
#<%= tag.name %>
</span>
</div>
</div>
</div>
</div>
<div class="mt-6">
<.link href={~p"/tasks"} class="text-gray-600 hover:text-gray-900">
← Back to Tasks
</.link>
</div>
</div>
"""
end
end
# =============================================================================
# STEP 8: ROUTES (lib/todo_app_web/router.ex)
# =============================================================================
defmodule TodoAppWeb.Router do
use TodoAppWeb, :router
pipeline :browser do
plug :accepts, ["html"]
plug :fetch_session
plug :fetch_live_flash
plug :put_root_layout, html: {TodoAppWeb.Layouts, :root}
plug :protect_from_forgery
plug :put_secure_browser_headers
end
scope "/", TodoAppWeb do
pipe_through :browser
# Task routes
live "/tasks", TaskLive.Index, :index
live "/tasks/new", TaskLive.Form, :new
live "/tasks/:id", TaskLive.Show, :show
live "/tasks/:id/edit", TaskLive.Form, :edit
end
end
# =============================================================================
# STEP 9: RUNNING THE APP
# =============================================================================
# 1. Get dependencies:
# $ mix deps.get
# 2. Create and migrate database:
# $ mix ecto.setup
# 3. Start the server:
# $ mix phx.server
# 4. Visit: http://localhost:4000/tasks
# =============================================================================
# STEP 10: TESTING
# =============================================================================
# test/todo_app_web/live/task_live_test.exs
defmodule TodoAppWeb.TaskLiveTest do
use TodoAppWeb.ConnCase
import Phoenix.LiveViewTest
import TodoApp.TodosFixtures
alias TodoApp.Todos
describe "Index" do
test "lists all tasks", %{conn: conn} do
{:ok, _index_live, html} = live(conn, ~p"/tasks")
assert html =~ "Tasks"
assert html =~ "New Task"
end
end
describe "Create Task" do
test "renders form", %{conn: conn} do
{:ok, _index_live, html} = live(conn, ~p"/tasks/new")
assert html =~ "New Task"
assert html =~ "Task Title"
end
test "creates task and redirects", %{conn: conn} do
{:ok, live, _html} = live(conn, ~p"/tasks/new")
assert form(live, "#task-form", task: %{
title: "Test Task",
description: "Test description",
priority: "high"
}) |> render_submit()
end
test "creates tag on-the-fly via creatable combobox", %{conn: conn} do
{:ok, live, _html} = live(conn, ~p"/tasks/new")
# Simulate creating a new tag
{:noreply, _updated_socket} =
AshFormBuilder.FormComponent.handle_event(
"create_combobox_item",
%{
"field" => "tags",
"resource" => "Elixir.TodoApp.Todos.Tag",
"action" => "create",
"creatable_value" => "Create \"urgent\""
},
live.socket
)
# Verify tag was created
assert %TodoApp.Todos.Tag{name: "urgent"} =
Ash.read_one!(TodoApp.Todos.Tag, name: "urgent")
end
end
describe "Edit Task" do
setup [:create_task]
test "renders edit form", %{conn: conn, task: task} do
{:ok, _index_live, html} = live(conn, ~p"/tasks/#{task.id}/edit")
assert html =~ "Edit Task"
assert html =~ task.title
end
test "updates task and redirects", %{conn: conn, task: task} do
{:ok, live, _html} = live(conn, ~p"/tasks/#{task.id}/edit")
assert form(live, "#task-form", task: %{
title: "Updated Task"
}) |> render_submit()
end
defp create_task(_) do
task = task_fixture()
%{task: task}
end
end
end
# =============================================================================
# END OF TODO APP GUIDE
# =============================================================================
