333 lines
15 KiB
TypeScript
333 lines
15 KiB
TypeScript
|
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>
|
|||
|
|
);
|
|||
|
|
};
|