Initial commit MKD fixes
This commit is contained in:
Arsen
358
components/pr/WorkPhotosManager.tsx
Executable file
358
components/pr/WorkPhotosManager.tsx
Executable file
@@ -0,0 +1,358 @@
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user