Initial commit MKD fixes
This commit is contained in:
Arsen
197
components/office/BookMeetingRoomModal.tsx
Executable file
197
components/office/BookMeetingRoomModal.tsx
Executable file
@@ -0,0 +1,197 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { authFetch } from '../../services/apiClient';
|
||||
import { X, Building2 } from 'lucide-react';
|
||||
import { MeetingRoom } from '../../types';
|
||||
import { CURRENT_USER_MOCK } from '../../constants';
|
||||
|
||||
interface BookMeetingRoomModalProps {
|
||||
purpose: string;
|
||||
defaultDate?: string;
|
||||
onBooked: (roomName?: string) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const BookMeetingRoomModal: React.FC<BookMeetingRoomModalProps> = ({
|
||||
purpose,
|
||||
defaultDate = new Date().toISOString().split('T')[0],
|
||||
onBooked,
|
||||
onClose
|
||||
}) => {
|
||||
const [rooms, setRooms] = useState<MeetingRoom[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [date, setDate] = useState(defaultDate);
|
||||
const [startTime, setStartTime] = useState('10:00');
|
||||
const [endTime, setEndTime] = useState('11:00');
|
||||
const [roomId, setRoomId] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
const fetchRooms = async () => {
|
||||
try {
|
||||
const res = await authFetch('/api/office/meeting-rooms');
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
const normalized = (Array.isArray(data) ? data : []).map((r: any) => ({
|
||||
id: r.id,
|
||||
name: r.name || '',
|
||||
capacity: r.capacity || 0,
|
||||
location: r.location,
|
||||
isActive: r.is_active !== false
|
||||
}));
|
||||
setRooms(normalized.filter((r: MeetingRoom) => r.isActive !== false));
|
||||
if (normalized.length > 0 && !roomId) setRoomId(String(normalized[0].id));
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setError('Не удалось загрузить переговорные');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchRooms();
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!roomId || !date || !startTime || !endTime) {
|
||||
setError('Заполните дату, время и выберите переговорную');
|
||||
return;
|
||||
}
|
||||
const startDateTime = new Date(`${date}T${startTime}`);
|
||||
const endDateTime = new Date(`${date}T${endTime}`);
|
||||
if (endDateTime <= startDateTime) {
|
||||
setError('Время окончания должно быть позже начала');
|
||||
return;
|
||||
}
|
||||
setError(null);
|
||||
setSaving(true);
|
||||
try {
|
||||
const res = await authFetch('/api/office/meeting-bookings', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
roomId: parseInt(roomId),
|
||||
bookedBy: CURRENT_USER_MOCK.name,
|
||||
startTime: startDateTime.toISOString(),
|
||||
endTime: endDateTime.toISOString(),
|
||||
purpose
|
||||
})
|
||||
});
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data.error || 'Ошибка бронирования');
|
||||
}
|
||||
const room = rooms.find(r => r.id === parseInt(roomId));
|
||||
onBooked(room?.name);
|
||||
onClose();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Ошибка бронирования');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const modalContent = (
|
||||
<div
|
||||
className="fixed inset-0 z-[110] flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"
|
||||
onClick={onClose}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
<div
|
||||
className="bg-white rounded-2xl w-full max-w-md shadow-2xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex justify-between items-center p-4 border-b border-slate-200">
|
||||
<h3 className="text-lg font-bold text-slate-800">Забронировать переговорную</h3>
|
||||
<button type="button" onClick={onClose} className="p-2 hover:bg-slate-100 rounded-lg">
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit} className="p-4 space-y-4">
|
||||
{error && (
|
||||
<div className="p-3 bg-red-50 text-red-700 rounded-lg text-sm">{error}</div>
|
||||
)}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">Цель</label>
|
||||
<p className="text-sm text-slate-600 bg-slate-50 px-3 py-2 rounded-lg">{purpose}</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">Дата *</label>
|
||||
<input
|
||||
type="date"
|
||||
value={date}
|
||||
onChange={e => setDate(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">Начало *</label>
|
||||
<input
|
||||
type="time"
|
||||
value={startTime}
|
||||
onChange={e => setStartTime(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">Окончание *</label>
|
||||
<input
|
||||
type="time"
|
||||
value={endTime}
|
||||
onChange={e => setEndTime(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">Переговорная *</label>
|
||||
{loading ? (
|
||||
<p className="text-sm text-slate-500">Загрузка...</p>
|
||||
) : (
|
||||
<select
|
||||
value={roomId}
|
||||
onChange={e => setRoomId(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
|
||||
required
|
||||
>
|
||||
<option value="">Выберите переговорную</option>
|
||||
{rooms.map(r => (
|
||||
<option key={r.id} value={r.id}>{r.name} (до {r.capacity} чел.)</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-3 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="flex-1 px-4 py-2 bg-slate-100 text-slate-700 rounded-lg font-medium text-sm hover:bg-slate-200"
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={saving || loading || !roomId}
|
||||
className="flex-1 px-4 py-2 bg-primary-600 text-white rounded-lg font-medium text-sm hover:bg-primary-700 disabled:opacity-50 flex items-center justify-center gap-2"
|
||||
>
|
||||
<Building2 className="w-4 h-4" />
|
||||
{saving ? 'Бронируем...' : 'Забронировать'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return typeof document !== 'undefined' && document.body
|
||||
? createPortal(modalContent, document.body)
|
||||
: modalContent;
|
||||
};
|
||||
Reference in New Issue
Block a user