93 lines
3.7 KiB
PHP
93 lines
3.7 KiB
PHP
@php
|
|
use Carbon\Carbon;
|
|
@endphp
|
|
<div x-data="{taskId: ''}">
|
|
<flux:heading size="xl" class="text-center">TO-DO: {{$list->name}}</flux:heading>
|
|
<form wire:submit="create" class="my-8">
|
|
<flux:input wire:model="task_content" placeholder="Create a new task" />
|
|
<flux:error name="task_content" />
|
|
</form>
|
|
@foreach ($tasks->where('completed', false) as $t)
|
|
<div class="task-card" wire:key="{{$t->id}}">
|
|
<div class="flex gap-4 items-center">
|
|
<flux:button icon="check" class="cursor-pointer" wire:click="toggleComplete({{$t->id}})" />
|
|
<flux:text variant="strong">{{$t->content}}</flux:text>
|
|
</div>
|
|
<div class="flex gap-1">
|
|
<flux:modal.trigger name="delete-task">
|
|
<flux:button inset icon="trash" class="cursor-pointer" x-on:click="taskId = {{$t->id}}" variant="subtle"
|
|
class="cursor-pointer" />
|
|
</flux:modal.trigger>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
<div class="my-8">
|
|
<flux:heading size="md">Completed</flux:heading>
|
|
<flux:separator class="mt-2" />
|
|
</div>
|
|
@php
|
|
$completeGroups = $tasks->where('completed', true)
|
|
->groupBy(
|
|
fn($t) => $t->completed_at->toDateString()
|
|
)->sortKeysDesc();
|
|
@endphp
|
|
@foreach ($completeGroups as $date => $tasks)
|
|
<div x-data="{showSummary: false}" x-cloak>
|
|
<div class="flex my-4 gap-2 items-center">
|
|
<flux:heading size="lg">{{ Carbon::parse($date)->format('D M d, Y') }}</flux:heading>
|
|
@if (Carbon::parse($date)->isSameDay(now()))
|
|
<flux:button x-on:click="showSummary = !showSummary" variant="filled" class="cursor-pointer" icon="eye"
|
|
size="xs">
|
|
<span x-show="!showSummary">Summary</span>
|
|
<span x-show="showSummary">Hide Summary</span>
|
|
</flux:button>
|
|
@endif
|
|
</div>
|
|
<div x-show="showSummary" x-cloak>
|
|
<ul class="list-disc list-inside my-4">
|
|
@foreach ($tasks as $t)
|
|
<li class="">{{$t->content}}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
@if (Carbon::parse($date)->isSameDay(now()))
|
|
@foreach ($tasks as $t)
|
|
<div class="task-card opacity-50 hover:opacity-100" wire:key="{{$t->id}}">
|
|
<div class="flex gap-2 items-center">
|
|
<flux:button icon="check" class="cursor-pointer" wire:click="toggleComplete({{$t->id}})" variant="primary"
|
|
color="green" />
|
|
<flux:text class="line-through">{{$t->content}}</flux:text>
|
|
</div>
|
|
<div class="flex gap-1">
|
|
<flux:modal.trigger name="delete-task">
|
|
<flux:button inset icon="trash" class="cursor-pointer" x-on:click="taskId = {{$t->id}}" variant="subtle"
|
|
class="cursor-pointer" />
|
|
</flux:modal.trigger>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
@else
|
|
<ul class="list-disc list-inside my-4">
|
|
@foreach ($tasks as $t)
|
|
<li class="">{{$t->content}}</li>
|
|
@endforeach
|
|
</ul>
|
|
@endif
|
|
@endforeach
|
|
<flux:modal name="delete-task" class="min-w-[22rem]">
|
|
<div class="space-y-6">
|
|
<div>
|
|
<flux:heading size="lg">Delete task?</flux:heading>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<flux:modal.close>
|
|
<flux:button variant="ghost">Cancel</flux:button>
|
|
</flux:modal.close>
|
|
<flux:button class="cursor-pointer"
|
|
x-on:click="() => {$wire.delete(taskId); $flux.modal('delete-task').close()}" type="submit"
|
|
variant="danger">Delete task</flux:button>
|
|
</div>
|
|
</div>
|
|
</flux:modal>
|
|
</div> |