317 lines
15 KiB
TypeScript
317 lines
15 KiB
TypeScript
|
|
|||
|
|
import React, { useState, useEffect } from 'react';
|
|||
|
|
import { WorkPhoto } from '../../types';
|
|||
|
|
import { apiClient } from '../../services/apiClient';
|
|||
|
|
import { Plus, Loader2, Image as ImageIcon, Calendar, Building2, FileText, X } from 'lucide-react';
|
|||
|
|
|
|||
|
|
const UPLOADS_BASE = (import.meta.env.VITE_API_BASE_URL || 'http://localhost:4000/api').replace(/\/api\/?$/, '') || 'http://localhost:4000';
|
|||
|
|
|
|||
|
|
export const WorkPhotosDirectory: React.FC = () => {
|
|||
|
|
const [photos, setPhotos] = useState<WorkPhoto[]>([]);
|
|||
|
|
const [isLoading, setIsLoading] = useState(true);
|
|||
|
|
const [loadError, setLoadError] = useState<string | null>(null);
|
|||
|
|
const [showCreateForm, setShowCreateForm] = useState(false);
|
|||
|
|
|
|||
|
|
const loadPhotos = async () => {
|
|||
|
|
try {
|
|||
|
|
setIsLoading(true);
|
|||
|
|
setLoadError(null);
|
|||
|
|
const data = await apiClient.get<WorkPhoto[]>('/pr/work-photos');
|
|||
|
|
setPhotos(Array.isArray(data) ? data : []);
|
|||
|
|
} catch (err: any) {
|
|||
|
|
console.error('Error loading work photos:', err);
|
|||
|
|
setPhotos([]);
|
|||
|
|
setLoadError(err?.message || 'Не удалось загрузить список. Проверьте подключение к серверу.');
|
|||
|
|
} finally {
|
|||
|
|
setIsLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
loadPhotos();
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
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">
|
|||
|
|
<h3 className="font-black text-slate-800 text-sm uppercase tracking-wider flex items-center gap-2">
|
|||
|
|
<FileText className="w-4 h-4 text-primary-500" />
|
|||
|
|
Справочник фотоотчётов (до / после)
|
|||
|
|
</h3>
|
|||
|
|
<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
|
|||
|
|
onClose={() => setShowCreateForm(false)}
|
|||
|
|
onSuccess={() => {
|
|||
|
|
setShowCreateForm(false);
|
|||
|
|
loadPhotos();
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{loadError && (
|
|||
|
|
<div className="rounded-2xl border border-amber-200 bg-amber-50 p-4 flex items-center justify-between gap-4">
|
|||
|
|
<p className="text-sm text-amber-800">{loadError}</p>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => loadPhotos()}
|
|||
|
|
className="px-4 py-2 bg-amber-600 text-white rounded-xl text-xs font-bold hover:bg-amber-700"
|
|||
|
|
>
|
|||
|
|
Повторить
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{isLoading ? (
|
|||
|
|
<div className="flex justify-center py-12">
|
|||
|
|
<Loader2 className="w-8 h-8 animate-spin text-slate-400" />
|
|||
|
|
</div>
|
|||
|
|
) : photos.length === 0 && !loadError ? (
|
|||
|
|
<div className="text-center py-12 text-slate-400 bg-slate-50 rounded-2xl border border-slate-100">
|
|||
|
|
<ImageIcon className="w-12 h-12 mx-auto mb-2 opacity-50" />
|
|||
|
|
<p className="text-sm font-bold">Записей пока нет</p>
|
|||
|
|
<p className="text-xs mt-1">Добавьте фотоотчёт с полями: фото до, фото после, описание работы, дата работы, дом.</p>
|
|||
|
|
</div>
|
|||
|
|
) : photos.length === 0 ? null : (
|
|||
|
|
<div className="bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm">
|
|||
|
|
<div className="overflow-x-auto">
|
|||
|
|
<table className="w-full text-left text-sm">
|
|||
|
|
<thead>
|
|||
|
|
<tr className="border-b border-slate-200 bg-slate-50/80">
|
|||
|
|
<th className="px-4 py-3 font-black text-slate-600 uppercase tracking-wider whitespace-nowrap">Фото до</th>
|
|||
|
|
<th className="px-4 py-3 font-black text-slate-600 uppercase tracking-wider whitespace-nowrap">Фото после</th>
|
|||
|
|
<th className="px-4 py-3 font-black text-slate-600 uppercase tracking-wider whitespace-nowrap">Описание работы</th>
|
|||
|
|
<th className="px-4 py-3 font-black text-slate-600 uppercase tracking-wider whitespace-nowrap">Дата работы</th>
|
|||
|
|
<th className="px-4 py-3 font-black text-slate-600 uppercase tracking-wider whitespace-nowrap">Дом</th>
|
|||
|
|
<th className="px-4 py-3 font-black text-slate-600 uppercase tracking-wider w-20"> </th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
{photos.map((photo) => (
|
|||
|
|
<tr key={photo.id} className="border-b border-slate-100 hover:bg-slate-50/50 transition-colors">
|
|||
|
|
<td className="px-4 py-3 align-top">
|
|||
|
|
{(photo as any).photoBeforeUrl || photo.photoBeforeUrl ? (
|
|||
|
|
<img
|
|||
|
|
src={UPLOADS_BASE + ((photo as any).photoBeforeUrl || photo.photoBeforeUrl)}
|
|||
|
|
alt="До"
|
|||
|
|
className="w-24 h-20 object-cover rounded-lg border border-slate-200"
|
|||
|
|
/>
|
|||
|
|
) : (
|
|||
|
|
<div className="w-24 h-20 rounded-lg border border-dashed border-slate-200 flex items-center justify-center bg-slate-50">
|
|||
|
|
<ImageIcon className="w-6 h-6 text-slate-300" />
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</td>
|
|||
|
|
<td className="px-4 py-3 align-top">
|
|||
|
|
{(photo as any).photoAfterUrl || photo.photoAfterUrl ? (
|
|||
|
|
<img
|
|||
|
|
src={UPLOADS_BASE + ((photo as any).photoAfterUrl || photo.photoAfterUrl)}
|
|||
|
|
alt="После"
|
|||
|
|
className="w-24 h-20 object-cover rounded-lg border border-slate-200"
|
|||
|
|
/>
|
|||
|
|
) : (
|
|||
|
|
<div className="w-24 h-20 rounded-lg border border-dashed border-slate-200 flex items-center justify-center bg-slate-50">
|
|||
|
|
<ImageIcon className="w-6 h-6 text-slate-300" />
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</td>
|
|||
|
|
<td className="px-4 py-3 max-w-xs">
|
|||
|
|
<span className="font-bold text-slate-800">{(photo as any).workName || photo.workName}</span>
|
|||
|
|
{((photo as any).description || photo.description) && (
|
|||
|
|
<p className="text-slate-600 text-xs mt-1">{(photo as any).description || photo.description}</p>
|
|||
|
|
)}
|
|||
|
|
</td>
|
|||
|
|
<td className="px-4 py-3 whitespace-nowrap text-slate-700">
|
|||
|
|
<span className="flex items-center gap-1">
|
|||
|
|
<Calendar className="w-3.5 h-3.5 text-slate-400" />
|
|||
|
|
{new Date((photo as any).workDate || photo.workDate).toLocaleDateString('ru-RU', { day: 'numeric', month: 'short', year: 'numeric' })}
|
|||
|
|
</span>
|
|||
|
|
</td>
|
|||
|
|
<td className="px-4 py-3">
|
|||
|
|
<span className="flex items-center gap-1 text-slate-700">
|
|||
|
|
<Building2 className="w-3.5 h-3.5 text-slate-400" />
|
|||
|
|
{(photo as any).address || photo.address || (photo as any).buildingId || photo.buildingId || '—'}
|
|||
|
|
</span>
|
|||
|
|
</td>
|
|||
|
|
<td className="px-4 py-3">
|
|||
|
|
<button
|
|||
|
|
onClick={() => handleDelete(photo.id)}
|
|||
|
|
className="p-1.5 text-slate-400 hover:text-red-500 rounded-lg hover:bg-red-50 transition-colors"
|
|||
|
|
title="Удалить"
|
|||
|
|
>
|
|||
|
|
<X className="w-4 h-4" />
|
|||
|
|
</button>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
))}
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
interface WorkPhotoCreateFormProps {
|
|||
|
|
onClose: () => void;
|
|||
|
|
onSuccess: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const WorkPhotoCreateForm: React.FC<WorkPhotoCreateFormProps> = ({ onClose, onSuccess }) => {
|
|||
|
|
const [formData, setFormData] = useState({
|
|||
|
|
building_id: '',
|
|||
|
|
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 [buildings, setBuildings] = useState<{ id: string; address?: string }[]>([]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
apiClient.get<{ id: string; passport?: { address?: string } }[]>('/buildings').then((list) => {
|
|||
|
|
setBuildings((list || []).map((b) => ({ id: b.id, address: b.passport?.address })));
|
|||
|
|
}).catch(() => setBuildings([]));
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
if (!formData.building_id || !formData.work_name || !formData.work_date) {
|
|||
|
|
alert('Заполните: дом, описание работы, дата работы');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!photoBefore || !photoAfter) {
|
|||
|
|
alert('Загрузите оба фото: «До» и «После»');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
setIsSubmitting(true);
|
|||
|
|
const fd = new FormData();
|
|||
|
|
fd.append('building_id', formData.building_id);
|
|||
|
|
fd.append('work_name', formData.work_name);
|
|||
|
|
fd.append('work_date', formData.work_date);
|
|||
|
|
if (formData.description) fd.append('description', formData.description);
|
|||
|
|
fd.append('photo_before', photoBefore);
|
|||
|
|
fd.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: fd });
|
|||
|
|
if (!res.ok) throw new Error('Ошибка создания');
|
|||
|
|
onSuccess();
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error(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-2xl p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto shadow-xl">
|
|||
|
|
<div className="flex justify-between items-center mb-6">
|
|||
|
|
<h3 className="text-lg 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-500" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-bold text-slate-600 uppercase tracking-wider mb-2">Дом *</label>
|
|||
|
|
<select
|
|||
|
|
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
|
|||
|
|
>
|
|||
|
|
<option value="">Выберите дом</option>
|
|||
|
|
{buildings.map((b) => (
|
|||
|
|
<option key={b.id} value={b.id}>{b.address || b.id}</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-bold 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-bold 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-bold 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={2}
|
|||
|
|
placeholder="Что сделано..."
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="grid grid-cols-2 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-bold 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"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-bold 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"
|
|||
|
|
required
|
|||
|
|
/>
|
|||
|
|
</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 disabled:opacity-50">
|
|||
|
|
{isSubmitting ? 'Создание...' : 'Создать'}
|
|||
|
|
</button>
|
|||
|
|
<button type="button" onClick={onClose} className="px-6 py-3 border border-slate-200 rounded-xl text-xs font-bold text-slate-600">
|
|||
|
|
Отмена
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|