IMP: task card (#25)

assets/css/app.scss

@@ -1 +1,40 @@
 @import "bulma/bulma.sass";
+
+.pointer {
+    cursor: pointer;
+}
+
+.tasks li {
+    @extend .py-1, .px-5;
+
+    list-style: none;
+    border-bottom: 1px solid #eee;
+    &:last-child {
+        border-bottom: 0px;
+    }
+    .value {
+        @extend .mb-3;
+    }
+}
+
+.value {
+    @extend .pointer;
+}
+
+.doit {
+    @extend .pointer;
+
+    width: 16px;
+    height: 16px;
+    border: 1px solid #888;
+    background-color: transparent;
+    padding: 0rem;
+
+    &:hover {
+        background-color: #eee;
+    }
+}
+
+.ml-5-5 {
+    margin-left: 2rem !important;
+}

lib/planner/tasks.ex

@@ -63,4 +63,10 @@ defmodule Planner.Tasks do
     get_task!(id)
     |> Repo.delete()
   end
+
+  def finish_task_by_id!(id) do
+    get_task!(id)
+    |> Task.finish_task()
+    |> Repo.update()
+  end
 end

lib/planner/tasks/task.ex

@@ -20,4 +20,11 @@ defmodule Planner.Tasks.Task do
     |> validate_required([:value])
     |> validate_length(:value, min: 3)
   end
+
+  @doc false
+  def finish_task(task) do
+    now = NaiveDateTime.utc_now() |> NaiveDateTime.truncate(:second)
+    # TODO, this should check if `finished_at` is not nil, first
+    change(task, finished_at: now)
+  end
 end

lib/planner_web/controllers/task_controller.ex

@@ -72,6 +72,17 @@ defmodule PlannerWeb.TaskController do
     end
   end
 
+  # this is a little bit of a hack, but it'll do for now:
+  # pattern match on the empty case, we will assume this
+  # is a "task finished" action
+  def update(conn, %{"id" => id}) do
+    {_, task} = Tasks.finish_task_by_id!(id)
+
+    conn
+    |> put_flash(:info, "task '#{task.value}' finished")
+    |> redirect(to: Routes.task_path(conn, :index))
+  end
+
   def delete(conn, %{"id" => id}) do
     {:ok, _task} = Tasks.delete_task_by_id!(id)
 

lib/planner_web/live/landing_live.ex

@@ -37,7 +37,7 @@ defmodule PlannerWeb.LandingLive do
         {:noreply,
          socket
          |> clear_flash(:info)
-         |> put_flash(:info, "task '" <> task.value <> "' created")
+         |> put_flash(:info, "task '#{task.value}' created")
          |> assign(:new_task_changeset, Tasks.change_task(%Task{}))}
 
       {:error, %Ecto.Changeset{} = changeset} ->

lib/planner_web/templates/task/index.html.eex

@@ -1,29 +1,9 @@
 <%= link "new", to: Routes.task_path(@conn, :new), class: "button is-dark" %>
 
-<div class="table-container">
-  <table class="table is-striped is-hoverable is-fullwidth" style="table-layout: fixed;">
-    <thead>
-      <tr>
-        <th>task</th>
-      </tr>
-    </thead>
-    <tbody>
-      <%= for task <- @tasks do %>
-        <tr>
-         <td>
-            <%= if not is_nil(task.due_at) do %>
-              <div class="tags mb-0">
-                <span class="tag is-warning">
-                  due: <%= task.due_at %>
-                </span>
-              </div>
-            <% end %>
-            <%= link to: Routes.task_path(@conn, :show, task.id), class: "has-text-black" do %>
-              <%= md_to_html task.value %>
-            <% end %>
-          </td>
-        </tr>
-      <% end %>
-    </tbody>
-  </table>
+<div class="content">
+  <ul class="tasks">
+    <%= for task <- @tasks do %>
+      <li><%= render "task.html", Map.put(assigns, :task, task) %></li>
+    <% end %>
+  </ul>
 </div>

lib/planner_web/templates/task/task.html.eex

@@ -0,0 +1,19 @@
+<div>
+  <div class="is-pulled-left">
+    <%= link(to: Routes.task_path(@conn, :update, @task.id), method: :patch) do %>
+    <button type="button" role="checkbox" class="doit"></button>
+    <% end %>
+  </div>
+  <div class="ml-5-5">
+    <div class="value" onclick="location.href='<%= Routes.task_path(@conn, :show, @task.id) %>'">
+      <%= md_to_html(@task.value) %>
+    </div>
+    <%= if not is_nil(@task.due_at) do %>
+      <div class="tags mb-0">
+        <span class="tag">
+          due: <%= @task.due_at %>
+        </span>
+      </div>
+    <% end %>
+  </div>
+</div>