333 lines
15 KiB
TypeScript
Executable File
333 lines
15 KiB
TypeScript
Executable File
import React, { useState, useEffect, useMemo } from 'react';
|
||
import { X, Calendar } from 'lucide-react';
|
||
import { DomaApplication, DomaApplicationStatus } from '../../types';
|
||
import { backendApi } from '../../services/apiClient';
|
||
import { Building, Employee } from '../../types';
|
||
|
||
type ResidentOption = { key: string; fullName: string; apartment: string; phone?: string };
|
||
|
||
function residentsFromBuilding(building: Building | null): ResidentOption[] {
|
||
if (!building?.accounts?.length) return [];
|
||
const list: ResidentOption[] = [];
|
||
for (const acc of building.accounts) {
|
||
const apt = acc.apartmentNumber || '';
|
||
(acc.owners || []).forEach((o) => {
|
||
if (o?.fullName) list.push({ key: `o:${acc.id}:${o.fullName}`, fullName: o.fullName, apartment: apt, phone: o.phone });
|
||
});
|
||
(acc.registered || []).forEach((r) => {
|
||
if (r?.fullName) list.push({ key: `r:${acc.id}:${r.id}`, fullName: r.fullName, apartment: apt, phone: r.phone });
|
||
});
|
||
}
|
||
const seen = new Set<string>();
|
||
return list.filter((r) => {
|
||
const k = `${r.apartment}::${r.fullName}`.toLowerCase();
|
||
if (seen.has(k)) return false;
|
||
seen.add(k);
|
||
return true;
|
||
});
|
||
}
|
||
|
||
const STATUS_OPTIONS: { value: DomaApplicationStatus; label: string }[] = [
|
||
{ value: 'new', label: 'Новая' },
|
||
{ value: 'in_progress', label: 'В работе' },
|
||
{ value: 'deferred', label: 'Отложена' },
|
||
{ value: 'done', label: 'Выполнена' },
|
||
{ value: 'canceled', label: 'Отменена' },
|
||
];
|
||
|
||
interface Props {
|
||
isOpen: boolean;
|
||
onClose: () => void;
|
||
application: DomaApplication;
|
||
onSuccess: () => void;
|
||
}
|
||
|
||
export const EditApplicationModal: React.FC<Props> = ({ isOpen, onClose, application, onSuccess }) => {
|
||
const [status, setStatus] = useState<DomaApplicationStatus>(application.status || 'new');
|
||
const [deadlineAt, setDeadlineAt] = useState('');
|
||
const [buildingId, setBuildingId] = useState('');
|
||
const [address, setAddress] = useState('');
|
||
const [apartment, setApartment] = useState('');
|
||
const [description, setDescription] = useState('');
|
||
const [contactName, setContactName] = useState('');
|
||
const [contactPhone, setContactPhone] = useState('');
|
||
const [selectedResidentKey, setSelectedResidentKey] = useState('');
|
||
const [executorName, setExecutorName] = useState('');
|
||
const [responsibleName, setResponsibleName] = useState('');
|
||
const [observersText, setObserversText] = useState('');
|
||
const [buildings, setBuildings] = useState<Building[]>([]);
|
||
const [selectedBuilding, setSelectedBuilding] = useState<Building | null>(null);
|
||
const [employees, setEmployees] = useState<Employee[]>([]);
|
||
const [loading, setLoading] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
const residents = useMemo(() => residentsFromBuilding(selectedBuilding), [selectedBuilding]);
|
||
|
||
useEffect(() => {
|
||
if (isOpen) {
|
||
setStatus((application.status as DomaApplicationStatus) || 'new');
|
||
if (application.deadlineAt) {
|
||
const d = new Date(application.deadlineAt);
|
||
const pad = (n: number) => String(n).padStart(2, '0');
|
||
setDeadlineAt(`${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`);
|
||
} else {
|
||
setDeadlineAt('');
|
||
}
|
||
setAddress(application.address || '');
|
||
setApartment(application.apartment || '');
|
||
setDescription(application.description || '');
|
||
setContactName(application.contactName || application.clientName || '');
|
||
setContactPhone(application.contactPhone || '');
|
||
setExecutorName(application.executorName || application.performer?.name || '');
|
||
setResponsibleName(application.responsibleName || '');
|
||
setObserversText(application.observersText || '');
|
||
setError(null);
|
||
backendApi.getEmployees().then(setEmployees).catch(() => setEmployees([]));
|
||
backendApi.getBuildings().then(setBuildings).catch(() => setBuildings([]));
|
||
}
|
||
}, [isOpen, application]);
|
||
|
||
useEffect(() => {
|
||
if (!isOpen) return;
|
||
const bid = application.buildingId || buildings.find(b => (b.passport as any)?.address === application.address)?.id || '';
|
||
setBuildingId(bid);
|
||
}, [isOpen, application.buildingId, application.address, buildings]);
|
||
|
||
useEffect(() => {
|
||
if (!buildingId) {
|
||
setSelectedBuilding(null);
|
||
return;
|
||
}
|
||
if (buildingId !== application.buildingId) {
|
||
setSelectedResidentKey('');
|
||
setContactName('');
|
||
setContactPhone('');
|
||
setApartment('');
|
||
}
|
||
backendApi.getBuilding(buildingId).then((b) => {
|
||
setSelectedBuilding(b);
|
||
setAddress((b.passport as any)?.address || buildingId);
|
||
}).catch(() => setSelectedBuilding(null));
|
||
}, [buildingId]);
|
||
|
||
useEffect(() => {
|
||
if (!residents.length || !contactName || selectedResidentKey) return;
|
||
const match = residents.find(r => r.fullName === contactName && r.apartment === apartment);
|
||
if (match) setSelectedResidentKey(match.key);
|
||
}, [residents, contactName, apartment]);
|
||
|
||
if (!isOpen) return null;
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setError(null);
|
||
if (!buildingId || !address.trim()) {
|
||
setError('Выберите адрес (дом)');
|
||
return;
|
||
}
|
||
if (!description.trim()) {
|
||
setError('Опишите проблему');
|
||
return;
|
||
}
|
||
setLoading(true);
|
||
try {
|
||
await backendApi.updateApplication(application.id, {
|
||
status,
|
||
deadlineAt: deadlineAt ? new Date(deadlineAt).toISOString() : undefined,
|
||
address: address.trim(),
|
||
buildingId: buildingId || undefined,
|
||
apartment: apartment.trim() || undefined,
|
||
description: description.trim(),
|
||
contactName: contactName.trim() || undefined,
|
||
contactPhone: contactPhone.trim() || undefined,
|
||
executorName: executorName.trim() || undefined,
|
||
responsibleName: responsibleName.trim() || undefined,
|
||
observersText: observersText.trim() || undefined,
|
||
changedBy: 'Администратор',
|
||
});
|
||
window.dispatchEvent(new CustomEvent('mkd-applications-changed'));
|
||
onSuccess();
|
||
onClose();
|
||
} catch (err: any) {
|
||
setError(err.message || 'Ошибка при сохранении');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleClose = () => {
|
||
if (!loading) onClose();
|
||
};
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-[120] flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-fade-in" onClick={handleClose}>
|
||
<div className="bg-white rounded-3xl w-full max-w-2xl max-h-[90vh] overflow-y-auto shadow-2xl animate-scale-in" onClick={e => e.stopPropagation()}>
|
||
<div className="sticky top-0 bg-white border-b border-slate-200 px-6 py-4 flex justify-between items-center rounded-t-3xl z-10">
|
||
<h3 className="text-lg font-black text-slate-800">Редактировать заявку №{application.number}</h3>
|
||
<button type="button" onClick={handleClose} className="p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-600 rounded-xl transition-colors disabled:opacity-50">
|
||
<X className="w-5 h-5" />
|
||
</button>
|
||
</div>
|
||
|
||
<form onSubmit={handleSubmit} className="p-6 space-y-5">
|
||
{error && (
|
||
<div className="bg-red-50 border border-red-200 text-red-600 text-sm px-4 py-3 rounded-xl">
|
||
{error}
|
||
</div>
|
||
)}
|
||
|
||
<div>
|
||
<label className="block text-xs font-black text-slate-700 mb-2 uppercase tracking-wider">Статус</label>
|
||
<select
|
||
value={status}
|
||
onChange={e => setStatus(e.target.value as DomaApplicationStatus)}
|
||
className="w-full px-4 py-3 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
||
>
|
||
{STATUS_OPTIONS.map(opt => (
|
||
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-black text-slate-700 mb-2 uppercase tracking-wider">Выполнить до</label>
|
||
<div className="flex items-center gap-2">
|
||
<input
|
||
type="datetime-local"
|
||
value={deadlineAt}
|
||
onChange={e => setDeadlineAt(e.target.value)}
|
||
className="flex-1 px-4 py-3 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
||
/>
|
||
<Calendar className="w-5 h-5 text-slate-400 shrink-0" />
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-black text-slate-700 mb-2 uppercase tracking-wider">Адрес (дом) <span className="text-red-500">*</span></label>
|
||
<select
|
||
value={buildingId}
|
||
onChange={e => setBuildingId(e.target.value)}
|
||
className="w-full px-4 py-3 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
||
>
|
||
<option value="">Выбрать дом</option>
|
||
{buildings.map(b => (
|
||
<option key={b.id} value={b.id}>{(b.passport as any)?.address || b.id}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-black text-slate-700 mb-2 uppercase tracking-wider">Заявитель (житель/собственник)</label>
|
||
<select
|
||
value={selectedResidentKey}
|
||
onChange={e => {
|
||
const key = e.target.value;
|
||
setSelectedResidentKey(key);
|
||
const r = residents.find(x => x.key === key);
|
||
if (r) {
|
||
setContactName(r.fullName);
|
||
setContactPhone(r.phone || '');
|
||
setApartment(r.apartment);
|
||
}
|
||
}}
|
||
className="w-full px-4 py-3 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
||
>
|
||
<option value="">{buildingId ? 'Выбрать жителя или собственника' : 'Сначала выберите адрес (дом)'}</option>
|
||
{residents.map(r => (
|
||
<option key={r.key} value={r.key}>{r.fullName}, кв. {r.apartment}{r.phone ? ` — ${r.phone}` : ''}</option>
|
||
))}
|
||
</select>
|
||
{(selectedResidentKey || contactName) && (
|
||
<p className="text-xs text-slate-500 mt-1">
|
||
{contactName}{contactPhone ? ` · ${contactPhone}` : ''}{apartment ? ` · кв. ${apartment}` : ''}
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-black text-slate-700 mb-2 uppercase tracking-wider">Квартира</label>
|
||
<input
|
||
type="text"
|
||
value={apartment}
|
||
onChange={e => setApartment(e.target.value)}
|
||
placeholder="Номер квартиры"
|
||
className="w-full px-4 py-3 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-black text-slate-700 mb-2 uppercase tracking-wider">Телефон заявителя</label>
|
||
<input
|
||
type="tel"
|
||
value={contactPhone}
|
||
onChange={e => setContactPhone(e.target.value)}
|
||
placeholder="+7 900 123-45-67"
|
||
className="w-full px-4 py-3 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-black text-slate-700 mb-2 uppercase tracking-wider">Проблема <span className="text-red-500">*</span></label>
|
||
<textarea
|
||
value={description}
|
||
onChange={e => setDescription(e.target.value)}
|
||
placeholder="Опишите проблему"
|
||
rows={4}
|
||
className="w-full px-4 py-3 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 resize-y"
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-xs font-black text-slate-700 mb-2 uppercase tracking-wider">Исполнитель</label>
|
||
<select
|
||
value={executorName}
|
||
onChange={e => setExecutorName(e.target.value)}
|
||
className="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
||
>
|
||
<option value="">Выбрать</option>
|
||
{employees.map(emp => (
|
||
<option key={emp.id} value={emp.name}>{emp.name}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="block text-xs font-black text-slate-700 mb-2 uppercase tracking-wider">Ответственный</label>
|
||
<select
|
||
value={responsibleName}
|
||
onChange={e => setResponsibleName(e.target.value)}
|
||
className="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
||
>
|
||
<option value="">Выбрать</option>
|
||
{employees.map(emp => (
|
||
<option key={emp.id} value={emp.name}>{emp.name}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-xs font-black text-slate-700 mb-2 uppercase tracking-wider">Наблюдатели</label>
|
||
<input
|
||
type="text"
|
||
value={observersText}
|
||
onChange={e => setObserversText(e.target.value)}
|
||
placeholder="ФИО через запятую"
|
||
className="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex gap-3 pt-4 border-t border-slate-200">
|
||
<button type="button" onClick={handleClose} disabled={loading} className="flex-1 px-4 py-3 bg-slate-100 text-slate-700 font-black text-sm rounded-xl hover:bg-slate-200 transition-colors disabled:opacity-50">
|
||
Отмена
|
||
</button>
|
||
<button type="submit" disabled={loading} className="flex-1 px-4 py-3 bg-primary-600 text-white font-black text-sm rounded-xl hover:bg-primary-700 disabled:opacity-50 transition-colors">
|
||
{loading ? 'Сохранение…' : 'Сохранить'}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|