Commit the Projects/Tasks/Ideas/TaskComments feature
This was already implemented, migrated, and running live, but had never been committed. Bringing it into git: Project/Task/Idea/ TaskComment models, their JSON API (CRUD + status transitions, task comments, idea<->project linking), Livewire UI pages, and the nav/route wiring for them. All 42 of its own tests pass. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
m105
@@ -0,0 +1,220 @@
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<div>
|
||||
<h1 class="text-xl font-semibold">Ideas</h1>
|
||||
<p class="text-sm text-gray-500">
|
||||
{{ $totalIdeas }} total |
|
||||
{{ $newIdeas }} new |
|
||||
{{ $consideredIdeas }} considered |
|
||||
{{ $plannedIdeas }} planned |
|
||||
{{ $implementedIdeas }} implemented
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button wire:click="create" class="bg-blue-600 text-white px-4 py-2 rounded">Add Idea</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white border border-gray-200 rounded p-4 mb-6">
|
||||
<div class="flex gap-4 items-center flex-wrap">
|
||||
<div class="flex-1 min-w-48">
|
||||
<label class="block text-sm font-medium mb-1">Search</label>
|
||||
<input type="text" wire:model.live="search" placeholder="Search ideas..."
|
||||
class="w-full border rounded p-2">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Status</label>
|
||||
<select wire:model.live="statusFilter" class="border rounded p-2">
|
||||
<option value="">All Statuses</option>
|
||||
@foreach ($statuses as $status)
|
||||
<option value="{{ $status }}">{{ ucfirst($status) }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Category</label>
|
||||
<select wire:model.live="categoryFilter" class="border rounded p-2">
|
||||
<option value="">All Categories</option>
|
||||
@foreach ($categories as $category)
|
||||
<option value="{{ $category }}">{{ ucfirst($category) }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Project</label>
|
||||
<select wire:model.live="projectFilter" class="border rounded p-2">
|
||||
<option value="">All Projects</option>
|
||||
@foreach ($projects as $project)
|
||||
<option value="{{ $project->id }}">{{ $project->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<label class="flex items-center gap-1 cursor-pointer">
|
||||
<input type="checkbox" wire:model.live="unlinkedFilter" class="rounded">
|
||||
<span class="text-sm">Unlinked only</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-end">
|
||||
<button wire:click="clearFilters" class="text-sm text-gray-600 hover:text-gray-800">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
@forelse ($ideas as $idea)
|
||||
<div wire:key="idea-{{ $idea->id }}" class="bg-white border border-gray-200 rounded p-4 hover:shadow-md transition-shadow">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-lg">{{ $idea->title }}</h3>
|
||||
<div class="flex gap-2 mt-1 flex-wrap">
|
||||
<span class="{{ $this->getStatusColor($idea->status) }} text-xs px-2 py-0.5 rounded">
|
||||
{{ ucfirst($idea->status) }}
|
||||
</span>
|
||||
@if($idea->category)
|
||||
<span class="{{ $this->getCategoryColor($idea->category) }} text-xs px-2 py-0.5 rounded">
|
||||
{{ ucfirst($idea->category) }}
|
||||
</span>
|
||||
@endif
|
||||
@if($idea->priority > 0)
|
||||
<span class="bg-gray-100 text-gray-800 text-xs px-2 py-0.5 rounded">
|
||||
Priority: {{ $this->getPriorityLabel($idea->priority) }} ({{ $idea->priority }})
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<button wire:click="edit({{ $idea->id }})" class="text-blue-600 hover:text-blue-800 text-sm">Edit</button>
|
||||
<button wire:click="delete({{ $idea->id }})" wire:confirm="Delete this idea?" class="text-red-600 hover:text-red-800 text-sm">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($idea->description)
|
||||
<p class="text-sm text-gray-600 mb-3">{{ $idea->description }}</p>
|
||||
@endif
|
||||
|
||||
@if($idea->tags)
|
||||
<div class="mb-3">
|
||||
@foreach(explode(',', $idea->tags) as $tag)
|
||||
<span class="inline-block bg-gray-100 text-gray-800 text-xs px-2 py-0.5 rounded-full mr-1 mb-1">{{ trim($tag) }}</span>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="flex justify-between items-center text-xs text-gray-500 border-t border-gray-100 pt-2">
|
||||
<div class="flex gap-2">
|
||||
@if($idea->project)
|
||||
<span>Project: <a href="{{ route('projects.index') }}?project_id={{ $idea->project->id }}" class="text-blue-600 hover:underline">{{ $idea->project->name }}</a></span>
|
||||
@else
|
||||
<span>No project linked</span>
|
||||
@endif
|
||||
@if($idea->user)
|
||||
<span>By: {{ $idea->user->name }}</span>
|
||||
@endif
|
||||
</div>
|
||||
<span>{{ $idea->created_at->format('M d, Y') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 flex gap-2">
|
||||
<select wire:model="status" wire:change="changeStatus({{ $idea->id }}, $event.target.value)"
|
||||
class="{{ $this->getStatusColor($idea->status) }} rounded p-1 text-sm">
|
||||
@foreach ($statuses as $status)
|
||||
<option value="{{ $status }}" {{ $idea->status === $status ? 'selected' : '' }}>
|
||||
{{ ucfirst($status) }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
|
||||
@if($idea->project_id)
|
||||
<button wire:click="unlinkFromProject({{ $idea->id }})"
|
||||
wire:confirm="Unlink this idea from its project?"
|
||||
class="text-xs text-gray-600 hover:text-gray-800">
|
||||
Unlink
|
||||
</button>
|
||||
@else
|
||||
<button wire:click="linkToProject({{ $idea->id }}, {{ $projectFilter ?? 0 }})"
|
||||
wire:confirm="Link this idea to the selected project?"
|
||||
class="text-xs text-green-600 hover:text-green-800">
|
||||
Link to Project
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="col-span-full text-center py-8 text-gray-500">
|
||||
No ideas found. Share your first idea!
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
@if ($showForm)
|
||||
<div class="fixed inset-0 bg-black/30 flex items-center justify-center z-50">
|
||||
<div class="bg-white p-6 rounded w-full max-w-lg space-y-4 max-h-[90vh] overflow-y-auto">
|
||||
<h2 class="text-lg font-semibold">{{ $editingId ? 'Edit Idea' : 'Add Idea' }}</h2>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Title</label>
|
||||
<input type="text" wire:model="title" class="w-full border rounded p-2">
|
||||
@error('title') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Description</label>
|
||||
<textarea wire:model="description" rows="4" class="w-full border rounded p-2"></textarea>
|
||||
@error('description') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Status</label>
|
||||
<select wire:model="status" class="w-full border rounded p-2">
|
||||
@foreach ($statuses as $status)
|
||||
<option value="{{ $status }}">{{ ucfirst($status) }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@error('status') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Priority (0-10)</label>
|
||||
<input type="number" wire:model="priority" min="0" max="10" class="w-full border rounded p-2">
|
||||
@error('priority') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Category</label>
|
||||
<select wire:model="category" class="w-full border rounded p-2">
|
||||
<option value="">No category</option>
|
||||
@foreach ($categories as $category)
|
||||
<option value="{{ $category }}">{{ ucfirst($category) }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@error('category') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Project (optional)</label>
|
||||
<select wire:model="projectId" class="w-full border rounded p-2">
|
||||
<option value="">No project</option>
|
||||
@foreach ($projects as $project)
|
||||
<option value="{{ $project->id }}">{{ $project->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@error('projectId') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Tags (comma separated)</label>
|
||||
<input type="text" wire:model="tags" placeholder="e.g., ai, automation, feature" class="w-full border rounded p-2">
|
||||
@error('tags') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2">
|
||||
<button wire:click="$set('showForm', false)" class="px-4 py-2">Cancel</button>
|
||||
<button wire:click="save" class="bg-blue-600 text-white px-4 py-2 rounded">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@@ -0,0 +1,124 @@
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<div>
|
||||
<h1 class="text-xl font-semibold">Projects</h1>
|
||||
<p class="text-sm text-gray-500">
|
||||
{{ $totalProjects }} total |
|
||||
{{ $activeProjects }} active |
|
||||
{{ $completedProjects }} completed
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button wire:click="create" class="bg-blue-600 text-white px-4 py-2 rounded">Add Project</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white border border-gray-200 rounded p-4 mb-6">
|
||||
<div class="flex gap-4 items-center">
|
||||
<div class="flex-1">
|
||||
<label class="block text-sm font-medium mb-1">Search</label>
|
||||
<input type="text" wire:model.live="search" placeholder="Search projects..."
|
||||
class="w-full border rounded p-2">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Status</label>
|
||||
<select wire:model.live="statusFilter" class="border rounded p-2">
|
||||
<option value="">All Statuses</option>
|
||||
@foreach ($statuses as $status)
|
||||
<option value="{{ $status }}">{{ ucfirst(str_replace('_', ' ', $status)) }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex items-end">
|
||||
<button wire:click="clearFilters" class="text-sm text-gray-600 hover:text-gray-800">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
@forelse ($projects as $project)
|
||||
<div wire:key="project-{{ $project->id }}" class="bg-white border border-gray-200 rounded p-4 hover:shadow-md transition-shadow">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-lg">{{ $project->name }}</h3>
|
||||
<div class="flex gap-2 mt-1">
|
||||
<span class="{{ $this->getStatusColor($project->status) }} text-xs px-2 py-0.5 rounded">
|
||||
{{ ucfirst(str_replace('_', ' ', $project->status)) }}
|
||||
</span>
|
||||
@if($project->due_at)
|
||||
<span class="text-xs text-gray-600">
|
||||
Due: {{ $project->due_at->format('M d, Y') }}
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<button wire:click="edit({{ $project->id }})" class="text-blue-600 hover:text-blue-800 text-sm">Edit</button>
|
||||
<button wire:click="delete({{ $project->id }})" wire:confirm="Delete this project?" class="text-red-600 hover:text-red-800 text-sm">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($project->description)
|
||||
<p class="text-sm text-gray-600 mb-3">{{ $project->description }}</p>
|
||||
@endif
|
||||
|
||||
<div class="flex justify-between items-center text-xs text-gray-500 border-t border-gray-100 pt-2">
|
||||
<span>{{ $this->getTasksCount($project->id) }} tasks</span>
|
||||
<span>{{ $project->created_at->format('M d, Y') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<a href="{{ route('tasks.index', ['project_id' => $project->id]) }}"
|
||||
class="text-blue-600 hover:text-blue-800 text-sm font-medium">
|
||||
View Tasks
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="col-span-full text-center py-8 text-gray-500">
|
||||
No projects found. Create your first project!
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
@if ($showForm)
|
||||
<div class="fixed inset-0 bg-black/30 flex items-center justify-center z-50">
|
||||
<div class="bg-white p-6 rounded w-full max-w-md space-y-4">
|
||||
<h2 class="text-lg font-semibold">{{ $editingId ? 'Edit Project' : 'Add Project' }}</h2>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Name</label>
|
||||
<input type="text" wire:model="name" class="w-full border rounded p-2">
|
||||
@error('name') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Description</label>
|
||||
<textarea wire:model="description" rows="3" class="w-full border rounded p-2"></textarea>
|
||||
@error('description') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Status</label>
|
||||
<select wire:model="status" class="w-full border rounded p-2">
|
||||
@foreach ($statuses as $status)
|
||||
<option value="{{ $status }}">{{ ucfirst(str_replace('_', ' ', $status)) }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@error('status') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Due Date</label>
|
||||
<input type="datetime-local" wire:model="dueAt" class="w-full border rounded p-2">
|
||||
@error('dueAt') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2">
|
||||
<button wire:click="$set('showForm', false)" class="px-4 py-2">Cancel</button>
|
||||
<button wire:click="save" class="bg-blue-600 text-white px-4 py-2 rounded">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@@ -0,0 +1,116 @@
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<div>
|
||||
<h1 class="text-xl font-semibold">Task Comments</h1>
|
||||
@if($task)
|
||||
<p class="text-sm text-gray-500 mt-1">
|
||||
Task: <span class="font-medium">{{ $task->title }}</span>
|
||||
@if($task->project)
|
||||
| Project: <span class="text-blue-600">{{ $task->project->name }}</span>
|
||||
@endif
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
@if($task)
|
||||
<button wire:click="create" class="bg-blue-600 text-white px-4 py-2 rounded">Add Comment</button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($task)
|
||||
<div class="bg-white border border-gray-200 rounded p-4 mb-6">
|
||||
<h3 class="font-semibold mb-2">Task Details</h3>
|
||||
<p class="text-gray-600 mb-2">{{ $task->description }}</p>
|
||||
<div class="flex gap-4 text-sm text-gray-500">
|
||||
<span>Status: {{ ucfirst(str_replace('_', ' ', $task->status)) }}</span>
|
||||
@if($task->priority > 0)
|
||||
<span>Priority: {{ $task->priority }}</span>
|
||||
@endif
|
||||
@if($task->due_at)
|
||||
<span>Due: {{ $task->due_at->format('M d, Y') }}</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="bg-yellow-50 border border-yellow-200 rounded p-4 mb-6">
|
||||
<p class="text-yellow-800">No task selected. Please select a task to view its comments.</p>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="space-y-4">
|
||||
@forelse ($comments as $comment)
|
||||
<div wire:key="comment-{{ $comment->id }}" class="bg-white border border-gray-200 rounded p-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="{{ $this->getAuthorColor($comment->author_type) }} text-xs px-2 py-0.5 rounded font-medium">
|
||||
{{ ucfirst($comment->author_type) }}
|
||||
</span>
|
||||
<span class="font-medium text-gray-800">{{ $comment->author_name }}</span>
|
||||
<span class="text-xs text-gray-400">{{ $comment->created_at->format('M d, Y H:i') }}</span>
|
||||
</div>
|
||||
<div class="prose max-w-none text-gray-700">
|
||||
{{ $comment->body }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<button wire:click="edit({{ $comment->id }})" class="text-blue-600 hover:text-blue-800 text-sm">Edit</button>
|
||||
<button wire:click="delete({{ $comment->id }})" wire:confirm="Delete this comment?" class="text-red-600 hover:text-red-800 text-sm">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
@if($task)
|
||||
<div class="bg-gray-50 border border-gray-200 rounded p-8 text-center text-gray-500">
|
||||
No comments yet. Add your first comment!
|
||||
</div>
|
||||
@endif
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
@if ($showForm)
|
||||
<div class="fixed inset-0 bg-black/30 flex items-center justify-center z-50">
|
||||
<div class="bg-white p-6 rounded w-full max-w-lg space-y-4">
|
||||
<h2 class="text-lg font-semibold">{{ $editingId ? 'Edit Comment' : 'Add Comment' }}</h2>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Author Type</label>
|
||||
<div class="flex gap-2">
|
||||
<button wire:click="setAuthorAsUser"
|
||||
class="px-3 py-1 rounded {{ $authorType === 'user' ? 'bg-blue-600 text-white' : 'bg-gray-200' }}">
|
||||
User
|
||||
</button>
|
||||
<button wire:click="setAuthorAsAI"
|
||||
class="px-3 py-1 rounded {{ $authorType === 'ai' ? 'bg-purple-600 text-white' : 'bg-gray-200' }}">
|
||||
AI
|
||||
</button>
|
||||
<button wire:click="setAuthorAsSystem"
|
||||
class="px-3 py-1 rounded {{ $authorType === 'system' ? 'bg-gray-600 text-white' : 'bg-gray-200' }}">
|
||||
System
|
||||
</button>
|
||||
</div>
|
||||
<input type="hidden" wire:model="authorType">
|
||||
@error('authorType') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Author Name</label>
|
||||
<input type="text" wire:model="authorName" class="w-full border rounded p-2">
|
||||
@error('authorName') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Comment</label>
|
||||
<textarea wire:model="body" rows="6" class="w-full border rounded p-2"></textarea>
|
||||
@error('body') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2">
|
||||
<button wire:click="$set('showForm', false)" class="px-4 py-2">Cancel</button>
|
||||
<button wire:click="save" class="bg-blue-600 text-white px-4 py-2 rounded">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@@ -0,0 +1,236 @@
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<div>
|
||||
<h1 class="text-xl font-semibold">Tasks</h1>
|
||||
<p class="text-sm text-gray-500">
|
||||
{{ $totalTasks }} total |
|
||||
{{ $todoTasks }} todo |
|
||||
{{ $inProgressTasks }} in progress |
|
||||
{{ $doneTasks }} done |
|
||||
{{ $blockedTasks }} blocked |
|
||||
{{ $waitingReviewTasks }} waiting review
|
||||
</p>
|
||||
@if($dueSoonTasks > 0 || $overdueTasks > 0)
|
||||
<p class="text-sm text-gray-500">
|
||||
@if($dueSoonTasks > 0)
|
||||
<span class="text-orange-600">{{ $dueSoonTasks }} due soon</span>
|
||||
@endif
|
||||
@if($overdueTasks > 0)
|
||||
<span class="text-red-600">{{ $overdueTasks }} overdue</span>
|
||||
@endif
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button wire:click="create" class="bg-blue-600 text-white px-4 py-2 rounded">Add Task</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white border border-gray-200 rounded p-4 mb-6">
|
||||
<div class="flex gap-4 items-center flex-wrap">
|
||||
<div class="flex-1 min-w-48">
|
||||
<label class="block text-sm font-medium mb-1">Search</label>
|
||||
<input type="text" wire:model.live="search" placeholder="Search tasks..."
|
||||
class="w-full border rounded p-2">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Project</label>
|
||||
<select wire:model.live="projectFilter" class="border rounded p-2">
|
||||
<option value="">All Projects</option>
|
||||
@foreach ($projects as $project)
|
||||
<option value="{{ $project->id }}">{{ $project->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Status</label>
|
||||
<select wire:model.live="statusFilter" class="border rounded p-2">
|
||||
<option value="">All Statuses</option>
|
||||
@foreach ($statuses as $status)
|
||||
<option value="{{ $status }}">{{ ucfirst(str_replace('_', ' ', $status)) }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Priority</label>
|
||||
<select wire:model.live="priorityFilter" class="border rounded p-2">
|
||||
<option value="">All Priorities</option>
|
||||
<option value="0">None (0)</option>
|
||||
<option value="1">Low (1-3)</option>
|
||||
<option value="4">Medium (4-6)</option>
|
||||
<option value="7">High (7-8)</option>
|
||||
<option value="9">Critical (9-10)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex items-end">
|
||||
<button wire:click="clearFilters" class="text-sm text-gray-600 hover:text-gray-800">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white border border-gray-200 rounded overflow-hidden">
|
||||
<table class="w-full">
|
||||
<thead class="bg-gray-50">
|
||||
<tr class="text-left">
|
||||
<th class="p-3">Task</th>
|
||||
<th class="p-3">Project</th>
|
||||
<th class="p-3">Status</th>
|
||||
<th class="p-3">Priority</th>
|
||||
<th class="p-3">Due</th>
|
||||
<th class="p-3">Time</th>
|
||||
<th class="p-3">Comments</th>
|
||||
<th class="p-3 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse ($tasks as $task)
|
||||
<tr wire:key="task-{{ $task->id }}" class="border-b border-gray-100 hover:bg-gray-50">
|
||||
<td class="p-3">
|
||||
<div class="font-medium">{{ $task->title }}</div>
|
||||
@if($task->description)
|
||||
<div class="text-xs text-gray-500 truncate max-w-48">{{ $task->description }}</div>
|
||||
@endif
|
||||
</td>
|
||||
<td class="p-3">
|
||||
@if($task->project)
|
||||
<span class="text-blue-600 hover:underline cursor-pointer"
|
||||
wire:click="$set('projectFilter', {{ $task->project->id }})">
|
||||
{{ $task->project->name }}
|
||||
</span>
|
||||
@else
|
||||
<span class="text-gray-400">—</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="p-3">
|
||||
<select wire:model="status" wire:change="changeStatus({{ $task->id }}, $event.target.value)"
|
||||
class="{{ $this->getStatusColor($task->status) }} rounded p-1 text-sm">
|
||||
@foreach ($statuses as $status)
|
||||
<option value="{{ $status }}" {{ $task->status === $status ? 'selected' : '' }}>
|
||||
{{ ucfirst(str_replace('_', ' ', $status)) }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</td>
|
||||
<td class="p-3">
|
||||
<span class="text-sm">
|
||||
{{ $this->getPriorityLabel($task->priority) }}
|
||||
@if($task->priority > 0)
|
||||
({{ $task->priority }})
|
||||
@endif
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-3">
|
||||
@if($task->due_at)
|
||||
<span class="@if($task->due_at < now() && $task->status !== 'done') text-red-600 @endif">
|
||||
{{ $task->due_at->format('M d') }}
|
||||
</span>
|
||||
@else
|
||||
<span class="text-gray-400">—</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="p-3 text-sm">
|
||||
@if($task->estimated_hours)
|
||||
<span title="Estimated">{{ $task->estimated_hours }}h</span>
|
||||
@endif
|
||||
@if($task->actual_hours)
|
||||
<span title="Actual" class="ml-1">{{ $task->actual_hours }}h</span>
|
||||
@endif
|
||||
@if(!$task->estimated_hours && !$task->actual_hours)
|
||||
<span class="text-gray-400">—</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="p-3 text-center">
|
||||
<span class="bg-gray-100 text-gray-800 text-xs px-2 py-0.5 rounded">
|
||||
{{ $this->getCommentsCount($task->id) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-3 text-right space-x-1">
|
||||
<button wire:click="edit({{ $task->id }})" class="text-blue-600 hover:text-blue-800 text-sm">Edit</button>
|
||||
<button wire:click="delete({{ $task->id }})" wire:confirm="Delete this task?" class="text-red-600 hover:text-red-800 text-sm">Delete</button>
|
||||
<a href="{{ route('task-comments.index', ['task_id' => $task->id]) }}"
|
||||
class="text-purple-600 hover:text-purple-800 text-sm">Comments</a>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="8" class="p-6 text-center text-gray-500">
|
||||
No tasks found. Create your first task!
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@if ($showForm)
|
||||
<div class="fixed inset-0 bg-black/30 flex items-center justify-center z-50">
|
||||
<div class="bg-white p-6 rounded w-full max-w-lg space-y-4 max-h-[90vh] overflow-y-auto">
|
||||
<h2 class="text-lg font-semibold">{{ $editingId ? 'Edit Task' : 'Add Task' }}</h2>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Title</label>
|
||||
<input type="text" wire:model="title" class="w-full border rounded p-2">
|
||||
@error('title') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Description</label>
|
||||
<textarea wire:model="description" rows="4" class="w-full border rounded p-2"></textarea>
|
||||
@error('description') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Project</label>
|
||||
<select wire:model="projectId" class="w-full border rounded p-2">
|
||||
<option value="">No Project</option>
|
||||
@foreach ($projects as $project)
|
||||
<option value="{{ $project->id }}">{{ $project->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@error('projectId') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Status</label>
|
||||
<select wire:model="status" class="w-full border rounded p-2">
|
||||
@foreach ($statuses as $status)
|
||||
<option value="{{ $status }}">{{ ucfirst(str_replace('_', ' ', $status)) }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@error('status') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Priority (0-10)</label>
|
||||
<input type="number" wire:model="priority" min="0" max="10" class="w-full border rounded p-2">
|
||||
@error('priority') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Due Date</label>
|
||||
<input type="datetime-local" wire:model="dueAt" class="w-full border rounded p-2">
|
||||
@error('dueAt') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Estimated Hours</label>
|
||||
<input type="number" wire:model="estimatedHours" step="0.1" min="0" class="w-full border rounded p-2">
|
||||
@error('estimatedHours') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium">Actual Hours</label>
|
||||
<input type="number" wire:model="actualHours" step="0.1" min="0" class="w-full border rounded p-2">
|
||||
@error('actualHours') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2">
|
||||
<button wire:click="$set('showForm', false)" class="px-4 py-2">Cancel</button>
|
||||
<button wire:click="save" class="bg-blue-600 text-white px-4 py-2 rounded">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
Reference in New Issue
Block a user