Files
mwitnessing/pages/cart/publishers/myschedule.tsx
2024-05-01 14:38:14 +03:00

238 lines
12 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { useState } from 'react';
import Layout from "../../../components/layout";
import ProtectedRoute from '../../../components/protectedRoute';
import { UserRole } from '@prisma/client';
import axiosServer from '../../../src/axiosServer';
import common from '../../../src/helpers/common';
import Modal from 'components/Modal';
import ConfirmationModal from 'components/ConfirmationModal';
import PublisherSearchBox from '../../../components/publisher/PublisherSearchBox'; // Update the path
import SearchReplacement from '../../../components/publisher/SearchReplacement'; // Update the path
import { monthNamesBG, GetTimeFormat, GetDateFormat } from "../../../src/helpers/const"
import { useSession, getSession } from 'next-auth/react';
import axiosInstance from 'src/axiosSecure';
import { toast } from 'react-toastify';
import LocalShippingIcon from '@mui/icons-material/LocalShipping';
export default function MySchedulePage({ assignments }) {
const [isModalOpen, setIsModalOpen] = useState(false);
const [isConfirmModalOpen, setIsConfirmModalOpen] = useState(false);
const [useFilterDate, setUseFilterDate] = useState(true);
const [assignment, setАssignment] = useState(null);
const [newPublisher, setNewPublisher] = useState(null);
const { data: session, status } = useSession();
if (status === "loading") {
return <div className="flex justify-center items-center h-screen">Loading...</div>;
}
const handleReplaceInAssignment = () => {
// Add publisher as assignment logic
setIsModalOpen(false);
setIsConfirmModalOpen(false);
console.log("publisher", newPublisher.firstName, " ", newPublisher.lastName, " set to shift ", assignment.shift.id);
//api.replaceInAssignment()
axiosInstance.post('/api/?action=replaceInAssignment', {
oldPublisherId: session.user.id,
newPublisherId: newPublisher.id,
shiftId: assignment.shift.id,
}).then(response => {
console.log("response", response);
//toast success and confirm the change
// refresh the page after toast is closed
toast.success("Промяната е записана!", {
onClose: () => {
window.location.reload();
}
});
}).catch(error => {
console.log("error", error);
});
};
return (
<Layout>
<ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.POWERUSER, UserRole.USER]}>
<div className="container ">
<h1 className="text-xl sm:text-2xl md:text-3xl font-bold text-center my-4">Моите смени</h1>
<div className="space-y-4">
{assignments && assignments.map((assignment) => (
<div key={assignment.dateStr + assignments.indexOf(assignment)} className="bg-white shadow overflow-hidden rounded-lg">
<div className="px-4 py-5 sm:px-6">
<h3 className="text-lg leading-6 font-medium text-gray-900">{assignment.dateStr}</h3>
</div>
<div className="border-t border-gray-200">
<dl>
<div className="bg-gray-50 px-4 py-5 grid grid-cols-1 sm:grid-cols-3 gap-4 xs:gap-1 px-6 xs:py-1">
<dt className="text-sm font-medium text-gray-500">Час</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
{GetTimeFormat(assignment.shift.startTime)} - {GetTimeFormat(assignment.shift.endTime)}
</dd>
</div>
<div className="bg-gray-50 px-4 py-5 grid grid-cols-1 sm:grid-cols-3 gap-4 xs:gap-1 px-6 xs:py-1">
<dt className="text-sm font-medium text-gray-500">Смяна</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
{assignment.shift.assignments.map((a, index) => {
return (
<span key={index} className="inline-flex items-center mr-1 px-2 py-0.5 my-0.5 border border-gray-300 rounded-full text-sm font-medium bg-gray-100">
{a.publisher.firstName} {a.publisher.lastName}
{a.isWithTransport && <LocalShippingIcon style={{ marginLeft: '4px' }} />}
</span>
)
}
)}
</dd>
</div>
{!assignment.isOld &&
<div className="bg-gray-50 px-4 py-5 grid grid-cols-1 sm:grid-cols-3 gap-4 xs:gap-1 px-6 xs:py-1">
<dt className="text-sm font-medium text-gray-500">Действия</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<button
className="mr-2 mb-2 inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled"
disabled={true}
// disabled={assignment.isInGoogleCalendar}
onClick={() => SaveEventsInGoogleCalendar(assignment)}
>
Добави в календар
</button>
<button
className="mr-2 mb-2 inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
onClick={() => {
setАssignment(assignment);
setIsModalOpen(true)
}}
>
Избери Заместник
</button>
<SearchReplacement shiftId={assignment.shift.id} assignmentId={assignment.id} />
</dd>
</div>
}
</dl>
</div>
</div>
))}
</div>
</div>
<Modal isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
forDate={new Date(assignment?.shift.startTime)}
useFilterDate={useFilterDate}
onUseFilterDateChange={(value) => setUseFilterDate(value)}>
<PublisherSearchBox
selectedId={null}
isFocused={isModalOpen}
filterDate={useFilterDate && assignment ? new Date(assignment.shift.startTime) : null}
onChange={(publisher) => {
setIsConfirmModalOpen(true);
setNewPublisher(publisher);
}}
showAllAuto={true}
showSearch={true}
showList={false}
/>
</Modal>
<ConfirmationModal
isOpen={isConfirmModalOpen}
onClose={() => { setIsConfirmModalOpen(false); setNewPublisher(null); }}
onConfirm={handleReplaceInAssignment}
message="Това действие ще те замести в назначената ти смяна. Потвърждаваш ли, че заместника знае за тази промяна."
/>
</ProtectedRoute>
</Layout>
);
}
//get future assignments for the current user (session.user.id)
export const getServerSideProps = async (context) => {
const session = await getSession(context);
context.res.setHeader("Cache-Control", "s-maxage=1, stale-while-revalidate");
if (!session) {
return {
redirect: {
destination: '/auth/signin', // Adjust the login path as needed
permanent: false,
},
};
}
const prisma = common.getPrismaClient();
const monthInfo = common.getMonthInfo(new Date());
//minus 1 day from the firstMonday to get the last Sunday
const lastSunday = new Date(monthInfo.firstMonday);
lastSunday.setDate(lastSunday.getDate() - 1);
const publisher = await prisma.publisher.findUnique({
where: {
id: session.user.id,
assignments: {
some: {
shift: {
startTime: {
gte: lastSunday,
},
},
},
},
},
include: {
assignments: {
include: {
shift: {
include: {
assignments: {
include: {
publisher: {
select: {
id: true,
firstName: true,
lastName: true,
}
}
}
}
},
},
},
},
},
});
const assignments = publisher?.assignments.filter(a => a.shift.startTime >= lastSunday && a.shift.isPublished) || [];
const transformedAssignments = assignments?.sort((a, b) => a.shift.startTime - b.shift.startTime)
.map(assignment => {
if (assignment.shift && assignment.shift.startTime) {
return {
...assignment,
isOld: assignment.shift.startTime < new Date(),
dateStr: assignment.shift.startTime.toLocaleDateString("bg-BG", { day: "numeric", month: "long" }),
shift: {
...assignment.shift,
startTime: assignment.shift.startTime.toISOString(),
endTime: assignment.shift.endTime.toISOString(),
},
};
}
return assignment;
});
return {
props: { assignments: transformedAssignments }
}
}