119 lines
4.3 KiB
TypeScript
119 lines
4.3 KiB
TypeScript
import { CartEvent, UserRole } from '@prisma/client';
|
||
import { useRouter } from "next/router";
|
||
import { useState } from "react";
|
||
import Layout from "../../../components/layout";
|
||
|
||
import common from 'src/helpers/common';
|
||
import ProtectedRoute from '../../../components/protectedRoute';
|
||
|
||
|
||
import CartEventForm from '../../../components/cartevent/CartEventForm';
|
||
// import IProps from '../../../components/cartevent/CartEventForm'
|
||
|
||
import axiosServer from '../../../src/axiosServer';
|
||
import { getServerSession } from "next-auth/next"
|
||
import { authOptions } from "../../../pages/api/auth/[...nextauth]"
|
||
|
||
// export default CartEventForm;
|
||
export interface ICartEventPageProps {
|
||
items: [CartEvent];
|
||
locations: [Location];
|
||
inline: false;
|
||
}
|
||
|
||
export default function CartEventPage({ items, locations }: ICartEventPageProps) {
|
||
|
||
const router = useRouter();
|
||
const [addnew, setAddNew] = useState(false);
|
||
|
||
return (
|
||
<Layout>
|
||
<ProtectedRoute allowedRoles={[UserRole.POWERUSER, UserRole.ADMIN]}>
|
||
<div className="flex flex-col">
|
||
<h1>All cart events</h1>
|
||
<table className="min-w-full">
|
||
<thead className="border-b">
|
||
<tr>
|
||
<th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
|
||
#
|
||
</th>
|
||
<th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
|
||
Day of Week
|
||
</th>
|
||
<th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
|
||
Time
|
||
</th>
|
||
<th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
|
||
Shift Duration
|
||
</th>
|
||
<th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
|
||
Active
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{items.map((item: CartEvent, i) => (
|
||
<tr key={i} className="border-b">
|
||
<td className="px-6 py-4 whitespace-nowrap">
|
||
{item.id}
|
||
</td>
|
||
<td className="px-6 py-4 whitespace-nowrap">
|
||
<strong>{common.dayOfWeekNames[common.getDayOfWeekIndex(item.dayofweek)]} </strong>
|
||
на {locations.find(l => l.id == item.locationId).name}
|
||
</td>
|
||
<td className="px-6 py-4 whitespace-nowrap">
|
||
{new Date(item.startTime).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })
|
||
+ " до " + new Date(item.endTime).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}
|
||
</td>
|
||
<td className="px-6 py-4 whitespace-nowrap">
|
||
{item.shiftDuration}
|
||
</td>
|
||
<td className="px-6 py-4 whitespace-nowrap">
|
||
{item.isActive ? "Yes" : "No"}
|
||
</td>
|
||
<td>
|
||
<button className="button bg-blue-500 hover:bg-blue-700"
|
||
onClick={() => router.push(`/cart/cartevents/edit/${item.id}`)}
|
||
>
|
||
Edit
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
<button className="button bg-blue-500 hover:bg-blue-700"
|
||
onClick={() => setAddNew(!addnew)}
|
||
> {addnew ? "Отмени" : "Добави нов"}</button>
|
||
{addnew && <CartEventForm locations={locations} />}
|
||
</div>
|
||
</ProtectedRoute>
|
||
</Layout>
|
||
)
|
||
}
|
||
|
||
|
||
export const getServerSideProps = async (context) => {
|
||
|
||
|
||
const session = await getServerSession(context.req, context.res, authOptions)
|
||
context.req.session = session;
|
||
const axios = await axiosServer(context);
|
||
|
||
const { data: items } = await axios.get("/api/data/cartevents");
|
||
console.log("gettnng locations from: " + "/api/data/locations?select=id,name");
|
||
const locations = await axios
|
||
.get(`/api/data/locations?select=id,name`)
|
||
.then((res) => {
|
||
console.log("locations: " + JSON.stringify(res.data));
|
||
return res.data;
|
||
});
|
||
|
||
return {
|
||
props: {
|
||
items,
|
||
locations: locations,
|
||
inline: false,
|
||
},
|
||
};
|
||
}; |