81 lines
3.3 KiB
TypeScript
81 lines
3.3 KiB
TypeScript
import React, {useEffect, useRef, useState} from 'react';
|
|
import {Inertia} from '@inertiajs/inertia';
|
|
import {Head, router, usePage} from '@inertiajs/react';
|
|
import NewRoomModal from '@/Components/modals/NewRoomModal';
|
|
import EditRoomModal from '@/Components/modals/EditRoomModal';
|
|
import axios from "axios";
|
|
import {Toaster} from "react-hot-toast";
|
|
import AppLayout from "@/Layouts/AppLayout";
|
|
import BatchInfoWindow from "@/Components/BatchInfoWindow";
|
|
|
|
export default function StorageSetup() {
|
|
const {rooms} = usePage<{ rooms: any[] }>().props;
|
|
const [showNew, setShowNew] = useState(false);
|
|
const [editingRoom, setEditingRoom] = useState<any>(null);
|
|
|
|
|
|
// Modal ref
|
|
const dialogRef = useRef<HTMLDialogElement>(null);
|
|
const openModal = () => dialogRef.current?.showModal();
|
|
const closeModal = () => dialogRef.current?.close();
|
|
|
|
return (
|
|
<AppLayout title="Storage setup" renderHeader={() => <h2 className="font-semibold text-xl">Storage setup</h2>}>
|
|
<Head title="Storage setup"/>
|
|
<Toaster position="top-center"/>
|
|
<div className="py-12">
|
|
<div className="p-6">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h1 className="text-2xl font-bold">Rooms</h1>
|
|
<button onClick={() => {setShowNew(true); openModal();}} className="btn btn-primary">
|
|
+ New Room
|
|
</button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
|
{rooms.map(room => (
|
|
<div
|
|
key={room.room_id}
|
|
className="card p-4 cursor-pointer hover:shadow"
|
|
onClick={() => {setEditingRoom(room); openModal();}}
|
|
>
|
|
<h2 className="text-lg font-medium">{room.room_name}</h2>
|
|
<p className="text-sm text-gray-500">{room.room_symbol}</p>
|
|
</div>
|
|
))}
|
|
{rooms.length === 0 && (
|
|
<p className="italic text-gray-500">No rooms defined yet.</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<dialog ref={dialogRef} className="modal">
|
|
|
|
{showNew && (
|
|
<NewRoomModal
|
|
onClose={() => {setShowNew(false); closeModal();}}
|
|
onSaved={() => {
|
|
Inertia.reload();
|
|
setShowNew(false);
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{editingRoom && (
|
|
<EditRoomModal
|
|
room={editingRoom}
|
|
onClose={() => {setEditingRoom(null); closeModal();}}
|
|
onUpdated={() => {
|
|
Inertia.reload();
|
|
setEditingRoom(null);
|
|
}}
|
|
/>
|
|
)}
|
|
</dialog>
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
}
|