83 lines
3.2 KiB
TypeScript
83 lines
3.2 KiB
TypeScript
// resources/js/Components/Modals/NewRoomModal.tsx
|
|
import React, { useState } from 'react';
|
|
import axios from 'axios';
|
|
import { toast } from 'react-hot-toast';
|
|
|
|
interface Props {
|
|
onClose: () => void;
|
|
onSaved: () => void;
|
|
}
|
|
|
|
export default function NewRoomModal({ onClose, onSaved }: Props) {
|
|
const [form, setForm] = useState({
|
|
room_symbol: '',
|
|
room_name: '',
|
|
lines: 1,
|
|
racks_per_line: 1,
|
|
shelves_per_rack: 1,
|
|
positions_per_shelf: 1,
|
|
});
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) =>
|
|
setForm({ ...form, [e.target.name]: e.target.type === 'number'
|
|
? parseInt(e.target.value)
|
|
: e.target.value });
|
|
|
|
const save = async () => {
|
|
setLoading(true);
|
|
const id = toast.loading('Creating room…');
|
|
try {
|
|
await axios.post('/api/stock-rooms', form, { withCredentials: true });
|
|
toast.dismiss(id);
|
|
toast.success('Room created!');
|
|
onSaved();
|
|
} catch (err: any) {
|
|
toast.dismiss(id);
|
|
toast.error(err.response?.data?.message || 'Error creating room');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="modal-box max-w-6xl flex flex-col space-x-6 p-6 relative">
|
|
<h3 className="text-xl font-bold">New Room</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{['room_symbol','room_name'].map((field) => (
|
|
<div key={field} className="form-control">
|
|
<label className="label"><span className="label-text">{field.replace('_',' ')}</span></label>
|
|
<input
|
|
name={field}
|
|
type="text"
|
|
value={(form as any)[field]}
|
|
onChange={handleChange}
|
|
className="input input-bordered"
|
|
/>
|
|
</div>
|
|
))}
|
|
{['lines','racks_per_line','shelves_per_rack','positions_per_shelf'].map((field) => (
|
|
<div key={field} className="form-control">
|
|
<label className="label"><span className="label-text">{field.replace(/_/g,' ')}</span></label>
|
|
<input
|
|
name={field}
|
|
type="number"
|
|
min={1}
|
|
value={(form as any)[field]}
|
|
onChange={handleChange}
|
|
className="input input-bordered"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="flex justify-end space-x-2">
|
|
<button onClick={onClose} className="btn btn-outline" disabled={loading}>Cancel</button>
|
|
<button onClick={save} className="btn btn-primary" disabled={loading}>
|
|
{loading ? 'Saving…' : 'Create'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
);
|
|
}
|