Move templates to components

lib/nulla_web/components/templates/note/edit.html.heex

@@ -0,0 +1,8 @@
+<.header>
+  Edit Note {@note.id}
+  <:subtitle>Use this form to manage note records in your database.</:subtitle>
+</.header>
+
+<.note_form changeset={@changeset} action={~p"/notes/#{@note}"} />
+
+<.back navigate={~p"/notes"}>Back to notes</.back>

lib/nulla_web/components/templates/note/index.html.heex

@@ -0,0 +1,23 @@
+<.header>
+  Listing Notes
+  <:actions>
+    <.link href={~p"/notes/new"}>
+      <.button>New Note</.button>
+    </.link>
+  </:actions>
+</.header>
+
+<.table id="notes" rows={@notes} row_click={&JS.navigate(~p"/notes/#{&1}")}>
+  <:col :let={note} label="Content">{note.content}</:col>
+  <:action :let={note}>
+    <div class="sr-only">
+      <.link navigate={~p"/notes/#{note}"}>Show</.link>
+    </div>
+    <.link navigate={~p"/notes/#{note}/edit"}>Edit</.link>
+  </:action>
+  <:action :let={note}>
+    <.link href={~p"/notes/#{note}"} method="delete" data-confirm="Are you sure?">
+      Delete
+    </.link>
+  </:action>
+</.table>

lib/nulla_web/components/templates/note/new.html.heex

@@ -0,0 +1,8 @@
+<.header>
+  New Note
+  <:subtitle>Use this form to manage note records in your database.</:subtitle>
+</.header>
+
+<.note_form changeset={@changeset} action={~p"/notes"} />
+
+<.back navigate={~p"/notes"}>Back to notes</.back>

lib/nulla_web/components/templates/note/note_form.html.heex

@@ -0,0 +1,9 @@
+<.simple_form :let={f} for={@changeset} action={@action}>
+  <.error :if={@changeset.action}>
+    Oops, something went wrong! Please check the errors below.
+  </.error>
+  <.input field={f[:content]} type="text" label="Content" />
+  <:actions>
+    <.button>Save Note</.button>
+  </:actions>
+</.simple_form>

lib/nulla_web/components/templates/note/show.html.heex

@@ -0,0 +1,15 @@
+<.header>
+  Note {@note.id}
+  <:subtitle>This is a note record from your database.</:subtitle>
+  <:actions>
+    <.link href={~p"/notes/#{@note}/edit"}>
+      <.button>Edit note</.button>
+    </.link>
+  </:actions>
+</.header>
+
+<.list>
+  <:item title="Content">{@note.content}</:item>
+</.list>
+
+<.back navigate={~p"/notes"}>Back to notes</.back>