From e72f6f29c12ab8771c9fb46c54f6b2f8a2eec9b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Moritz=20B=C3=B6hme?= <mail@moritzboeh.me>
Date: Mon, 7 Apr 2025 16:55:26 +0200
Subject: [PATCH] feat: prettify history

---
 lib/putzplan_web/live/task_live/show.ex | 79 ++++++++++++++++++++++---
 1 file changed, 70 insertions(+), 9 deletions(-)

diff --git a/lib/putzplan_web/live/task_live/show.ex b/lib/putzplan_web/live/task_live/show.ex
index 4124072..7c24b73 100644
--- a/lib/putzplan_web/live/task_live/show.ex
+++ b/lib/putzplan_web/live/task_live/show.ex
@@ -14,15 +14,76 @@ defmodule PutzplanWeb.TaskLive.Show do
       </:actions>
     </.header>
 
-    <.table id="completed_tasks" rows={@streams.completed_tasks}>
-      <:col :let={{_id, completed_task}} label="Completed by">{completed_task.users.name}</:col>
-      <:col :let={{_id, completed_task}} label="Date">{completed_task.completion}</:col>
-      <:action :let={{id, completed_task}}>
-        <.link phx-click={JS.push("delete", value: %{id: completed_task.id}) |> hide("##{id}")}>
-          Delete
-        </.link>
-      </:action>
-    </.table>
+    <div class="mt-8">
+      <ul id="completed_tasks" class="flex flex-col" phx-update="stream">
+        <li
+          :for={{id, completed_task} <- @streams.completed_tasks}
+          id={"completed-task-#{id}"}
+          class="flex flex-col p-4 bg-gray-50 border border-gray-100 rounded-lg"
+        >
+          <div class="flex justify-between items-center mb-2">
+            <div class="text-sm text-gray-500">Completed by</div>
+            <div class="flex items-center">
+              <span class="inline-flex items-center justify-center h-8 w-8 rounded-full bg-green-100 text-green-800 mr-2">
+                {String.first(completed_task.users.name)}
+              </span>
+              <span class="text-gray-700 font-medium">{completed_task.users.name}</span>
+            </div>
+          </div>
+
+          <div class="mb-3">
+            <div class="text-sm text-gray-500">Date</div>
+            <div class="text-gray-700">{completed_task.completion}</div>
+          </div>
+
+          <div class="mt-auto pt-2 flex justify-end">
+            <.link
+              phx-click={
+                JS.push("delete", value: %{id: completed_task.id}) |> hide("#completed-task-#{id}")
+              }
+              class="text-sm text-red-600 hover:text-red-800 flex items-center"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="w-4 h-4 mr-1"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+                />
+              </svg>
+              Delete
+            </.link>
+          </div>
+        </li>
+
+        <li class="col-span-full text-center p-4 bg-gray-50 rounded-lg border border-dashed border-gray-200 hidden only:flex">
+          <p class="text-gray-500">No completed tasks yet</p>
+        </li>
+      </ul>
+    </div>
+
+    <.modal
+      :if={@live_action in [:new, :edit]}
+      id="task-modal"
+      show
+      on_cancel={JS.patch(~p"/tasks/#{@task}")}
+    >
+      <.live_component
+        module={PutzplanWeb.TaskLive.FormComponent}
+        id={(@task && @task.id) || :new}
+        title={@page_title}
+        current_user={@current_user}
+        action={@live_action}
+        task={@task}
+        patch={~p"/"}
+      />
+    </.modal>
 
     <.back navigate={~p"/"}>Back to tasks</.back>
     """