CABM-IT/resources/views/components/todos/⚡index.blade.php

<?php

use App\Models\Organization;
use App\Models\Todo;
use Livewire\Attributes\Url;
use Livewire\Component;
use Livewire\WithPagination;

new class extends Component
{
    use WithPagination;

    public Organization $organization;

    #[Url]
    public string $search = '';

    #[Url]
    public string $category = '';

    #[Url]
    public string $status = 'open';

    public function toggleDone(int $todoId): void
    {
        $todo = $this->organization->todos()->findOrFail($todoId);
        $todo->update([
            'is_done' => ! $todo->is_done,
            'completed_at' => $todo->is_done ? null : now(),
        ]);
    }

    public function delete(int $todoId): void
    {
        $todo = $this->organization->todos()->findOrFail($todoId);
        $todo->delete();

        session()->flash('status', "Tâche \"{$todo->title}\" supprimée.");
    }

    public function with(): array
    {
        return [
            'todos' => $this->organization->todos()
                ->with(['assignee', 'creator'])
                ->when($this->search, fn ($q) => $q->where('title', 'like', "%{$this->search}%"))
                ->when($this->category, fn ($q) => $q->where('category', $this->category))
                ->when($this->status === 'open', fn ($q) => $q->where('is_done', false))
                ->when($this->status === 'done', fn ($q) => $q->where('is_done', true))
                ->orderBy('is_done')
                ->orderByRaw("CASE criticality WHEN 'urgent' THEN 0 WHEN 'high' THEN 1 WHEN 'medium' THEN 2 ELSE 3 END")
                ->orderByRaw('due_date IS NULL')
                ->orderBy('due_date')
                ->paginate(15),
            'categories' => Todo::CATEGORIES,
        ];
    }
};
?>

<div>
    <div class="mb-6 flex items-center justify-between">
        <div>
            <p class="text-sm text-slate-500">{{ $organization->name }}</p>
            <h1 class="text-2xl font-semibold text-slate-900">ToDo</h1>
        </div>
        <a href="{{ route('organizations.todos.create', $organization) }}"
           class="rounded bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">
            + Nouvelle tâche
        </a>
    </div>

    <div class="mb-4 flex flex-wrap items-center gap-2">
        <input type="text" wire:model.live.debounce.300ms="search" placeholder="Filtrer par titre..."
               class="w-full max-w-sm rounded border-slate-300 text-sm shadow-sm focus:border-slate-500 focus:ring-slate-500">

        <select wire:model.live="category" class="rounded border-slate-300 text-sm shadow-sm focus:border-slate-500 focus:ring-slate-500">
            <option value="">Toutes catégories</option>
            @foreach ($categories as $value => $label)
                <option value="{{ $value }}">{{ $label }}</option>
            @endforeach
        </select>

        <select wire:model.live="status" class="rounded border-slate-300 text-sm shadow-sm focus:border-slate-500 focus:ring-slate-500">
            <option value="open">À faire</option>
            <option value="done">Terminées</option>
            <option value="">Toutes</option>
        </select>
    </div>

    <div class="overflow-x-auto rounded border border-slate-200 bg-white">
        <table class="min-w-full divide-y divide-slate-200 text-sm">
            <thead class="bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500">
                <tr>
                    <th class="px-4 py-3"></th>
                    <th class="px-4 py-3">Titre</th>
                    <th class="px-4 py-3">Catégorie</th>
                    <th class="px-4 py-3">Criticité</th>
                    <th class="px-4 py-3">Échéance</th>
                    <th class="px-4 py-3">Assigné à</th>
                    <th class="px-4 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @forelse ($todos as $todo)
                    <tr wire:key="todo-{{ $todo->id }}" class="{{ $todo->is_done ? 'opacity-50' : '' }}">
                        <td class="px-4 py-3">
                            <input type="checkbox" wire:click="toggleDone({{ $todo->id }})" @checked($todo->is_done)
                                   class="rounded border-slate-300">
                        </td>
                        <td class="px-4 py-3">
                            <a href="{{ route('organizations.todos.edit', [$organization, $todo]) }}"
                               class="font-medium text-slate-900 hover:underline {{ $todo->is_done ? 'line-through' : '' }}">
                                {{ $todo->title }}
                            </a>
                        </td>
                        <td class="px-4 py-3 text-slate-600">{{ $todo->categoryLabel() }}</td>
                        <td class="px-4 py-3">
                            <span class="rounded-full px-2 py-0.5 text-xs font-medium
                                {{ match($todo->criticality) {
                                    'urgent' => 'bg-red-100 text-red-700',
                                    'high' => 'bg-amber-100 text-amber-700',
                                    'medium' => 'bg-blue-100 text-blue-700',
                                    default => 'bg-slate-100 text-slate-600',
                                } }}">
                                {{ $todo->criticalityLabel() }}
                            </span>
                        </td>
                        <td class="px-4 py-3 {{ $todo->isOverdue() ? 'font-medium text-red-600' : 'text-slate-600' }}">
                            {{ $todo->due_date?->format('d/m/Y') ?? '—' }}
                            @if ($todo->isOverdue())
                                <span class="ml-1 text-xs">(en retard)</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-slate-600">{{ $todo->assignee?->name ?? '—' }}</td>
                        <td class="px-4 py-3 text-right whitespace-nowrap">
                            <a href="{{ route('organizations.todos.edit', [$organization, $todo]) }}" class="text-slate-500 hover:text-slate-900">Modifier</a>
                            <button type="button"
                                    wire:click="delete({{ $todo->id }})"
                                    wire:confirm="Supprimer cette tâche ? Cette action est irréversible."
                                    class="ml-3 text-red-500 hover:text-red-700">
                                Supprimer
                            </button>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="px-4 py-6 text-center text-slate-400">Aucune tâche pour le moment.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-4">
        {{ $todos->links() }}
    </div>
</div>