popov/mwitnessing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into production

Browse Source
This commit is contained in:
Dobromir Popov
2024-04-24 14:28:08 +03:00
parent c474617dbb 84bf0d001e
commit 3b7e617e94
7 changed files with 136 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
_doc/ToDo.md
View File

@ -216,3 +216,7 @@ fix published schedule to cover end of the week
графика - синк - ОК
вестителите от Фабио -
потребителите с двойни имейли -
админс can send *urgent* email to everybody to ask for shift
in schedule admin - if a publisher is always pair & family is not in the shift - add + button to add them

115
components/calendar/avcalendar.tsx
View File

@ -274,6 +274,56 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
setIsModalOpen(false);
};
const eventStyleGetter = (event, start, end, isSelected) => {
//console.log("eventStyleGetter: " + event);
let backgroundColor = '#3174ad'; // default color for calendar events - #3174ad
if (currentView === 'agenda') {
return { style: {} }
}
if (event.type === "assignment") {
//event.title = event.publisher.name; //ToDo: add other publishers names
}
if (event.type === "availability") {
}
if (event.isFromPreviousAssignment) { //ToDo: does it work?
// orange-500 from Tailwind CSS
backgroundColor = '#f56565';
}
if (event.isFromPreviousMonth) {
//gray
backgroundColor = '#a0aec0';
}
if (event.isActive) {
switch (event.type) {
case 'assignment':
backgroundColor = event.isConfirmed ? '#48bb78' : '#f6e05e'; // green-500 and yellow-300 from Tailwind CSS
break;
case 'recurring':
backgroundColor = '#63b3ed'; // blue-300 from Tailwind CSS
break;
default: // availability
//backgroundColor = '#a0aec0'; // gray-400 from Tailwind CSS
break;
}
} else {
backgroundColor = '#a0aec0'; // Default color for inactive events
}
return {
style: {
backgroundColor,
opacity: 0.8,
color: 'white',
border: '0px',
display: 'block',
}
};
}
// Custom Components
const EventWrapper = ({ event, style }) => {
const [isHovered, setIsHovered] = useState(false);
let eventStyle = {
@ -391,55 +441,6 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
);
};
const eventStyleGetter = (event, start, end, isSelected) => {
//console.log("eventStyleGetter: " + event);
let backgroundColor = '#3174ad'; // default color for calendar events - #3174ad
if (currentView === 'agenda') {
return { style: {} }
}
if (event.type === "assignment") {
//event.title = event.publisher.name; //ToDo: add other publishers names
}
if (event.type === "availability") {
}
if (event.isFromPreviousAssignment) { //ToDo: does it work?
// orange-500 from Tailwind CSS
backgroundColor = '#f56565';
}
if (event.isFromPreviousMonth) {
//gray
backgroundColor = '#a0aec0';
}
if (event.isActive) {
switch (event.type) {
case 'assignment':
backgroundColor = event.isConfirmed ? '#48bb78' : '#f6e05e'; // green-500 and yellow-300 from Tailwind CSS
break;
case 'recurring':
backgroundColor = '#63b3ed'; // blue-300 from Tailwind CSS
break;
default: // availability
//backgroundColor = '#a0aec0'; // gray-400 from Tailwind CSS
break;
}
} else {
backgroundColor = '#a0aec0'; // Default color for inactive events
}
return {
style: {
backgroundColor,
opacity: 0.8,
color: 'white',
border: '0px',
display: 'block',
}
};
}
// Custom Toolbar Component
const CustomToolbar = ({ onNavigate, label, onView, view }) => {
return (
@ -472,6 +473,17 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
);
};
const CustomEventAgenda = ({
event
}) => (
<span>
<em style={{ color: 'black' }}>{event.title}</em>
<p>{event.desc}</p>
</span>
);
return (
<> <div {...handlers} className="flex flex-col"
>
@ -497,10 +509,15 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
components={{
event: EventWrapper,
toolbar: CustomToolbar,
view: CustomEventAgenda,
agenda: {
event: CustomEventAgenda
},
// ... other custom components
}}
eventPropGetter={(eventStyleGetter)}
date={date}
showAllEvents={true}
onNavigate={setDate}
className="rounded-lg shadow-lg"
/>

79
components/layout.tsx
View File

@ -9,56 +9,63 @@ import Body from 'next/document'
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { set } from "date-fns"
export default function Layout({ children }: { children: ReactNode }) {
const router = useRouter()
const [isSidebarOpen, setIsSidebarOpen] = useState(true);
export default function Layout({ children }) {
const router = useRouter();
// auto resize for tablets: disabled.
// useEffect(() => {
// // Function to check and set the state based on window width
// const handleResize = () => {
// if (window.innerWidth < 768) { // Assuming 768px as the breakpoint for mobile devices
// setIsSidebarOpen(false);
// } else {
// setIsSidebarOpen(true);
// }
// };
// // Set initial state
// handleResize();
// // Add event listener
// window.addEventListener('resize', handleResize);
// // Cleanup
// return () => window.removeEventListener('resize', handleResize);
// }, []);
// Assuming that during SSR, we don't want the sidebar to be open.
const [isSmallScreen, setIsSmallScreen] = useState(true);
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
useEffect(() => {
// This function determines if we're on a small screen
const checkIfSmallScreen = () => window.innerWidth < 768;
// Set the initial screen size and sidebar state
const initialSmallScreenCheck = checkIfSmallScreen();
setIsSmallScreen(initialSmallScreenCheck);
setIsSidebarOpen(!initialSmallScreenCheck);
const handleResize = () => {
const smallScreenCheck = checkIfSmallScreen();
setIsSmallScreen(smallScreenCheck);
// On small screens, we want to ensure the sidebar is not open by default when resizing
if (smallScreenCheck) {
setIsSidebarOpen(false);
}
};
// Add event listener
window.addEventListener('resize', handleResize);
// Cleanup event listener on component unmount
return () => window.removeEventListener('resize', handleResize);
}, []);
// Toggle the sidebar only when the button is clicked
const toggleSidebar = () => {
setIsSidebarOpen(!isSidebarOpen);
};
// We use `isSmallScreen` to determine the margin-left on small screens
// and use `isSidebarOpen` to determine if we need to push the content on large screens.
const marginLeftClass = isSmallScreen ? 'ml-0' : isSidebarOpen ? 'ml-60' : 'ml-6';
return (
// <div className="h-screen w-screen" >
// <div className="flex flex-col">
// <div className="flex flex-row h-screen">
// <ToastContainer />
// <Sidebar isSidebarOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
// <main className={`pr-10 transition-all duration-300 ${isSidebarOpen ? 'ml-64 w-[calc(100%-16rem)] ' : 'ml-0 w-[calc(100%)] '}`}>
<div className="">
<div className="flex flex-col">
<div className="flex flex-row h-[90vh] w-screen ">
<div className="flex flex-row min-h-screen w-screen">
<ToastContainer position="top-center" style={{ zIndex: 9999 }} />
<Sidebar isSidebarOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
<main className={`w-full pr-10 transition-all h-[90vh] duration-300 ${isSidebarOpen ? 'ml-60 ' : 'ml-6'}`}>
{children}
<main className={`flex-1 transition-all duration-300 ${marginLeftClass}`}>
<div className="p-4 mx-auto pr-8 pl-0">
{children}
</div>
</main>
</div>
{/* <div className="justify-end items-center text-center ">
<Footer />
</div> */}
</div>
</div>
);
}
}

2
components/sidebar.tsx
View File

@ -129,7 +129,7 @@ export default function Sidebar({ isSidebarOpen, toggleSidebar }) {
className="fixed top-1 left-4 z-40 m- text-xl bg-white border border-gray-200 p-2 rounded-full shadow-lg focus:outline-none"
style={{ transform: isSidebarOpen ? `translateX(${sidebarWidth - 64}px)` : 'translateX(-20px)' }}>☰</button>
<aside id="sidenav" ref={sidebarRef}
className="px-2 fixed top-0 left-0 z-30 h-screen overflow-y-auto bg-white border-r dark:bg-gray-900 dark:border-gray-700 transition-all duration-300 w-64"
className="px-2 fixed top-0 left-0 z-30 h-screen overflow-y-auto bg-white border-r dark:bg-gray-900 dark:border-gray-700 transition-all duration-300 sm:translate-x-0 w-64"
style={{ width: `${sidebarWidth}px`, transform: isSidebarOpen ? 'translateX(0)' : `translateX(-${sidebarWidth - 16}px)` }}>
<h2 className="text-2xl font-semibold text-gray-800 dark:text-white pt-2 pl-4 pb-4"
title={`v.${packageVersion} ${process.env.GIT_COMMIT_ID}`} >Специално Свидетелстване София</h2>

9
pages/api/index.ts
View File

@ -551,7 +551,8 @@ export async function filterPublishers(selectFields, searchText, filterDate, fet
select: {
id: true,
startTime: true,
endTime: true
endTime: true,
isPublished: true
}
}
},
@ -854,7 +855,11 @@ async function getCalendarEvents(publisherId, date, availabilities = true, assig
});
}
if (assignments) {
publisher.assignments?.forEach(item => {
//only published shifts
publisher.assignments?.filter(
assignment => assignment.shift.isPublished
).forEach(item => {
result.push({
...item,
title: common.getTimeFomatted(new Date(item.shift.startTime)) + "-" + common.getTimeFomatted(new Date(item.shift.endTime)),

16
pages/cart/publishers/myschedule.tsx
View File

@ -57,8 +57,8 @@ export default function MySchedulePage({ assignments }) {
return (
<Layout>
<ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.POWERUSER, UserRole.USER]}>
<div className="container mx-auto p-4">
<h1 className="text-2xl md:text-3xl font-bold text-center my-4">Моите смени</h1>
<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">
@ -67,18 +67,18 @@ export default function MySchedulePage({ assignments }) {
</div>
<div className="border-t border-gray-200">
<dl>
<div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<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 text-gray-900 sm:mt-0 sm:col-span-2">
<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 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<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 text-gray-900 sm:mt-0 sm:col-span-2">
<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 border border-gray-300 rounded-full text-sm font-medium bg-gray-100">
<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>
@ -87,7 +87,7 @@ export default function MySchedulePage({ assignments }) {
)}
</dd>
</div>
<div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<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

7
styles/styles.css
View File

@ -267,3 +267,10 @@ iframe {
text-align: left;
}
}
.rbc-toolbar {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center; /* Optional: center buttons in the group */
}