359 lines
13 KiB
TypeScript
359 lines
13 KiB
TypeScript
|
|
|||
|
|
import React, { useState, useEffect } from 'react';
|
|||
|
|
import { WorkPhoto } from '../../types';
|
|||
|
|
import { apiClient } from '../../services/apiClient';
|
|||
|
|
import { Plus, X, Image as ImageIcon, Loader2, Calendar, Building2, FileText } from 'lucide-react';
|
|||
|
|
|
|||
|
|
interface WorkPhotosManagerProps {
|
|||
|
|
buildingId?: string;
|
|||
|
|
residentReportId?: number;
|
|||
|
|
onPhotoSelect?: (photo: WorkPhoto) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export const WorkPhotosManager: React.FC<WorkPhotosManagerProps> = ({
|
|||
|
|
buildingId,
|
|||
|
|
residentReportId,
|
|||
|
|
onPhotoSelect
|
|||
|
|
}) => {
|
|||
|
|
const [photos, setPhotos] = useState<WorkPhoto[]>([]);
|
|||
|
|
const [isLoading, setIsLoading] = useState(true);
|
|||
|
|
const [showCreateForm, setShowCreateForm] = useState(false);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
loadPhotos();
|
|||
|
|
}, [buildingId, residentReportId]);
|
|||
|
|
|
|||
|
|
const loadPhotos = async () => {
|
|||
|
|
try {
|
|||
|
|
setIsLoading(true);
|
|||
|
|
const params = new URLSearchParams();
|
|||
|
|
if (buildingId) params.append('building_id', buildingId);
|
|||
|
|
if (residentReportId) params.append('resident_report_id', String(residentReportId));
|
|||
|
|
|
|||
|
|
const queryString = params.toString();
|
|||
|
|
const path = `/pr/work-photos${queryString ? `?${queryString}` : ''}`;
|
|||
|
|
const data = await apiClient.get<WorkPhoto[]>(path);
|
|||
|
|
setPhotos(data);
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error loading work photos:', err);
|
|||
|
|
setPhotos([]);
|
|||
|
|
} finally {
|
|||
|
|
setIsLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleDelete = async (id: number) => {
|
|||
|
|
if (!confirm('Удалить фото отчет?')) return;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
await apiClient.delete(`/pr/work-photos/${id}`);
|
|||
|
|
await loadPhotos();
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error deleting work photo:', err);
|
|||
|
|
alert('Ошибка удаления фото отчета');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div className="flex justify-between items-center">
|
|||
|
|
<h4 className="font-black text-slate-800 text-sm">Фото отчеты работ</h4>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setShowCreateForm(true)}
|
|||
|
|
className="px-4 py-2 bg-primary-600 text-white rounded-xl text-xs font-black uppercase tracking-wider flex items-center gap-2"
|
|||
|
|
>
|
|||
|
|
<Plus className="w-4 h-4" />
|
|||
|
|
Добавить
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{showCreateForm && (
|
|||
|
|
<WorkPhotoCreateForm
|
|||
|
|
buildingId={buildingId}
|
|||
|
|
residentReportId={residentReportId}
|
|||
|
|
onClose={() => setShowCreateForm(false)}
|
|||
|
|
onSuccess={() => {
|
|||
|
|
setShowCreateForm(false);
|
|||
|
|
loadPhotos();
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{isLoading ? (
|
|||
|
|
<div className="flex justify-center py-8">
|
|||
|
|
<Loader2 className="w-6 h-6 animate-spin text-slate-400" />
|
|||
|
|
</div>
|
|||
|
|
) : photos.length === 0 ? (
|
|||
|
|
<div className="text-center py-8 text-slate-400 text-sm">
|
|||
|
|
<ImageIcon className="w-12 h-12 mx-auto mb-2 opacity-50" />
|
|||
|
|
<p>Фото отчеты не найдены</p>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|||
|
|
{photos.map(photo => (
|
|||
|
|
<WorkPhotoCard
|
|||
|
|
key={photo.id}
|
|||
|
|
photo={photo}
|
|||
|
|
onDelete={handleDelete}
|
|||
|
|
onSelect={onPhotoSelect}
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
interface WorkPhotoCardProps {
|
|||
|
|
photo: WorkPhoto;
|
|||
|
|
onDelete: (id: number) => void;
|
|||
|
|
onSelect?: (photo: WorkPhoto) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const WorkPhotoCard: React.FC<WorkPhotoCardProps> = ({ photo, onDelete, onSelect }) => {
|
|||
|
|
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:4000/api';
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-all">
|
|||
|
|
<div className="flex justify-between items-start mb-3">
|
|||
|
|
<div className="flex-1">
|
|||
|
|
<h5 className="font-black text-slate-800 text-sm mb-1">{photo.workName}</h5>
|
|||
|
|
<div className="flex items-center gap-2 text-xs text-slate-500">
|
|||
|
|
<Calendar className="w-3 h-3" />
|
|||
|
|
<span>{new Date(photo.workDate).toLocaleDateString('ru-RU')}</span>
|
|||
|
|
</div>
|
|||
|
|
{photo.description && (
|
|||
|
|
<p className="text-xs text-slate-600 mt-2">{photo.description}</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
onClick={() => onDelete(photo.id)}
|
|||
|
|
className="p-1.5 text-slate-400 hover:text-red-500 transition-colors"
|
|||
|
|
>
|
|||
|
|
<X className="w-4 h-4" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-2 gap-2">
|
|||
|
|
{photo.photoBeforeUrl ? (
|
|||
|
|
<div className="relative aspect-video bg-slate-100 rounded-lg overflow-hidden">
|
|||
|
|
<img
|
|||
|
|
src={`${API_BASE_URL.replace('/api', '')}${photo.photoBeforeUrl}`}
|
|||
|
|
alt="До"
|
|||
|
|
className="w-full h-full object-cover"
|
|||
|
|
/>
|
|||
|
|
<div className="absolute bottom-1 left-1 bg-black/50 text-white text-[10px] px-1.5 py-0.5 rounded">
|
|||
|
|
До
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="aspect-video bg-slate-100 rounded-lg flex items-center justify-center">
|
|||
|
|
<ImageIcon className="w-8 h-8 text-slate-300" />
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{photo.photoAfterUrl ? (
|
|||
|
|
<div className="relative aspect-video bg-slate-100 rounded-lg overflow-hidden">
|
|||
|
|
<img
|
|||
|
|
src={`${API_BASE_URL.replace('/api', '')}${photo.photoAfterUrl}`}
|
|||
|
|
alt="После"
|
|||
|
|
className="w-full h-full object-cover"
|
|||
|
|
/>
|
|||
|
|
<div className="absolute bottom-1 left-1 bg-black/50 text-white text-[10px] px-1.5 py-0.5 rounded">
|
|||
|
|
После
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="aspect-video bg-slate-100 rounded-lg flex items-center justify-center">
|
|||
|
|
<ImageIcon className="w-8 h-8 text-slate-300" />
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
interface WorkPhotoCreateFormProps {
|
|||
|
|
buildingId?: string;
|
|||
|
|
residentReportId?: number;
|
|||
|
|
onClose: () => void;
|
|||
|
|
onSuccess: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const WorkPhotoCreateForm: React.FC<WorkPhotoCreateFormProps> = ({
|
|||
|
|
buildingId,
|
|||
|
|
residentReportId,
|
|||
|
|
onClose,
|
|||
|
|
onSuccess
|
|||
|
|
}) => {
|
|||
|
|
const [formData, setFormData] = useState({
|
|||
|
|
building_id: buildingId || '',
|
|||
|
|
resident_report_id: residentReportId || '',
|
|||
|
|
work_name: '',
|
|||
|
|
work_date: new Date().toISOString().split('T')[0],
|
|||
|
|
description: ''
|
|||
|
|
});
|
|||
|
|
const [photoBefore, setPhotoBefore] = useState<File | null>(null);
|
|||
|
|
const [photoAfter, setPhotoAfter] = useState<File | null>(null);
|
|||
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|||
|
|
|
|||
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
|
|||
|
|
if (!formData.building_id || !formData.work_name || !formData.work_date) {
|
|||
|
|
alert('Заполните обязательные поля');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
setIsSubmitting(true);
|
|||
|
|
|
|||
|
|
const formDataToSend = new FormData();
|
|||
|
|
formDataToSend.append('building_id', formData.building_id);
|
|||
|
|
if (formData.resident_report_id) {
|
|||
|
|
formDataToSend.append('resident_report_id', String(formData.resident_report_id));
|
|||
|
|
}
|
|||
|
|
formDataToSend.append('work_name', formData.work_name);
|
|||
|
|
formDataToSend.append('work_date', formData.work_date);
|
|||
|
|
if (formData.description) {
|
|||
|
|
formDataToSend.append('description', formData.description);
|
|||
|
|
}
|
|||
|
|
if (photoBefore) {
|
|||
|
|
formDataToSend.append('photo_before', photoBefore);
|
|||
|
|
}
|
|||
|
|
if (photoAfter) {
|
|||
|
|
formDataToSend.append('photo_after', photoAfter);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:4000/api';
|
|||
|
|
const response = await fetch(`${API_BASE_URL}/pr/work-photos`, {
|
|||
|
|
method: 'POST',
|
|||
|
|
body: formDataToSend
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (!response.ok) {
|
|||
|
|
throw new Error('Ошибка создания фото отчета');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onSuccess();
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('Error creating work photo:', err);
|
|||
|
|
alert('Ошибка создания фото отчета');
|
|||
|
|
} finally {
|
|||
|
|
setIsSubmitting(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
|||
|
|
<div className="bg-white rounded-3xl p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
|||
|
|
<div className="flex justify-between items-center mb-6">
|
|||
|
|
<h3 className="text-xl font-black text-slate-800">Добавить фото отчет</h3>
|
|||
|
|
<button onClick={onClose} className="p-2 hover:bg-slate-100 rounded-xl">
|
|||
|
|
<X className="w-5 h-5 text-slate-400" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|||
|
|
{!buildingId && (
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-600 uppercase tracking-wider mb-2">
|
|||
|
|
Дом (ID)
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={formData.building_id}
|
|||
|
|
onChange={e => setFormData({ ...formData, building_id: e.target.value })}
|
|||
|
|
className="w-full p-3 border border-slate-200 rounded-xl text-sm"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-600 uppercase tracking-wider mb-2">
|
|||
|
|
Название работы
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={formData.work_name}
|
|||
|
|
onChange={e => setFormData({ ...formData, work_name: e.target.value })}
|
|||
|
|
className="w-full p-3 border border-slate-200 rounded-xl text-sm"
|
|||
|
|
placeholder="Например: Ремонт подъезда"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-600 uppercase tracking-wider mb-2">
|
|||
|
|
Дата работы
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="date"
|
|||
|
|
value={formData.work_date}
|
|||
|
|
onChange={e => setFormData({ ...formData, work_date: e.target.value })}
|
|||
|
|
className="w-full p-3 border border-slate-200 rounded-xl text-sm"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-600 uppercase tracking-wider mb-2">
|
|||
|
|
Описание (что сделано)
|
|||
|
|
</label>
|
|||
|
|
<textarea
|
|||
|
|
value={formData.description}
|
|||
|
|
onChange={e => setFormData({ ...formData, description: e.target.value })}
|
|||
|
|
className="w-full p-3 border border-slate-200 rounded-xl text-sm resize-none"
|
|||
|
|
rows={3}
|
|||
|
|
placeholder="Опишите выполненные работы..."
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-2 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-600 uppercase tracking-wider mb-2">
|
|||
|
|
Фото "До"
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="file"
|
|||
|
|
accept="image/*"
|
|||
|
|
onChange={e => setPhotoBefore(e.target.files?.[0] || null)}
|
|||
|
|
className="w-full p-3 border border-slate-200 rounded-xl text-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-black text-slate-600 uppercase tracking-wider mb-2">
|
|||
|
|
Фото "После"
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="file"
|
|||
|
|
accept="image/*"
|
|||
|
|
onChange={e => setPhotoAfter(e.target.files?.[0] || null)}
|
|||
|
|
className="w-full p-3 border border-slate-200 rounded-xl text-sm"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex gap-3 pt-4">
|
|||
|
|
<button
|
|||
|
|
type="submit"
|
|||
|
|
disabled={isSubmitting}
|
|||
|
|
className="flex-1 px-6 py-3 bg-primary-600 text-white rounded-xl text-xs font-black uppercase tracking-widest disabled:opacity-50"
|
|||
|
|
>
|
|||
|
|
{isSubmitting ? 'Создание...' : 'Создать фото отчет'}
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={onClose}
|
|||
|
|
className="px-6 py-3 bg-slate-100 text-slate-600 rounded-xl text-xs font-black uppercase tracking-widest"
|
|||
|
|
>
|
|||
|
|
Отмена
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|