feat: make index pretty
This commit is contained in:
parent
b35bac062a
commit
bc27b56607
1 changed files with 82 additions and 67 deletions
|
|
@ -13,77 +13,92 @@ defmodule PutzplanWeb.TaskLive.Index do
|
|||
</:actions>
|
||||
</.header>
|
||||
|
||||
<.table
|
||||
id="tasks"
|
||||
rows={@streams.tasks}
|
||||
row_click={fn {_id, task} -> JS.navigate(~p"/tasks/#{task}") end}
|
||||
>
|
||||
<:col :let={{id, task}}>
|
||||
<.link phx-click={JS.push("complete", value: %{id: task.id})}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-6"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
|
||||
</svg>
|
||||
</.link>
|
||||
</:col>
|
||||
<div id="tasks" class="grid grid-cols-1 gap-4 sm:grid-cols-1 lg:grid-cols-2" phx-update="stream">
|
||||
<%= for {id, task} <- @streams.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>
|
||||
|
||||
<:col :let={{_id, task}} label="Description">{task.description}</:col>
|
||||
<div class="mb-3">
|
||||
<div class="text-sm text-gray-500">Due</div>
|
||||
<div class="text-gray-700">{format_date(task.due)}</div>
|
||||
</div>
|
||||
|
||||
<:col :let={{_id, task}} label="Due">{format_date(task.due)}</:col>
|
||||
<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>
|
||||
|
||||
<:action :let={{_id, task}}>
|
||||
<div class="sr-only">
|
||||
<.link navigate={~p"/tasks/#{task}"}>Show</.link>
|
||||
<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>
|
||||
</:action>
|
||||
|
||||
<:col :let={{id, task}}>
|
||||
<.link patch={~p"/tasks/#{task}/edit"}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-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>
|
||||
</:col>
|
||||
|
||||
<:col :let={{id, task}}>
|
||||
<.link
|
||||
phx-click={JS.push("delete", value: %{id: task.id}) |> hide("##{id}")}
|
||||
data-confirm="Are you sure?"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-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>
|
||||
</:col>
|
||||
</.table>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<.modal :if={@live_action in [:new, :edit]} id="task-modal" show on_cancel={JS.patch(~p"/tasks")}>
|
||||
<.live_component
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue