102 lines
4.6 KiB
TypeScript
Executable File
102 lines
4.6 KiB
TypeScript
Executable File
import React, { useState, useEffect } from 'react';
|
||
import { District, Employee } from '../../types';
|
||
import { backendApi } from '../../services/apiClient';
|
||
import { X } from 'lucide-react';
|
||
|
||
const UNASSIGNED_MANAGER = 'Не назначен';
|
||
|
||
interface Props {
|
||
district: District | null;
|
||
onClose: () => void;
|
||
onSaved: () => void;
|
||
employees: Employee[];
|
||
}
|
||
|
||
export const EditDistrictModal: React.FC<Props> = ({ district, onClose, onSaved, employees }) => {
|
||
const [name, setName] = useState('');
|
||
const [managerName, setManagerName] = useState(UNASSIGNED_MANAGER);
|
||
const [saving, setSaving] = useState(false);
|
||
|
||
useEffect(() => {
|
||
if (district) {
|
||
setName(district.name);
|
||
setManagerName(district.managerName?.trim() || UNASSIGNED_MANAGER);
|
||
}
|
||
}, [district]);
|
||
|
||
const eligibleManagers = employees.filter(emp => {
|
||
if (emp.status !== 'active') return false;
|
||
const positionLower = (emp.position || '').toLowerCase();
|
||
return positionLower.includes('мастер') || positionLower.includes('начальник участка');
|
||
});
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
if (!district || !name.trim()) return;
|
||
try {
|
||
setSaving(true);
|
||
await backendApi.updateDistrict(district.id, {
|
||
name: name.trim(),
|
||
managerName: managerName === '' ? UNASSIGNED_MANAGER : managerName.trim(),
|
||
});
|
||
onSaved();
|
||
onClose();
|
||
} catch (err) {
|
||
console.error(err);
|
||
alert('Ошибка сохранения участка');
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
if (!district) return null;
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/80 backdrop-blur-md" onClick={onClose}>
|
||
<div
|
||
className="bg-white rounded-2xl w-full max-w-md shadow-2xl"
|
||
onClick={e => e.stopPropagation()}
|
||
>
|
||
<div className="flex justify-between items-center px-6 py-4 border-b border-slate-200">
|
||
<h2 className="text-lg font-black text-slate-800">Редактировать участок</h2>
|
||
<button type="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="p-6 space-y-4">
|
||
<div>
|
||
<label className="block text-[10px] font-black uppercase text-slate-500 mb-1">Название участка</label>
|
||
<input
|
||
value={name}
|
||
onChange={e => setName(e.target.value)}
|
||
className="w-full border border-slate-200 rounded-xl px-3 py-2 text-sm focus:ring-2 focus:ring-primary-500 outline-none"
|
||
required
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-[10px] font-black uppercase text-slate-500 mb-1">Начальник участка</label>
|
||
<select
|
||
value={managerName}
|
||
onChange={e => setManagerName(e.target.value)}
|
||
className="w-full border border-slate-200 rounded-xl px-3 py-2 text-sm focus:ring-2 focus:ring-primary-500 outline-none bg-white"
|
||
>
|
||
<option value={UNASSIGNED_MANAGER}>Не назначен</option>
|
||
{eligibleManagers.map(emp => (
|
||
<option key={emp.id} value={emp.name}>{emp.name} — {emp.position}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
<div className="flex justify-end gap-2 pt-2">
|
||
<button type="button" onClick={onClose} className="px-4 py-2 rounded-xl border border-slate-200 text-slate-600 text-sm font-bold hover:bg-slate-50">
|
||
Отмена
|
||
</button>
|
||
<button type="submit" disabled={saving} className="px-4 py-2 rounded-xl bg-primary-600 text-white text-sm font-bold hover:bg-primary-700 disabled:opacity-50">
|
||
{saving ? 'Сохранение...' : 'Сохранить'}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|