moritz/putzplan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: prettify history

Browse source
This commit is contained in:
Moritz Böhme 2025-04-07 16:55:26 +02:00
parent bc27b56607
commit e72f6f29c1
1 changed files with 70 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

79
lib/putzplan_web/live/task_live/show.ex
View file

@ -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>
"""