117 lines
3.2 KiB
TypeScript
117 lines
3.2 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { Box, Button, TextField, Typography } from "@mui/material";
|
|
import CustomTable, { Column } from "../../components/CustomTable";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { RootState, AppDispatch } from "../../redux/store/store";
|
|
import { useForm } from "react-hook-form";
|
|
import { addBooking, bookingList } from "../../redux/slices/bookSlice";
|
|
import AddBookingModal from "../../components/AddBookingModal";
|
|
|
|
export default function ManagerList() {
|
|
const [addModalOpen, setAddModalOpen] = useState<boolean>(false);
|
|
const [editModalOpen, setEditModalOpen] = useState<boolean>(false);
|
|
const [editRow, setEditRow] = useState<any>(null);
|
|
const { reset } = useForm();
|
|
const [deleteModal, setDeleteModal] = useState<boolean>(false);
|
|
const [viewModal, setViewModal] = useState<boolean>(false);
|
|
const [rowData, setRowData] = useState<any | null>(null);
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const dispatch = useDispatch<AppDispatch>();
|
|
const bookings = useSelector(
|
|
(state: RootState) => state?.bookReducer.bookings
|
|
);
|
|
|
|
const users = useSelector((state: RootState) => state?.profileReducer.user);
|
|
useEffect(() => {
|
|
dispatch(bookingList());
|
|
}, [dispatch]);
|
|
|
|
const handleClickOpen = () => {
|
|
setRowData(null);
|
|
setAddModalOpen(true);
|
|
};
|
|
const handleCloseModal = () => {
|
|
setAddModalOpen(false);
|
|
setEditModalOpen(false);
|
|
setRowData(null);
|
|
reset();
|
|
};
|
|
|
|
const handleAddBooking = async (data: {
|
|
stationId: string;
|
|
date: string;
|
|
startTime: string;
|
|
endTime: string;
|
|
}) => {
|
|
try {
|
|
await dispatch(addBooking(data));
|
|
await dispatch(bookingList());
|
|
|
|
handleCloseModal(); // Close the modal
|
|
} catch (error) {
|
|
console.error("Error adding manager", error);
|
|
}
|
|
};
|
|
|
|
const categoryColumns: Column[] = [
|
|
{ id: "srno", label: "Sr No" },
|
|
{ id: "name", label: "User Name" },
|
|
// { id: "stationName", label: "Station Name" },
|
|
// { id: "registeredAddress", label: "Station Location" },
|
|
{ id: "stationId", label: "Station Id" },
|
|
|
|
{ id: "date", label: "Date" },
|
|
{ id: "startTime", label: "Start Time" },
|
|
{ id: "endTime", label: "End Time" },
|
|
{ id: "action", label: "Action", align: "center" },
|
|
];
|
|
|
|
const categoryRows = bookings?.length
|
|
? bookings?.map(function (
|
|
booking: {
|
|
id: number;
|
|
name: string;
|
|
stationId: string;
|
|
date: string;
|
|
startTime: string;
|
|
endTime: string;
|
|
},
|
|
index: number
|
|
) {
|
|
return {
|
|
id: booking?.id ?? "NA",
|
|
srno: index + 1,
|
|
name: users?.name ?? "NA",
|
|
stationId: booking?.stationId ?? "NA",
|
|
date: booking?.date ?? "NA",
|
|
startTime: booking?.startTime ?? "NA",
|
|
endTime: booking?.endTime ?? "NA",
|
|
};
|
|
})
|
|
: [];
|
|
// console.log("Rowa", categoryRows);
|
|
|
|
return (
|
|
<>
|
|
<CustomTable
|
|
columns={categoryColumns}
|
|
rows={categoryRows}
|
|
setDeleteModal={setDeleteModal}
|
|
deleteModal={deleteModal}
|
|
setViewModal={setViewModal}
|
|
viewModal={viewModal}
|
|
setRowData={setRowData}
|
|
setModalOpen={() => setEditModalOpen(true)}
|
|
tableType="booking"
|
|
handleClickOpen={handleClickOpen}
|
|
/>
|
|
{/* Add Manager Modal */}
|
|
<AddBookingModal
|
|
open={addModalOpen}
|
|
handleClose={handleCloseModal}
|
|
handleAddManager={handleAddBooking}
|
|
/>
|
|
</>
|
|
);
|
|
}
|