putzplan/lib/putzplan_web/live/task_live/index.ex

249 lines
7.7 KiB
Elixir

defmodule PutzplanWeb.TaskLive.Index do
use PutzplanWeb, :live_view
@impl true
def render(assigns) do
~H"""
<.header>
Listing Tasks
<:actions>
<.link patch={~p"/tasks/new"}>
<.button>New Task</.button>
</.link>
</:actions>
</.header>
<div id="tasks" class="grid grid-cols-1 gap-4 sm:grid-cols-1 lg:grid-cols-2">
<%= for task <- @tasks do %>
<div
id={task.id}
class="flex flex-col p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 cursor-pointer"
phx-click={JS.navigate(~p"/tasks/#{task}")}
>
<div class="flex justify-between items-center mb-3">
<div class="font-medium text-gray-800 text-lg">{task.description}</div>
<div class="flex space-x-2">
<.link
phx-click={JS.push("complete", value: %{id: task.id})}
class="text-green-600 hover:text-green-800 p-1 rounded-full hover:bg-green-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
</svg>
</.link>
</div>
</div>
<div class="mb-3">
<div class="text-sm text-gray-500">Due</div>
<div class="text-gray-700">{format_date(task.due)}</div>
</div>
<div class="mt-auto pt-3 border-t border-gray-100 flex justify-between items-center">
<div class="sr-only">
<.link navigate={~p"/tasks/#{task}"}>Show</.link>
</div>
<div class="flex space-x-2">
<.link
patch={~p"/tasks/#{task}/edit"}
class="text-blue-600 hover:text-blue-800 p-1 rounded-full hover:bg-blue-100"
phx-click-stop-propagation="true"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
/>
</svg>
</.link>
<.link
phx-click={JS.push("delete", value: %{id: task.id}) |> hide(task.id)}
data-confirm="Are you sure?"
class="text-red-600 hover:text-red-800 p-1 rounded-full hover:bg-red-100"
phx-click-stop-propagation="true"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<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>
</.link>
</div>
</div>
</div>
<% end %>
</div>
<.modal :if={@live_action in [:new, :edit]} id="task-modal" show on_cancel={JS.patch(~p"/tasks")}>
<.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>
"""
end
@impl true
def mount(_params, _session, socket) do
if connected?(socket), do: Putzplan.PubSub.subscribe_tasks()
tasks =
Ash.read!(Putzplan.Tasks.Task, load: [:due], actor: socket.assigns[:current_user])
|> sort_tasks_by_due_date()
{:ok,
socket
|> assign(:tasks, tasks)
|> assign_new(:current_user, fn -> nil end)}
end
defp sort_tasks_by_due_date(tasks) do
Enum.sort_by(tasks, & &1.due, Date)
end
@impl true
def handle_params(params, _url, socket) do
{:noreply, apply_action(socket, socket.assigns.live_action, params)}
end
@impl true
def handle_info({:delete, task}, socket) do
updated_tasks = Enum.reject(socket.assigns.tasks, fn t -> t.id == task.id end)
{:noreply, assign(socket, :tasks, updated_tasks)}
end
@impl true
def handle_info({:upsert, task}, socket) do
updated_tasks =
socket.assigns.tasks
|> Enum.reject(fn t -> t.id == task.id end)
|> Enum.concat([task])
|> sort_tasks_by_due_date()
{:noreply, assign(socket, :tasks, updated_tasks)}
end
@impl true
def handle_info({:update, task_id}, socket) do
task = Ash.get!(Putzplan.Tasks.Task, task_id, load: [:due])
updated_tasks =
socket.assigns.tasks
|> Enum.reject(fn t -> t.id == task.id end)
|> Enum.concat([task])
|> sort_tasks_by_due_date()
{:noreply, assign(socket, :tasks, updated_tasks)}
end
defp apply_action(socket, :edit, %{"id" => id}) do
socket
|> assign(:page_title, "Edit Task")
|> assign(
:task,
Ash.get!(Putzplan.Tasks.Task, id, actor: socket.assigns.current_user)
)
end
defp apply_action(socket, :new, _params) do
socket
|> assign(:page_title, "New Task")
|> assign(:task, nil)
end
defp apply_action(socket, :index, _params) do
socket
|> assign(:page_title, "Listing Tasks")
|> assign(:task, nil)
end
@impl true
def handle_event("delete", %{"id" => id}, socket) do
task = Ash.get!(Putzplan.Tasks.Task, id, actor: socket.assigns.current_user)
Ash.destroy!(task, actor: socket.assigns.current_user)
Putzplan.PubSub.delete_task(task)
{:noreply, socket}
end
@impl true
def handle_event("complete", %{"id" => id}, socket) do
completed_task =
Putzplan.Tasks.CompletedTask
|> Ash.Changeset.for_create(:create, %{task: id, user: socket.assigns.current_user.id})
|> Ash.create!(actor: socket.assigns.current_user)
task = Ash.get!(Putzplan.Tasks.Task, id, load: [:due])
Putzplan.PubSub.upsert_task(task)
Putzplan.PubSub.upsert_completed_task(completed_task)
{:noreply, socket}
end
defp format_date(date) do
string =
case Date.diff(date, Date.utc_today()) do
-1 ->
"yesterday"
0 ->
"today"
1 ->
"tomorrow"
days when days > 0 and days < 7 ->
"next " <> get_weekday(Date.day_of_week(date))
_ ->
Date.to_string(date)
end
String.capitalize(string)
end
defp get_weekday(index) do
days = %{
1 => "monday",
2 => "tuesday",
3 => "wednesday",
4 => "thursday",
5 => "friday",
6 => "saturday",
7 => "sunday"
}
Map.get(days, index)
end
end