feat: dodaj scheduled_date na Task i kalendar widget
- Novo polje Task.scheduled_date (DateField, nullable, db_index) za planiranje - Migracija 0009_task_scheduled_date - Celery task notify_upcoming_tasks: dnevno u 08:00 šalje Pusher + email za sutrašnje zadatke - TaskCalendarWidget: react-spring slide panel s lijeve strane, grid prikaz mjeseca, dot indikatori, klik otvara TaskServiceRecordsModal - FleetDashboardShell: import + render kalendara, Planirano stupac u tablici zadataka - TaskCreateModal + TaskServiceRecordsModal: scheduled_date input i prikaz - Admin + serializer + views: scheduled_date filter i prikaz - 47 backend testova prolaze (uključuje 8 novih za notify_upcoming_tasks) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
mariomitte
@@ -175,6 +175,10 @@ CELERY_BEAT_SCHEDULE = {
|
||||
'task': 'modules.fleet.tasks.cleanup_expired_generated_pdfs_task',
|
||||
'schedule': crontab(minute=0),
|
||||
},
|
||||
'notify-upcoming-tasks-daily': {
|
||||
'task': 'modules.task_management.tasks.notify_upcoming_tasks',
|
||||
'schedule': crontab(hour=8, minute=0),
|
||||
},
|
||||
}
|
||||
|
||||
# URL kojim će preglednik dohvaćati statiku
|
||||
|
||||
0
backend/modules/__init__.py
Normal file
0
backend/modules/__init__.py
Normal file
@@ -250,6 +250,7 @@ class WorkOrder(BaseModel):
|
||||
('defektaza', _("Defektaža")),
|
||||
('kontrola', _("Kontrola")),
|
||||
('redovni_pregled', _("Redovni pregled")),
|
||||
('popravak', _("Popravak")),
|
||||
]
|
||||
|
||||
vehicle = models.ForeignKey(Vehicle, on_delete=models.PROTECT, related_name='work_orders', verbose_name=_("Vozilo"))
|
||||
|
||||
@@ -26,8 +26,8 @@ class TaskTemplateEntryInline(admin.TabularInline):
|
||||
|
||||
@admin.register(Task)
|
||||
class TaskAdmin(admin.ModelAdmin):
|
||||
list_display = ('title', 'status', 'assigned_to', 'vehicle', 'work_order', 'created_at')
|
||||
list_filter = ('status', 'created_at', 'work_order')
|
||||
list_display = ('title', 'status', 'scheduled_date', 'assigned_to', 'vehicle', 'work_order', 'created_at')
|
||||
list_filter = ('status', 'scheduled_date', 'created_at', 'work_order')
|
||||
search_fields = ('title', 'description', 'work_order__id', 'work_order__vehicle__registration_number')
|
||||
readonly_fields = ('id', 'created_at', 'updated_at')
|
||||
inlines = (TaskWorkHoursTableInline, TaskWorkEntryInline)
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
from django.db import migrations, models
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
dependencies = [
|
||||
('task_management', '0008_task_add_ready_for_completion_status'),
|
||||
]
|
||||
|
||||
operations = [
|
||||
migrations.AddField(
|
||||
model_name='task',
|
||||
name='scheduled_date',
|
||||
field=models.DateField(
|
||||
null=True,
|
||||
blank=True,
|
||||
db_index=True,
|
||||
verbose_name='Planirani datum izvršenja',
|
||||
help_text='Datum kada je planirano izvršenje radnog zadatka.',
|
||||
),
|
||||
),
|
||||
]
|
||||
@@ -47,6 +47,13 @@ class Task(BaseModel):
|
||||
related_name='work_order_tasks',
|
||||
verbose_name=_("Putni nalog"),
|
||||
)
|
||||
scheduled_date = models.DateField(
|
||||
null=True,
|
||||
blank=True,
|
||||
db_index=True,
|
||||
verbose_name=_("Planirani datum izvršenja"),
|
||||
help_text=_("Datum kada je planirano izvršenje radnog zadatka."),
|
||||
)
|
||||
|
||||
class Meta:
|
||||
ordering = ['-created_at']
|
||||
|
||||
@@ -96,6 +96,7 @@ class TaskSerializer(serializers.ModelSerializer):
|
||||
'assigned_to', 'assigned_to_name',
|
||||
'vehicle', 'vehicle_registration',
|
||||
'work_order', 'work_order_label',
|
||||
'scheduled_date',
|
||||
'template_id', 'auto_close_work_order',
|
||||
'created_at',
|
||||
]
|
||||
@@ -106,6 +107,7 @@ class TaskSerializer(serializers.ModelSerializer):
|
||||
'status': {'required': False},
|
||||
'work_order': {'required': False, 'allow_null': True},
|
||||
'vehicle': {'required': False, 'allow_null': True},
|
||||
'scheduled_date': {'required': False, 'allow_null': True},
|
||||
}
|
||||
|
||||
def validate_title(self, value):
|
||||
|
||||
@@ -1,10 +1,64 @@
|
||||
# backend/modules/task_management/tasks.py
|
||||
|
||||
import logging
|
||||
from celery import shared_task
|
||||
from .models import Task
|
||||
from django.contrib.auth import get_user_model
|
||||
from modules.fleet.models import Vehicle, WorkOrder
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
|
||||
@shared_task
|
||||
def notify_upcoming_tasks():
|
||||
"""
|
||||
Dnevna Celery periodik task koji šalje Pusher + email notifikacije
|
||||
za radne zadatke čiji je planirani datum izvršenja sutra.
|
||||
"""
|
||||
from datetime import date, timedelta
|
||||
from modules.fleet.services import NotificationService
|
||||
|
||||
tomorrow = date.today() + timedelta(days=1)
|
||||
upcoming = Task.objects.filter(
|
||||
is_active=True,
|
||||
scheduled_date=tomorrow,
|
||||
status__in=('aktivan', 'servis'),
|
||||
).select_related('assigned_to', 'vehicle')
|
||||
|
||||
notified = 0
|
||||
for task in upcoming:
|
||||
recipient = task.assigned_to
|
||||
if not recipient:
|
||||
continue
|
||||
vehicle_label = (
|
||||
task.vehicle.registration_number if task.vehicle else 'nepoznato'
|
||||
)
|
||||
try:
|
||||
NotificationService.create_notification(
|
||||
recipient=recipient,
|
||||
title=f"Sutra planirani zadatak: {task.title}",
|
||||
message=(
|
||||
f"Radni zadatak '{task.title}' na dizalici {vehicle_label} "
|
||||
f"je planiran za sutra ({tomorrow.strftime('%d.%m.%Y')})."
|
||||
),
|
||||
level="info",
|
||||
send_email=True,
|
||||
metadata={
|
||||
"entity_type": "task",
|
||||
"task_id": str(task.id),
|
||||
"vehicle_id": str(task.vehicle_id) if task.vehicle_id else None,
|
||||
"section": "dashboard",
|
||||
"scheduled_date": tomorrow.isoformat(),
|
||||
},
|
||||
)
|
||||
notified += 1
|
||||
except Exception:
|
||||
logger.exception("Greška pri slanju notifikacije za task %s", task.id)
|
||||
|
||||
logger.info("notify_upcoming_tasks: obaviješteno %d servisera za datum %s", notified, tomorrow)
|
||||
return {"notified": notified, "date": tomorrow.isoformat()}
|
||||
|
||||
|
||||
@shared_task
|
||||
def create_task_from_invoice(invoice_data):
|
||||
"""
|
||||
@@ -25,7 +79,7 @@ def create_task_from_invoice(invoice_data):
|
||||
vehicle = work_order.vehicle
|
||||
if vehicle is None and vehicle_id:
|
||||
vehicle = Vehicle.objects.filter(pk=vehicle_id).first()
|
||||
|
||||
|
||||
if amount > 1000:
|
||||
Task.objects.create(
|
||||
title=f"Provjera računa: {invoice_data['invoice_number']}",
|
||||
@@ -34,4 +88,4 @@ def create_task_from_invoice(invoice_data):
|
||||
status='aktivan',
|
||||
vehicle=vehicle,
|
||||
work_order=work_order,
|
||||
)
|
||||
)
|
||||
|
||||
0
backend/modules/task_management/tests/__init__.py
Normal file
0
backend/modules/task_management/tests/__init__.py
Normal file
@@ -1,5 +1,6 @@
|
||||
from django.test import TestCase
|
||||
from django.contrib.auth import get_user_model
|
||||
import datetime
|
||||
|
||||
from modules.task_management.models import Task
|
||||
|
||||
@@ -9,4 +10,25 @@ class TaskModelTests(TestCase):
|
||||
user = get_user_model().objects.create_user(username="u1", email="u1@example.test", password="pass")
|
||||
task = Task.objects.create(title="My Task", description="Desc", assigned_to=user)
|
||||
assert str(task).startswith("My Task")
|
||||
assert "aktivan" in str(task) or "(" in str(task) # basic sanity
|
||||
assert "aktivan" in str(task) or "(" in str(task)
|
||||
|
||||
def test_scheduled_date_defaults_to_null(self):
|
||||
user = get_user_model().objects.create_user(username="u2", email="u2@example.test", password="pass")
|
||||
task = Task.objects.create(title="Task bez datuma", assigned_to=user)
|
||||
assert task.scheduled_date is None
|
||||
|
||||
def test_scheduled_date_is_saved_and_retrieved(self):
|
||||
user = get_user_model().objects.create_user(username="u3", email="u3@example.test", password="pass")
|
||||
target = datetime.date(2026, 8, 15)
|
||||
task = Task.objects.create(title="Planirani task", assigned_to=user, scheduled_date=target)
|
||||
task.refresh_from_db()
|
||||
assert task.scheduled_date == target
|
||||
|
||||
def test_scheduled_date_can_be_updated_to_null(self):
|
||||
user = get_user_model().objects.create_user(username="u4", email="u4@example.test", password="pass")
|
||||
target = datetime.date(2026, 8, 15)
|
||||
task = Task.objects.create(title="Task s datumom", assigned_to=user, scheduled_date=target)
|
||||
task.scheduled_date = None
|
||||
task.save()
|
||||
task.refresh_from_db()
|
||||
assert task.scheduled_date is None
|
||||
@@ -43,4 +43,41 @@ class TaskSerializerTests(TestCase):
|
||||
task = Task.objects.create(title="Task 4", description="", status="servis", assigned_to=self.user, vehicle=self.vehicle)
|
||||
|
||||
serializer = TaskSerializer(instance=task, data={"status": "zavrsen", "work_order": str(work_order.id)}, partial=True)
|
||||
assert serializer.is_valid(), serializer.errors
|
||||
assert serializer.is_valid(), serializer.errors
|
||||
|
||||
def test_scheduled_date_is_optional_on_create(self):
|
||||
serializer = TaskSerializer(data={"title": "Task planned", "status": "aktivan", "vehicle": str(self.vehicle.id)})
|
||||
assert serializer.is_valid(), serializer.errors
|
||||
assert 'scheduled_date' not in serializer.errors
|
||||
|
||||
def test_scheduled_date_is_included_in_serialized_output(self):
|
||||
import datetime
|
||||
task = Task.objects.create(
|
||||
title="Task with date",
|
||||
assigned_to=self.user,
|
||||
vehicle=self.vehicle,
|
||||
scheduled_date=datetime.date(2026, 9, 1),
|
||||
)
|
||||
serializer = TaskSerializer(instance=task)
|
||||
assert 'scheduled_date' in serializer.data
|
||||
assert str(serializer.data['scheduled_date']) == '2026-09-01'
|
||||
|
||||
def test_scheduled_date_can_be_null_in_serialized_output(self):
|
||||
task = Task.objects.create(title="Task no date", assigned_to=self.user, vehicle=self.vehicle)
|
||||
serializer = TaskSerializer(instance=task)
|
||||
assert serializer.data['scheduled_date'] is None
|
||||
|
||||
def test_scheduled_date_accepts_valid_date(self):
|
||||
serializer = TaskSerializer(
|
||||
data={"title": "Task mit datum", "status": "aktivan",
|
||||
"vehicle": str(self.vehicle.id), "scheduled_date": "2026-12-25"}
|
||||
)
|
||||
assert serializer.is_valid(), serializer.errors
|
||||
|
||||
def test_scheduled_date_rejects_invalid_date_string(self):
|
||||
serializer = TaskSerializer(
|
||||
data={"title": "Task bad date", "status": "aktivan",
|
||||
"vehicle": str(self.vehicle.id), "scheduled_date": "not-a-date"}
|
||||
)
|
||||
assert not serializer.is_valid()
|
||||
assert 'scheduled_date' in serializer.errors
|
||||
@@ -0,0 +1,133 @@
|
||||
import datetime
|
||||
from unittest.mock import patch
|
||||
from django.test import TestCase
|
||||
from django.contrib.auth import get_user_model
|
||||
from modules.task_management.tasks import notify_upcoming_tasks
|
||||
from modules.task_management.models import Task
|
||||
from modules.fleet.models import Vehicle, WorkOrder
|
||||
|
||||
|
||||
class NotifyUpcomingTasksTests(TestCase):
|
||||
def setUp(self):
|
||||
User = get_user_model()
|
||||
self.user = User.objects.create_user(
|
||||
username="serviser-notif",
|
||||
email="serviser@example.test",
|
||||
password="pass",
|
||||
)
|
||||
self.vehicle = Vehicle.objects.create(
|
||||
registration_number="ZG-NOTIF-01",
|
||||
asset_type='crane',
|
||||
)
|
||||
|
||||
@patch('modules.fleet.services.NotificationService.create_notification')
|
||||
def test_notifies_for_task_scheduled_tomorrow(self, mock_notify):
|
||||
tomorrow = datetime.date.today() + datetime.timedelta(days=1)
|
||||
Task.objects.create(
|
||||
title="Sutrašnji zadatak",
|
||||
assigned_to=self.user,
|
||||
vehicle=self.vehicle,
|
||||
status='aktivan',
|
||||
scheduled_date=tomorrow,
|
||||
)
|
||||
result = notify_upcoming_tasks()
|
||||
self.assertEqual(result['notified'], 1)
|
||||
mock_notify.assert_called_once()
|
||||
call_kwargs = mock_notify.call_args.kwargs
|
||||
self.assertEqual(call_kwargs['recipient'], self.user)
|
||||
self.assertIn('Sutrašnji zadatak', call_kwargs['title'])
|
||||
self.assertEqual(call_kwargs['level'], 'info')
|
||||
self.assertTrue(call_kwargs.get('send_email'))
|
||||
|
||||
@patch('modules.fleet.services.NotificationService.create_notification')
|
||||
def test_notifies_multiple_upcoming_tasks(self, mock_notify):
|
||||
tomorrow = datetime.date.today() + datetime.timedelta(days=1)
|
||||
Task.objects.create(title="Task A", assigned_to=self.user, vehicle=self.vehicle,
|
||||
status='aktivan', scheduled_date=tomorrow)
|
||||
Task.objects.create(title="Task B", assigned_to=self.user, vehicle=self.vehicle,
|
||||
status='servis', scheduled_date=tomorrow)
|
||||
result = notify_upcoming_tasks()
|
||||
self.assertEqual(result['notified'], 2)
|
||||
self.assertEqual(mock_notify.call_count, 2)
|
||||
|
||||
@patch('modules.fleet.services.NotificationService.create_notification')
|
||||
def test_skips_task_without_scheduled_date(self, mock_notify):
|
||||
Task.objects.create(
|
||||
title="Bez datuma", assigned_to=self.user, vehicle=self.vehicle,
|
||||
status='aktivan', scheduled_date=None,
|
||||
)
|
||||
result = notify_upcoming_tasks()
|
||||
self.assertEqual(result['notified'], 0)
|
||||
mock_notify.assert_not_called()
|
||||
|
||||
@patch('modules.fleet.services.NotificationService.create_notification')
|
||||
def test_skips_task_scheduled_today(self, mock_notify):
|
||||
today = datetime.date.today()
|
||||
Task.objects.create(
|
||||
title="Danas", assigned_to=self.user, vehicle=self.vehicle,
|
||||
status='aktivan', scheduled_date=today,
|
||||
)
|
||||
result = notify_upcoming_tasks()
|
||||
self.assertEqual(result['notified'], 0)
|
||||
mock_notify.assert_not_called()
|
||||
|
||||
@patch('modules.fleet.services.NotificationService.create_notification')
|
||||
def test_skips_task_scheduled_in_past(self, mock_notify):
|
||||
yesterday = datetime.date.today() - datetime.timedelta(days=1)
|
||||
Task.objects.create(
|
||||
title="Jučer", assigned_to=self.user, vehicle=self.vehicle,
|
||||
status='aktivan', scheduled_date=yesterday,
|
||||
)
|
||||
result = notify_upcoming_tasks()
|
||||
self.assertEqual(result['notified'], 0)
|
||||
mock_notify.assert_not_called()
|
||||
|
||||
@patch('modules.fleet.services.NotificationService.create_notification')
|
||||
def test_skips_finished_task(self, mock_notify):
|
||||
tomorrow = datetime.date.today() + datetime.timedelta(days=1)
|
||||
vehicle2 = Vehicle.objects.create(registration_number="ZG-NOTIF-02", asset_type='crane')
|
||||
work_order = WorkOrder.objects.create(
|
||||
vehicle=vehicle2, creator=self.user, purpose='defektaza',
|
||||
status='closed', start_mileage=100, end_mileage=200,
|
||||
)
|
||||
Task.objects.create(
|
||||
title="Završeni", assigned_to=self.user, vehicle=vehicle2,
|
||||
status='zavrsen', scheduled_date=tomorrow, work_order=work_order,
|
||||
)
|
||||
result = notify_upcoming_tasks()
|
||||
self.assertEqual(result['notified'], 0)
|
||||
mock_notify.assert_not_called()
|
||||
|
||||
@patch('modules.fleet.services.NotificationService.create_notification')
|
||||
def test_skips_cancelled_task(self, mock_notify):
|
||||
tomorrow = datetime.date.today() + datetime.timedelta(days=1)
|
||||
vehicle3 = Vehicle.objects.create(registration_number="ZG-NOTIF-03", asset_type='crane')
|
||||
work_order = WorkOrder.objects.create(
|
||||
vehicle=vehicle3, creator=self.user, purpose='kontrola',
|
||||
status='closed', start_mileage=50, end_mileage=100,
|
||||
)
|
||||
Task.objects.create(
|
||||
title="Otkazani", assigned_to=self.user, vehicle=vehicle3,
|
||||
status='neaktivan', scheduled_date=tomorrow, work_order=work_order,
|
||||
)
|
||||
result = notify_upcoming_tasks()
|
||||
self.assertEqual(result['notified'], 0)
|
||||
mock_notify.assert_not_called()
|
||||
|
||||
@patch('modules.fleet.services.NotificationService.create_notification')
|
||||
def test_skips_task_without_assigned_user(self, mock_notify):
|
||||
tomorrow = datetime.date.today() + datetime.timedelta(days=1)
|
||||
Task.objects.create(
|
||||
title="Bez servisera", assigned_to=None, vehicle=self.vehicle,
|
||||
status='aktivan', scheduled_date=tomorrow,
|
||||
)
|
||||
result = notify_upcoming_tasks()
|
||||
self.assertEqual(result['notified'], 0)
|
||||
mock_notify.assert_not_called()
|
||||
|
||||
@patch('modules.fleet.services.NotificationService.create_notification')
|
||||
def test_result_includes_date_string(self, mock_notify):
|
||||
result = notify_upcoming_tasks()
|
||||
tomorrow = datetime.date.today() + datetime.timedelta(days=1)
|
||||
self.assertEqual(result['date'], tomorrow.isoformat())
|
||||
self.assertEqual(result['notified'], 0)
|
||||
@@ -27,6 +27,9 @@ class TaskViewSet(viewsets.ModelViewSet):
|
||||
vehicle_id = self.request.query_params.get('vehicle')
|
||||
if vehicle_id:
|
||||
qs = qs.filter(vehicle_id=vehicle_id)
|
||||
scheduled_date = self.request.query_params.get('scheduled_date')
|
||||
if scheduled_date:
|
||||
qs = qs.filter(scheduled_date=scheduled_date)
|
||||
return qs
|
||||
|
||||
def perform_create(self, serializer):
|
||||
|
||||
@@ -6,6 +6,7 @@ import WorkOrderModal from './WorkOrderModal';
|
||||
import TaskCreateModal from './TaskCreateModal';
|
||||
import TaskServiceRecordsModal from './TaskServiceRecordsModal';
|
||||
import WorkOrderDetailModal from './WorkOrderDetailModal';
|
||||
import TaskCalendarWidget from './TaskCalendarWidget';
|
||||
import SyncLogPanel from './SyncLogPanel';
|
||||
import ServiceRecordForm from '../fleet/ServiceRecordForm';
|
||||
import ServicePhotoUpload from '../fleet/ServicePhotoUpload';
|
||||
@@ -578,6 +579,7 @@ export default function FleetDashboardShell({ initialSection = 'dashboard', page
|
||||
const taskColumns = [
|
||||
{ key: 'title', label: 'Radni zadatak', className: 'px-4 py-3' },
|
||||
{ key: 'status', label: 'Status', className: 'px-4 py-3' },
|
||||
{ key: 'scheduledDate', label: 'Planirano', className: 'px-4 py-3' },
|
||||
{ key: 'createdAt', label: 'Vrijeme izrade', className: 'px-4 py-3' },
|
||||
{ key: 'vehicle', label: 'Dizalica', className: 'px-4 py-3' },
|
||||
{ key: 'workOrder', label: 'Putni nalog', className: 'px-4 py-3' },
|
||||
@@ -591,6 +593,12 @@ export default function FleetDashboardShell({ initialSection = 'dashboard', page
|
||||
|
||||
return (
|
||||
<AnimatedPage className="min-h-screen">
|
||||
{hasMounted && (
|
||||
<TaskCalendarWidget
|
||||
tasks={tasks}
|
||||
onTaskClick={(task) => setSelectedTask(task)}
|
||||
/>
|
||||
)}
|
||||
<main className="min-w-0">
|
||||
<DashboardTopbar
|
||||
activeSection={activeSection}
|
||||
@@ -750,6 +758,15 @@ export default function FleetDashboardShell({ initialSection = 'dashboard', page
|
||||
{getStatusLabel(task.status || '-')}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
{task.scheduled_date ? (
|
||||
<span className="font-medium text-indigo-700">
|
||||
{formatDate(task.scheduled_date)}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-text-muted">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td
|
||||
className="px-4 py-3"
|
||||
title={formatDateTime(task.created_at) !== '-' ? formatDateTime(task.created_at) : undefined}
|
||||
|
||||
267
frontend/src/components/dashboard/TaskCalendarWidget.jsx
Normal file
267
frontend/src/components/dashboard/TaskCalendarWidget.jsx
Normal file
@@ -0,0 +1,267 @@
|
||||
import { useMemo, useState } from 'preact/hooks';
|
||||
import { animated, useSpring } from '@react-spring/web';
|
||||
import { getStatusLabel } from '../../stores/taskStore';
|
||||
|
||||
const WEEKDAY_LABELS = ['Po', 'Ut', 'Sr', 'Če', 'Pe', 'Su', 'Ne'];
|
||||
const MONTH_NAMES = [
|
||||
'Siječanj', 'Veljača', 'Ožujak', 'Travanj', 'Svibanj', 'Lipanj',
|
||||
'Srpanj', 'Kolovoz', 'Rujan', 'Listopad', 'Studeni', 'Prosinac',
|
||||
];
|
||||
const PANEL_WIDTH = 300;
|
||||
|
||||
function toIsoDateKey(dateStr) {
|
||||
if (!dateStr) return null;
|
||||
const d = new Date(dateStr);
|
||||
if (Number.isNaN(d.getTime())) return null;
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function formatDayLabel(year, month, day) {
|
||||
return `${String(day).padStart(2, '0')}.${String(month + 1).padStart(2, '0')}.${year}`;
|
||||
}
|
||||
|
||||
export default function TaskCalendarWidget({ tasks = [], onTaskClick }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [viewYear, setViewYear] = useState(() => new Date().getFullYear());
|
||||
const [viewMonth, setViewMonth] = useState(() => new Date().getMonth());
|
||||
const [selectedDay, setSelectedDay] = useState(null);
|
||||
|
||||
const panelSpring = useSpring({
|
||||
transform: open ? 'translate3d(0%,0,0)' : `translate3d(-100%,0,0)`,
|
||||
config: { tension: 260, friction: 28 },
|
||||
});
|
||||
|
||||
const buttonSpring = useSpring({
|
||||
left: open ? PANEL_WIDTH : 0,
|
||||
config: { tension: 260, friction: 28 },
|
||||
});
|
||||
|
||||
// Map: "YYYY-MM-DD" -> task[]
|
||||
const tasksByDate = useMemo(() => {
|
||||
const map = {};
|
||||
for (const task of tasks) {
|
||||
const key = toIsoDateKey(task.scheduled_date);
|
||||
if (!key) continue;
|
||||
if (!map[key]) map[key] = [];
|
||||
map[key].push(task);
|
||||
}
|
||||
return map;
|
||||
}, [tasks]);
|
||||
|
||||
// Calendar grid cells for current month
|
||||
const calendarDays = useMemo(() => {
|
||||
const firstDay = new Date(viewYear, viewMonth, 1);
|
||||
let startDow = firstDay.getDay(); // 0=Sun
|
||||
startDow = (startDow + 6) % 7; // shift to Mon=0
|
||||
const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
|
||||
const cells = [];
|
||||
for (let i = 0; i < startDow; i++) cells.push(null);
|
||||
for (let d = 1; d <= daysInMonth; d++) cells.push(d);
|
||||
return cells;
|
||||
}, [viewYear, viewMonth]);
|
||||
|
||||
const selectedDayKey = selectedDay
|
||||
? `${viewYear}-${String(viewMonth + 1).padStart(2, '0')}-${String(selectedDay).padStart(2, '0')}`
|
||||
: null;
|
||||
const selectedDayTasks = selectedDayKey ? (tasksByDate[selectedDayKey] ?? []) : [];
|
||||
const today = new Date();
|
||||
|
||||
function prevMonth() {
|
||||
setSelectedDay(null);
|
||||
if (viewMonth === 0) { setViewYear((y) => y - 1); setViewMonth(11); }
|
||||
else setViewMonth((m) => m - 1);
|
||||
}
|
||||
function nextMonth() {
|
||||
setSelectedDay(null);
|
||||
if (viewMonth === 11) { setViewYear((y) => y + 1); setViewMonth(0); }
|
||||
else setViewMonth((m) => m + 1);
|
||||
}
|
||||
|
||||
function handleDayClick(day) {
|
||||
setSelectedDay((prev) => (prev === day ? null : day));
|
||||
}
|
||||
|
||||
function handleTaskClick(task) {
|
||||
onTaskClick?.(task);
|
||||
setOpen(false);
|
||||
}
|
||||
|
||||
const totalScheduled = Object.values(tasksByDate).flat().length;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
{open && (
|
||||
<div
|
||||
role="presentation"
|
||||
className="fixed inset-0 z-[45] bg-black/20 backdrop-blur-[1px]"
|
||||
onClick={() => setOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Sliding panel */}
|
||||
<animated.div
|
||||
style={{ ...panelSpring, width: `${PANEL_WIDTH}px` }}
|
||||
className="fixed left-0 top-0 z-[46] flex h-screen flex-col overflow-hidden border-r border-border-hairline bg-canvas-elevated shadow-2xl"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between border-b border-border-hairline px-4 py-3">
|
||||
<h2 className="text-sm font-semibold text-text-main">📅 Kalendar zadataka</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(false)}
|
||||
className="rounded-md p-1 text-text-muted hover:bg-canvas-deep"
|
||||
aria-label="Zatvori kalendar"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Month navigation */}
|
||||
<div className="flex items-center justify-between px-4 py-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={prevMonth}
|
||||
className="rounded p-1 text-sm text-text-main hover:bg-canvas-deep"
|
||||
aria-label="Prethodni mjesec"
|
||||
>
|
||||
◀
|
||||
</button>
|
||||
<span className="text-sm font-medium text-text-main">
|
||||
{MONTH_NAMES[viewMonth]} {viewYear}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={nextMonth}
|
||||
className="rounded p-1 text-sm text-text-main hover:bg-canvas-deep"
|
||||
aria-label="Sljedeći mjesec"
|
||||
>
|
||||
▶
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Calendar grid */}
|
||||
<div className="px-3">
|
||||
<div className="grid grid-cols-7 text-center">
|
||||
{WEEKDAY_LABELS.map((label) => (
|
||||
<div key={label} className="py-1 text-[11px] font-medium text-text-muted">
|
||||
{label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="grid grid-cols-7 gap-y-0.5 text-center">
|
||||
{calendarDays.map((day, idx) => {
|
||||
if (!day) return <div key={`e-${idx}`} />;
|
||||
const key = `${viewYear}-${String(viewMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
||||
const hasTasks = Boolean(tasksByDate[key]?.length);
|
||||
const taskCount = tasksByDate[key]?.length ?? 0;
|
||||
const isToday =
|
||||
today.getFullYear() === viewYear &&
|
||||
today.getMonth() === viewMonth &&
|
||||
today.getDate() === day;
|
||||
const isSelected = selectedDay === day;
|
||||
return (
|
||||
<button
|
||||
key={key}
|
||||
type="button"
|
||||
onClick={() => handleDayClick(day)}
|
||||
title={hasTasks ? `${taskCount} zadatak/a` : undefined}
|
||||
className={[
|
||||
'relative mx-auto flex h-8 w-8 items-center justify-center rounded-full text-xs transition-colors',
|
||||
isSelected
|
||||
? 'bg-indigo-600 font-semibold text-white'
|
||||
: isToday
|
||||
? 'bg-indigo-50 font-semibold text-indigo-700'
|
||||
: hasTasks
|
||||
? 'font-medium text-text-main hover:bg-canvas-deep'
|
||||
: 'text-text-main hover:bg-canvas-deep',
|
||||
].join(' ')}
|
||||
>
|
||||
{day}
|
||||
{hasTasks && (
|
||||
<span
|
||||
className={[
|
||||
'absolute bottom-0.5 left-1/2 h-1.5 w-1.5 -translate-x-1/2 rounded-full',
|
||||
isSelected ? 'bg-white' : 'bg-indigo-500',
|
||||
].join(' ')}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="mt-2 border-t border-border-hairline" />
|
||||
|
||||
{/* Task list for selected day OR hint */}
|
||||
<div className="flex-1 overflow-y-auto px-4 py-3">
|
||||
{selectedDay ? (
|
||||
<>
|
||||
<p className="mb-2 text-[11px] font-semibold uppercase tracking-wide text-text-muted">
|
||||
{formatDayLabel(viewYear, viewMonth, selectedDay)}
|
||||
</p>
|
||||
{selectedDayTasks.length === 0 ? (
|
||||
<p className="text-sm text-text-muted">Nema zadataka za odabrani datum.</p>
|
||||
) : (
|
||||
<ul className="space-y-1.5">
|
||||
{selectedDayTasks.map((task) => (
|
||||
<li key={task.id}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleTaskClick(task)}
|
||||
className="w-full rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-left text-sm hover:bg-indigo-50 hover:border-indigo-200 transition-colors"
|
||||
>
|
||||
<span className="block truncate font-medium text-text-main">
|
||||
{task.title || '-'}
|
||||
</span>
|
||||
<span className="mt-0.5 block text-[11px] text-text-muted">
|
||||
{task.assigned_to_name || '-'} •{' '}
|
||||
{getStatusLabel(task.status || '-')}
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-xs text-text-muted">
|
||||
Odaberite datum u kalendaru za prikaz zadataka.
|
||||
</p>
|
||||
{totalScheduled > 0 && (
|
||||
<p className="mt-1.5 text-xs font-medium text-indigo-600">
|
||||
{totalScheduled} zadatak/a s planiranim datumom.
|
||||
</p>
|
||||
)}
|
||||
{totalScheduled === 0 && (
|
||||
<p className="mt-1.5 text-[11px] text-text-muted">
|
||||
Nijedan zadatak nema postavljen planirani datum.
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</animated.div>
|
||||
|
||||
{/* Toggle tab button — slides right as panel opens */}
|
||||
<animated.button
|
||||
type="button"
|
||||
style={{ left: buttonSpring.left.to((v) => `${v}px`) }}
|
||||
onClick={() => setOpen((o) => !o)}
|
||||
className="fixed top-1/2 z-[47] -translate-y-1/2 rounded-r-xl border border-l-0 border-border-hairline bg-canvas-elevated px-1.5 py-4 shadow-md hover:bg-indigo-50 focus:outline-none"
|
||||
aria-label={open ? 'Zatvori kalendar' : 'Otvori kalendar'}
|
||||
title="Kalendar zadataka"
|
||||
>
|
||||
<span
|
||||
style={{ writingMode: 'vertical-rl', textOrientation: 'mixed' }}
|
||||
className="select-none text-[11px] font-medium text-text-main"
|
||||
>
|
||||
📅 Kalendar
|
||||
</span>
|
||||
</animated.button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -10,6 +10,7 @@ const INITIAL_FORM = {
|
||||
description: '',
|
||||
status: 'aktivan',
|
||||
work_order: '',
|
||||
scheduled_date: '',
|
||||
};
|
||||
|
||||
export default function TaskCreateModal({ open, workOrders = [], contextCrane = null, onClose, onSuccess }) {
|
||||
@@ -50,6 +51,7 @@ export default function TaskCreateModal({ open, workOrders = [], contextCrane =
|
||||
description: selectedTemplate.description || '',
|
||||
status: 'aktivan',
|
||||
work_order: '',
|
||||
// scheduled_date is kept so user can set it in template mode too
|
||||
}));
|
||||
}, [selectedTemplate]);
|
||||
|
||||
@@ -98,6 +100,7 @@ export default function TaskCreateModal({ open, workOrders = [], contextCrane =
|
||||
template_id: templateId,
|
||||
vehicle: contextCrane.id,
|
||||
work_order: null,
|
||||
scheduled_date: form.scheduled_date || null,
|
||||
};
|
||||
} else {
|
||||
const title = String(form.title || '').trim();
|
||||
@@ -115,6 +118,7 @@ export default function TaskCreateModal({ open, workOrders = [], contextCrane =
|
||||
status: form.status || 'aktivan',
|
||||
vehicle: contextCrane.id,
|
||||
work_order: form.work_order || null,
|
||||
scheduled_date: form.scheduled_date || null,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -231,6 +235,17 @@ export default function TaskCreateModal({ open, workOrders = [], contextCrane =
|
||||
</label>
|
||||
|
||||
<label className="flex flex-col gap-1 text-sm">
|
||||
<span className="font-medium text-text-main">Planirani datum izvršenja</span>
|
||||
<input
|
||||
type="date"
|
||||
value={form.scheduled_date}
|
||||
onInput={(event) => setField('scheduled_date', event.currentTarget.value)}
|
||||
disabled={submitting}
|
||||
className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main disabled:opacity-50"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="flex flex-col gap-1 text-sm sm:col-span-2">
|
||||
<span className="font-medium text-text-main">Povezani putni nalog</span>
|
||||
<select
|
||||
value={form.work_order}
|
||||
|
||||
@@ -47,6 +47,7 @@ export default function TaskServiceRecordsModal({
|
||||
title: '',
|
||||
description: '',
|
||||
status: 'aktivan',
|
||||
scheduled_date: '',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
@@ -67,6 +68,7 @@ export default function TaskServiceRecordsModal({
|
||||
title: String(task.title || ''),
|
||||
description: String(task.description || ''),
|
||||
status: String(task.status || 'aktivan'),
|
||||
scheduled_date: String(task.scheduled_date || ''),
|
||||
});
|
||||
}, [task?.id, task?.work_order]);
|
||||
|
||||
@@ -117,7 +119,8 @@ export default function TaskServiceRecordsModal({
|
||||
title,
|
||||
description,
|
||||
status,
|
||||
});
|
||||
scheduled_date: taskForm.scheduled_date || null,
|
||||
});
|
||||
setShowTaskEditor(false);
|
||||
} catch (error) {
|
||||
const conflictCode = error?.details?.code;
|
||||
@@ -130,6 +133,7 @@ export default function TaskServiceRecordsModal({
|
||||
title,
|
||||
description,
|
||||
status,
|
||||
scheduled_date: taskForm.scheduled_date || null,
|
||||
auto_close_work_order: true,
|
||||
});
|
||||
setShowTaskEditor(false);
|
||||
@@ -215,6 +219,10 @@ export default function TaskServiceRecordsModal({
|
||||
<dt className="text-xs text-text-muted">Putni nalog</dt>
|
||||
<dd className="text-text-main">{task.work_order_label || '-'}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-xs text-text-muted">Planirani datum</dt>
|
||||
<dd className="text-text-main">{task.scheduled_date ? formatDate(task.scheduled_date) : '-'}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-xs text-text-muted">Vrijeme izrade</dt>
|
||||
<dd className="text-text-main">{formatDateTime(task.created_at)}</dd>
|
||||
@@ -262,6 +270,16 @@ export default function TaskServiceRecordsModal({
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="flex flex-col gap-1 text-sm">
|
||||
<span className="text-xs text-text-muted">Planirani datum izvršenja</span>
|
||||
<input
|
||||
type="date"
|
||||
value={taskForm.scheduled_date || ''}
|
||||
onInput={(event) => setTaskForm((prev) => ({ ...prev, scheduled_date: event.currentTarget.value }))}
|
||||
disabled={updatingTask}
|
||||
className="rounded-lg border border-border-hairline bg-canvas-elevated px-3 py-2 text-text-main disabled:opacity-60"
|
||||
/>
|
||||
</label>
|
||||
{taskError ? (
|
||||
<div className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
|
||||
{taskError}
|
||||
@@ -277,6 +295,7 @@ export default function TaskServiceRecordsModal({
|
||||
title: String(task.title || ''),
|
||||
description: String(task.description || ''),
|
||||
status: String(task.status || 'aktivan'),
|
||||
scheduled_date: String(task.scheduled_date || ''),
|
||||
});
|
||||
}}
|
||||
disabled={updatingTask}
|
||||
|
||||
Reference in New Issue
Block a user