- {overlayIsVisible &&
}
+
+ {/* {overlayIsVisible &&
} */}
-
- Add Event to Day
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- | EVENT |
- HOST |
- TAGS |
-
-
-
- {/* TODO: insert mapping of catalog/pub sched events here, table entry component yet to be made */}
-
-
-
-
-
-
-
+ Finish Day
+
+
+
+
);
};
+PlannerEvents.propTypes = {
+ onClose: PropTypes.func,
+};
+
export default PlannerEvents;
diff --git a/src/components/Planner/PlannerLayout.jsx b/src/components/Planner/PlannerLayout.jsx
index 2685b97..65c7e3d 100644
--- a/src/components/Planner/PlannerLayout.jsx
+++ b/src/components/Planner/PlannerLayout.jsx
@@ -2,16 +2,23 @@ import s from './PlannerLayout.module.css';
import PlannerTimeline from './PlannerTimeline/PlannerTimeline';
import PlannerEvents from './PlannerEvents/PlannerEvents';
import { PlannerContextProvider } from './PlannerContext';
+import PropTypes from 'prop-types';
+
+const PlannerLayout = ({ dayId, onClose }) => {
-const PlannerLayout = () => {
return (
-
+
-
+
);
};
+PlannerLayout.propTypes = {
+ dayId: PropTypes.number,
+ onClose: PropTypes.func,
+};
+
export default PlannerLayout;
diff --git a/src/components/Planner/PlannerLayout.module.css b/src/components/Planner/PlannerLayout.module.css
index 7fcd66f..0799c47 100644
--- a/src/components/Planner/PlannerLayout.module.css
+++ b/src/components/Planner/PlannerLayout.module.css
@@ -38,7 +38,8 @@
/* PLANNER TIMELINE */
#planner-timeline-container {
- background-color: var(--chakra-colors-blackAlpha-200);
+ margin-left: 1rem;
+ background-color: white;
width: clamp(250px, 30%, 600px);
}
@@ -65,17 +66,22 @@
.timeline-event-container {
background-color: var(--chakra-colors-gray-300);
height: 100%;
- border-radius: 6px;
+ border-radius: 7px;
padding: 0.25rem 0.5rem;
+ position: absolute;
+ width: 100%;
+ overflow: hidden;
}
/* PLANNER EVENTS */
#planner-events-container {
padding: 2rem;
- padding-right: max(5%, 2rem);
+ /* padding-right: max(5%, 2rem); */
flex-grow: 1;
- background-color: #f2f2f2;
+ background-color: #edf2f7;
position: relative;
+ max-height: 100vh;
+ overflow-y: auto;
}
#planner-browse {
diff --git a/src/components/Planner/PlannerModal.jsx b/src/components/Planner/PlannerModal.jsx
new file mode 100644
index 0000000..b7c8f53
--- /dev/null
+++ b/src/components/Planner/PlannerModal.jsx
@@ -0,0 +1,29 @@
+import {
+ Modal,
+ ModalOverlay,
+ ModalContent,
+ ModalBody,
+} from '@chakra-ui/react'
+import PropTypes from 'prop-types';
+import PlannerLayout from './PlannerLayout.jsx';
+
+const PlannerModal = ({isOpen, onClose, dayId}) => {
+ return (
+
+
+
+
+
+
+
+
+ );
+};
+
+PlannerModal.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ onClose: PropTypes.func.isRequired,
+ dayId: PropTypes.number.isRequired,
+};
+
+export default PlannerModal;
diff --git a/src/components/Planner/PlannerTimeline/PlannerTimeline.jsx b/src/components/Planner/PlannerTimeline/PlannerTimeline.jsx
index 92d9f67..6a4f659 100644
--- a/src/components/Planner/PlannerTimeline/PlannerTimeline.jsx
+++ b/src/components/Planner/PlannerTimeline/PlannerTimeline.jsx
@@ -1,46 +1,78 @@
import s from '../PlannerLayout.module.css';
-import { useMemo, useContext, useEffect } from 'react';
+import { useMemo, useContext, useEffect, useState } from 'react';
import { generateTimestamps, minutesInFormattedTime } from '../chrono';
-import { Badge, Text } from '@chakra-ui/react';
+import { Badge, Text, Box, IconButton, HStack, useDisclosure } from '@chakra-ui/react';
+import { DeleteIcon, EditIcon } from '@chakra-ui/icons';
import { PlannerContext } from '../PlannerContext';
-import PlannedEvent from '../PlannedEvent';
-import { MINUTES_PER_HOUR } from '../chrono';
+import PlannedEvent, { convertTimeToMinutes } from '../PlannedEvent';
+import { NPOBackend } from '../../../utils/auth_utils';
+// import PropTypes from 'prop-types';
+import RemoveTimelineEventModal from '../RemoveTimelineEventModal';
const PlannerTimeline = () => {
- const { plannedEventsContext } = useContext(PlannerContext);
+ const { plannedEventsContext, dayId, currEventContext, editContext } = useContext(PlannerContext);
+ const { isOpen: isRemoveOpen, onOpen: onRemoveOpen, onClose: onRemoveClose } = useDisclosure();
const [plannedEvents, setPlannedEvents] = plannedEventsContext;
+ const [eventData, setCurrEvent] = currEventContext;
+ const [isEdit, setIsEdit] = editContext;
+ const [eventHover, setEventHover] = useState(-2);
+ const [deleteItemId, setDeleteItemId] = useState(-1);
+ //const [addedEvents, setAddedEvents] = useState([]);
+
+ const addedEvents = [];
+
+ const fetchEditData = async (id) => {
+ const publishedScheduleReponse = await NPOBackend.get(`/published-schedule/${id}`);
+ const responseData = publishedScheduleReponse.data[0];
+ if (responseData) {
+ setCurrEvent(responseData);
+ }
+ }
+
+ const startEditAndSetCurrEventId = (id) => {
+ // console.log('selected', id);
+ if (isEdit) {
+ // add back the original state of the currently edited event
+ const reAddedEvent = new PlannedEvent(
+ eventData.id,
+ eventData.title,
+ convertTimeToMinutes(eventData.startTime),
+ convertTimeToMinutes(eventData.endTime),
+ eventData.host,
+ !eventData.confirmed
+ )
+ setPlannedEvents([...plannedEvents.filter(e => e.id != -1), reAddedEvent]);
+ }
+ setIsEdit(true);
+ fetchEditData(id);
+ }
+
+ const fetchDayInfo = async (id) => {
+ const psEvents = await NPOBackend.get((`/published-schedule/dayId?dayId=${id}`));
+ return psEvents.data.data;
+ }
+
useEffect(() => {
- // TODO: receive planned events via props and translate them here
- setPlannedEvents([
- new PlannedEvent(
- 'sample-1',
- 'Sample Event 1',
- MINUTES_PER_HOUR * 9.5,
- MINUTES_PER_HOUR * 10.5,
- false,
- ),
- new PlannedEvent(
- 'sample-2',
- 'Sample Event 2',
- MINUTES_PER_HOUR * 11,
- MINUTES_PER_HOUR * 13,
- false,
- ),
- new PlannedEvent(
- 'sample-3',
- 'Sample Event 3',
- MINUTES_PER_HOUR * 13.5,
- MINUTES_PER_HOUR * 16,
- false,
- ),
- ]);
-
- // Sample Events:
- // sample-1: 9:30 - 10:30
- // sample-2: 11:00 - 1:00
- // sample-3: 13:30 - 16:00
- }, [setPlannedEvents]);
+ // console.log('updating timeline!');
+ updateTimeline();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ const updateTimeline = async () => {
+ const psEvents = await fetchDayInfo(dayId);
+ // console.log(psEvents);
+ if (psEvents && psEvents[0].id) {
+ setPlannedEvents(psEvents.map((data) => new PlannedEvent(
+ data.id,
+ data.title,
+ convertTimeToMinutes(data.startTime),
+ convertTimeToMinutes(data.endTime),
+ data.host,
+ !data.confirmed,
+ )));
+ }
+ }
// Memoize function call for time labels to increase efficiency between component re-renders
const timelineBlocks = useMemo(() => {
@@ -65,30 +97,88 @@ const PlannerTimeline = () => {
);
}, []);
+ // console.log(plannedEvents);
+
return (
{timelineBlocks}
{plannedEvents.map(plannedEvent => {
- const { id, name, startTime, endTime } = plannedEvent;
- const gridStyles = plannedEvent.calculateGridStyles();
+ // console.log(plannedEvent);
+ const { id, name, startTime, endTime, hostName, isTentative } = plannedEvent;
+ const gridStyles = plannedEvent.calculateGridStyles(addedEvents);
+ addedEvents.push({startTime, endTime});
const formattedStartTime = minutesInFormattedTime(startTime);
const formattedEndTime = minutesInFormattedTime(endTime);
+ let border_color = '#2B93D1';
+ let background_color = '#BEE3F8';
+ let border_style = 'none none none solid';
+ const border_width = '2px 2px 2px 10px'
+
+ if (isTentative) {
+ border_color = '#F69052';
+ background_color = '#FEF1DC';
+ }
+
+ if (id == -1 && !isTentative) {
+ border_style = 'dashed dashed dashed solid';
+ background_color = '#eaf8ff';
+ } else if (id == -1 && isTentative) {
+ border_style = 'dashed dashed dashed solid';
+ background_color = '#fffaf0';
+ }
+
return (
-
-
- {name}
-
-
- {formattedStartTime} - {formattedEndTime}
-
-
+
setEventHover(id)}
+ onMouseLeave={() => setEventHover(-2)}
+ >
+
+
+
+ {name}
+
+
+ {formattedStartTime} - {formattedEndTime}
+
+
+ {hostName}
+
+
+ {id == eventHover &&
+
+ }
+ onClick={() => startEditAndSetCurrEventId(id)}
+ size="sm"
+ />
+ }
+ onClick={() => {
+ setDeleteItemId(id);
+ onRemoveOpen();
+ }}
+ size="sm"
+ />
+ {/* */}
+
+ }
+
+
);
})}
+
);
diff --git a/src/components/Planner/RemoveTimelineEventModal.jsx b/src/components/Planner/RemoveTimelineEventModal.jsx
new file mode 100644
index 0000000..16860b0
--- /dev/null
+++ b/src/components/Planner/RemoveTimelineEventModal.jsx
@@ -0,0 +1,72 @@
+import PropTypes from 'prop-types';
+import {
+ Button,
+ Modal,
+ ModalBody,
+ ModalContent,
+ ModalOverlay,
+ ModalHeader,
+ ModalCloseButton,
+ ModalFooter,
+ useToast
+} from '@chakra-ui/react';
+import { NPOBackend } from '../../utils/auth_utils';
+import { useContext } from 'react';
+import { PlannerContext } from './PlannerContext';
+
+const RemoveTimelineEventModal = ({ isOpen, onClose, deleteItemId }) => {
+
+ const { plannedEventsContext } = useContext(PlannerContext);
+ const [plannedEvents, setPlannedEvents] = plannedEventsContext;
+
+ const toast = useToast();
+
+ const handleConfirmDelete = async idToDelete => {
+ try {
+ console.log('id to delete:', idToDelete);
+ toast.closeAll();
+ await NPOBackend.delete(`/published-schedule/${idToDelete}`);
+ setPlannedEvents(plannedEvents.filter(e => (e.id != -1 && e.id != idToDelete)));
+ toast({
+ title: 'Event Removed',
+ status: 'success',
+ variant: 'subtle',
+ position: 'top-right',
+ containerStyle: {
+ mt: '6rem',
+ },
+ duration: 3000,
+ isClosable: true,
+ });
+ // setDataShouldRevalidate(true);
+ onClose();
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ // console.log(deleteItemId);
+
+ return (
+
+
+
+ Remove Event?
+
+ Are you sure? You can't undo this action afterwards.
+
+
+
+
+
+
+ );
+};
+
+RemoveTimelineEventModal.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ onClose: PropTypes.func.isRequired,
+ deleteItemId: PropTypes.number.isRequired,
+};
+
+export default RemoveTimelineEventModal;
diff --git a/src/components/SearchAndFilter/SearchAndFilter.jsx b/src/components/SearchAndFilter/SearchAndFilter.jsx
new file mode 100644
index 0000000..040aaca
--- /dev/null
+++ b/src/components/SearchAndFilter/SearchAndFilter.jsx
@@ -0,0 +1,51 @@
+import { Input, Select, Flex } from '@chakra-ui/react';
+import PropTypes from 'prop-types';
+const subjectsOptions = ['life skills', 'science', 'technology', 'engineering', 'math', 'college readiness'];
+const eventOptions = ['guest speaker', 'study-trip', 'workshop', 'other'];
+const yearOptions = ['junior', 'senior', 'both'];
+const seasonOptions = ['fall', 'spring', 'summer'];
+
+const SearchAndFilter = ({ onSearch, onChange }) => {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+};
+
+SearchAndFilter.propTypes = {
+ onSearch: PropTypes.func.isRequired,
+ onChange: PropTypes.func.isRequired,
+ };
+
+ export default SearchAndFilter;
diff --git a/src/pages/Catalog/Catalog.jsx b/src/pages/Catalog/Catalog.jsx
index 243a5a6..3a4517b 100644
--- a/src/pages/Catalog/Catalog.jsx
+++ b/src/pages/Catalog/Catalog.jsx
@@ -27,8 +27,10 @@ import {
subjectOptions,
eventOptions,
} from '../../components/Catalog/SearchFilter/filterOptions';
+import PropTypes from 'prop-types';
+import s from '../../components/Planner/PlannerLayout.module.css';
-export default function Catalog() {
+export default function Catalog({ onDayPlanner, addExistingEventFunc, setCurrEvent }) {
const { isOpen: isDeleteOpen, onOpen: onDeleteOpen, onClose: onDeleteClose } = useDisclosure();
// const {
// isOpen: isEditFormOpen,
@@ -45,7 +47,6 @@ export default function Catalog() {
const [dataShouldRevalidate, setDataShouldRevalidate] = useState(false);
const [totalRowCount, setTotalRowCount] = useState(0);
const [deleteItemId, setDeleteItemId] = useState(-1);
- // const [editData, setEditData] = useState({});
const [searchTerm, setSearchTerm] = useState('');
const { filters, clearFilters, filterValues } = useSearchFilters();
@@ -86,13 +87,17 @@ export default function Catalog() {
),
};
- const { data } = await NPOBackend.get('/catalog', {
- params: params,
- });
- const { count, events: tableData } = data;
+ try {
+ const { data } = await NPOBackend.get('/catalog', {
+ params: params,
+ });
+ const { count, events: tableData } = data;
- setTableData(tableData);
- setTotalRowCount(Number(count[0].count));
+ setTableData(tableData);
+ setTotalRowCount(Number(count[0].count));
+ } catch (error) {
+ console.error('Error fetching data:', error);
+ }
}, [searchTerm, pageSize, currentPage, filterValues]);
// Fetch data on component mount and pagination update
@@ -115,26 +120,27 @@ export default function Catalog() {
return (
- }
- >
- Create
-
-
-
+ { !onDayPlanner &&
+ }
+ >
+ Create
+
+ }
+
- Event Catalog
+ {!onDayPlanner && 'Event Catalog'}
@@ -157,7 +163,7 @@ export default function Catalog() {
onChange={handleSearch}
/>
-
+
@@ -183,20 +189,29 @@ export default function Catalog() {
overflow="hidden"
borderWidth="1px"
borderRadius="12px"
+ maxH={onDayPlanner && '50vh'}
+ overflowY="auto"
+ className={s['gray-scrollbar-vertical']}
>
-
-
+ {tableData && (
+ <>
+
+
+
+ )}
);
}
+
+Catalog.propTypes = {
+ onDayPlanner: PropTypes.bool,
+ addExistingEventFunc: PropTypes.func,
+ setCurrEvent: PropTypes.func,
+};
+
+Catalog.defaultProps = {
+ onDayPlanner: false
+};
diff --git a/src/pages/NotificationDrawer/NotificationDrawer.jsx b/src/pages/NotificationDrawer/NotificationDrawer.jsx
new file mode 100644
index 0000000..23da9a3
--- /dev/null
+++ b/src/pages/NotificationDrawer/NotificationDrawer.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+ Container,
+ Drawer,
+ DrawerBody,
+ DrawerHeader,
+ DrawerOverlay,
+ DrawerContent,
+ DrawerCloseButton,
+} from '@chakra-ui/react';
+import Notifications from '../../components/Notifications/Notifications';
+
+const NotificationsDrawer = ({isOpen, onClose}) => {
+ const buttonRef = React.useRef();
+
+ return (
+
+
+
+
+
+ Notifications
+
+
+
+
+
+
+ );
+};
+
+NotificationsDrawer.propTypes = {
+ isOpen: PropTypes.bool,
+ onClose: PropTypes.func,
+};
+
+export default NotificationsDrawer;
diff --git a/src/pages/NotificationSandbox/NotificationSandbox.jsx b/src/pages/NotificationSandbox/NotificationSandbox.jsx
deleted file mode 100644
index a9dd6c9..0000000
--- a/src/pages/NotificationSandbox/NotificationSandbox.jsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-import {
- Button,
- Container,
- Drawer,
- DrawerBody,
- DrawerHeader,
- DrawerOverlay,
- DrawerContent,
- DrawerCloseButton,
- useDisclosure,
-} from '@chakra-ui/react';
-import Notifications from '../../components/Notifications/Notifications';
-import { BellIcon } from '@chakra-ui/icons';
-
-const NotificationSandbox = () => {
- const { isOpen, onOpen, onClose } = useDisclosure();
- const buttonRef = React.useRef();
-
- return (
-
-
Notification Sandbox
- {/* TODO: Move Notification button and drawer to navbar once layout component is pushed */}
- <>
-
-
-
-
-
-
- Notifications
-
-
-
-
-
-
-
-
- );
-};
-
-export default NotificationSandbox;
diff --git a/src/pages/Planner/Planner.jsx b/src/pages/Planner/Planner.jsx
index 6930af5..7e5ccd5 100644
--- a/src/pages/Planner/Planner.jsx
+++ b/src/pages/Planner/Planner.jsx
@@ -1,11 +1,16 @@
import PlannerLayout from '../../components/Planner/PlannerLayout';
+import PropTypes from 'prop-types';
-const Planner = () => {
+const Planner = ({ dayId }) => {
return (
<>
-
+
);
};
+Planner.propTypes = {
+ dayId: PropTypes.number,
+};
+
export default Planner;
diff --git a/src/pages/PublishedSchedule/AddDayModal.jsx b/src/pages/PublishedSchedule/AddDayModal.jsx
new file mode 100644
index 0000000..101619d
--- /dev/null
+++ b/src/pages/PublishedSchedule/AddDayModal.jsx
@@ -0,0 +1,56 @@
+import {
+ Modal,
+ ModalOverlay,
+ ModalContent,
+ ModalBody,
+ useDisclosure,
+} from '@chakra-ui/react'
+// import { AddIcon, EditIcon } from '@chakra-ui/icons';
+import AddDayForm from '../../components/AddDayForm/AddDayForm.jsx';
+import { useState } from 'react';
+import PlannerModal from '../../components/Planner/PlannerModal.jsx';
+import PropTypes from 'prop-types';
+
+const AddDayModal = ({ dayData, isOpenDay, onCloseDay, setShouldDataRevalidate}) => {
+ const { isOpen: isOpenPlanner, onOpen: onOpenPlanner, onClose: onClosePlanner } = useDisclosure();
+ const [dayId, setDayId] = useState(-1);
+
+ const handleOpenPlanner = () => {
+ onCloseDay(); // Close the first modal when opening the second modal
+ onOpenPlanner(); // Open the second modal
+ };
+
+ const handlePlannerClose = () => {
+ setShouldDataRevalidate(true);
+ onClosePlanner();
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ {!dayData && }
+
+ );
+};
+
+AddDayModal.propTypes = {
+ isEdit: PropTypes.bool,
+ dayData: PropTypes.object,
+ isOpenDay: PropTypes.bool,
+ onCloseDay: PropTypes.func,
+ setShouldDataRevalidate: PropTypes.func,
+};export default AddDayModal;
diff --git a/src/pages/PublishedSchedule/PublishedSchedule.jsx b/src/pages/PublishedSchedule/PublishedSchedule.jsx
index a731542..839c550 100644
--- a/src/pages/PublishedSchedule/PublishedSchedule.jsx
+++ b/src/pages/PublishedSchedule/PublishedSchedule.jsx
@@ -19,30 +19,28 @@ const PublishedSchedule = () => {
let year = today.getFullYear();
let season;
- if (month >= 3 && month <= 5) {
+ if (month >= 1 && month <= 5) {
season = 'Spring';
- } else if (month >= 9 && month <= 11) {
+ } else if (month >= 9 && month <= 12) {
season = 'Fall';
} else if (month >= 6 && month <= 8) {
season = 'Summer';
- } else {
- season = 'Winter';
}
return season + ' ' + year.toString();
};
+ const curSeason = getTodaySeason();
+
useEffect(() => {
const renderTable = async () => {
const { data } = await NPOBackend.get('/published-schedule/all-seasons');
-
- setSelectedSeason(currentUser.type === USER_ROLE ? data[0] : ''); // We assume the current season is the first one in the list
-
- const index = data.indexOf(curSeason);
- if (index !== -1) {
- data.splice(index, 1);
+ if (data.indexOf(curSeason) == -1) {
+ data.unshift(curSeason);
}
- const seasonOrder = ['Summer', 'Fall', 'Winter', 'Spring'];
+ setSelectedSeason(currentUser.type === USER_ROLE ? curSeason : data[0]); // We assume the current season is the first one in the list
+
+ const seasonOrder = ['Fall', 'Summer', 'Spring'];
data.sort((a, b) => {
// Compare years first
if (a.split(' ')[1] !== b.split(' ')[1]) {
@@ -55,11 +53,9 @@ const PublishedSchedule = () => {
setAllSeasons(data);
};
- renderTable();
+ renderTable();
}, [currentUser]);
- const curSeason = getTodaySeason();
-
//update chakra table container accordingly
return (
@@ -75,15 +71,17 @@ const PublishedSchedule = () => {
{/* tables for each season */}
diff --git a/src/utils/auth_utils.js b/src/utils/auth_utils.js
index 68adf11..a0a3964 100644
--- a/src/utils/auth_utils.js
+++ b/src/utils/auth_utils.js
@@ -32,7 +32,6 @@ const firebaseConfig = {
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
-console.log({auth});
// TEMP: Make sure to remove
const NPOBackend = axios.create({
@@ -194,7 +193,7 @@ const logInWithEmailAndPassword = async (email, password, redirectPath, navigate
//if approved status is false, tell user to wait for approval
if (!user.data[0].approved) {
throw new Error('Your account is currently under review. Please wait for approval.');
- }
+ }
cookies.set(cookieKeys.ROLE, user.data[0].type, cookieConfig);
cookies.set(cookieKeys.APPROVED, user.data[0].approved, cookieConfig);