717 lines
30 KiB
TypeScript
717 lines
30 KiB
TypeScript
|
|
|||
|
|
import React, { useState, useEffect } from 'react';
|
|||
|
|
import { BuildingTask, Employee, TaskComment, WorkPhoto } from '../../types';
|
|||
|
|
import { X, User, Calendar, Flag, Tag, Clock, MessageSquare, ImageIcon, Camera } from 'lucide-react';
|
|||
|
|
import { backendApi } from '../../services/apiClient';
|
|||
|
|
import { apiClient } from '../../services/apiClient';
|
|||
|
|
|
|||
|
|
interface TaskModalProps {
|
|||
|
|
isOpen: boolean;
|
|||
|
|
onClose: () => void;
|
|||
|
|
onSave: (task: BuildingTask) => void;
|
|||
|
|
task?: BuildingTask | null;
|
|||
|
|
buildingId: string;
|
|||
|
|
employees?: Employee[];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export const TaskModal: React.FC<TaskModalProps> = ({
|
|||
|
|
isOpen,
|
|||
|
|
onClose,
|
|||
|
|
onSave,
|
|||
|
|
task,
|
|||
|
|
buildingId,
|
|||
|
|
employees = []
|
|||
|
|
}) => {
|
|||
|
|
const [formData, setFormData] = useState<Partial<BuildingTask>>({
|
|||
|
|
title: '',
|
|||
|
|
description: '',
|
|||
|
|
deadline: '',
|
|||
|
|
status: 'new',
|
|||
|
|
priority: 'medium',
|
|||
|
|
assignedTo: '',
|
|||
|
|
assignedToName: '',
|
|||
|
|
createdBy: '',
|
|||
|
|
createdByName: '',
|
|||
|
|
category: '',
|
|||
|
|
tags: [],
|
|||
|
|
estimatedHours: undefined,
|
|||
|
|
comments: [],
|
|||
|
|
requirePhotoReport: true,
|
|||
|
|
photoReportId: undefined,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const [availableEmployees, setAvailableEmployees] = useState<Employee[]>([]);
|
|||
|
|
const [tagInput, setTagInput] = useState('');
|
|||
|
|
const [commentText, setCommentText] = useState('');
|
|||
|
|
const [photoReport, setPhotoReport] = useState<WorkPhoto | null>(null);
|
|||
|
|
const [photoReportLoading, setPhotoReportLoading] = useState(false);
|
|||
|
|
const [showPhotoForm, setShowPhotoForm] = useState(false);
|
|||
|
|
const [draftTaskId, setDraftTaskId] = useState<string | null>(null);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (isOpen) {
|
|||
|
|
if (task) {
|
|||
|
|
setFormData({
|
|||
|
|
title: task.title || '',
|
|||
|
|
description: task.description || '',
|
|||
|
|
deadline: task.deadline || '',
|
|||
|
|
status: task.status || 'new',
|
|||
|
|
priority: task.priority || 'medium',
|
|||
|
|
assignedTo: task.assignedTo || '',
|
|||
|
|
assignedToName: task.assignedToName || '',
|
|||
|
|
createdBy: task.createdBy || '',
|
|||
|
|
createdByName: task.createdByName || '',
|
|||
|
|
category: task.category || '',
|
|||
|
|
tags: task.tags || [],
|
|||
|
|
estimatedHours: task.estimatedHours,
|
|||
|
|
comments: task.comments || [],
|
|||
|
|
requirePhotoReport: task.requirePhotoReport !== false,
|
|||
|
|
photoReportId: task.photoReportId,
|
|||
|
|
});
|
|||
|
|
setDraftTaskId(task.id);
|
|||
|
|
setPhotoReport(null);
|
|||
|
|
if (task.photoReportId) {
|
|||
|
|
setPhotoReportLoading(true);
|
|||
|
|
apiClient.get<WorkPhoto>(`/pr/work-photos/${task.photoReportId}`)
|
|||
|
|
.then((data: WorkPhoto) => setPhotoReport(data))
|
|||
|
|
.catch(() => setPhotoReport(null))
|
|||
|
|
.finally(() => setPhotoReportLoading(false));
|
|||
|
|
} else {
|
|||
|
|
setPhotoReportLoading(false);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
const newId = `task-${Date.now()}`;
|
|||
|
|
setDraftTaskId(newId);
|
|||
|
|
setFormData({
|
|||
|
|
title: '',
|
|||
|
|
description: '',
|
|||
|
|
deadline: '',
|
|||
|
|
status: 'new',
|
|||
|
|
priority: 'medium',
|
|||
|
|
assignedTo: '',
|
|||
|
|
assignedToName: '',
|
|||
|
|
createdBy: '',
|
|||
|
|
createdByName: '',
|
|||
|
|
category: '',
|
|||
|
|
tags: [],
|
|||
|
|
estimatedHours: undefined,
|
|||
|
|
comments: [],
|
|||
|
|
requirePhotoReport: true,
|
|||
|
|
photoReportId: undefined,
|
|||
|
|
});
|
|||
|
|
setPhotoReport(null);
|
|||
|
|
}
|
|||
|
|
setShowPhotoForm(false);
|
|||
|
|
setCommentText('');
|
|||
|
|
fetchEmployees();
|
|||
|
|
}
|
|||
|
|
}, [isOpen, task, buildingId]);
|
|||
|
|
|
|||
|
|
const fetchEmployees = async () => {
|
|||
|
|
try {
|
|||
|
|
const fetchedEmployees = await backendApi.getEmployees();
|
|||
|
|
setAvailableEmployees(fetchedEmployees);
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Failed to fetch employees:', error);
|
|||
|
|
setAvailableEmployees(employees);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
if (!formData.title?.trim()) return;
|
|||
|
|
|
|||
|
|
const selectedEmployee = availableEmployees.find(emp => emp.id === formData.assignedTo);
|
|||
|
|
const authorEmployee = availableEmployees.find(emp => emp.id === formData.createdBy);
|
|||
|
|
const taskId = task?.id || draftTaskId || `task-${Date.now()}`;
|
|||
|
|
|
|||
|
|
const taskData: BuildingTask = {
|
|||
|
|
id: taskId,
|
|||
|
|
title: formData.title.trim(),
|
|||
|
|
description: formData.description?.trim(),
|
|||
|
|
deadline: formData.deadline || new Date().toISOString(),
|
|||
|
|
status: formData.status || 'new',
|
|||
|
|
priority: formData.priority || 'medium',
|
|||
|
|
assignedTo: formData.assignedTo || undefined,
|
|||
|
|
assignedToName: selectedEmployee?.name || formData.assignedToName || undefined,
|
|||
|
|
createdBy: formData.createdBy || undefined,
|
|||
|
|
createdByName: authorEmployee?.name || formData.createdByName || undefined,
|
|||
|
|
category: formData.category || undefined,
|
|||
|
|
tags: formData.tags || [],
|
|||
|
|
estimatedHours: formData.estimatedHours,
|
|||
|
|
createdAt: task?.createdAt || new Date().toISOString(),
|
|||
|
|
updatedAt: new Date().toISOString(),
|
|||
|
|
buildingId: buildingId,
|
|||
|
|
comments: formData.comments || [],
|
|||
|
|
requirePhotoReport: formData.requirePhotoReport !== false,
|
|||
|
|
photoReportId: formData.photoReportId,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
onSave(taskData);
|
|||
|
|
onClose();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleAddComment = () => {
|
|||
|
|
if (!commentText.trim()) return;
|
|||
|
|
const author = availableEmployees.find(emp => emp.id === formData.createdBy)?.name || formData.createdByName || 'Не указан';
|
|||
|
|
const newComment: TaskComment = {
|
|||
|
|
id: `comment-${Date.now()}`,
|
|||
|
|
authorId: formData.createdBy || undefined,
|
|||
|
|
authorName: author,
|
|||
|
|
text: commentText.trim(),
|
|||
|
|
createdAt: new Date().toISOString(),
|
|||
|
|
};
|
|||
|
|
setFormData({
|
|||
|
|
...formData,
|
|||
|
|
comments: [...(formData.comments || []), newComment],
|
|||
|
|
});
|
|||
|
|
setCommentText('');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handlePhotoReportCreated = (workPhoto: WorkPhoto) => {
|
|||
|
|
const updatedFormData = { ...formData, photoReportId: workPhoto.id };
|
|||
|
|
setFormData(updatedFormData);
|
|||
|
|
setPhotoReport(workPhoto);
|
|||
|
|
setShowPhotoForm(false);
|
|||
|
|
// Сразу сохраняем задачу с привязкой к фото, чтобы photoReportId не терялся
|
|||
|
|
const taskId = task?.id || draftTaskId || `task-${Date.now()}`;
|
|||
|
|
const authorEmployee = availableEmployees.find(emp => emp.id === formData.createdBy);
|
|||
|
|
const selectedEmployee = availableEmployees.find(emp => emp.id === formData.assignedTo);
|
|||
|
|
const taskData: BuildingTask = {
|
|||
|
|
id: taskId,
|
|||
|
|
title: (formData.title || '').trim() || 'Задача',
|
|||
|
|
description: formData.description?.trim(),
|
|||
|
|
deadline: formData.deadline || new Date().toISOString(),
|
|||
|
|
status: formData.status || 'new',
|
|||
|
|
priority: formData.priority || 'medium',
|
|||
|
|
assignedTo: formData.assignedTo || undefined,
|
|||
|
|
assignedToName: selectedEmployee?.name || formData.assignedToName || undefined,
|
|||
|
|
createdBy: formData.createdBy || undefined,
|
|||
|
|
createdByName: authorEmployee?.name || formData.createdByName || undefined,
|
|||
|
|
category: formData.category || undefined,
|
|||
|
|
tags: formData.tags || [],
|
|||
|
|
estimatedHours: formData.estimatedHours,
|
|||
|
|
createdAt: task?.createdAt || new Date().toISOString(),
|
|||
|
|
updatedAt: new Date().toISOString(),
|
|||
|
|
buildingId: buildingId,
|
|||
|
|
comments: formData.comments || [],
|
|||
|
|
requirePhotoReport: formData.requirePhotoReport !== false,
|
|||
|
|
photoReportId: workPhoto.id,
|
|||
|
|
};
|
|||
|
|
onSave(taskData);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleAddTag = () => {
|
|||
|
|
if (tagInput.trim() && !formData.tags?.includes(tagInput.trim())) {
|
|||
|
|
setFormData({
|
|||
|
|
...formData,
|
|||
|
|
tags: [...(formData.tags || []), tagInput.trim()]
|
|||
|
|
});
|
|||
|
|
setTagInput('');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleRemoveTag = (tag: string) => {
|
|||
|
|
setFormData({
|
|||
|
|
...formData,
|
|||
|
|
tags: formData.tags?.filter(t => t !== tag) || []
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const priorityColors = {
|
|||
|
|
low: 'bg-slate-100 text-slate-600',
|
|||
|
|
medium: 'bg-blue-50 text-blue-600',
|
|||
|
|
high: 'bg-amber-50 text-amber-600',
|
|||
|
|
urgent: 'bg-red-50 text-red-600',
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const statusColors = {
|
|||
|
|
new: 'bg-blue-50 text-blue-600',
|
|||
|
|
in_progress: 'bg-amber-50 text-amber-600',
|
|||
|
|
done: 'bg-emerald-50 text-emerald-600',
|
|||
|
|
cancelled: 'bg-slate-100 text-slate-600',
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const uploadsBase = (import.meta.env.VITE_API_BASE_URL || 'http://localhost:4000/api').replace(/\/api\/?$/, '') || 'http://localhost:4000';
|
|||
|
|
|
|||
|
|
if (!isOpen) return null;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
|||
|
|
<div className="bg-white rounded-2xl shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
|||
|
|
<div className="sticky top-0 bg-white border-b border-slate-200 p-6 flex items-center justify-between">
|
|||
|
|
<h2 className="text-xl font-bold text-slate-800">
|
|||
|
|
{task ? 'Редактировать задачу' : 'Новая задача'}
|
|||
|
|
</h2>
|
|||
|
|
<button
|
|||
|
|
onClick={onClose}
|
|||
|
|
className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
|
|||
|
|
>
|
|||
|
|
<X className="w-5 h-5 text-slate-500" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<form onSubmit={handleSubmit} className="p-6 space-y-6">
|
|||
|
|
{/* Название */}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-bold text-slate-700 mb-2">
|
|||
|
|
Название задачи *
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={formData.title}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, title: e.target.value })}
|
|||
|
|
className="w-full border border-slate-200 rounded-xl px-4 py-2 focus:ring-2 focus:ring-primary-500 outline-none"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Описание */}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-bold text-slate-700 mb-2">
|
|||
|
|
Описание
|
|||
|
|
</label>
|
|||
|
|
<textarea
|
|||
|
|
value={formData.description}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
|||
|
|
rows={3}
|
|||
|
|
className="w-full border border-slate-200 rounded-xl px-4 py-2 focus:ring-2 focus:ring-primary-500 outline-none resize-none"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|||
|
|
{/* Срок */}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-bold text-slate-700 mb-2 flex items-center gap-2">
|
|||
|
|
<Calendar className="w-4 h-4" /> Срок выполнения *
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="date"
|
|||
|
|
value={formData.deadline ? new Date(formData.deadline).toISOString().split('T')[0] : ''}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, deadline: new Date(e.target.value).toISOString() })}
|
|||
|
|
className="w-full border border-slate-200 rounded-xl px-4 py-2 focus:ring-2 focus:ring-primary-500 outline-none"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Приоритет */}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-bold text-slate-700 mb-2 flex items-center gap-2">
|
|||
|
|
<Flag className="w-4 h-4" /> Приоритет
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={formData.priority}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, priority: e.target.value as BuildingTask['priority'] })}
|
|||
|
|
className="w-full border border-slate-200 rounded-xl px-4 py-2 focus:ring-2 focus:ring-primary-500 outline-none"
|
|||
|
|
>
|
|||
|
|
<option value="low">Низкий</option>
|
|||
|
|
<option value="medium">Средний</option>
|
|||
|
|
<option value="high">Высокий</option>
|
|||
|
|
<option value="urgent">Срочный</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|||
|
|
{/* Ответственный */}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-bold text-slate-700 mb-2 flex items-center gap-2">
|
|||
|
|
<User className="w-4 h-4" /> Ответственный
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={formData.assignedTo}
|
|||
|
|
onChange={(e) => {
|
|||
|
|
const selected = availableEmployees.find(emp => emp.id === e.target.value);
|
|||
|
|
setFormData({
|
|||
|
|
...formData,
|
|||
|
|
assignedTo: e.target.value,
|
|||
|
|
assignedToName: selected?.name || ''
|
|||
|
|
});
|
|||
|
|
}}
|
|||
|
|
className="w-full border border-slate-200 rounded-xl px-4 py-2 focus:ring-2 focus:ring-primary-500 outline-none"
|
|||
|
|
>
|
|||
|
|
<option value="">Не назначен</option>
|
|||
|
|
{availableEmployees.filter(emp => emp.status === 'active').map(emp => (
|
|||
|
|
<option key={emp.id} value={emp.id}>
|
|||
|
|
{emp.name} - {emp.position}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Постановщик */}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-bold text-slate-700 mb-2 flex items-center gap-2">
|
|||
|
|
<User className="w-4 h-4" /> Постановщик
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={formData.createdBy}
|
|||
|
|
onChange={(e) => {
|
|||
|
|
const selected = availableEmployees.find(emp => emp.id === e.target.value);
|
|||
|
|
setFormData({
|
|||
|
|
...formData,
|
|||
|
|
createdBy: e.target.value,
|
|||
|
|
createdByName: selected?.name || ''
|
|||
|
|
});
|
|||
|
|
}}
|
|||
|
|
className="w-full border border-slate-200 rounded-xl px-4 py-2 focus:ring-2 focus:ring-primary-500 outline-none"
|
|||
|
|
>
|
|||
|
|
<option value="">Не указан</option>
|
|||
|
|
{availableEmployees.filter(emp => emp.status === 'active').map(emp => (
|
|||
|
|
<option key={emp.id} value={emp.id}>
|
|||
|
|
{emp.name} - {emp.position}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Статус */}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-bold text-slate-700 mb-2">
|
|||
|
|
Статус
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={formData.status}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, status: e.target.value as BuildingTask['status'] })}
|
|||
|
|
className="w-full border border-slate-200 rounded-xl px-4 py-2 focus:ring-2 focus:ring-primary-500 outline-none"
|
|||
|
|
>
|
|||
|
|
<option value="new">Новая</option>
|
|||
|
|
<option value="in_progress">В работе</option>
|
|||
|
|
<option value="done">Выполнена</option>
|
|||
|
|
<option value="cancelled">Отменена</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|||
|
|
{/* Категория */}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-bold text-slate-700 mb-2 flex items-center gap-2">
|
|||
|
|
<Tag className="w-4 h-4" /> Категория
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={formData.category}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, category: e.target.value })}
|
|||
|
|
placeholder="Например: Ремонт, Обслуживание"
|
|||
|
|
className="w-full border border-slate-200 rounded-xl px-4 py-2 focus:ring-2 focus:ring-primary-500 outline-none"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Оценка времени */}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-bold text-slate-700 mb-2 flex items-center gap-2">
|
|||
|
|
<Clock className="w-4 h-4" /> Оценка времени (часы)
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
min="0"
|
|||
|
|
step="0.5"
|
|||
|
|
value={formData.estimatedHours || ''}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, estimatedHours: e.target.value ? parseFloat(e.target.value) : undefined })}
|
|||
|
|
className="w-full border border-slate-200 rounded-xl px-4 py-2 focus:ring-2 focus:ring-primary-500 outline-none"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Комментарии */}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-bold text-slate-700 mb-2 flex items-center gap-2">
|
|||
|
|
<MessageSquare className="w-4 h-4" /> Комментарии
|
|||
|
|
</label>
|
|||
|
|
{(formData.comments && formData.comments.length > 0) && (
|
|||
|
|
<ul className="space-y-2 mb-3 max-h-32 overflow-y-auto rounded-xl border border-slate-100 p-3 bg-slate-50">
|
|||
|
|
{formData.comments.map(c => (
|
|||
|
|
<li key={c.id} className="text-sm text-slate-700">
|
|||
|
|
<span className="font-bold text-slate-500">{c.authorName}:</span> {c.text}
|
|||
|
|
</li>
|
|||
|
|
))}
|
|||
|
|
</ul>
|
|||
|
|
)}
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={commentText}
|
|||
|
|
onChange={(e) => setCommentText(e.target.value)}
|
|||
|
|
onKeyDown={(e) => e.key === 'Enter' && (e.preventDefault(), handleAddComment())}
|
|||
|
|
placeholder="Добавить комментарий..."
|
|||
|
|
className="flex-1 border border-slate-200 rounded-xl px-4 py-2 focus:ring-2 focus:ring-primary-500 outline-none text-sm"
|
|||
|
|
/>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={handleAddComment}
|
|||
|
|
className="px-4 py-2 bg-primary-600 text-white rounded-xl font-bold hover:bg-primary-700 transition-colors text-sm"
|
|||
|
|
>
|
|||
|
|
Добавить
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Фото отчёт до/после */}
|
|||
|
|
<div className="border border-slate-200 rounded-xl p-4 bg-slate-50/50">
|
|||
|
|
<label className="flex items-center gap-2 cursor-pointer mb-3">
|
|||
|
|
<input
|
|||
|
|
type="checkbox"
|
|||
|
|
checked={formData.requirePhotoReport !== false}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, requirePhotoReport: e.target.checked })}
|
|||
|
|
className="rounded border-slate-300"
|
|||
|
|
/>
|
|||
|
|
<span className="text-sm font-bold text-slate-700">Требуется фото отчёт по работе (до/после)</span>
|
|||
|
|
</label>
|
|||
|
|
{formData.requirePhotoReport && (
|
|||
|
|
<>
|
|||
|
|
{photoReport || formData.photoReportId ? (
|
|||
|
|
<div>
|
|||
|
|
<div className="grid grid-cols-2 gap-3 mb-3">
|
|||
|
|
<div>
|
|||
|
|
<p className="text-xs font-bold text-slate-500 uppercase mb-1">До</p>
|
|||
|
|
{photoReportLoading ? (
|
|||
|
|
<div className="w-full h-24 rounded-lg border border-slate-200 flex items-center justify-center text-slate-400 text-xs">Загрузка...</div>
|
|||
|
|
) : (photoReport?.photoBeforeUrl || (photoReport as any)?.photo_before_url) ? (
|
|||
|
|
<img
|
|||
|
|
src={uploadsBase + (photoReport?.photoBeforeUrl || (photoReport as any)?.photo_before_url)}
|
|||
|
|
alt="До"
|
|||
|
|
className="w-full h-24 object-cover rounded-lg border border-slate-200"
|
|||
|
|
/>
|
|||
|
|
) : (
|
|||
|
|
<div className="w-full h-24 rounded-lg border border-dashed border-slate-200 flex items-center justify-center text-slate-400 text-xs">Нет фото</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<p className="text-xs font-bold text-slate-500 uppercase mb-1">После</p>
|
|||
|
|
{photoReportLoading ? (
|
|||
|
|
<div className="w-full h-24 rounded-lg border border-slate-200 flex items-center justify-center text-slate-400 text-xs">Загрузка...</div>
|
|||
|
|
) : (photoReport?.photoAfterUrl || (photoReport as any)?.photo_after_url) ? (
|
|||
|
|
<img
|
|||
|
|
src={uploadsBase + (photoReport?.photoAfterUrl || (photoReport as any)?.photo_after_url)}
|
|||
|
|
alt="После"
|
|||
|
|
className="w-full h-24 object-cover rounded-lg border border-slate-200"
|
|||
|
|
/>
|
|||
|
|
) : (
|
|||
|
|
<div className="w-full h-24 rounded-lg border border-dashed border-slate-200 flex items-center justify-center text-slate-400 text-xs">Нет фото</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setShowPhotoForm(true)}
|
|||
|
|
className="text-sm font-bold text-primary-600 hover:text-primary-700 flex items-center gap-1"
|
|||
|
|
>
|
|||
|
|
<Camera className="w-4 h-4" /> Изменить фото отчёт
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
) : showPhotoForm ? (
|
|||
|
|
<TaskPhotoReportForm
|
|||
|
|
buildingId={buildingId}
|
|||
|
|
taskId={draftTaskId || undefined}
|
|||
|
|
workName={formData.title || 'Фото отчёт'}
|
|||
|
|
workDescription={formData.description || ''}
|
|||
|
|
onSuccess={handlePhotoReportCreated}
|
|||
|
|
onCancel={() => setShowPhotoForm(false)}
|
|||
|
|
/>
|
|||
|
|
) : (
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setShowPhotoForm(true)}
|
|||
|
|
className="flex items-center gap-2 px-4 py-2 bg-primary-100 text-primary-700 rounded-xl font-bold hover:bg-primary-200 transition-colors text-sm"
|
|||
|
|
>
|
|||
|
|
<ImageIcon className="w-4 h-4" /> Добавить фото отчёт (до/после)
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Теги */}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-bold text-slate-700 mb-2">
|
|||
|
|
Теги
|
|||
|
|
</label>
|
|||
|
|
<div className="flex gap-2 mb-2">
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={tagInput}
|
|||
|
|
onChange={(e) => setTagInput(e.target.value)}
|
|||
|
|
onKeyPress={(e) => {
|
|||
|
|
if (e.key === 'Enter') {
|
|||
|
|
e.preventDefault();
|
|||
|
|
handleAddTag();
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
placeholder="Добавить тег"
|
|||
|
|
className="flex-1 border border-slate-200 rounded-xl px-4 py-2 focus:ring-2 focus:ring-primary-500 outline-none"
|
|||
|
|
/>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={handleAddTag}
|
|||
|
|
className="px-4 py-2 bg-primary-600 text-white rounded-xl font-bold hover:bg-primary-700 transition-colors"
|
|||
|
|
>
|
|||
|
|
Добавить
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
{formData.tags && formData.tags.length > 0 && (
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
{formData.tags.map(tag => (
|
|||
|
|
<span
|
|||
|
|
key={tag}
|
|||
|
|
className="inline-flex items-center gap-1 px-3 py-1 bg-primary-50 text-primary-700 rounded-lg text-xs font-bold"
|
|||
|
|
>
|
|||
|
|
{tag}
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => handleRemoveTag(tag)}
|
|||
|
|
className="hover:text-primary-900"
|
|||
|
|
>
|
|||
|
|
<X className="w-3 h-3" />
|
|||
|
|
</button>
|
|||
|
|
</span>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Кнопки */}
|
|||
|
|
<div className="flex gap-3 pt-4 border-t border-slate-200">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={onClose}
|
|||
|
|
className="flex-1 px-4 py-3 border border-slate-200 rounded-xl font-bold text-slate-700 hover:bg-slate-50 transition-colors"
|
|||
|
|
>
|
|||
|
|
Отмена
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="submit"
|
|||
|
|
className="flex-1 px-4 py-3 bg-primary-600 text-white rounded-xl font-bold hover:bg-primary-700 transition-colors"
|
|||
|
|
>
|
|||
|
|
{task ? 'Сохранить' : 'Создать'}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Форма добавления фото отчёта до/после для задачи (название и описание из задачи → попадают в справочник PR)
|
|||
|
|
interface TaskPhotoReportFormProps {
|
|||
|
|
buildingId: string;
|
|||
|
|
taskId?: string | null;
|
|||
|
|
workName: string;
|
|||
|
|
workDescription?: string;
|
|||
|
|
onSuccess: (photo: WorkPhoto) => void;
|
|||
|
|
onCancel: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const TaskPhotoReportForm: React.FC<TaskPhotoReportFormProps> = ({
|
|||
|
|
buildingId,
|
|||
|
|
taskId,
|
|||
|
|
workName,
|
|||
|
|
workDescription = '',
|
|||
|
|
onSuccess,
|
|||
|
|
onCancel,
|
|||
|
|
}) => {
|
|||
|
|
const [photoBefore, setPhotoBefore] = useState<File | null>(null);
|
|||
|
|
const [photoAfter, setPhotoAfter] = useState<File | null>(null);
|
|||
|
|
const [description, setDescription] = useState(workDescription);
|
|||
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|||
|
|
|
|||
|
|
// При открытии формы подставляем описание задачи
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (workDescription) setDescription(workDescription);
|
|||
|
|
}, [workDescription]);
|
|||
|
|
|
|||
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
if (!photoBefore || !photoAfter) {
|
|||
|
|
alert('Загрузите оба фото: «До» и «После»');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
setIsSubmitting(true);
|
|||
|
|
const formDataToSend = new FormData();
|
|||
|
|
formDataToSend.append('building_id', buildingId);
|
|||
|
|
if (taskId) formDataToSend.append('task_id', taskId);
|
|||
|
|
formDataToSend.append('work_name', workName || 'Фото отчёт по задаче');
|
|||
|
|
formDataToSend.append('work_date', new Date().toISOString().split('T')[0]);
|
|||
|
|
if (description?.trim()) formDataToSend.append('description', description.trim());
|
|||
|
|
formDataToSend.append('photo_before', photoBefore);
|
|||
|
|
formDataToSend.append('photo_after', photoAfter);
|
|||
|
|
|
|||
|
|
const API_BASE = import.meta.env.VITE_API_BASE_URL || 'http://localhost:4000/api';
|
|||
|
|
const res = await fetch(`${API_BASE}/pr/work-photos`, {
|
|||
|
|
method: 'POST',
|
|||
|
|
body: formDataToSend,
|
|||
|
|
});
|
|||
|
|
const data = await res.json().catch(() => ({}));
|
|||
|
|
if (!res.ok) {
|
|||
|
|
const msg = (data && data.error) ? data.error : `Ошибка ${res.status}: ${res.statusText}`;
|
|||
|
|
throw new Error(msg);
|
|||
|
|
}
|
|||
|
|
onSuccess(data as WorkPhoto);
|
|||
|
|
} catch (err: any) {
|
|||
|
|
console.error(err);
|
|||
|
|
const msg = err?.message || 'Не удалось загрузить фото отчёт. Проверьте, что сервер запущен и доступен.';
|
|||
|
|
alert(msg);
|
|||
|
|
} finally {
|
|||
|
|
setIsSubmitting(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="rounded-xl border border-slate-200 p-4 bg-white space-y-3">
|
|||
|
|
<p className="text-sm font-bold text-slate-700">Фото отчёт в формате «До» / «После»</p>
|
|||
|
|
<div className="space-y-3">
|
|||
|
|
<div className="grid grid-cols-2 gap-3">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-bold text-slate-600 mb-1">Фото «До» *</label>
|
|||
|
|
<input
|
|||
|
|
type="file"
|
|||
|
|
accept="image/*"
|
|||
|
|
onChange={(e) => setPhotoBefore(e.target.files?.[0] || null)}
|
|||
|
|
className="w-full text-sm border border-slate-200 rounded-lg px-2 py-1.5"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-bold text-slate-600 mb-1">Фото «После» *</label>
|
|||
|
|
<input
|
|||
|
|
type="file"
|
|||
|
|
accept="image/*"
|
|||
|
|
onChange={(e) => setPhotoAfter(e.target.files?.[0] || null)}
|
|||
|
|
className="w-full text-sm border border-slate-200 rounded-lg px-2 py-1.5"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-bold text-slate-600 mb-1">Описание (необязательно)</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={description}
|
|||
|
|
onChange={(e) => setDescription(e.target.value)}
|
|||
|
|
className="w-full text-sm border border-slate-200 rounded-lg px-2 py-1.5"
|
|||
|
|
placeholder="Кратко, что сделано"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
disabled={isSubmitting}
|
|||
|
|
onClick={(e) => { e.preventDefault(); handleSubmit(e as any); }}
|
|||
|
|
className="px-4 py-2 bg-primary-600 text-white rounded-xl text-sm font-bold hover:bg-primary-700 disabled:opacity-50"
|
|||
|
|
>
|
|||
|
|
{isSubmitting ? 'Загрузка...' : 'Сохранить фото отчёт'}
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={onCancel}
|
|||
|
|
className="px-4 py-2 border border-slate-200 rounded-xl text-sm font-bold text-slate-600 hover:bg-slate-50"
|
|||
|
|
>
|
|||
|
|
Отмена
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|