136 lines
7.0 KiB
PHP
136 lines
7.0 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<div class="space-y-6">
|
|
<!-- Page Header -->
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
<h1 class="text-2xl font-bold text-gray-900">{{ __('task.tasks') }}</h1>
|
|
<div class="flex items-center gap-2">
|
|
<a href="{{ route('tasks.kanban') }}" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
|
|
{{ __('task.kanban_view') }}
|
|
</a>
|
|
<a href="{{ route('tasks.create') }}" class="inline-flex items-center gap-2 px-4 py-2 bg-teal-600 text-white text-sm font-medium rounded-lg hover:bg-teal-700 transition-colors">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
|
|
{{ __('task.new') }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4-Filter Bar -->
|
|
<div class="bg-white rounded-xl border border-gray-200 p-4">
|
|
<form method="GET" action="{{ route('tasks.index') }}" class="flex flex-wrap gap-3 items-end">
|
|
<div class="w-44">
|
|
<label class="block text-xs font-medium text-gray-500 mb-1">{{ __('task.project') }}</label>
|
|
<select name="project_id" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
|
|
<option value="">{{ __('common.all') }}</option>
|
|
@foreach($projects as $project)
|
|
<option value="{{ $project->id }}" {{ request('project_id') == $project->id ? 'selected' : '' }}>{{ $project->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="w-36">
|
|
<label class="block text-xs font-medium text-gray-500 mb-1">{{ __('task.status') }}</label>
|
|
<select name="status" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
|
|
<option value="">{{ __('common.all') }}</option>
|
|
@foreach($statuses as $status)
|
|
<option value="{{ $status }}" {{ request('status') === $status ? 'selected' : '' }}>{{ __('task.status_' . $status) }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="w-36">
|
|
<label class="block text-xs font-medium text-gray-500 mb-1">{{ __('task.priority') }}</label>
|
|
<select name="priority" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
|
|
<option value="">{{ __('common.all') }}</option>
|
|
@foreach($priorities as $priority)
|
|
<option value="{{ $priority }}" {{ request('priority') === $priority ? 'selected' : '' }}>{{ __('task.priority_' . $priority) }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="w-44">
|
|
<label class="block text-xs font-medium text-gray-500 mb-1">{{ __('task.assignee') }}</label>
|
|
<select name="assignee_id" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
|
|
<option value="">{{ __('common.all') }}</option>
|
|
@foreach($users as $user)
|
|
<option value="{{ $user->id }}" {{ request('assignee_id') == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-200 transition-colors">
|
|
{{ __('common.filter') }}
|
|
</button>
|
|
<a href="{{ route('tasks.index') }}" class="px-4 py-2 text-gray-500 text-sm hover:text-gray-700">{{ __('common.reset') }}</a>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Task List -->
|
|
<div class="bg-white rounded-xl border border-gray-200">
|
|
<div class="divide-y divide-gray-100">
|
|
@forelse($tasks as $task)
|
|
<div class="flex items-center gap-4 px-5 py-4 hover:bg-gray-50 transition-colors">
|
|
<!-- Priority Indicator -->
|
|
<x-priority-badge :priority="$task->priority" />
|
|
|
|
<!-- Task Info -->
|
|
<div class="flex-1 min-w-0">
|
|
<a href="{{ route('tasks.show', $task) }}" class="text-sm font-medium text-gray-900 hover:text-teal-600">{{ $task->title }}</a>
|
|
<div class="flex items-center gap-2 mt-0.5 text-xs text-gray-500">
|
|
<span>{{ $task->project?->name }}</span>
|
|
@if($task->due_date)
|
|
<span>•</span>
|
|
<span>{{ calendar_date($task->due_date) }}</span>
|
|
@endif
|
|
@if($task->assignee)
|
|
<span>•</span>
|
|
<span>{{ $task->assignee->name }}</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Status Change -->
|
|
<select onchange="updateTaskStatus({{ $task->id }}, this.value)"
|
|
class="px-2 py-1 text-xs border border-gray-200 rounded-lg focus:ring-2 focus:ring-teal-500 bg-white">
|
|
@foreach($statuses as $s)
|
|
<option value="{{ $s }}" {{ $task->status === $s ? 'selected' : '' }}>{{ __('task.status_' . $s) }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
@empty
|
|
<div class="text-center py-12">
|
|
<svg class="w-12 h-12 mx-auto text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
|
<p class="mt-2 text-gray-500">{{ __('task.no_tasks') }}</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="flex justify-center">
|
|
{{ $tasks->withQueryString()->links() }}
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
async function updateTaskStatus(taskId, status) {
|
|
try {
|
|
const response = await fetch(`/tasks/${taskId}/status`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
'Accept': 'application/json',
|
|
},
|
|
body: JSON.stringify({ status })
|
|
});
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
// Optionally show a toast
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
</script>
|
|
@endpush
|
|
@endsection
|